promethee 1.0.19 → 1.0.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ff4222a60ff026188abda14dedaef525f7af012a
-  data.tar.gz: 8272fbd675688bb2b8c079c1c61b922f6b86a992
+  metadata.gz: 932ca1d52484c654de7f178f55548aa6753942cd
+  data.tar.gz: a998da307c6021b046a87230f97301c522638757
 SHA512:
-  metadata.gz: 3fa8ec13bc82dc0b430724afad25795c56166774a792a934b72160d9977d07f9c2e296ebfd268e76852f88fbb23e60a4fbad956a5c46a173c69853c101dd58b6
-  data.tar.gz: 30c2f867088622d787d15727d8fb5117f564ddaac82c005e4577289f9baf3bff5e2f3b3965f68f425b067130952a55a4c82d4e75f82a19424a4f502a10f96299
+  metadata.gz: ec99cb5ea11a85d88149dacfbc2c4e266b85d6642f93e3cda86d8e92dd2e724729a5abc4b5e9dbcf7f02e1d00eff3172464c682c1df5fbfea4a6c5cc3052ef9d
+  data.tar.gz: 63d672f686c5a4b9bb793fef19c422b107f8daf40fe780950bd83d69c956c5898862cfbeac50a319fdcba59476b065cc4b0b7f3b99af46f69f6556dd83c14867

data/README.md

@@ -311,6 +311,9 @@ This would do quite the same thing:
 - Gallery
 - Menu
 - Tab
+- Better col sizing/positioning UX
+- Grid background helper
+- File upload?
 - ~~Cover~~
 - ~~Chapter (or maybe it's a cover too? *Yes it is, but see next line*)~~
 - Section (in order to organize page contents within distincts parts which can be referenced. eg: scrollspy, hyperlink, tabs, ...)

data/app/assets/stylesheets/promethee-editor.sass

@@ -48,4 +48,40 @@ $promethee-color: #ff9900 !default
   &__wrapper
     padding: 10px
 
+  &__component-selected
+    border: 2px solid transparent
 
+    &--visible
+      border-color: $promethee-color
+
+  &__inspector
+    background: #fff
+    border: 1px solid rgba(0, 0, 0, .1)
+    width: 300px
+    height: calc(100vh - 30px)
+    top: 15px
+    left: 100%
+    margin-left: -15px
+    transform: translateX(-100%)
+    z-index: 1000
+    display: none
+    position: fixed
+
+    &--open
+      display: block
+
+  &__inspector-header
+    padding: 15px
+    border-bottom: 1px solid rgba(0, 0, 0, .1)
+
+    &, h5
+      font-size: 11px
+
+  h5
+    margin: 0
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
+    font-weight: bold
+    text-transform: uppercase
+
+.promethee-editor__inspector-content
+  padding: 15px

data/app/views/promethee/_edit.html.erb

@@ -47,6 +47,7 @@ promethee_data = Promethee::Data.new master_data
     .module('Promethee', ['summernote', 'ngAnimate'])
     .value('data', <%= promethee_data.to_json.html_safe %>)
     .value('definitions', [])
+    .value('inspected', {component: null})
     .value('action', new State('write'))
     .value('preview', new State('desktop'))
     .value('fullscreen', new State(false))
@@ -68,9 +69,40 @@ promethee_data = Promethee::Data.new master_data
         val = (val + '').replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').replace(/\s\s+/, ' ').trim();
         return val[0].toUpperCase() + val.substring(1).toLowerCase();
       };
+    })
+    .filter('textContentFromHTML', function() {
+      return function(val, distinctParagraphs) {
+        var element = document.createElement('div');
+        element.innerHTML = val;
+
+        if(distinctParagraphs === 'distinctParagraphs') {
+          var paragraphs = element.querySelectorAll('p');
+          for(var i = 0; i < paragraphs.length; i++) paragraphs[i].textContent += ' ';
+        }
+
+        return element.textContent;
+      }
+    })
+    .filter('numberOfCharacters', function() {
+      return function(val) {
+        return val.length;
+      };
+    })
+    .filter('numberOfWords', function() {
+      return function(val) {
+        var words = val
+          .replace(/\bhttps?:\/\/[a-z0-9\-\._]+(?:\/[^\s\n\r]+)?/gi, 'a') // A URL is one word
+          .replace(/\b[a-z0-9\-\._]+@[a-z0-9\-\._]+\.[a-z0-9\-\._]+\b/gi, 'a') // An email is one word
+          .replace(/[^a-z0-9\s\n\r]/gi, ' ')
+          .replace(/[\s\n\r]+/g, ' ')
+          .trim()
+          .split(' ');
+
+        return words[0] === '' ? 0 : words.length;
+      };
     });
 
-  promethee.controller('PrometheeController', ['data', '$scope', 'definitions', '$http', 'action', 'preview', 'fullscreen', function(data, $scope, definitions, $http, action, preview, fullscreen) {
+  promethee.controller('PrometheeController', ['data', '$scope', 'definitions', '$http', 'action', 'preview', 'fullscreen', 'inspected', function(data, $scope, definitions, $http, action, preview, fullscreen, inspected) {
 
     // Data (TODO use Adder and probably page definition to init)
     if(data === null || data === '') {
@@ -83,6 +115,7 @@ promethee_data = Promethee::Data.new master_data
     }
 
     $scope.data = $scope.component = data;
+    $scope.inspected = inspected;
 
     // Application states
     $scope.action = action;

data/app/views/promethee/edit/_write.html.erb

@@ -5,13 +5,13 @@
 <% Dir[__dir__ + '/write/component/_*.html.erb'].map do |file| %>
   <%= render "promethee/edit/write/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
 <% end %>
-<% Dir[__dir__ + '/write/toolbar/_*.html.erb'].map do |file| %>
-  <%= render "promethee/edit/write/toolbar/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
+<% Dir[__dir__ + '/inspector/component/_*.html.erb'].map do |file| %>
+  <%= render "promethee/edit/inspector/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
 <% end %>
 
 <script type="text/ng-template" id="promethee/write">
   <div class="promethee-editor__page">
-    <div ng-class="{ 'container': fullscreen }">
+    <div ng-class="{ 'container': fullscreen.enabled, 'container-fluid': fullscreen.disabled }">
       <div
         ng-init="component = component || data"
         class="promethee-editor__component promethee-editor__component--page"
@@ -21,4 +21,17 @@
     </div>
     <ng-include src="'promethee/write/add_button'"></ng-include>
   </div>
+
+  <div class="promethee-editor__inspector" ng-class="{'promethee-editor__inspector--open': inspected.component}">
+    <div class="promethee-editor__inspector-header">
+      <div class="pull-right">
+        <span ng-click="inspected.component = null"><%= fa_icon 'window-close' %></span>
+      </div>
+      <h5 ng-if="inspected.component">{{inspected.component.type}}</h5>
+    </div>
+
+    <div ng-if="inspected.component" class="promethee-editor__inspector-content">
+      <ng-include src="'promethee/inspector/component/' + inspected.component.type"></ng-include>
+    </div>
+  </div>
 </script>

data/app/views/promethee/edit/inspector/component/_column.html.erb

@@ -0,0 +1,10 @@
+<script type="text/ng-template" id="promethee/inspector/component/column">
+  <div class="form-group">
+    <label class="label-control">Size</label>
+    <input ng-model="inspected.component.attributes.size" class="form-control" type="number"/>
+  </div>
+  <div class="form-group">
+    <label class="label-control">Offset</label>
+    <input ng-model="inspected.component.attributes.offset" class="form-control" type="number"/>
+  </div>
+</script>

data/app/views/promethee/edit/inspector/component/_cover.html.erb

@@ -0,0 +1,6 @@
+<script type="text/ng-template" id="promethee/inspector/component/cover">
+  <div class="form-group">
+    <label class="label-control">Image Url</label>
+    <input ng-model="inspected.component.attributes.src" class="form-control" type="text"/>
+  </div>
+</script>

data/app/views/promethee/edit/inspector/component/_details.html.erb

@@ -0,0 +1,6 @@
+<script type="text/ng-template" id="promethee/inspector/component/details">
+  <div class="form-group">
+    <label class="label-control">Summary</label>
+    <input ng-model="inspected.component.attributes.summary" class="form-control" type="text"/>
+  </div>
+</script>

data/app/views/promethee/edit/inspector/component/_image.html.erb

@@ -0,0 +1,23 @@
+<script type="text/ng-template" id="promethee/inspector/component/image">
+  <div class="form-group">
+    <label class="label-control">Url</label>
+    <input class="form-control" ng-model="inspected.component.attributes.src">
+  </div>
+
+  <div class="form-group">
+    <label class="label-control">Alt</label>
+    <input class="form-control" ng-model="inspected.component.attributes.alt">
+  </div>
+
+  <div class="form-group">
+    <label class="label-control">Caption</label>
+    <summernote config="{
+      toolbar: [
+        ['headline', ['style']],
+        ['style', ['bold', 'italic']],
+        ['alignment', ['ul', 'ol', 'paragraph']],
+        ['code', ['codeview']]
+      ]
+    }" ng-model="inspected.component.attributes.caption"></summernote>
+  </div>
+</script>

data/app/views/promethee/edit/inspector/component/_row.html.erb

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/inspector/component/row">
+  No option for row.
+</script>

data/app/views/promethee/edit/inspector/component/_slider.html.erb

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/inspector/component/slider">
+  No option for slider.
+</script>

data/app/views/promethee/edit/inspector/component/_text.html.erb

@@ -0,0 +1,13 @@
+<script type="text/ng-template" id="promethee/inspector/component/text">
+  <ul class="list-group">
+    <li class="list-group-item">
+      Number of words
+      <span class="badge badge-primary badge-pill">{{inspected.component.attributes.body | textContentFromHTML: 'distinctParagraphs' | numberOfWords}}</span>
+    </li>
+
+    <li class="list-group-item">
+      Number of characters
+      <span class="badge badge-primary badge-pill">{{inspected.component.attributes.body | textContentFromHTML | numberOfCharacters}}</span>
+    </li>
+  </ul>
+</script>

data/app/views/promethee/edit/inspector/component/_video.html.erb

@@ -0,0 +1,6 @@
+<script type="text/ng-template" id="promethee/inspector/component/video">
+  <div class="form-group">
+    <label class="label-control">Url</label>
+    <input ng-model="inspected.component.attributes.url" class="form-control" type="text"/>
+  </div>
+</script>

data/app/views/promethee/edit/write/_toolbar.html.erb

@@ -1,6 +1,5 @@
 <script type="text/ng-template" id="promethee/write/toolbar">
   <div class="pull-right">
-    <span ng-click="toggleEdit()" class="promethee-editor__button"><%= fa_icon 'pencil-square' %></span>
     <span ng-click="remove(component, components)" class="promethee-editor__button"><%= fa_icon 'window-close' %></span>
   </div>
 </script>

data/app/views/promethee/edit/write/component/_column.html.erb

@@ -8,48 +8,46 @@
       promethee-editor__component--column
     "
     ng-controller="ColumnController"
+    ng-click="edit($event);"
   >
-    <div class="promethee-editor__toolbar">
-      Column
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
-    </div>
-    <div ng-show="editing" class="promethee-editor__wrapper">
-      <div class="form-group">
-        <label class="label-control">Size</label>
-        <input ng-model="component.attributes.size" class="form-control" type="number"/>
-      </div>
-      <div class="form-group">
-        <label class="label-control">Offset</label>
-        <input ng-model="component.attributes.offset" class="form-control" type="number"/>
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Column
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
-    </div>
 
-    <ng-include src="'promethee/write/components'"></ng-include>
+      <ng-include src="'promethee/write/components'"></ng-include>
 
-    <span
-      type="button"
-      class="btn btn-default btn-block"
-      ng-click="addComponentTo(component.children)"
-    >
-      Add component
-    </span>
+      <span
+        type="button"
+        class="btn btn-default btn-block"
+        ng-click="addComponentTo(component.children)"
+      >
+        Add component
+      </span>
+    </div>
   </div>
 </script>
 
 <script>
-  promethee.controller('ColumnController', ['$scope', function($scope) {
-    $scope.editing = false;
+  promethee.controller('ColumnController', ['$scope', 'inspected', function($scope, inspected) {
+    Object.defineProperty($scope, 'editing', {
+      get: function() {
+        return inspected.component == $scope.component;
+      }
+    });
 
-    $scope.edit = function() {
-      $scope.editing = true;
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      inspected.component = $scope.component;
     };
 
     $scope.complete = function() {
-      $scope.editing = false;
+      inspected.component = null;
     };
 
     $scope.toggleEdit = function() {
-      $scope.editing = !$scope.editing;
+      $scope[$scope.editing ? 'complete' : 'edit']();
     };
   }]);
 </script>

data/app/views/promethee/edit/write/component/_cover.html.erb

@@ -1,30 +1,30 @@
 <script type="text/ng-template" id="promethee/write/component/cover">
-  <div ng-controller="CoverController" class="promethee-editor__component promethee-editor__component--cover">
-    <div class="promethee-editor__toolbar">
-      Cover
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
-    </div>
-    <div ng-show="editing" class="promethee-editor__wrapper">
-      <div class="form-group">
-        <label class="label-control">Image Url</label>
-        <input ng-model="component.attributes.src" class="form-control" type="text"/>
+  <div
+    ng-controller="CoverController"
+    class="promethee-editor__component promethee-editor__component--cover"
+    ng-click="edit($event);"
+  >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Cover
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
-    </div>
 
-    <div
-      ng-hide="editing"
-      class="promethee-editor__wrapper promethee-editor__cover-content"
-      ng-bind-html="component.attributes.body | htmlSafe"
-      ng-click="edit()"
-      style="background-image: url('{{component.attributes.src}}')"
-    ></div>
+      <div
+        ng-hide="editing"
+        class="promethee-editor__wrapper promethee-editor__cover-content"
+        ng-bind-html="component.attributes.body | htmlSafe"
+        ng-click="edit()"
+        style="background-image: url('{{component.attributes.src}}')"
+      ></div>
 
-    <div
-      ng-show="editing"
-      class="promethee-editor__wrapper promethee-editor__cover-content"
-      style="background-image: url('{{component.attributes.src}}')"
-    >
-      <summernote config="options" ng-model="component.attributes.body"></summernote>
+      <div
+        ng-show="editing"
+        class="promethee-editor__wrapper promethee-editor__cover-content"
+        style="background-image: url('{{component.attributes.src}}')"
+      >
+        <summernote config="options" ng-model="component.attributes.body"></summernote>
+      </div>
     </div>
   </div>
 </script>
@@ -37,25 +37,29 @@
       type: 'cover',
       attributes: {
         src: 'https://picsum.photos/1920/1080/?random',
-        alt: '',
-        caption: ''
+        body: ''
       }
     }
   });
 
-  promethee.controller('CoverController', ['$scope', function($scope) {
-    $scope.editing = false;
+  promethee.controller('CoverController', ['$scope', 'inspected', function($scopen, inspected) {
+    Object.defineProperty($scope, 'editing', {
+      get: function() {
+        return inspected.component == $scope.component;
+      }
+    });
 
-    $scope.edit = function() {
-      $scope.editing = true;
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      inspected.component = $scope.component;
     };
 
     $scope.complete = function() {
-      $scope.editing = false;
+      inspected.component = null;
     };
 
     $scope.toggleEdit = function() {
-      $scope.editing = !$scope.editing;
+      $scope[$scope.editing ? 'complete' : 'edit']();
     };
 
     $scope.options = {

data/app/views/promethee/edit/write/component/_details.html.erb

@@ -1,30 +1,28 @@
 <script type="text/ng-template" id="promethee/write/component/details">
-  <div  ng-controller="DetailsController"
-        class="promethee-editor__component promethee-editor__component--details">
-    <div class="promethee-editor__toolbar">
-      Details
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
-    </div>
-
-    <div ng-show="editing" class="promethee-editor__wrapper">
-      <div class="form-group">
-        <label class="label-control">Summary</label>
-        <input ng-model="component.attributes.summary" class="form-control" type="text"/>
+  <div
+    ng-controller="DetailsController"
+    class="promethee-editor__component promethee-editor__component--details"
+    ng-click="edit($event);"
+  >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Details
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
-    </div>
 
-    <details>
-      <summary>{{component.attributes.summary}}</summary>
-      <ng-include src="'promethee/write/components'"></ng-include>
+      <details>
+        <summary>{{component.attributes.summary}}</summary>
+        <ng-include src="'promethee/write/components'"></ng-include>
 
-      <span
-        type="button"
-        class="btn btn-default btn-block"
-        ng-click="addComponentTo(component.children)"
-      >
-        Add component
-      </span>
-    </details>
+        <span
+          type="button"
+          class="btn btn-default btn-block"
+          ng-click="addComponentTo(component.children)"
+        >
+          Add component
+        </span>
+      </details>
+    </div>
   </div>
 </script>
 
@@ -41,19 +39,24 @@
     }
   });
 
-  promethee.controller('DetailsController', ['$scope', function($scope) {
-    $scope.editing = false;
+  promethee.controller('DetailsController', ['$scope', 'inspected', function($scope, inspected) {
+    Object.defineProperty($scope, 'editing', {
+      get: function() {
+        return inspected.component == $scope.component;
+      }
+    });
 
-    $scope.edit = function() {
-      $scope.editing = true;
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      inspected.component = $scope.component;
     };
 
     $scope.complete = function() {
-      $scope.editing = false;
+      inspected.component = null;
     };
 
     $scope.toggleEdit = function() {
-      $scope.editing = !$scope.editing;
+      $scope[$scope.editing ? 'complete' : 'edit']();
     };
 
     $scope.options = {

data/app/views/promethee/edit/write/component/_image.html.erb

@@ -1,30 +1,24 @@
 <script type="text/ng-template" id="promethee/write/component/image">
-  <div ng-controller="ImageController" class="promethee-editor__component promethee-editor__component--image">
-    <div class="promethee-editor__toolbar">
-      Image
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
-    </div>
-    <div ng-show="editing" class="promethee-editor__wrapper">
-      <div class="form-group">
-        <label class="label-control">Url</label>
-        <input ng-model="component.attributes.src" class="form-control" type="text"/>
-      </div>
-      <div class="form-group">
-        <label class="label-control">Alt</label>
-        <input ng-model="component.attributes.alt" class="form-control" type="text"/>
+  <div
+    ng-controller="ImageController"
+    class="promethee-editor__component promethee-editor__component--image"
+    ng-click="edit($event);"
+  >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Image
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
-      <div class="form-group">
-        <label class="label-control">Caption</label>
-        <summernote config="options" ng-model="component.attributes.caption"></summernote>
+
+      <figure ng-show="component.attributes.src">
+        <img ng-src="{{component.attributes.src}}" class="img-responsive">
+        <figcaption ng-show="component.attributes.caption" ng-bind-html="component.attributes.caption | htmlSafe"></figcaption>
+      </figure>
+
+      <div ng-hide="component.attributes.src">
+        <p ng-hide="editing" class="text-center">Click to set the image</p>
       </div>
     </div>
-    <figure ng-show="component.attributes.src">
-      <img ng-click="edit()" ng-src="{{component.attributes.src}}" class="img-responsive">
-      <figcaption ng-show="component.attributes.caption" ng-bind-html="component.attributes.caption | htmlSafe"></figcaption>
-    </figure>
-    <div ng-hide="component.attributes.src">
-      <p ng-hide="editing" ng-click="edit()" class="text-center">Click to set the image</p>
-    </div>
   </div>
 </script>
 
@@ -42,19 +36,24 @@
     }
   });
 
-  promethee.controller('ImageController', ['$scope', function($scope) {
-    $scope.editing = false;
+  promethee.controller('ImageController', ['$scope', 'inspected', function($scope, inspected) {
+    Object.defineProperty($scope, 'editing', {
+      get: function() {
+        return inspected.component == $scope.component;
+      }
+    });
 
-    $scope.edit = function() {
-      $scope.editing = true;
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      inspected.component = $scope.component;
     };
 
     $scope.complete = function() {
-      $scope.editing = false;
+      inspected.component = null;
     };
 
     $scope.toggleEdit = function() {
-      $scope.editing = !$scope.editing;
+      $scope[$scope.editing ? 'complete' : 'edit']();
     };
 
     $scope.options = {

data/app/views/promethee/edit/write/component/_row.html.erb

@@ -1,15 +1,18 @@
 <script type="text/ng-template" id="promethee/write/component/row">
-  <div  ng-controller="RowController"
-        class="row promethee-editor__component promethee-editor__component--row">
-    <div class="promethee-editor__toolbar">
-      Row
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
+  <div
+    ng-controller="RowController"
+    class="row promethee-editor__component promethee-editor__component--row"
+    ng-click="edit($event);"
+  >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Row
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+      <ng-include src="'promethee/write/components'"></ng-include>
+      <div class="clearfix"></div>
+      <span class="btn btn-default btn-block" ng-click="addColumn()" style="margin: 0 6px 6px 6px;width: auto">Add column</span>
     </div>
-    <div ng-show="editing" class="promethee-editor__wrapper">
-    </div>
-    <ng-include src="'promethee/write/components'"></ng-include>
-    <div class="clearfix"></div>
-    <span class="btn btn-default btn-block" ng-click="addColumn()" style="margin: 0 6px 6px 6px;width: auto">Add column</span>
   </div>
 </script>
 
@@ -24,7 +27,25 @@
     }
   });
 
-  promethee.controller('RowController', ['$scope', function($scope) {
+  promethee.controller('RowController', ['$scope', 'inspected', function($scope, inspected) {
+    Object.defineProperty($scope, 'editing', {
+      get: function() {
+        return inspected.component == $scope.component;
+      }
+    });
+
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      inspected.component = $scope.component;
+    };
+
+    $scope.complete = function() {
+      inspected.component = null;
+    };
+
+    $scope.toggleEdit = function() {
+      $scope[$scope.editing ? 'complete' : 'edit']();
+    };
 
     $scope.allowedTypes = ['column'];
 
@@ -38,19 +59,5 @@
         children: []
       })
     }
-
-    $scope.editing = false;
-
-    $scope.edit = function() {
-      $scope.editing = true;
-    };
-
-    $scope.complete = function() {
-      $scope.editing = false;
-    };
-
-    $scope.toggleEdit = function() {
-      $scope.editing = !$scope.editing;
-    };
   }]);
 </script>

data/app/views/promethee/edit/write/component/_slider.html.erb

@@ -1,39 +1,44 @@
 <script type="text/ng-template" id="promethee/write/component/slider">
-  <div  ng-controller="SliderController"
-        class="row promethee-editor__component promethee-editor__component--slider">
-    <div class="promethee-editor__toolbar">
-      Slider
+  <div
+    ng-controller="SliderController"
+    class="row promethee-editor__component promethee-editor__component--slider"
+    ng-click="edit($event);"
+  >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Slider
 
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
 
-      <div class="pull-right">
-        <span ng-show="editing" ng-click="prev()" class="promethee-editor__button"><%= fa_icon 'chevron-left' %></span>
-        <span ng-show="editing" ng-click="next()" class="promethee-editor__button"><%= fa_icon 'chevron-right' %></span>
+        <div class="pull-right">
+          <span ng-show="editing" ng-click="prev()" class="promethee-editor__button"><%= fa_icon 'chevron-left' %></span>
+          <span ng-show="editing" ng-click="next()" class="promethee-editor__button"><%= fa_icon 'chevron-right' %></span>
+        </div>
       </div>
-    </div>
 
-    <div id="{{sliderId}}" class="carousel slide" data-ride="carousel" ng-init="components = component.children">
-      <div class="carousel-inner" style="min-height: 100px">
-        <div ng-repeat="component in components track by $index" class="item" ng-class="{active: $index === 0}">
-          <ng-include src="'promethee/' + (editing ? 'write' : 'move') + '/component'"></ng-include>
+      <div id="{{sliderId}}" class="carousel slide" data-ride="carousel" ng-init="components = component.children">
+        <div class="carousel-inner" style="min-height: 100px">
+          <div ng-repeat="component in components track by $index" class="item" ng-class="{active: $index === 0}">
+            <ng-include src="'promethee/' + (editing ? 'write' : 'move') + '/component'"></ng-include>
+          </div>
         </div>
+
+        <a ng-hide="editing" ng-click="$event.preventDefault()" class="left carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="prev">
+          <%= fa_icon 'angle-left' %>
+        </a>
+        <a ng-hide="editing" ng-click="$event.preventDefault()" class="right carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="next">
+          <%= fa_icon 'angle-right' %>
+        </a>
       </div>
 
-      <a ng-hide="editing" ng-click="$event.preventDefault()" class="left carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="prev">
-        <%= fa_icon 'angle-left' %>
-      </a>
-      <a ng-hide="editing" ng-click="$event.preventDefault()" class="right carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="next">
-        <%= fa_icon 'angle-right' %>
-      </a>
+      <span
+        type="button"
+        class="btn btn-default btn-block"
+        ng-click="addComponentTo(component.children);goToLastItem();"
+      >
+        Add item
+      </span>
     </div>
-
-    <span
-      type="button"
-      class="btn btn-default btn-block"
-      ng-click="addComponentTo(component.children);goToLastItem();"
-    >
-      Add item
-    </span>
   </div>
 </script>
 
@@ -48,7 +53,24 @@
     }
   });
 
-  promethee.controller('SliderController', ['$scope', '$element', function($scope, $element) {
+  promethee.controller('SliderController', ['$scope', '$element', 'inspected', function($scope, $element, inspected) {
+    $scope.editing = false;
+
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      $scope.editing = true;
+      inspected.component = $scope.component;
+    };
+
+    $scope.complete = function() {
+      $scope.editing = false;
+      inspected.component = null;
+    };
+
+    $scope.toggleEdit = function() {
+      $scope[$scope.editing ? 'complete' : 'edit']();
+    };
+
     $scope.sliderId = 'slider-' + Date.now() + '-' + Math.floor(Math.random()*1000000);
 
     $scope.$watch('editing', function(newVal) {
@@ -71,7 +93,5 @@
     };
 
     $element.find('.carousel').carousel();
-
-    // element.ready(function() { this.find('.carousel').carousel() });
   }]);
 </script>

data/app/views/promethee/edit/write/component/_text.html.erb

@@ -1,15 +1,20 @@
 <script type="text/ng-template" id="promethee/write/component/text">
-  <div  ng-controller="TextController"
-        class="promethee-editor__component promethee-editor__component--text">
-    <div class="promethee-editor__toolbar">
-      Text
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
-    </div>
-    <div ng-show="editing">
-      <summernote config="options" ng-model="component.attributes.body"></summernote>
-    </div>
-    <div ng-hide="editing">
-      <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe" ng-click="edit()"></div>
+  <div
+    ng-controller="TextController"
+    class="promethee-editor__component promethee-editor__component--text"
+    ng-click="edit($event);"
+  >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Text
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+      <div ng-show="editing">
+        <summernote config="options" ng-model="component.attributes.body"></summernote>
+      </div>
+      <div ng-hide="editing">
+        <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe"></div>
+      </div>
     </div>
   </div>
 </script>
@@ -26,19 +31,24 @@
     }
   });
 
-  promethee.controller('TextController', ['$scope', function($scope) {
-    $scope.editing = false;
+  promethee.controller('TextController', ['$scope', 'inspected', function($scope, inspected) {
+    Object.defineProperty($scope, 'editing', {
+      get: function() {
+        return inspected.component == $scope.component;
+      }
+    });
 
-    $scope.edit = function() {
-      $scope.editing = true;
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      inspected.component = $scope.component;
     };
 
     $scope.complete = function() {
-      $scope.editing = false;
+      inspected.component = null;
     };
 
     $scope.toggleEdit = function() {
-      $scope.editing = !$scope.editing;
+      $scope[$scope.editing ? 'complete' : 'edit']();
     };
 
     $scope.options = {

data/app/views/promethee/edit/write/component/_video.html.erb

@@ -1,18 +1,18 @@
 <script type="text/ng-template" id="promethee/write/component/video">
-  <div  ng-controller="VideoController"
-        class="promethee-editor__component promethee-editor__component--video">
-    <div class="promethee-editor__toolbar">
-      Video
-      <ng-include src="'promethee/write/toolbar'"></ng-include>
-    </div>
-    <div ng-show="editing" class="promethee-editor__wrapper">
-      <div class="form-group">
-        <label class="label-control">Url</label>
-        <input ng-model="component.attributes.url" class="form-control" type="text"/>
+  <div
+    ng-controller="VideoController"
+    class="promethee-editor__component promethee-editor__component--video"
+    ng-click="edit($event);"
+  >
+    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
+      <div class="promethee-editor__toolbar">
+        Video
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+
+      <div class="embed-responsive embed-responsive-16by9">
+        <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>
       </div>
-    </div>
-    <div class="embed-responsive embed-responsive-16by9">
-      <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>
     </div>
   </div>
 </script>
@@ -29,19 +29,24 @@
     }
   });
 
-  promethee.controller('VideoController', ['$scope', function($scope) {
-    $scope.editing = false;
+  promethee.controller('VideoController', ['$scope', 'inspected', function($scope, inspected) {
+    Object.defineProperty($scope, 'editing', {
+      get: function() {
+        return inspected.component == $scope.component;
+      }
+    });
 
-    $scope.edit = function() {
-      $scope.editing = true;
+    $scope.edit = function(event) {
+      event.stopPropagation();
+      inspected.component = $scope.component;
     };
 
     $scope.complete = function() {
-      $scope.editing = false;
+      inspected.component = null;
     };
 
     $scope.toggleEdit = function() {
-      $scope.editing = !$scope.editing;
+      $scope[$scope.editing ? 'complete' : 'edit']();
     };
 
     Object.defineProperty($scope, 'embed', {

data/lib/promethee/rails/version.rb

@@ -1,5 +1,5 @@
 module Promethee
   module Rails
-    VERSION = '1.0.19'
+    VERSION = '1.0.20'
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: promethee
 version: !ruby/object:Gem::Version
-  version: 1.0.19
+  version: 1.0.20
 platform: ruby
 authors:
 - Julien Dargelos
@@ -11,7 +11,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-01-05 00:00:00.000000000 Z
+date: 2018-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -239,6 +239,14 @@ files:
 - app/views/promethee/edit/_move.html.erb
 - app/views/promethee/edit/_preview.html.erb
 - app/views/promethee/edit/_write.html.erb
+- app/views/promethee/edit/inspector/component/_column.html.erb
+- app/views/promethee/edit/inspector/component/_cover.html.erb
+- app/views/promethee/edit/inspector/component/_details.html.erb
+- app/views/promethee/edit/inspector/component/_image.html.erb
+- app/views/promethee/edit/inspector/component/_row.html.erb
+- app/views/promethee/edit/inspector/component/_slider.html.erb
+- app/views/promethee/edit/inspector/component/_text.html.erb
+- app/views/promethee/edit/inspector/component/_video.html.erb
 - app/views/promethee/edit/move/_component.html.erb
 - app/views/promethee/edit/move/_components.html.erb
 - app/views/promethee/edit/move/component/_column.html.erb
@@ -371,7 +379,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.12
+rubygems_version: 2.6.13
 signing_key: 
 specification_version: 4
 summary: Bring fire to your page