promethee 0.1.3 → 0.1.5

data/app/assets/stylesheets/promethee.sass

@@ -1,4 +1,3 @@
-// @import 'promethee/colors'
 @import 'bootstrap'
 
-.promethee
+.promethee

data/app/controllers/promethee_controller.rb

@@ -0,0 +1,8 @@
+class PrometheeController < ApplicationController
+  # This is acceptable because the iframe is sandboxed
+  skip_before_action :verify_authenticity_token
+
+  def preview
+    @data = params[:data]
+  end
+end

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

@@ -1,16 +1,11 @@
 <%
-promethee_id = "promethee-#{SecureRandom.hex 10}"
-promethee_data = promethee.data
-promethee_data = promethee_data.to_json unless promethee_data.is_a? String
+data = data.to_json unless data.is_a? String
 %>
 
 <script>
   var promethee = angular
-    .module('<%= promethee_id %>', ['ui.tinymce', 'dndLists'])
-    .constant('data', <%= promethee_data.html_safe %>)
-    .value('state', {
-      editing: false
-    })
+    .module('Promethee', ['ui.tinymce', 'ngAnimate'])
+    .value('data', <%= data.html_safe %>)
     .value('definitions', [])
     .filter('htmlSafe', ['$sce', function($sce) {
       return function(val) {
@@ -28,111 +23,43 @@ promethee_data = promethee_data.to_json unless promethee_data.is_a? String
         return val[0].toUpperCase() + val.substring(1).toLowerCase();
       };
     });
-</script>
-
-<div id="<%= promethee_id %>"
-     class="promethee-editor"
-     ng-app="<%= promethee_id %>"
-     ng-controller="PrometheeController as prometheeController"
-     ng-class="{
-       'fullscreen': fullscreen,
-       'promethee-editor--preview': preview,
-       'promethee-editor--preview--mobile': preview && previewMode == 'mobile',
-       'promethee-editor--preview--tablet': preview && previewMode == 'tablet',
-       'promethee-editor--preview--desktop': preview && previewMode == 'desktop'
-     }">
-
-  <% # TODO custom views %>
-  <% Dir['app/views/promethee/components/*'].each do |file| %>
-  <% end %>
-  <% # TODO iterate over files in gem %>
-  <% ['index', 'show', 'row', 'column', 'text', 'image', 'video'].each do |type| %>
-    <%= render partial: "promethee/components/#{type}_edit", locals: { promethee_id: promethee_id } %>
-  <% end %>
-
-  <input type="hidden" name="page[data]" id="page_data" value="{{data}}" />
 
-  <nav class="navbar navbar-default">
-    <div class="container-fluid">
-      <div class="navbar-header">
-        <%= image_tag 'icon-promethee.png', class: 'navbar-brand' %>
-      </div>
-      <div id="navbar">
-        <ul class="nav navbar-nav navbar-right">
-          <li ng-click="enablePreview()" ng-hide="preview"><a><%= fa_icon :eye %></a></li>
-          <li ng-click="previewMode = 'mobile'" ng-class="{ active: previewMode == 'mobile' }" ng-show="preview">
-            <a><%= fa_icon :mobile %></a>
-          </li>
-          <li ng-click="previewMode = 'tablet'" ng-class="{ active: previewMode == 'tablet' }" ng-show="preview"><a>
-            <%= fa_icon :tablet %></a>
-          </li>
-          <li ng-click="previewMode = 'desktop'" ng-class="{ active: previewMode == 'desktop' }" ng-show="preview"><a>
-            <%= fa_icon :desktop %></a>
-          </li>
-          <li ng-click="disablePreview()" ng-show="preview"><a><%= fa_icon 'eye-slash' %></a>
-          </li>
-          <li ng-click="enableFullscreen()" ng-hide="fullscreen"><a><%= fa_icon :expand %></a></li>
-          <li ng-click="disableFullscreen()" ng-show="fullscreen"><a><%= fa_icon :compress %></a></li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-  <div class="promethee-editor__page" ng-class="{ 'container-fluid': fullscreen }">
-    <ng-include src="'promethee/components/index'"></ng-include>
-  </div>
-
-  <span type="button" class="btn btn-default btn-block" ng-click="addComponentTo(data)" style="margin-bottom: 6px">Add component</span>
-
-  <div class="promethee-editor__adder" ng-controller="AdderController">
-    <div class="modal fade in" tabindex="-1" role="dialog" style="display: {{adding ? 'block' : 'none'}}">
-      <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" ng-click="close()"><span aria-hidden="true">&times;</span></button>
-            <h4 class="modal-title">Select component</h4>
-          </div>
-          <div class="modal-body">
-            <div class="row">
-              <div  ng-repeat="definition in definitions"
-                    ng-click="pushComponent(definition)"
-                    class="col-md-3">
-                <div class="thumbnail">
-                  <img ng-src="{{definition.thumb}}" class="img-responsive">
-                  <h4>{{definition.name}}</h4>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Work in progress -->
-  <!-- <iframe id="iframe"></iframe> !-->
-</div>
-
-<script>
-  promethee.controller('PrometheeController', ['data', '$scope', 'definitions', function(data, $scope, definitions) {
+  promethee.controller('PrometheeController', ['data', '$scope', 'definitions', '$http', function(data, $scope, definitions, $http) {
+    
+    // Data (TODO use Adder and probably page definition to init)
     if (data === null || data === '') {
-      data = [];
+      data = {
+        type: 'page', 
+        children: []
+      };
     }
     $scope.data = data;
+    // $scope.component = {
+    //   children: data
+    // };
+
+    // Preview modes
     $scope.fullscreen = false;
+    $scope.move = false;
     $scope.preview = false;
     $scope.previewMode = 'desktop';
-    $scope.component = {
-      children: data
-    };
-
-    $scope.allowedTypes = definitions.map(function(definition) {
-      return definition.data.type;
-    });
 
     $scope.enablePreview = function() {
       this.preview = true;
-      // Work in progress
-      // document.getElementById('iframe').contentWindow.document.documentElement.innerHTML = document.documentElement.innerHTML;
+      this.move = false;
+
+      var form = document.createElement('form');
+      document.body.appendChild(form);
+      form.method = 'POST';
+      form.action = 'promethee/preview';
+      form.target = 'preview';
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.value = JSON.stringify(data);
+      input.name = 'data';
+      form.appendChild(input);
+      form.submit();
+      document.body.removeChild(form);
     }
 
     $scope.disablePreview = function() {
@@ -147,26 +74,28 @@ promethee_data = promethee_data.to_json unless promethee_data.is_a? String
       this.fullscreen = false;
     }
 
-  }]);
-
-  promethee.controller('AdderController', ['$scope', '$rootScope', 'definitions', function($scope, $rootScope, definitions) {
-
-    $scope.adding = null;
-    $scope.definitions = definitions;
-
-    $scope.close = function() {
-      $scope.adding = null;
-    };
-
-    $scope.pushComponent = function(definition) {
-      var definition = angular.copy(definition.data);
-      $scope.adding.push(definition);
-      $scope.close();
-    };
-
-    $rootScope.addComponentTo = function(components) {
-      $scope.adding = components;
-    };
+    $scope.remove = function(component, components) {
+      var index = components.indexOf(component);
+      components.splice(index, 1);
+    }
 
   }]);
+
 </script>
+
+<div id="promethee"
+     class="promethee-editor"
+     ng-app="Promethee"
+     ng-controller="PrometheeController as prometheeController"
+     ng-class="{
+       'promethee-editor--fullscreen': fullscreen,
+       'promethee-editor--move': move,
+       'promethee-editor--preview': preview
+     }">
+  <input type="hidden" name="page[data]" id="page_data" value="{{data}}" />
+  <%= render 'promethee/partials/include_components' %>
+  <%= render 'promethee/partials/navbar' %>
+  <%= render 'promethee/partials/preview' %>
+  <%= render 'promethee/partials/mover' %>
+  <%= render 'promethee/partials/page' %>
+</div>

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

@@ -2,5 +2,5 @@
 data = JSON.parse data, symbolize_names: true if data.is_a? String
 %>
 <div class="promethee">
-  <%= render partial: 'promethee/components/index', locals: { components: data } %>
+  <%= render 'promethee/components/page', page: data %>
 </div>

data/app/views/promethee/components/_children.html.erb

@@ -0,0 +1,4 @@
+<% children.each do |component| %>
+  <% type = component[:type] %>
+  <%= render "promethee/components/#{type}", component: component %>
+<% end %>

data/app/views/promethee/components/_children_edit.html.erb

@@ -0,0 +1,5 @@
+<script type="text/ng-template" id="promethee/components/children">
+  <div ng-repeat="component in component.children">
+    <ng-include src="'promethee/components/' + component.type"></ng-include>
+  </div>
+</script>

data/app/views/promethee/components/_column.html.erb

@@ -4,5 +4,5 @@ offset = component[:attributes][:offset]
 children = component[:children]
 %>
 <div class="col col-md-<%= size %><%= " col-md-offset-#{offset}" if offset > 0 %> <%= promethee_class_for component %>">
-  <%= render partial: 'promethee/components/index', locals: { components: children } %>
+  <%= render 'promethee/components/children', children: children %>
 </div>

data/app/views/promethee/components/_column_edit.html.erb

@@ -1,40 +1,42 @@
 <script type="text/ng-template" id="promethee/components/column">
-  <div ng-controller="ColumnController">
-    <div class="col col-md-{{component.attributes.size}} col-md-offset-{{component.attributes.offset}}">
-      <div dnd-draggable="component" dnd-moved="remove()" dnd-type="component.type" class="promethee-editor__component promethee-editor__component--column">
-        <div class="promethee-editor__toolbar">
-          Column
-          <%= render 'promethee/partials/toolbar_buttons' %>
-        </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>
-        </div>
-
-        <ng-include src="'promethee/components/index'"></ng-include>
-
-        <span type="button" class="btn btn-default btn-block" ng-click="addComponentTo(component.children)" style="margin: 0 6px 6px 6px;width: auto">Add component</span>
+  <div class="col 
+              col-md-{{component.attributes.size}} 
+              col-md-offset-{{component.attributes.offset}} 
+              promethee-editor__component 
+              promethee-editor__component--column">
+    <div class="promethee-editor__toolbar">
+      Column
+      <%= render 'promethee/partials/toolbar_buttons' %>
+    </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>
     </div>
-  </div>
-</script>
-
-<script>
-  promethee.controller('ColumnController', ['$scope', 'definitions', function($scope, definitions) {
 
-    $scope.allowedTypes = definitions.map(function(definition) {
-      return definition.data.type;
-    });
+    <ng-include src="'promethee/components/children'"></ng-include>
 
-    $scope.remove = function() {
-      this.components.splice(this.components.indexOf(this.component), 1);
-    };
+    <span type="button" 
+          class="btn btn-default btn-block" 
+          ng-click="addComponentTo(component.children)">Add component</span>
+  </div>
+</script>
 
-  }]);
+<script type="text/ng-template" id="promethee/components/column/move">
+  <div class="col col-md-{{component.attributes.size}} col-md-offset-{{component.attributes.offset}}">
+    <h1>Column</h1>
+    <ng-include src="'promethee/partials/mover'"></ng-include>
+    <div  class=" promethee-editor__mover--droppable 
+                  promethee-editor__mover--droppable--row 
+                  promethee-editor__mover--droppable--row--inside-column" 
+          droppable 
+          data-index="{{$index+1}}"
+          data-type="{{type}}"
+          >
+  </div>
 </script>

data/app/views/promethee/components/_image_edit.html.erb

@@ -1,35 +1,34 @@
 <script type="text/ng-template" id="promethee/components/image">
-  <div ng-controller="ImageController" style="position: relative">
-    <div  dnd-draggable="component"
-          dnd-moved="remove()"
-          dnd-type="component.type"
-          class="promethee-editor__component promethee-editor__component--image promethee-editor__component--final">
-      <div class="promethee-editor__toolbar">
-        Image
-        <%= render 'promethee/partials/toolbar_buttons' %>
-      </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>
-      </div>
-      <div ng-show="component.attributes.src">
-        <img ng-click="edit()" ng-src="{{component.attributes.src}}" class="img-responsive">
+  <div ng-controller="ImageController" class="promethee-editor__component promethee-editor__component--image">
+    <div class="promethee-editor__toolbar">
+      Image
+      <%= render 'promethee/partials/toolbar_buttons' %>
+    </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 ng-hide="component.attributes.src">
-        <p ng-hide="editing" ng-click="edit()" class="text-center">Click to set the image</p>
+      <div class="form-group">
+        <label class="label-control">Alt</label>
+        <input ng-model="component.attributes.alt" class="form-control" type="text"/>
       </div>
     </div>
+    <div ng-show="component.attributes.src">
+      <img ng-click="edit()" ng-src="{{component.attributes.src}}" class="img-responsive">
+    </div>
+    <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>
 
+<script type="text/ng-template" id="promethee/components/image/move">
+  <img ng-src="{{component.attributes.src}}" class="img-responsive">
+</script>
+
 <script>
-  angular.injector(['ng', '<%= promethee_id %>']).get('definitions').push({
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Image',
     thumb: 'http://via.placeholder.com/300x200',
     data: {
@@ -52,9 +51,5 @@
       this.editing = false;
     };
 
-    $scope.remove = function() {
-      this.components.splice(this.components.indexOf(this.component), 1);
-    };
-
   }]);
 </script>

data/app/views/promethee/components/_page.html.erb

@@ -0,0 +1 @@
+<%= render 'promethee/components/children', children: page[:children] %>

data/app/views/promethee/components/_page_edit.html.erb

@@ -0,0 +1,10 @@
+<script type="text/ng-template" id="promethee/components/page">
+  <div  ng-init="component = data"
+        class="promethee-editor__component promethee-editor__component--page">
+    <ng-include src="'promethee/components/children'"></ng-include>
+  </div>
+</script>
+
+<script type="text/ng-template" id="promethee/components/page/move">
+  <ng-include src="'promethee/partials/mover'"></ng-include>
+</script>

data/app/views/promethee/components/_row.html.erb

@@ -1,6 +1,3 @@
-<%
-children = component[:children]
-%>
 <div class="row <%= promethee_class_for component %>">
-  <%= render partial: 'promethee/components/index', locals: { components: children } %>
+  <%= render 'promethee/components/children', children: component[:children] %>
 </div>

data/app/views/promethee/components/_row_edit.html.erb

@@ -1,26 +1,27 @@
 <script type="text/ng-template" id="promethee/components/row">
-  <div ng-controller="RowController">
-    <div class="row">
-      <div dnd-draggable="component" dnd-moved="remove()" dnd-type="component.type" class="promethee-editor__component promethee-editor__component--row">
-        <div class="promethee-editor__toolbar">
-          Row
-          <%= render 'promethee/partials/toolbar_buttons' %>
-        </div>
-        <div ng-show="editing" class="promethee-editor__wrapper">
-          Nothing to edit (yet...)
-        </div>
-
-        <ng-include src="'promethee/components/index'"></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-controller="RowController"
+        class="row promethee-editor__component promethee-editor__component--row">
+    <div class="promethee-editor__toolbar">
+      Row
+      <%= render 'promethee/partials/toolbar_buttons' %>
     </div>
+    <div ng-show="editing" class="promethee-editor__wrapper">
+    </div>
+    <ng-include src="'promethee/components/children'"></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>
+
+<script type="text/ng-template" id="promethee/components/row/move">
+  <h1>Row</h1>
+  <div class="row">
+    <ng-include src="'promethee/partials/mover'"></ng-include>
   </div>
 </script>
 
 <script>
-  angular.injector(['ng', '<%= promethee_id %>']).get('definitions').push({
+  angular.injector(['ng', 'Promethee']).get('definitions').push({
     name: 'Row',
     thumb: 'http://via.placeholder.com/300x200',
     data: {
@@ -38,16 +39,12 @@
       this.component.children.push({
         type: 'column',
         attributes: {
-          size: 3,
+          size: 4,
           offset: 0
         },
         children: []
       })
     }
 
-    $scope.remove = function() {
-      this.components.splice(this.components.indexOf(this.component), 1);
-    };
-
   }]);
 </script>