Start slider type for Style Manager

index.html

@@ -1037,7 +1037,14 @@
         sectors: [{
           name: 'General',
           open: false,
-          buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
+          buildProps: ['opacity', 'float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
+          properties: [{
+            type: 'slider',
+            property: 'opacity',
+            step: 0.01,
+            max: 1,
+            min:0,
+          }]
         },{
           name: 'Dimension',
           open: false,
@@ -1274,11 +1281,6 @@
     }]);
 
     var bm = editor.BlockManager;
-    bm.add('mappy', {
-      label: 'Map',
-      attributes: {class:'fa fa-marker'},
-      content: {type: 'map'}
-    })
     /*
     bm.add('link-block', {
       label: 'Link Block',

src/style_manager/model/Properties.js

@@ -57,6 +57,15 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten
           return value;
         }
       }
+    },{
+      id: 'slider',
+      model: require('./PropertySlider'),
+      view: require('./../view/PropertySliderView'),
+      isType(value) {
+        if (value && value.type == 'slider') {
+          return value;
+        }
+      }
     },{
       id: 'integer',
       model: require('./PropertyInteger'),

src/style_manager/model/PropertySlider.js

@@ -0,0 +1,9 @@
+const Property = require('./PropertyInteger');
+
+module.exports = Property.extend({
+
+  defaults: Object.assign({}, Property.prototype.defaults, {
+    showInput: 1,
+  }),
+
+});

src/style_manager/view/PropertyIntegerView.js

@@ -1,4 +1,4 @@
-var InputNumber = require('domain_abstract/ui/InputNumber');
+const InputNumber = require('domain_abstract/ui/InputNumber');
 
 module.exports = require('./PropertyView').extend({
 

src/style_manager/view/PropertySliderView.js

@@ -0,0 +1,79 @@
+const InputNumber = require('domain_abstract/ui/InputNumber');
+
+module.exports = require('./PropertyView').extend({
+
+  events: {
+    'change': 'inputValueChanged',
+    'input': 'inputValueChangedSoft',
+  },
+
+  template(model) {
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
+    return `
+      <div class="${pfx}label">
+        ${this.templateLabel(model)}
+      </div>
+      <div class="${ppfx}fields">
+        <div class="${ppfx}field ${ppfx}field-range">
+          <input type="range"
+            min="${model.get('min')}"
+            max="${model.get('max')}"
+            step="${model.get('step')}"/>
+        </div>
+      </div>
+    `;
+  },
+
+  init() {
+    console.log('Init slider');
+    const model = this.model;
+    this.listenTo(model, 'change:unit', this.modelValueChanged);
+    this.listenTo(model, 'el:change', this.elementUpdated);
+  },
+
+  getSliderEl() {
+    if (!this.slider) {
+      this.slider = this.el.querySelector('input[type=range]');
+    }
+
+    return this.slider;
+  },
+
+  inputValueChanged() {
+    const model = this.model;
+    const step = model.get('step');
+    this.getInputEl().value = this.getSliderEl().value;
+    const value = this.getInputValue() - step;
+    model.set('value', value, {avoidStore: 1}).set('value', value + step);
+    this.elementUpdated();
+  },
+
+  inputValueChangedSoft() {
+    this.getInputEl().value = this.getSliderEl().value;
+    this.model.set('value', this.getInputValue(), {avoidStore: 1});
+    this.elementUpdated();
+  },
+
+  setValue(value) {
+    this.inputInst.setValue(value, {silent: 1});
+  },
+
+  onRender() {
+    const ppfx = this.ppfx;
+
+    if (!this.input) {
+      const inputNumber = new InputNumber({
+        model: this.model,
+        ppfx: this.ppfx
+      });
+      const input = inputNumber.render();
+      this.$el.find(`.${ppfx}fields`).append(input.$el);
+      this.$input = input.inputEl;
+      this.$unit = input.unitEl;
+      this.input = this.$input.get(0);
+      this.inputInst = input;
+    }
+  },
+
+});

src/styles/scss/_gjs_inputs.scss

@@ -258,6 +258,7 @@
      @include rangeThumbStyle();
     }
 
+    /* -moz-range-progress */
     &::-moz-range-track {
      @include rangeTrackStyle();
     }