promethee 1.1.0 → 1.2.0

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

@@ -27,23 +27,27 @@ promethee_data = Promethee::Data.new master_data, localization_data: localizatio
     };
 
   }]);
-
-  angular.element(function() {
-    angular.bootstrap(document.getElementById('prometheeLocalizer'), ['PrometheeLocalizer']);
-  });
 </script>
 
+
 <div id="prometheeLocalizer"
      class="promethee-localizer"
      ng-app="PrometheeLocalizer"
      ng-controller="PrometheeLocalizerController as prometheeLocalizerController">
+
+  <script type="text/ng-template" id="promethee/localize/component">
+    <ng-include src="'promethee/components/' + component.type + '/localize'"></ng-include>
+  </script>
+  
   <input type="hidden" name="localization[data]" id="page_data" value="{{data}}" />
 
-  <%= render 'promethee/localize/component' %>
-  <% Dir[__dir__ + '/localize/component/*.html.erb'].map do |file| %>
-    <%= render "promethee/localize/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
+  <% Dir["#{__dir__}/components/*/_localize.html.erb"].map do |file| %>
+    <% partial = file.split('app/views/').last.gsub('.html.erb', '').gsub('/_', '/') %>
+    <%= render partial %>
   <% end %>
 
+  <% #TODO override templates from current project %>
+
   <div ng-repeat="component in component.children">
     <ng-include src="'promethee/localize/component'"></ng-include>
   </div>

data/app/views/promethee/{edit/inspector/component/_column.html.erb → components/column/_edit.inspect.html.erb}

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

data/app/views/promethee/{edit/move/component/_column.html.erb → components/column/_edit.move.html.erb}

@@ -1,11 +1,11 @@
-<script type="text/ng-template" id="promethee/move/component/column">
+<script type="text/ng-template" id="promethee/components/column/edit/move">
   <div class="col col-md-{{component.attributes.size}} col-md-offset-{{component.attributes.offset}}">
     <div class="header">Column</div>
     <ng-include src="'promethee/move/components'"></ng-include>
     <div 
-      class=" promethee-editor__move__droppable
-              promethee-editor__move__droppable--row
-              promethee-editor__move__droppable--row--inside-column"
+      class=" promethee-edit__move__droppable
+              promethee-edit__move__droppable--row
+              promethee-edit__move__droppable--row--inside-column"
       droppable
       data-index="{{$index+1}}"
       data-type="{{type}}"

data/app/views/promethee/components/column/_edit.write.html.erb

@@ -0,0 +1,17 @@
+<script type="text/ng-template" id="promethee/components/column/edit/write">
+  <div  ng-click="inspect(component, $event)"
+        class=" col
+                col-md-{{component.attributes.size}}
+                col-md-offset-{{component.attributes.offset}}
+                promethee-edit__component
+                promethee-edit__component--column">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
+        Column
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+      <ng-include src="'promethee/write/components'"></ng-include>
+      <ng-include src="'promethee/write/add_button'"></ng-include>
+    </div>
+  </div>
+</script>

data/app/views/promethee/components/column/_localize.html.erb

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/components/column/localize">
+
+</script>

data/app/views/promethee/components/cover/_edit.define.html.erb

@@ -0,0 +1,13 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
+    name: 'Cover',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'cover',
+      attributes: {
+        src: 'https://picsum.photos/1920/1080/?random',
+        body: ''
+      }
+    }
+  });
+</script>

data/app/views/promethee/{edit/inspector/component/_cover.html.erb → components/cover/_edit.inspect.html.erb}

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

data/app/views/promethee/components/cover/_edit.move.html.erb

@@ -0,0 +1,7 @@
+<script type="text/ng-template" id="promethee/components/cover/edit/move">
+  <div  class=" promethee-edit__wrapper 
+                promethee-edit__cover-content"
+        ng-bind-html="component.attributes.body | htmlSafe"
+        style="background-image: url('{{component.attributes.src}}')">    
+  </div>
+</script>

data/app/views/promethee/components/cover/_edit.write.html.erb

@@ -0,0 +1,39 @@
+<script type="text/ng-template" id="promethee/components/cover/edit/write">
+  <div  ng-controller="CoverController"
+        ng-click="inspect(component, $event)"
+        class=" promethee-edit__component 
+                promethee-edit__component--cover">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
+        Cover
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+      <div  ng-hide="editing"
+            class=" promethee-edit__wrapper 
+                    promethee-edit__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-edit__wrapper 
+                    promethee-edit__cover-content"
+            style="background-image: url('{{component.attributes.src}}')">
+        <summernote config="options" ng-model="component.attributes.body"></summernote>
+      </div>
+    </div>
+  </div>
+</script>
+
+<script>
+  promethee.controller('CoverController', ['$scope', function($scopen) {
+    $scope.options = {
+      toolbar: [
+        ['headline', ['style']],
+        ['style', ['bold', 'italic']],
+        ['alignment', ['ul', 'ol', 'paragraph']],
+        ['code', ['codeview']]
+      ]
+    };
+  }]);
+</script>

data/app/views/promethee/{localize/component/_cover.html.erb → components/cover/_localize.html.erb}

@@ -1,11 +1,13 @@
-<script type="text/ng-template" id="promethee/localize/component/cover">
+<script type="text/ng-template" id="promethee/components/cover/localize">
   <div class="row">
     <div class="col-md-6">
+      <b>Local</b>
       <summernote config="options" ng-model="component.attributes.body"></summernote>
     </div>
     <div class="col-md-6">
       <b>Master</b>
-      <div class="promethee-editor__wrapper" ng-bind-html="component.master.attributes.body | htmlSafe"></div>
+      <div class="promethee-edit__wrapper" ng-bind-html="component.master.attributes.body | htmlSafe"></div>
     </div>
   </div>
+  <hr>
 </script>

data/app/views/promethee/components/details/_edit.define.html.erb

@@ -0,0 +1,13 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
+    name: 'Details',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'details',
+      children: [],
+      attributes: {
+        summary: 'Edit me'
+      }
+    }
+  });
+</script>

data/app/views/promethee/{edit/inspector/component/_details.html.erb → components/details/_edit.inspect.html.erb}

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

data/app/views/promethee/{edit/move/component/_details.html.erb → components/details/_edit.move.html.erb}

@@ -1,4 +1,4 @@
-<script type="text/ng-template" id="promethee/move/component/details">
+<script type="text/ng-template" id="promethee/components/details/edit/move">
   <details>
     <summary>{{component.attributes.summary}}</summary>
     <ng-include src="'promethee/move/components'"></ng-include>

data/app/views/promethee/components/details/_edit.write.html.erb

@@ -0,0 +1,35 @@
+<script type="text/ng-template" id="promethee/components/details/edit/write">
+  <div  ng-controller="DetailsController"
+        ng-click="inspect(component, $event)"
+        class=" promethee-edit__component 
+                promethee-edit__component--details">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
+        Details
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+      <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>
+    </div>
+  </div>
+</script>
+
+<script>
+  promethee.controller('ImageController', ['$scope', function($scope) {
+    $scope.options = {
+      toolbar: [
+        ['headline', ['style']],
+        ['style', ['bold', 'italic']],
+        ['alignment', ['ul', 'ol', 'paragraph']],
+        ['code', ['codeview']]
+      ]
+    };
+  }]);
+</script>

data/app/views/promethee/{localize/component/_details.html.erb → components/details/_localize.html.erb}

@@ -1,6 +1,7 @@
-<script type="text/ng-template" id="promethee/localize/component/details">
+<script type="text/ng-template" id="promethee/components/cover/localize">
   <div class="row">
     <div class="col-md-6">
+      <b>Local</b>
       <input ng-model="component.attributes.summary" type="text" class="form-control">
     </div>
     <div class="col-md-6">
@@ -8,4 +9,5 @@
       <input ng-model="component.master.attributes.summary" type="text" class="form-control" disabled/>
     </div>
   </div>
+  <hr>
 </script>

data/app/views/promethee/components/image/_edit.define.html.erb

@@ -0,0 +1,14 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
+    name: 'Image',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'image',
+      attributes: {
+        src: 'https://picsum.photos/1920/1080/?random',
+        alt: '',
+        caption: ''
+      }
+    }
+  });
+</script>

data/app/views/promethee/{edit/inspector/component/_image.html.erb → components/image/_edit.inspect.html.erb}

@@ -1,4 +1,4 @@
-<script type="text/ng-template" id="promethee/inspector/component/image">
+<script type="text/ng-template" id="promethee/components/image/edit/inspect">
   <div class="form-group">
     <label class="label-control">Url</label>
     <input class="form-control" ng-model="promethee.inspected.attributes.src">

data/app/views/promethee/{edit/move/component/_image.html.erb → components/image/_edit.move.html.erb}

@@ -1,4 +1,4 @@
-<script type="text/ng-template" id="promethee/move/component/image">
+<script type="text/ng-template" id="promethee/components/image/edit/move">
   <figure>
     <img ng-src="{{component.attributes.src}}" class="img-responsive">
     <figcaption ng-show="component.attributes.caption" ng-bind-html="component.attributes.caption | htmlSafe"></figcaption>

data/app/views/promethee/{edit/write/component/_image.html.erb → components/image/_edit.write.html.erb}

@@ -1,20 +1,17 @@
-<script type="text/ng-template" id="promethee/write/component/image">
-  <div
-    ng-controller="ImageController"
-    ng-click="inspect(component, $event)"
-    class="promethee-editor__component promethee-editor__component--image"
-    >
-    <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': promethee.inspected === component}">
-      <div class="promethee-editor__toolbar">
+<script type="text/ng-template" id="promethee/components/image/edit/write">
+  <div  ng-controller="ImageController"
+        ng-click="inspect(component, $event)"
+        class=" promethee-edit__component
+                promethee-edit__component--image">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
         Image
         <ng-include src="'promethee/write/toolbar'"></ng-include>
       </div>
-
       <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>
@@ -23,19 +20,6 @@
 </script>
 
 <script>
-  angular.injector(['ng', 'Promethee']).get('definitions').push({
-    name: 'Image',
-    thumb: 'http://via.placeholder.com/300x200',
-    data: {
-      type: 'image',
-      attributes: {
-        src: 'https://picsum.photos/1920/1080/?random',
-        alt: '',
-        caption: ''
-      }
-    }
-  });
-
   promethee.controller('ImageController', ['$scope', function($scope) {
     $scope.options = {
       toolbar: [

data/app/views/promethee/{localize/component/_image.html.erb → components/image/_localize.html.erb}

@@ -1,13 +1,16 @@
-<script type="text/ng-template" id="promethee/localize/component/image">
+<script type="text/ng-template" id="promethee/components/image/localize">
   <div class="row">
     <div class="col-md-6">
+      <b>Local</b>
       <input ng-model="component.attributes.alt" type="text" class="form-control">
       <summernote config="options" ng-model="component.attributes.caption"></summernote>
     </div>
     <div class="col-md-6">
       <b>Master</b>
+      <img ng-src="{{component.master.attributes.src}}" class="img-responsive" />
       <input ng-model="component.master.attributes.alt" type="text" class="form-control" disabled/>
-      <div class="promethee-editor__wrapper" ng-bind-html="component.master.attributes.caption | htmlSafe"></div>
+      <div class="promethee-edit__wrapper" ng-bind-html="component.master.attributes.caption | htmlSafe"></div>
     </div>
   </div>
+  <hr>
 </script>

data/app/views/promethee/components/row/_edit.define.html.erb

@@ -0,0 +1,11 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
+    name: 'Row',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'row',
+      attributes: {},
+      children: []
+    }
+  });
+</script>

data/app/views/promethee/components/row/_edit.inspect.html.erb

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

data/app/views/promethee/{edit/move/component/_row.html.erb → components/row/_edit.move.html.erb}

@@ -1,4 +1,4 @@
-<script type="text/ng-template" id="promethee/move/component/row">
+<script type="text/ng-template" id="promethee/components/row/edit/move">
   <div class="header">Row</div>
   <div class="row">
     <ng-include src="'promethee/move/components'"></ng-include>

data/app/views/promethee/components/row/_edit.write.html.erb

@@ -0,0 +1,33 @@
+<script type="text/ng-template" id="promethee/components/row/edit/write">
+  <div  ng-controller="RowController"
+        ng-click="inspect(component, $event)"
+        class=" row 
+                promethee-edit__component
+                promethee-edit__component--row">
+    <div class="promethee-edit__component-selected" ng-class="{'promethee-edit__component-selected--visible': promethee.inspected === component}">
+      <div class="promethee-edit__toolbar">
+        Row
+        <ng-include src="'promethee/write/toolbar'"></ng-include>
+      </div>
+      <ng-include src="'promethee/write/components'"></ng-include>
+      <div class="clearfix"></div>
+      <a ng-click="addColumn()" class="promethee-edit__adder__button"><%= fa_icon :columns, class: "fa-2x" %></a>
+    </div>
+  </div>
+</script>
+
+<script>
+  promethee.controller('RowController', ['$scope', function($scope) {
+    $scope.addColumn = function() {
+      this.component.children.push({
+        type: 'column',
+        attributes: {
+          size: 4,
+          offset: 0
+        },
+        children: []
+      })
+    }
+  }]);
+</script>
+

data/app/views/promethee/components/row/_localize.html.erb

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/components/row/localize">
+
+</script>

data/app/views/promethee/components/slider/_edit.define.html.erb

@@ -0,0 +1,11 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
+    name: 'Slider',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'slider',
+      attributes: {},
+      children: []
+    }
+  });
+</script>

data/app/views/promethee/components/slider/_edit.inspect.html.erb

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

data/app/views/promethee/{edit/move/component/_slider.html.erb → components/slider/_edit.move.html.erb}

@@ -1,6 +1,5 @@
-<script type="text/ng-template" id="promethee/move/component/slider">
-  <h1>Slider</h1>
-
+<script type="text/ng-template" id="promethee/components/slider/edit/move">
+  <div class="header">Slider</div>
   <div ng-if="component.children.length > 0" ng-init="component = component.children[0]">
     <ng-include src="'promethee/move/component'"></ng-include>
   </div>