promethee 0.1.0 → 0.1.1

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

@@ -0,0 +1,19 @@
+=grid-builder-set-gutter-width($width)
+  $was: $grid-gutter-width
+  $grid-gutter-width: $width !global
+
+  .row
+    +make-row
+
+  +make-grid-columns
+  +make-grid(xs)
+  @media(min-width: 768px)
+    +make-grid(sm)
+
+  @media (min-width: 992px)
+    +make-grid(md)
+
+  @media (min-width: 1200px)
+    +make-grid(lg)
+
+  $grid-gutter-width: $was !global

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

@@ -0,0 +1,4 @@
+$promethee-grey: #bbb
+$promethee-transparent-grey: transparentize($promethee-grey, .8)
+
+$promethee-light-grey: #eee

data/app/assets/stylesheets/promethee.sass

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

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

@@ -0,0 +1,172 @@
+<%
+promethee_id = "promethee-#{SecureRandom.hex 10}"
+promethee_data = promethee.data
+promethee_data = promethee_data.to_json unless promethee_data.is_a? String
+%>
+
+<script>
+  var promethee = angular
+    .module('<%= promethee_id %>', ['ui.tinymce', 'dndLists'])
+    .constant('data', <%= promethee_data.html_safe %>)
+    .value('state', {
+      editing: false
+    })
+    .value('definitions', [])
+    .filter('htmlSafe', ['$sce', function($sce) {
+      return function(val) {
+        return $sce.trustAsHtml(val);
+      };
+    }])
+    .filter('urlSafe', ['$sce', function($sce) {
+      return function(val) {
+        return $sce.trustAsResourceUrl(val);
+      };
+    }])
+    .filter('humanize', function() {
+      return function(val) {
+        val = (val + '').replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').replace(/\s\s+/, ' ').trim();
+        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) {
+    if (data === null || data === '') {
+      data = [];
+    }
+    $scope.data = data;
+    $scope.fullscreen = 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;
+    }
+
+    $scope.disablePreview = function() {
+      this.preview = false;
+    }
+
+    $scope.enableFullscreen = function() {
+      this.fullscreen = true;
+    }
+
+    $scope.disableFullscreen = function() {
+      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;
+    };
+
+  }]);
+</script>

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

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

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

@@ -0,0 +1,8 @@
+<%
+size = component[:attributes][:size]
+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 } %>
+</div>

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

@@ -0,0 +1,40 @@
+<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>
+    </div>
+  </div>
+</script>
+
+<script>
+  promethee.controller('ColumnController', ['$scope', 'definitions', function($scope, definitions) {
+
+    $scope.allowedTypes = definitions.map(function(definition) {
+      return definition.data.type;
+    });
+
+    $scope.remove = function() {
+      this.components.splice(this.components.indexOf(this.component), 1);
+    };
+
+  }]);
+</script>

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

@@ -0,0 +1,7 @@
+<%
+src = component[:attributes][:src]
+alt = component[:attributes][:alt]
+%>
+<div class="<%= promethee_class_for component %>">
+  <img class="img-responsive" src="<%= src %>" alt="<%= alt %>">
+</div>

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

@@ -0,0 +1,60 @@
+<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>
+      <div ng-hide="component.attributes.src">
+        <p ng-hide="editing" ng-click="edit()" class="text-center">Click to set the image</p>
+      </div>
+    </div>
+  </div>
+</script>
+
+<script>
+  angular.injector(['ng', '<%= promethee_id %>']).get('definitions').push({
+    name: 'Image',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'image',
+      attributes: {
+        src: 'https://source.unsplash.com/random/1920x1080'
+      }
+    }
+  });
+
+  promethee.controller('ImageController', ['$scope', function($scope) {
+
+    $scope.editing = false;
+
+    $scope.edit = function() {
+      this.editing = true;
+    };
+
+    $scope.complete = function() {
+      this.editing = false;
+    };
+
+    $scope.remove = function() {
+      this.components.splice(this.components.indexOf(this.component), 1);
+    };
+
+  }]);
+</script>

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

@@ -0,0 +1,3 @@
+<% components.each do |component| %>
+  <%= render partial: 'promethee/components/show', locals: { component: component } %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<script type="text/ng-template" id="promethee/components/index">
+  <div class="promethee-editor__components" ng-init="components = component.children" dnd-list="components" dnd-allowed-types="allowedTypes">
+    <div ng-repeat="component in components">
+      <ng-include src="'promethee/components/show'"></ng-include>
+    </div>
+  </div>
+</script>

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

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

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

@@ -0,0 +1,53 @@
+<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>
+  </div>
+</script>
+
+<script>
+  angular.injector(['ng', '<%= promethee_id %>']).get('definitions').push({
+    name: 'Row',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'row',
+      attributes: {},
+      children: []
+    }
+  });
+
+  promethee.controller('RowController', ['$scope', function($scope) {
+
+    $scope.allowedTypes = ['column'];
+
+    $scope.addColumn = function() {
+      this.component.children.push({
+        type: 'column',
+        attributes: {
+          size: 3,
+          offset: 0
+        },
+        children: []
+      })
+    }
+
+    $scope.remove = function() {
+      this.components.splice(this.components.indexOf(this.component), 1);
+    };
+
+  }]);
+</script>

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

@@ -0,0 +1,4 @@
+<%
+type = component[:type]
+%>
+<%= render partial: "promethee/components/#{type}", locals: { component: component } %>

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

@@ -0,0 +1,3 @@
+<script type="text/ng-template" id="promethee/components/show">
+  <ng-include src="'promethee/components/' + component.type"></ng-include>
+</script>

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

@@ -0,0 +1,6 @@
+<%
+body = component[:attributes][:body].to_s
+%>
+<div class="<%= promethee_class_for component %>">
+  <%= body.html_safe %>
+</div>

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

@@ -0,0 +1,59 @@
+<script type="text/ng-template" id="promethee/components/text">
+  <div ng-controller="TextController">
+    <div  dnd-draggable="component"
+          dnd-moved="remove()"
+          dnd-type="component.type"
+          class="promethee-editor__component promethee-editor__component--text promethee-editor__component--final">
+      <div class="promethee-editor__toolbar">
+        Text
+        <%= render 'promethee/partials/toolbar_buttons' %>
+      </div>
+      <div ng-show="editing">
+        <textarea ui-tinymce="tinymceOptions" ng-model="component.attributes.body"></textarea>
+      </div>
+      <div ng-hide="editing">
+        <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe" ng-click="edit()"></div>
+      </div>
+    </div>
+  </div>
+</script>
+
+<script>
+  angular.injector(['ng', '<%= promethee_id %>']).get('definitions').push({
+    name: 'Text',
+    thumb: 'http://via.placeholder.com/300x200',
+    data: {
+      type: 'text',
+      attributes: {
+        body: 'Edit me'
+      }
+    }
+  });
+
+  promethee.controller('TextController', ['$scope', function($scope) {
+
+    $scope.editing = false;
+
+    $scope.edit = function() {
+      this.editing = true;
+    };
+
+    $scope.complete = function() {
+      this.editing = false;
+    };
+
+    $scope.remove = function() {
+      this.components.splice(this.components.indexOf(this.component), 1);
+    };
+
+    $scope.tinymceOptions = {
+      plugins: 'autoresize',
+      toolbar: 'styleselect | bold italic',
+      menubar: false,
+      statusbar: false,
+      branding: false,
+      autoresize_bottom_margin: 0
+    };
+
+  }]);
+</script>