app/assets/javascripts/locmare/form/field/helper/slider.js.coffee

   1 class Locmare.FormModule.FieldModule.HelperModule.Slider extends Locmare.FormModule.FieldModule.HelperModule.Base\r
   2   tagName: 'span'\r
   3   className: 'slider'\r
   4   \r
   5   # wrapper\r
   6   initialize: (options) ->\r
   7     super(options)\r
   8     @check = new Tag.Checkbox({value: 1, checked: @is_enable()})\r
   9     @slider = new Locmare.FormModule.FieldModule.HelperModule.SliderModule.Slider({\r
  10       field: @field\r
  11     })\r
  12     @listenTo(@check, 'click', @click_check)\r
  13     @listenTo(@slider, 'slide', @slider_change)\r
  14   \r
  15   render: () ->\r
  16     @attr = {\r
  17     }\r
  18     this.$el.attr(@attr)\r
  19     this.$el.html('')\r
  20     this.$el.append(@check.render().el)\r
  21     this.$el.append(@slider.render().el)\r
  22     @click_check()    # init show/hide\r
  23     this\r
  24   \r
  25   refresh: () ->\r
  26     null\r
  27   \r
  28   is_enable: () ->\r
  29     _.isNumber(@field.value())\r
  30   \r
  31   slider_change: (value) -> \r
  32     @field.tag.$el.val(value)\r
  33     @field.trigger('change')\r
  34   \r
  35   click_check: () -> \r
  36     if @check.checked\r
  37       @slider.enable()\r
  38     else\r
  39       @slider.disable()\r
  40   \r
  41 class Locmare.FormModule.FieldModule.HelperModule.SliderModule\r
  42 class Locmare.FormModule.FieldModule.HelperModule.SliderModule.Slider extends Tag.Div\r
  43   events: {\r
  44     slidechange: 'slider_change'\r
  45   }\r
  46   \r
  47   initialize: (options) ->\r
  48     @field = options.field\r
  49     super({})\r
  50     this.$el.addClass('per-slider')\r
  51   \r
  52   render: () ->\r
  53     this.$el.html('')\r
  54     this.$el.slider {\r
  55       orientation: 'horizontal',\r
  56       range: 'min',\r
  57       max: 100,\r
  58       value: 0\r
  59     }\r
  60     this\r
  61   \r
  62   enable: () ->\r
  63     @field.set(@field.value() || 0)\r
  64     this.$el.slider({value: @field.value()})\r
  65     this.$el.attr({style: 'display: inline;'})\r
  66   \r
  67   disable: () ->\r
  68     this.$el.attr({style: 'display: none;'})\r
  69     @field.set(undefined)\r
  70     @field.tag.render()    # why does not raise change event when set null value?\r
  71   \r
  72   slider_change: (event, ui) -> \r
  73     @trigger('slide', ui.value)\r
  74   \r
  75   volume: () ->\r
  76     (@field.value() >> @shift) & 0xFF\r
  77   \r