From c2a913ce5fa7c2eeb6d787727f1c4cac7b404906 Mon Sep 17 00:00:00 2001 From: yasushiito Date: Thu, 14 May 2015 18:09:47 +0900 Subject: [PATCH] add: helper slider --- .../local_manifest/form/use/field/helper.js.coffee | 3 +- .../form/use/field/helper/slider.js.coffee | 8 +++ .../locmare/form/extend_field.js.coffee | 5 ++ .../javascripts/locmare/form/field.js.coffee | 5 ++ .../locmare/form/field/helper.js.coffee | 3 +- .../locmare/form/field/helper/slider.js.coffee | 77 ++++++++++++++++++++++ app/assets/javascripts/tags.js.coffee | 40 +++++++++++ app/assets/javascripts/work/forms.js.coffee.erb | 46 +++++++++++++ app/assets/javascripts/yasapp.js | 2 + app/assets/stylesheets/test.css.scss | 6 ++ public/local_manifest.json | 53 ++++++++++++++- 11 files changed, 243 insertions(+), 5 deletions(-) create mode 100644 app/assets/javascripts/local_manifest/form/use/field/helper/slider.js.coffee create mode 100644 app/assets/javascripts/locmare/form/field/helper/slider.js.coffee 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 5b8bcf83..d28a0244 100644 --- 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, 'tail_angle': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.TailAngle, 'color': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Color, - 'popup': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Popup + 'popup': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Popup, + 'slider': LocalManifest.FormModule.UseModule.FieldModule.HelperModule.Slider, } @default_type: () -> 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 index 00000000..48c10a74 --- /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 + + set_default: () -> + super() + + init: () -> + super() + diff --git a/app/assets/javascripts/locmare/form/extend_field.js.coffee b/app/assets/javascripts/locmare/form/extend_field.js.coffee index 4ac2a05a..943bacba 100644 --- 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 @item().set(a, opt) + unset: (opt = null) -> + a = {} + a[@field_manifest.column_name()] = undefined + @item().set(a, {unset: true}) + options: (tag_options = {}) -> tag_options diff --git a/app/assets/javascripts/locmare/form/field.js.coffee b/app/assets/javascripts/locmare/form/field.js.coffee index 55e273f7..8b8a56ff 100644 --- 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 @item().set(a, opt) + unset: () -> + a = {} + a[@field_manifest.column_name()] = undefined + @item().set(a, {unset: true}) + form_field_name: () -> @form.form_field_name @field_name diff --git a/app/assets/javascripts/locmare/form/field/helper.js.coffee b/app/assets/javascripts/locmare/form/field/helper.js.coffee index 88a328c7..5c3a9c9f 100644 --- 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, tail_angle: Locmare.FormModule.FieldModule.HelperModule.TailAngle, color: Locmare.FormModule.FieldModule.HelperModule.Color, - popup: Locmare.FormModule.FieldModule.HelperModule.Popup + popup: Locmare.FormModule.FieldModule.HelperModule.Popup, + slider: Locmare.FormModule.FieldModule.HelperModule.Slider, } @factory: (field, my_manifest) -> 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 index 00000000..dd932cf9 --- /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 + tagName: 'span' + className: 'slider' + + # wrapper + initialize: (options) -> + super(options) + @check = new Tag.Checkbox({value: 1, checked: @is_enable()}) + @slider = new Locmare.FormModule.FieldModule.HelperModule.SliderModule.Slider({ + field: @field + }) + @listenTo(@check, 'click', @click_check) + @listenTo(@slider, 'slide', @slider_change) + + render: () -> + @attr = { + } + this.$el.attr(@attr) + this.$el.html('') + this.$el.append(@check.render().el) + this.$el.append(@slider.render().el) + @click_check() # init show/hide + this + + refresh: () -> + null + + is_enable: () -> + _.isNumber(@field.value()) + + slider_change: (value) -> + @field.tag.$el.val(value) + @field.trigger('change') + + click_check: () -> + if @check.checked + @slider.enable() + else + @slider.disable() + +class Locmare.FormModule.FieldModule.HelperModule.SliderModule +class Locmare.FormModule.FieldModule.HelperModule.SliderModule.Slider extends Tag.Div + events: { + slidechange: 'slider_change' + } + + initialize: (options) -> + @field = options.field + super({}) + this.$el.addClass('per-slider') + + render: () -> + this.$el.html('') + this.$el.slider { + orientation: 'horizontal', + range: 'min', + max: 100, + value: 0 + } + this + + enable: () -> + @field.set(@field.value() || 0) + this.$el.slider({value: @field.value()}) + this.$el.attr({style: 'display: inline;'}) + + disable: () -> + this.$el.attr({style: 'display: none;'}) + @field.set(undefined) + @field.tag.render() # why does not raise change event when set null value? + + slider_change: (event, ui) -> + @trigger('slide', ui.value) + + volume: () -> + (@field.value() >> @shift) & 0xFF + diff --git a/app/assets/javascripts/tags.js.coffee b/app/assets/javascripts/tags.js.coffee index ca747e91..bf72a94c 100644 --- 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 tagName: 'h2' +class Tag.Input extends Backbone.View + tagName: 'input' + + initialize: (options) -> + @type = options.type || 'text' + @class_name = options.class_name + @attr = {} + + render: () -> + this.$el.attr(@attr) + @el.className = @class_name if @class_name + this.$el.html('') + this + +class Tag.Checkbox extends Tag.Input + events: { + click: 'click' + } + + initialize: (options) -> + super(options) + @type = 'checkbox' + @value = options.value + @checked = options.checked + @attr = { + type: @type, + value: @value, + checked: @checked, + } + + refresh: () -> + @attr['checked'] = @checked + this.$el.attr(@attr) + + click: () -> + @checked = this.$el.prop('checked') + @refresh() + @trigger('click') + return true + @Tag = Tag diff --git a/app/assets/javascripts/work/forms.js.coffee.erb b/app/assets/javascripts/work/forms.js.coffee.erb index 03766ac6..f6102d14 100644 --- a/app/assets/javascripts/work/forms.js.coffee.erb +++ b/app/assets/javascripts/work/forms.js.coffee.erb @@ -1123,11 +1123,34 @@ tag: { type: 'number', }, + helpers: { + slider: { + type: 'slider', + args: { + class_name: 'gp_x_slider', + orientation: 'horizontal', + range: 'min', + max: 100, + }, + }, + }, + row_break: true, }, y: { tag: { type: 'number', }, + helpers: { + slider: { + type: 'slider', + args: { + class_name: 'gp_y_slider', + orientation: 'horizontal', + range: 'min', + max: 100, + }, + }, + }, row_break: true, }, z: { @@ -1227,11 +1250,34 @@ tag: { type: 'number', }, + helpers: { + slider: { + type: 'slider', + args: { + class_name: 'gc_xy_slider', + orientation: 'horizontal', + range: 'min', + max: 100, + }, + }, + }, + row_break: true, }, wh: { tag: { type: 'number', }, + helpers: { + slider: { + type: 'slider', + args: { + class_name: 'gc_wh_slider', + orientation: 'horizontal', + range: 'min', + max: 100, + }, + }, + }, row_break: true, }, z: { diff --git a/app/assets/javascripts/yasapp.js b/app/assets/javascripts/yasapp.js index 3399782b..5591f657 100644 --- 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 8a3c5bae..d39f823a 100644 --- 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 8adabae1..2a2b3f60 100644 --- a/public/local_manifest.json +++ b/public/local_manifest.json @@ -3043,7 +3043,8 @@ "wrapper": "speech-fore_color-wrap" } } - } + }, + "row_break": true }, "speech_balloon_template_module_name": { "label": { @@ -3155,12 +3156,35 @@ "x": { "tag": { "type": "number" - } + }, + "helpers": { + "slider": { + "type": "slider", + "args": { + "class_name": "gp_x_slider", + "orientation": "horizontal", + "range": "min", + "max": 100 + } + } + }, + "row_break": true }, "y": { "tag": { "type": "number" }, + "helpers": { + "slider": { + "type": "slider", + "args": { + "class_name": "gp_y_slider", + "orientation": "horizontal", + "range": "min", + "max": 100 + } + } + }, "row_break": true }, "z": { @@ -3259,12 +3283,35 @@ "xy": { "tag": { "type": "number" - } + }, + "helpers": { + "slider": { + "type": "slider", + "args": { + "class_name": "gc_xy_slider", + "orientation": "horizontal", + "range": "min", + "max": 100 + } + } + }, + "row_break": true }, "wh": { "tag": { "type": "number" }, + "helpers": { + "slider": { + "type": "slider", + "args": { + "class_name": "gc_wh_slider", + "orientation": "horizontal", + "range": "min", + "max": 100 + } + } + }, "row_break": true }, "z": { -- 2.11.0