From 53da945f44beee8fe354330b291c8712d52b55e7 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 14 Jul 2016 14:34:30 +0200
Subject: [PATCH] Start media queries

---
 src/canvas/config/config.js               | 10 +++----
 src/canvas/view/FrameView.js              |  8 ++++++
 src/class_manager/config/config.js        |  8 ++++++
 src/class_manager/template/classTags.html |  3 +++
 src/class_manager/view/ClassTagsView.js   | 33 +++++++++++++++++++++++
 5 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/canvas/config/config.js b/src/canvas/config/config.js
index 449f904e7..9e211d85e 100644
--- a/src/canvas/config/config.js
+++ b/src/canvas/config/config.js
@@ -1,10 +1,10 @@
 define(function () {
 	return {
-		
-		stylePrefix			: 'cv-',
-		
+
+		stylePrefix: 'cv-',
+
 		// Coming soon
-		rulers				: false,
-		
+		rulers: false,
+
 	};
 });
\ No newline at end of file
diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js
index e900d7751..190e7a45f 100644
--- a/src/canvas/view/FrameView.js
+++ b/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(){
diff --git a/src/class_manager/config/config.js b/src/class_manager/config/config.js
index 8f6ac0cfe..b2efd867b 100644
--- a/src/class_manager/config/config.js
+++ b/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' },
+    ],
+
 	};
 });
\ No newline at end of file
diff --git a/src/class_manager/template/classTags.html b/src/class_manager/template/classTags.html
index 8ddbe35a6..bb8aaf0c0 100644
--- a/src/class_manager/template/classTags.html
+++ b/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">
diff --git a/src/class_manager/view/ClassTagsView.js b/src/class_manager/view/ClassTagsView.js
index 45951ccaa..a28bab434 100644
--- a/src/class_manager/view/ClassTagsView.js
+++ b/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;