Start media queries

src/canvas/config/config.js

@@ -1,10 +1,10 @@
 define(function () {
 	return {
-		
-		stylePrefix			: 'cv-',
-		
+
+		stylePrefix: 'cv-',
+
 		// Coming soon
-		rulers				: false,
-		
+		rulers: false,
+
 	};
 });

src/canvas/view/FrameView.js

@@ -14,6 +14,14 @@ function(Backbone) {
     initialize: function(o) {
       this.config = o.config || {};
       this.ppfx = this.config.pStylePrefix || '';
+      this.listenTo(this.model, 'change:width', this.updateWidth);
+    },
+
+    /**
+     * Update width of the frame
+     */
+    updateWidth: function(){
+      this.el.style.width = this.model.get('width');
     },
 
     getBody: function(){

src/class_manager/config/config.js

@@ -20,5 +20,13 @@ 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,3 +1,6 @@
+<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,16 +12,19 @@ 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;
 
@@ -35,6 +38,21 @@ 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
@@ -55,6 +73,19 @@ 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
@@ -236,8 +267,10 @@ 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;