623 self.w(u'<input name="%s" type="text" value="%s" />\n' % (facetid, self.value or u'')) |
624 self.w(u'<input name="%s" type="text" value="%s" />\n' % (facetid, self.value or u'')) |
624 self.w(u'</div>\n') |
625 self.w(u'</div>\n') |
625 |
626 |
626 |
627 |
627 class FacetRangeWidget(HTMLWidget): |
628 class FacetRangeWidget(HTMLWidget): |
|
629 formatter = 'function (value) {return value;}' |
628 onload = u''' |
630 onload = u''' |
|
631 var _formatter = %(formatter)s; |
629 jQuery("#%(sliderid)s").slider({ |
632 jQuery("#%(sliderid)s").slider({ |
630 range: true, |
633 range: true, |
631 min: %(minvalue)s, |
634 min: %(minvalue)s, |
632 max: %(maxvalue)s, |
635 max: %(maxvalue)s, |
633 values: [%(minvalue)s, %(maxvalue)s], |
636 values: [%(minvalue)s, %(maxvalue)s], |
634 stop: function(event, ui) { // submit when the user stops sliding |
637 stop: function(event, ui) { // submit when the user stops sliding |
635 var form = $('#%(sliderid)s').closest('form'); |
638 var form = $('#%(sliderid)s').closest('form'); |
636 buildRQL.apply(null, evalJSON(form.attr('cubicweb:facetargs'))); |
639 buildRQL.apply(null, evalJSON(form.attr('cubicweb:facetargs'))); |
637 }, |
640 }, |
638 slide: function(event, ui) { |
641 slide: function(event, ui) { |
639 $('#%(sliderid)s_inf').html(ui.values[0]); |
642 jQuery('#%(sliderid)s_inf').html(_formatter(ui.values[0])); |
640 $('#%(sliderid)s_sup').html(ui.values[1]); |
643 jQuery('#%(sliderid)s_sup').html(_formatter(ui.values[1])); |
641 $('input[name=%(facetid)s_inf]').val(ui.values[0]); |
644 jQuery('input[name=%(facetid)s_inf]').val(ui.values[0]); |
642 $('input[name=%(facetid)s_sup]').val(ui.values[1]); |
645 jQuery('input[name=%(facetid)s_sup]').val(ui.values[1]); |
643 } |
646 } |
644 }); |
647 }); |
|
648 // use JS formatter to format value on page load |
|
649 jQuery('#%(sliderid)s_inf').html(_formatter(jQuery('input[name=%(facetid)s_inf]').val())); |
|
650 jQuery('#%(sliderid)s_sup').html(_formatter(jQuery('input[name=%(facetid)s_sup]').val())); |
645 ''' |
651 ''' |
|
652 #'# make emacs happier |
646 def __init__(self, facet, minvalue, maxvalue): |
653 def __init__(self, facet, minvalue, maxvalue): |
647 self.facet = facet |
654 self.facet = facet |
648 self.minvalue = minvalue |
655 self.minvalue = minvalue |
649 self.maxvalue = maxvalue |
656 self.maxvalue = maxvalue |
650 |
|
651 def formatvalue(self, value): |
|
652 return value |
|
653 |
657 |
654 def _render(self): |
658 def _render(self): |
655 facet = self.facet |
659 facet = self.facet |
656 facet.req.add_js('ui.slider.js') |
660 facet.req.add_js('ui.slider.js') |
657 facet.req.add_css('ui.all.css') |
661 facet.req.add_css('ui.all.css') |
658 sliderid = make_uid('the slider') |
662 sliderid = make_uid('the slider') |
659 facetid = html_escape(self.facet.id) |
663 facetid = html_escape(self.facet.id) |
660 facet.req.html_headers.add_onload(self.onload % { |
664 facet.req.html_headers.add_onload(self.onload % { |
661 'sliderid': sliderid, |
665 'sliderid': sliderid, |
662 'facetid': facetid, |
666 'facetid': facetid, |
663 'minvalue': self.minvalue, |
667 'minvalue': self.minvalue, |
664 'maxvalue': self.maxvalue, |
668 'maxvalue': self.maxvalue, |
665 }) |
669 'formatter': self.formatter, |
|
670 }) |
666 title = html_escape(self.facet.title) |
671 title = html_escape(self.facet.title) |
667 self.w(u'<div id="%s" class="facet">\n' % facetid) |
672 self.w(u'<div id="%s" class="facet">\n' % facetid) |
668 self.w(u'<div class="facetTitle" cubicweb:facetName="%s">%s</div>\n' % |
673 self.w(u'<div class="facetTitle" cubicweb:facetName="%s">%s</div>\n' % |
669 (facetid, title)) |
674 (facetid, title)) |
670 self.w(u'<span id="%s_inf">%s</span> - <span id="%s_sup">%s</span>' |
675 self.w(u'<span id="%s_inf"></span> - <span id="%s_sup"></span>' |
671 % (sliderid, self.formatvalue(self.minvalue), |
676 % (sliderid, sliderid)) |
672 sliderid, self.formatvalue(self.maxvalue))) |
|
673 self.w(u'<input type="hidden" name="%s_inf" value="%s" />' |
677 self.w(u'<input type="hidden" name="%s_inf" value="%s" />' |
674 % (facetid, self.minvalue)) |
678 % (facetid, self.minvalue)) |
675 self.w(u'<input type="hidden" name="%s_sup" value="%s" />' |
679 self.w(u'<input type="hidden" name="%s_sup" value="%s" />' |
676 % (facetid, self.maxvalue)) |
680 % (facetid, self.maxvalue)) |
677 self.w(u'<div id="%s"></div>' % sliderid) |
681 self.w(u'<div id="%s"></div>' % sliderid) |
678 self.w(u'</div>\n') |
682 self.w(u'</div>\n') |
679 |
683 |
680 |
684 |
681 class DateFacetRangeWidget(FacetRangeWidget): |
685 class DateFacetRangeWidget(FacetRangeWidget): |
682 onload = u''' |
686 formatter = 'function (value) {return (new Date(parseFloat(value))).strftime(DATE_FMT);}' |
683 jQuery("#%(sliderid)s").slider({ |
|
684 range: true, |
|
685 min: %(minvalue)s, |
|
686 max: %(maxvalue)s, |
|
687 values: [%(minvalue)s, %(maxvalue)s], |
|
688 stop: function(event, ui) { // submit when the user stops sliding |
|
689 UI = ui; |
|
690 var form = $('#%(sliderid)s').closest('form'); |
|
691 buildRQL.apply(null, evalJSON(form.attr('cubicweb:facetargs'))); |
|
692 }, |
|
693 slide: function(event, ui) { |
|
694 $('#%(sliderid)s_inf').html( (new Date(ui.values[0])).strftime(DATE_FMT)); |
|
695 $('#%(sliderid)s_sup').html( (new Date(ui.values[1])).strftime(DATE_FMT)); |
|
696 $('input[name=%(facetid)s_inf]').val(ui.values[0]); |
|
697 $('input[name=%(facetid)s_sup]').val(ui.values[1]); |
|
698 } |
|
699 }); |
|
700 ''' |
|
701 def __init__(self, facet, minvalue, maxvalue): |
687 def __init__(self, facet, minvalue, maxvalue): |
702 super(DateFacetRangeWidget, self).__init__(facet, |
688 super(DateFacetRangeWidget, self).__init__(facet, |
703 datetime2ticks(minvalue), |
689 datetime2ticks(minvalue), |
704 datetime2ticks(maxvalue)) |
690 datetime2ticks(maxvalue)) |
705 def formatvalue(self, value): |
691 fmt = facet.req.property_value('ui.date-format') |
706 datefmt = self.facet.req.property_value('ui.date-format') |
692 facet.req.html_headers.define_var('DATE_FMT', fmt) |
707 return ustrftime(date.fromtimestamp(float(value) / 1000), datefmt) |
|
708 |
693 |
709 |
694 |
710 class FacetItem(HTMLWidget): |
695 class FacetItem(HTMLWidget): |
711 |
696 |
712 selected_img = "black-check.png" |
697 selected_img = "black-check.png" |