Add devices view

src/class_manager/config/config.js

@@ -20,13 +20,5 @@ define(function () {
         { name: 'nth-of-type(2n)', label: 'Even/Odd' }
     ],
 
-    // Media queries
-    medias: [
-        { name: 'Desktop', width: ''},
-        { name: 'Tablet', width: '991px' },
-        { name: 'Mobile landscape', width: '767px' },
-        { name: 'Mobile portrait', width: '479px' },
-    ],
-
 	};
 });

src/class_manager/template/classTags.html

@@ -1,6 +1,3 @@
-<div id="<%= pfx %>media-c">
-  <select id="<%= pfx %>media"></select>
-</div>
 <div id="<%= pfx %>up">
   <div id="<%= pfx %>label"><%= label %></div>
   <div id="<%= pfx %>status-c">

src/class_manager/view/ClassTagsView.js

@@ -12,19 +12,16 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
     initialize: function(o) {
       this.config = o.config || {};
       this.pfx = this.config.stylePrefix || '';
-      this.mediaId = this.pfx + 'media';
       this.className = this.pfx + 'tags';
       this.addBtnId = this.pfx + 'add-tag';
       this.newInputId = this.pfx + 'new';
       this.stateInputId = this.pfx + 'states';
       this.stateInputC = this.pfx + 'input-c';
       this.states = this.config.states || [];
-      this.medias = this.config.medias || [];
       this.events['click #' + this.addBtnId] = 'startNewTag';
       this.events['blur #' + this.newInputId] = 'endNewTag';
       this.events['keyup #' + this.newInputId] = 'onInputKeyUp';
       this.events['change #' + this.stateInputId] = 'stateChanged';
-      this.events['change #' + this.mediaId] = 'mediaChanged';
 
       this.target  = this.config.target;
 
@@ -38,21 +35,6 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
       this.delegateEvents();
     },
 
-    /**
-     * Triggered when the select with media is changed
-     * @param  {Object} e
-     */
-    mediaChanged: function(e){
-      console.log('Change media ' + this.$media.val());
-      /*
-      if(this.compTarget){
-        this.compTarget.set('media', this.$states.val());
-        if(this.target)
-          this.target.trigger('targetStateUpdated');
-        this.updateSelector();
-      }*/
-    },
-
     /**
      * Triggered when a tag is removed from collection
      * @param {Object} model Removed model
@@ -73,19 +55,6 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
       return strInput;
     },
 
-    /**
-     * Create options of media queries
-     * @return {string} String of options
-     */
-    getMediaOptions: function(){
-      var strInput = '';
-      var coll = this.medias;
-      for(var i = 0; i < coll.length; i++){
-        strInput += '<option value="' + coll[i].width + '">' + coll[i].name + '</option>';
-      }
-      return strInput;
-    },
-
     /**
      * Add new model
      * @param {Object} model
@@ -267,10 +236,8 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
       this.$addBtn = this.$el.find('#' + this.addBtnId);
       this.$classes = this.$el.find('#' + this.pfx + 'tags-c');
       this.$states = this.$el.find('#' + this.stateInputId);
-      this.$media = this.$el.find('#' + this.mediaId);
       this.$statesC = this.$el.find('#' + this.stateInputC);
       this.$states.append(this.getStateOptions());
-      this.$media.append(this.getMediaOptions());
       this.renderClasses();
       this.$el.attr('class', this.className);
       return this;

src/device_manager/main.js

@@ -35,6 +35,7 @@ define(function(require) {
     }
 
     var devices = new Devices(c.devices);
+    //var view = new DevicesView({ collection: devices });
 
     return {
 

src/device_manager/view/DevicesView.js

@@ -0,0 +1,37 @@
+define(['backbone'],
+function(Backbone) {
+
+  return Backbone.View.extend({
+
+    //template: _.template(assetsTemplate),
+
+    initialize: function(o) {
+      this.config = o.config || {};
+      this.ppfx = this.config.pStylePrefix || '';
+    },
+
+    /**
+     * Return devices options
+     * @return {string} String of options
+     */
+    getOptions: function(){
+      var result = '';
+      this.collection.each(function(device){
+        var name = device.get('name');
+        result += '<option value="' + name+ '">' + name + '</option>';
+      });
+      return result;
+    },
+
+    render: function() {
+      /*
+      this.$el.html(this.template({
+        ppfx: this.ppfx,
+      }));
+       */
+      //this.$el.attr({class: this.ppfx + 'frame'});
+      return this;
+    },
+
+  });
+});