add: helper slider

diff --git a/app/assets/javascripts/local_manifest/form/use/field/helper.js.coffee b/app/assets/javascripts/local_manifest/form/use/field/helper.js.coffee
index 5b8bcf8..d28a024 100644 (file)
--- a/app/assets/javascripts/local_manifest/form/use/field/helper.js.coffee
+++ b/app/assets/javascripts/local_manifest/form/use/field/helper.js.coffee
@@ -5,7 +5,8 @@ class LocalManifest.FormModule.UseModule.FieldModule.HelperFactory extends Manif
       'size': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Size, \r
       'tail_angle': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.TailAngle, \r
       'color': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Color, \r
-      'popup': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Popup\r
+      'popup': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Popup,\r
+      'slider': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Slider,\r
     }\r
   \r
   @default_type: () ->\r

diff --git a/app/assets/javascripts/local_manifest/form/use/field/helper/slider.js.coffee b/app/assets/javascripts/local_manifest/form/use/field/helper/slider.js.coffee
new file mode 100644 (file)
index 0000000..48c10a7
--- /dev/null
+++ b/app/assets/javascripts/local_manifest/form/use/field/helper/slider.js.coffee
@@ -0,0 +1,8 @@
+class LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Slider extends LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Base\r
+  \r
+  set_default: () ->\r
+    super()\r
+    \r
+  init: () ->\r
+    super()\r
+  \r

diff --git a/app/assets/javascripts/locmare/form/extend_field.js.coffee b/app/assets/javascripts/locmare/form/extend_field.js.coffee
index 4ac2a05..943bacb 100644 (file)
--- a/app/assets/javascripts/locmare/form/extend_field.js.coffee
+++ b/app/assets/javascripts/locmare/form/extend_field.js.coffee
@@ -46,6 +46,11 @@ class Locmare.FormModule.ExtendField extends Backbone.View
     a[@field_manifest.column_name()] = v\r
     @item().set(a, opt)\r
   \r
+  unset: (opt = null) ->\r
+    a = {}\r
+    a[@field_manifest.column_name()] = undefined\r
+    @item().set(a, {unset: true})\r
+  \r
   options: (tag_options = {}) ->\r
     tag_options\r
   \r

diff --git a/app/assets/javascripts/locmare/form/field.js.coffee b/app/assets/javascripts/locmare/form/field.js.coffee
index 55e273f..8b8a56f 100644 (file)
--- a/app/assets/javascripts/locmare/form/field.js.coffee
+++ b/app/assets/javascripts/locmare/form/field.js.coffee
@@ -49,6 +49,11 @@ class Locmare.FormModule.Field extends Backbone.View
     a[@field_manifest.column_name()] = v\r
     @item().set(a, opt)\r
   \r
+  unset: () ->\r
+    a = {}\r
+    a[@field_manifest.column_name()] = undefined\r
+    @item().set(a, {unset: true})\r
+  \r
   form_field_name: () ->\r
     @form.form_field_name @field_name\r
   \r

diff --git a/app/assets/javascripts/locmare/form/field/helper.js.coffee b/app/assets/javascripts/locmare/form/field/helper.js.coffee
index 88a328c..5c3a9c9 100644 (file)
--- a/app/assets/javascripts/locmare/form/field/helper.js.coffee
+++ b/app/assets/javascripts/locmare/form/field/helper.js.coffee
@@ -4,7 +4,8 @@ class Locmare.FormModule.FieldModule.HelperFactory
       size: Locmare.FormModule.FieldModule.HelperModule.Size, \r
       tail_angle: Locmare.FormModule.FieldModule.HelperModule.TailAngle, \r
       color: Locmare.FormModule.FieldModule.HelperModule.Color, \r
-      popup: Locmare.FormModule.FieldModule.HelperModule.Popup\r
+      popup: Locmare.FormModule.FieldModule.HelperModule.Popup,\r
+      slider: Locmare.FormModule.FieldModule.HelperModule.Slider,\r
     }\r
   \r
   @factory: (field, my_manifest) ->\r

diff --git a/app/assets/javascripts/locmare/form/field/helper/slider.js.coffee b/app/assets/javascripts/locmare/form/field/helper/slider.js.coffee
new file mode 100644 (file)
index 0000000..dd932cf
--- /dev/null
+++ b/app/assets/javascripts/locmare/form/field/helper/slider.js.coffee
@@ -0,0 +1,77 @@
+class Locmare.FormModule.FieldModule.HelperModule.Slider extends Locmare.FormModule.FieldModule.HelperModule.Base\r
+  tagName: 'span'\r
+  className: 'slider'\r
+  \r
+  # wrapper\r
+  initialize: (options) ->\r
+    super(options)\r
+    @check = new Tag.Checkbox({value: 1, checked: @is_enable()})\r
+    @slider = new Locmare.FormModule.FieldModule.HelperModule.SliderModule.Slider({\r
+      field: @field\r
+    })\r
+    @listenTo(@check, 'click', @click_check)\r
+    @listenTo(@slider, 'slide', @slider_change)\r
+  \r
+  render: () ->\r
+    @attr = {\r
+    }\r
+    this.$el.attr(@attr)\r
+    this.$el.html('')\r
+    this.$el.append(@check.render().el)\r
+    this.$el.append(@slider.render().el)\r
+    @click_check()    # init show/hide\r
+    this\r
+  \r
+  refresh: () ->\r
+    null\r
+  \r
+  is_enable: () ->\r
+    _.isNumber(@field.value())\r
+  \r
+  slider_change: (value) -> \r
+    @field.tag.$el.val(value)\r
+    @field.trigger('change')\r
+  \r
+  click_check: () -> \r
+    if @check.checked\r
+      @slider.enable()\r
+    else\r
+      @slider.disable()\r
+  \r
+class Locmare.FormModule.FieldModule.HelperModule.SliderModule\r
+class Locmare.FormModule.FieldModule.HelperModule.SliderModule.Slider extends Tag.Div\r
+  events: {\r
+    slidechange: 'slider_change'\r
+  }\r
+  \r
+  initialize: (options) ->\r
+    @field = options.field\r
+    super({})\r
+    this.$el.addClass('per-slider')\r
+  \r
+  render: () ->\r
+    this.$el.html('')\r
+    this.$el.slider {\r
+      orientation: 'horizontal',\r
+      range: 'min',\r
+      max: 100,\r
+      value: 0\r
+    }\r
+    this\r
+  \r
+  enable: () ->\r
+    @field.set(@field.value() || 0)\r
+    this.$el.slider({value: @field.value()})\r
+    this.$el.attr({style: 'display: inline;'})\r
+  \r
+  disable: () ->\r
+    this.$el.attr({style: 'display: none;'})\r
+    @field.set(undefined)\r
+    @field.tag.render()    # why does not raise change event when set null value?\r
+  \r
+  slider_change: (event, ui) -> \r
+    @trigger('slide', ui.value)\r
+  \r
+  volume: () ->\r
+    (@field.value() >> @shift) & 0xFF\r
+  \r

diff --git a/app/assets/javascripts/tags.js.coffee b/app/assets/javascripts/tags.js.coffee
index ca747e9..bf72a94 100644 (file)
--- a/app/assets/javascripts/tags.js.coffee
+++ b/app/assets/javascripts/tags.js.coffee
@@ -99,4 +99,44 @@ class Tag.H3 extends Backbone.View
 class Tag.H2 extends Tag.H3\r
   tagName: 'h2'\r
   \r
+class Tag.Input extends Backbone.View\r
+  tagName: 'input'\r
+  \r
+  initialize: (options) ->\r
+    @type = options.type || 'text'\r
+    @class_name = options.class_name\r
+    @attr = {}\r
+  \r
+  render: () ->\r
+    this.$el.attr(@attr)\r
+    @el.className = @class_name if @class_name\r
+    this.$el.html('')\r
+    this\r
+  \r
+class Tag.Checkbox extends Tag.Input\r
+  events: {\r
+    click: 'click'\r
+  }\r
+  \r
+  initialize: (options) ->\r
+    super(options)\r
+    @type = 'checkbox'\r
+    @value = options.value\r
+    @checked = options.checked\r
+    @attr = {\r
+      type: @type,\r
+      value: @value,\r
+      checked: @checked,\r
+    }\r
+  \r
+  refresh: () ->\r
+    @attr['checked'] = @checked\r
+    this.$el.attr(@attr)\r
+  \r
+  click: () ->\r
+    @checked = this.$el.prop('checked')\r
+    @refresh()\r
+    @trigger('click')\r
+    return true\r
+  \r
 @Tag = Tag\r

diff --git a/app/assets/javascripts/work/forms.js.coffee.erb b/app/assets/javascripts/work/forms.js.coffee.erb
index 03766ac..f6102d1 100644 (file)
--- a/app/assets/javascripts/work/forms.js.coffee.erb
+++ b/app/assets/javascripts/work/forms.js.coffee.erb
@@ -1123,11 +1123,34 @@
             tag: {\r
               type: 'number',\r
             },\r
+            helpers: {\r
+              slider: {\r
+                type: 'slider',\r
+                args: {\r
+                  class_name: 'gp_x_slider',\r
+                  orientation: 'horizontal',\r
+                  range: 'min',\r
+                  max: 100,\r
+                },\r
+              },\r
+            },\r
+            row_break: true,\r
           },\r
           y: {\r
             tag: {\r
               type: 'number',\r
             },\r
+            helpers: {\r
+              slider: {\r
+                type: 'slider',\r
+                args: {\r
+                  class_name: 'gp_y_slider',\r
+                  orientation: 'horizontal',\r
+                  range: 'min',\r
+                  max: 100,\r
+                },\r
+              },\r
+            },\r
             row_break: true,\r
           },\r
           z: {\r
@@ -1227,11 +1250,34 @@
             tag: {\r
               type: 'number',\r
             },\r
+            helpers: {\r
+              slider: {\r
+                type: 'slider',\r
+                args: {\r
+                  class_name: 'gc_xy_slider',\r
+                  orientation: 'horizontal',\r
+                  range: 'min',\r
+                  max: 100,\r
+                },\r
+              },\r
+            },\r
+            row_break: true,\r
           },\r
           wh: {\r
             tag: {\r
               type: 'number',\r
             },\r
+            helpers: {\r
+              slider: {\r
+                type: 'slider',\r
+                args: {\r
+                  class_name: 'gc_wh_slider',\r
+                  orientation: 'horizontal',\r
+                  range: 'min',\r
+                  max: 100,\r
+                },\r
+              },\r
+            },\r
             row_break: true,\r
           },\r
           z: {\r

diff --git a/app/assets/javascripts/yasapp.js b/app/assets/javascripts/yasapp.js
index 3399782..5591f65 100644 (file)
--- a/app/assets/javascripts/yasapp.js
+++ b/app/assets/javascripts/yasapp.js
@@ -147,6 +147,7 @@
 //= require ./local_manifest/form/use/field/helper/tail_angle
 //= require ./local_manifest/form/use/field/helper/color
 //= require ./local_manifest/form/use/field/helper/popup
+//= require ./local_manifest/form/use/field/helper/slider
 //= require ./local_manifest/form/use/element_field
 //= require ./local_manifest/form/use/part_field
 //= require ./local_manifest/list_group
@@ -251,6 +252,7 @@
 //= require ./locmare/form/field/helper/tail_angle
 //= require ./locmare/form/field/helper/color
 //= require ./locmare/form/field/helper/popup
+//= require ./locmare/form/field/helper/slider
 //= require ./locmare/bucket
 //= require ./locmare/list_group
 //= require ./locmare/list_group/lib

diff --git a/app/assets/stylesheets/test.css.scss b/app/assets/stylesheets/test.css.scss
index 8a3c5ba..d39f823 100644 (file)
--- a/app/assets/stylesheets/test.css.scss
+++ b/app/assets/stylesheets/test.css.scss
@@ -258,6 +258,12 @@ font-family : monospace;
     width: 256px;
     margin: 3px 10px;
   }
+  .per-slider {
+    float: left;
+    clear: left;
+    width: 100px;
+    margin: 3px 10px;
+  }
 
 #elements-tabs {
     font-size: 12px;

diff --git a/public/local_manifest.json b/public/local_manifest.json
index 8adabae..2a2b3f6 100644 (file)
--- a/public/local_manifest.json
+++ b/public/local_manifest.json
@@ -3043,7 +3043,8 @@
                     "wrapper": "speech-fore_color-wrap"\r
                   }\r
                 }\r
-              }\r
+              },\r
+              "row_break": true\r
             },\r
             "speech_balloon_template_module_name": {\r
               "label": {\r
@@ -3155,12 +3156,35 @@
             "x": {\r
               "tag": {\r
                 "type": "number"\r
-              }\r
+              },\r
+              "helpers": {\r
+                "slider": {\r
+                  "type": "slider",\r
+                  "args": {\r
+                    "class_name": "gp_x_slider",\r
+                    "orientation": "horizontal",\r
+                    "range": "min",\r
+                    "max": 100\r
+                  }\r
+                }\r
+              },\r
+              "row_break": true\r
             },\r
             "y": {\r
               "tag": {\r
                 "type": "number"\r
               },\r
+              "helpers": {\r
+                "slider": {\r
+                  "type": "slider",\r
+                  "args": {\r
+                    "class_name": "gp_y_slider",\r
+                    "orientation": "horizontal",\r
+                    "range": "min",\r
+                    "max": 100\r
+                  }\r
+                }\r
+              },\r
               "row_break": true\r
             },\r
             "z": {\r
@@ -3259,12 +3283,35 @@
             "xy": {\r
               "tag": {\r
                 "type": "number"\r
-              }\r
+              },\r
+              "helpers": {\r
+                "slider": {\r
+                  "type": "slider",\r
+                  "args": {\r
+                    "class_name": "gc_xy_slider",\r
+                    "orientation": "horizontal",\r
+                    "range": "min",\r
+                    "max": 100\r
+                  }\r
+                }\r
+              },\r
+              "row_break": true\r
             },\r
             "wh": {\r
               "tag": {\r
                 "type": "number"\r
               },\r
+              "helpers": {\r
+                "slider": {\r
+                  "type": "slider",\r
+                  "args": {\r
+                    "class_name": "gc_wh_slider",\r
+                    "orientation": "horizontal",\r
+                    "range": "min",\r
+                    "max": 100\r
+                  }\r
+                }\r
+              },\r
               "row_break": true\r
             },\r
             "z": {\r