promethee 1.3.2 → 1.3.3

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

@@ -1,3 +1,45 @@
 <script type="text/ng-template" id="promethee/components/slider/edit/inspect">
-  No option for slider.
+  <div ui-sortable ng-model="promethee.inspected.children">
+    <div
+      class="panel panel-default"
+      ng-repeat="component in promethee.inspected.children"
+    >
+      <div class="panel-body">
+        <div class="row">
+          <div class="col-xs-9">
+            <span class="label label-default">#{{$index + 1}}</span>
+            <span class="label label-info">{{component.type}}</span>
+          </div>
+          <div class="col-xs-3">
+            <ng-include src="'promethee/move/component'"></ng-include>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="pull-right btn-toolbar" ng-controller="SliderInspectorController">
+    <span ng-repeat="definition in itemDefinitions" class="btn btn-default" ng-click="addItem(definition)">Add {{definition.name}}</span>
+  </div>
+</script>
+
+<script>
+  promethee.controller('SliderInspectorController', ['$scope', 'identifier', function($scope, identifier) {
+    var availableComponents = ['image', 'video'];
+
+    $scope.itemDefinitions = $scope.promethee.definitions.filter(function(definition) {
+      return availableComponents.includes(definition.data.type);
+    });
+
+    var clone = function(object) {
+      return JSON.parse(JSON.stringify(object));
+    }
+
+    $scope.addItem = function(definition) {
+      var item = JSON.parse(JSON.stringify(definition.data));
+      item.id = identifier.generate();
+
+      $scope.promethee.inspected.children.push(item);
+    }
+  }])
 </script>

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

@@ -1,7 +1,11 @@
 <script type="text/ng-template" id="promethee/components/slider/edit/move">
   <%= render 'promethee/edit/move.header', type: 'slider' %>
-      <div ng-if="component.children.length > 0" ng-init="component = component.children[0]">
-        <ng-include src="'promethee/move/component'"></ng-include>
+      <div class="header">Slider</div>
+      <div class="row">
+        <div class="col-md-2" ng-repeat-start="component in component.children">
+          <ng-include src="'promethee/move/component'"></ng-include>
+        </div>
+        <div class="clearfix" ng-if="$index%6 === 5" ng-repeat-end></div>
       </div>
     </div>
   </div>

data/app/views/promethee/components/slider/_icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <path fill="#FFF" d="M30.3,35.9 L30.3,64.4 L70.9,64.4 L70.9,35.9 L30.3,35.9 Z M71.9,34.9 L71.9,65.4 L29.3,65.4 L29.3,34.9 L71.9,34.9 Z M75,32 L75,68.2 L26.1,68.2 L26.1,32 L75,32 Z M73,34 L28.1,34 L28.1,66.2 L73,66.2 L73,34 Z M90,37.7 L77,37.7 L77,35.7 L92,35.7 L92,64.5 L77,64.5 L77,62.5 L90,62.5 L90,37.7 Z M11,62.5 L24,62.5 L24,64.5 L9,64.5 L9,35.7 L24,35.7 L24,37.7 L11,37.7 L11,62.5 Z"/>
+</svg>

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

@@ -1,151 +1,16 @@
-<% 
-icon = '
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-   viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-<g id="Calque_10" display="none">
-  <rect x="-1.5" y="-1.5" display="inline" fill="#76868E" width="103" height="103"/>
-</g>
-<g id="Calque_2" display="none">
-  <rect x="18.9" y="28" display="inline" fill="none" stroke="#253742" stroke-miterlimit="10" width="62.1" height="44"/>
-  <g display="inline">
-    <path fill="#253742" d="M84.5,25v50h-69V25H84.5 M86.5,23h-73v54h73V23L86.5,23z"/>
-  </g>
-  <g display="inline">
-    <polygon fill="#253742" points="47.2,44.6 47.2,55.4 56.3,50     "/>
-    <g>
-      <path fill="#253742" d="M50,41.6c4.6,0,8.4,3.8,8.4,8.4s-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4S45.4,41.6,50,41.6 M50,40.6
-        c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4S55.2,40.6,50,40.6L50,40.6z"/>
-    </g>
-  </g>
-</g>
-<g id="Calque_3" display="none">
-  <g display="inline">
-    <g>
-      <path fill="#253742" d="M71.4,25v50H28.6V25H71.4 M73.4,23H26.6v54h46.9V23L73.4,23z"/>
-    </g>
-    <g>
-      <g>
-        <circle fill="#253742" cx="37.8" cy="36.5" r="2"/>
-        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="36.5" x2="64.3" y2="36.5"/>
-      </g>
-      <g>
-        <circle fill="#253742" cx="37.8" cy="45.5" r="2"/>
-        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="45.5" x2="64.3" y2="45.5"/>
-      </g>
-      <g>
-        <circle fill="#253742" cx="37.8" cy="54.5" r="2"/>
-        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="54.5" x2="64.3" y2="54.5"/>
-      </g>
-      <g>
-        <circle fill="#253742" cx="37.8" cy="63.5" r="2"/>
-        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="63.5" x2="64.3" y2="63.5"/>
-      </g>
-    </g>
-  </g>
-</g>
-<g id="Calque_4" display="none">
-  <g display="inline">
-    <path fill="#253742" d="M63.9,20.3l10.5,11.8v47.7H25.7V20.3H63.9 M64.8,18.3H23.7v63.4h52.7V31.3L64.8,18.3L64.8,18.3z"/>
-  </g>
-  <g display="inline">
-    <path fill="#253742" d="M67.9,24.3l2.4,2.4v49H29.7V24.3H67.9 M68.3,23.3H28.7v53.4h42.7V26.3L68.3,23.3L68.3,23.3z"/>
-  </g>
-  <polyline display="inline" fill="none" stroke="#253742" stroke-width="2" stroke-miterlimit="10" points="76.3,81.7 23.7,81.7 
-    23.7,18.3   "/>
-  <g display="inline">
-    <polygon fill="#FFFFFF" points="64.3,30.3 64.3,20.7 73.9,30.3     "/>
-    <path fill="#253742" d="M65.3,23.1l6.2,6.2h-6.2V23.1 M63.3,18.3v13h13L63.3,18.3L63.3,18.3z"/>
-  </g>
-  <g display="inline">
-    <g>
-      <path fill="#253742" d="M39.3,30.3L39.3,30.3c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
-        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C36.3,31.2,37.8,30.3,39.3,30.3 M39.3,29.3
-        c-1.9,0-3.7,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.7-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
-        C40.7,29.4,40,29.3,39.3,29.3L39.3,29.3z"/>
-    </g>
-  </g>
-  <g display="inline">
-    <path fill="#253742" d="M40.7,46.6L48,60.3l0.5,1l0.9-0.6L59.7,54l10.6,9.7v12.5L30,75.7l-0.1-16.5L40.7,46.6 M40.8,44.8l-12,14
-      L29,76.7l42.4,0.6v-14L59.8,52.8l-11,7L40.8,44.8L40.8,44.8z"/>
-  </g>
-</g>
-<g id="Calque_5" display="none">
-</g>
-<g id="Calque_6">
-  <g>
-    <path fill="#FFFFFF" d="M38.8,40.8c0-1.6-0.1-3.3-0.3-5.2c2.3,0.1,6.1,0.1,11.5,0.1c5.4,0,9.2,0,11.4-0.1
-      c-0.2,1.9-0.3,3.7-0.3,5.2c0,1.4,0,2.5,0.1,3.3h-0.9c-0.2-2.1-0.5-3.7-0.8-4.7c-0.3-1-0.9-1.8-1.7-2.2c-0.8-0.5-2.1-0.7-3.7-0.7
-      h-2.2v23.2c0,1.1,0.1,2,0.3,2.5c0.2,0.5,0.6,0.9,1.2,1.1c0.6,0.2,1.4,0.3,2.6,0.4v0.8c-1.4-0.1-3.4-0.1-6-0.1c-2.7,0-4.7,0-6,0.1
-      v-0.8c1.2,0,2.1-0.2,2.6-0.4c0.6-0.2,0.9-0.6,1.2-1.1c0.2-0.5,0.3-1.3,0.3-2.5V36.5h-2.2c-1.7,0-2.9,0.2-3.7,0.7
-      c-0.8,0.5-1.4,1.2-1.7,2.2c-0.3,1-0.6,2.6-0.8,4.7h-0.9C38.8,43.3,38.8,42.2,38.8,40.8z"/>
-  </g>
-  <polygon fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="63.5,23 26.6,23 26.6,77 73.4,77 
-    73.4,32.4   "/>
-  <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="62.5,23 62.5,32.4 72.4,32.4  "/>
-</g>
-<g id="Calque_7" display="none">
-  <g display="inline">
-    <path fill="#FFFFFF" d="M84,34v32H16V34H84 M86,32H14v36h72V32L86,32z"/>
-  </g>
-  <g display="inline">
-    <g>
-      <path fill="#FFFFFF" d="M27.8,38.7L27.8,38.7c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
-        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C24.8,39.6,26.2,38.7,27.8,38.7 M27.8,37.7
-        c-1.9,0-3.8,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.8-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
-        C29.2,37.9,28.5,37.7,27.8,37.7L27.8,37.7z"/>
-    </g>
-  </g>
-  <polyline display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="81.2,57 62.1,51.3 49,54.8 39.5,47.3 
-    19.2,55   "/>
-  <path display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M75.8,65.3"/>
-  <path display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M25.4,65"/>
-  <g display="inline">
-    <path fill="#FFFFFF" d="M80.7,36.5v27H19.3v-27H80.7 M81.7,35.5H18.3v29h63.3V35.5L81.7,35.5z"/>
-  </g>
-</g>
-<g id="Calque_8" display="none">
-  <g display="inline">
-    <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M76.5,65.4"/>
-    <rect x="29.3" y="35.3" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="41.6" height="29.5"/>
-    <g>
-      <path fill="#FFFFFF" d="M72.5,33.9v32.2H27.6V33.9H72.5 M74.5,31.9H25.6v36.2h48.9V31.9L74.5,31.9z"/>
-    </g>
-    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="76.5,36.6 90.5,36.6 90.5,63.4 
-      76.5,63.4     "/>
-    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="23.5,63.4 9.5,63.4 9.5,36.6 23.5,36.6 
-          "/>
-  </g>
-</g>
-<g id="Calque_9" display="none">
-  <g display="inline">
-    <g>
-      <g>
-        <path fill="#FFFFFF" d="M84.5,16.5v67h-69v-67H84.5 M86.5,14.5h-73v71h73V14.5L86.5,14.5z"/>
-      </g>
-      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="86.5" y1="31.5" x2="13.5" y2="31.5"/>
-      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="23.5" y1="23.5" x2="30.5" y2="23.5"/>
-      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="36.5" y1="23.5" x2="77.5" y2="23.5"/>
-    </g>
-    <g>
-      <rect x="18.8" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
-      <rect x="34.9" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
-      <rect x="51.1" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
-      <rect x="67.2" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
-    </g>
-  </g>
-</g>
-</svg>
-'
+<%
+  init = <<~JAVASCRIPT
+    promethee.definitions.push({
+      name: 'Text',
+      icon: #{render('promethee/components/text/icon').to_json.html_safe},
+      data: {
+        type: 'text',
+        attributes: {
+          body: 'Edit me'
+        }
+      }
+    })
+  JAVASCRIPT
 %>
-<div ng-init="promethee.definitions.push({
-  name: 'Text',
-  icon: '<%= icon %>',
-  data: {
-    type: 'text',
-    attributes: {
-      body: 'Edit me'
-    }
-  }
-})"></div>
+
+<%= content_tag :div, nil, 'ng-init': init %>

data/app/views/promethee/components/text/_icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <path fill="#FFF" d="M38.8,40.8 C38.8,39.2 38.7,37.5 38.5,35.6 C40.8,35.7 44.6,35.7 50,35.7 C55.4,35.7 59.2,35.7 61.4,35.6 C61.2,37.5 61.1,39.3 61.1,40.8 C61.1,42.2 61.1,43.3 61.2,44.1 L60.3,44.1 C60.1,42 59.8,40.4 59.5,39.4 C59.2,38.4 58.6,37.6 57.8,37.2 C57,36.7 55.7,36.5 54.1,36.5 L51.9,36.5 L51.9,59.7 C51.9,60.8 52,61.7 52.2,62.2 C52.4,62.7 52.8,63.1 53.4,63.3 C54,63.5 54.8,63.6 56,63.7 L56,64.5 C54.6,64.4 52.6,64.4 50,64.4 C47.3,64.4 45.3,64.4 44,64.5 L44,63.7 C45.2,63.7 46.1,63.5 46.6,63.3 C47.2,63.1 47.5,62.7 47.8,62.2 C48,61.7 48.1,60.9 48.1,59.7 L48.1,36.5 L45.9,36.5 C44.2,36.5 43,36.7 42.2,37.2 C41.4,37.7 40.8,38.4 40.5,39.4 C40.2,40.4 39.9,42 39.7,44.1 L38.8,44.1 C38.8,43.3 38.8,42.2 38.8,40.8 Z M63.5,23 L63.5,31.4 L72.4,31.4 L72.4,33.4 L61.5,33.4 L61.5,23 L63.5,23 Z M63.8991213,22 L74.4,31.9705313 L74.4,78 L25.6,78 L25.6,22 L63.8991213,22 Z M63.1008787,24 L27.6,24 L27.6,76 L72.4,76 L72.4,32.8294687 L63.1008787,24 Z"/>
+</svg>

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

@@ -1,31 +1,16 @@
-<% 
-icon = '
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-   viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-<rect x="18.9" y="28" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="62.1" height="44"/>
-<g>
-  <path fill="#FFFFFF" d="M84.5,25v50h-69V25H84.5 M86.5,23h-73v54h73V23L86.5,23z"/>
-</g>
-<g>
-  <polygon fill="#FFFFFF" points="47.2,44.6 47.2,55.4 56.3,50   "/>
-  <g>
-    <path fill="#FFFFFF" d="M50,41.6c4.6,0,8.4,3.8,8.4,8.4s-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4S45.4,41.6,50,41.6 M50,40.6
-      c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4S55.2,40.6,50,40.6L50,40.6z"/>
-  </g>
-</g>
-</svg>
-'
+<%
+  init = <<~JAVASCRIPT
+    promethee.definitions.push({
+      name: 'Video',
+      icon: #{render('promethee/components/video/icon').to_json.html_safe},
+      data: {
+        type: 'video',
+        attributes: {
+          url: 'https://vimeo.com/115082758'
+        }
+      }
+    })
+  JAVASCRIPT
 %>
 
-<div ng-init="promethee.definitions.push({
-  name: 'Video',
-  icon: '<%= icon %>',
-  data: {
-    type: 'video',
-    attributes: {
-      url: 'https://vimeo.com/115082758'
-    }
-  }
-})"></div>
+<%= content_tag :div, nil, 'ng-init': init %>

data/app/views/promethee/components/video/_icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <path fill="#FFF" d="M82,27.5 L82,72.5 L18.9,72.5 L18.9,27.5 L82,27.5 Z M19.9,28.5 L19.9,71.5 L81,71.5 L81,28.5 L19.9,28.5 Z M87,23 L87,77 L14,77 L14,23 L87,23 Z M85,25 L16,25 L16,75 L85,75 L85,25 Z M50.5,40.6 C45.3,40.6 41.1,44.8 41.1,50 C41.1,55.2 45.3,59.4 50.5,59.4 C55.7,59.4 59.9,55.2 59.9,50 C59.9,44.8 55.7,40.6 50.5,40.6 L50.5,40.6 Z M50.5,41.6 C55.1,41.6 58.9,45.4 58.9,50 C58.9,54.6 55.1,58.4 50.5,58.4 C45.9,58.4 42.1,54.6 42.1,50 C42.1,45.4 45.9,41.6 50.5,41.6 L50.5,41.6 Z M47.7,44.6 L47.7,55.4 L56.8,50 L47.7,44.6 Z"/>
+</svg>

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

@@ -9,7 +9,7 @@ promethee
           revertDuration: 0,
           scroll: true,
           refreshPositions: true,
-          cursor: 'move', 
+          cursor: 'move',
           cursorAt: { top: 0, left: 0 },
           helper: 'clone',
           appendTo: '.promethee-edit__move',
@@ -34,7 +34,7 @@ promethee
           revertDuration: 0,
           scroll: true,
           refreshPositions: true,
-          cursor: 'move', 
+          cursor: 'move',
           start: function() {
             var $elementDragged = $(element[0]);
             var type = $elementDragged.data('type');
@@ -55,7 +55,7 @@ promethee
       }
     }
   })
-  .directive('droppable', function($compile) {
+  .directive('droppable', ['$compile', 'presets', 'identifier', function($compile, presets, identifier) {
     return {
       restrict: 'A',
       link: function(scope, element, attrs) {
@@ -66,22 +66,39 @@ promethee
             var draggedFromList = angular.element(ui.draggable).parent().scope().components;
             var droppedToList = angular.element(this).scope().components;
             var droppedToIndex = parseInt(this.getAttribute('data-index'));
+            var draggedFromPresets = ui.draggable.attr('data-preset');
+
+            if(draggedFromPresets) {
+              var preset = presets.find(function(preset) {
+                return preset.name === draggedFromPresets;
+              });
+
+              var provideIdentifiers = function(components) {
+                var component;
+                for(var i = 0; i < components.length; i++) {
+                  component = components[i];
+                  component.id = identifier.generate();
+                  if(Array.isArray(component.children)) provideIdentifiers(component.children);
+                }
+
+                return components;
+              };
+
+              var components = provideIdentifiers(angular.copy(preset.components));
+              droppedToList.splice.apply(droppedToList, [droppedToIndex, 0].concat(components));
+
+              scope.$apply();
+
+              return;
+            }
+
             if (draggedFromList === undefined) {
               draggedFromLibrary = true;
             }
             if (draggedFromLibrary) {
               var definition = angular.element(ui.draggable).scope().definition;
               var component = angular.copy(definition.data);
-              // FIXME dirty
-              function guid() {
-                function s4() {
-                  return Math.floor((1 + Math.random()) * 0x10000)
-                    .toString(16)
-                    .substring(1);
-                }
-                return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-              }
-              component.id = guid();
+              component.id = identifier.generate();
             } else {
               var draggedFromIndex = parseInt(ui.draggable[0].getAttribute('data-list-index'));
               // console.log('dragged', draggedFromList, draggedFromIndex);
@@ -104,10 +121,10 @@ promethee
         });
       }
     }
-  });
+  }]);
 
-promethee.controller('AdderController', 
-  ['$scope', '$rootScope', 'definitions', 'identifier', 
+promethee.controller('AdderController',
+  ['$scope', '$rootScope', 'definitions', 'identifier',
   function($scope, $rootScope, definitions, identifier) {
 
   $scope.adding = false;
@@ -141,8 +158,8 @@ promethee.controller('AdderController',
       <div class="row">
         <div  ng-repeat="definition in promethee.definitions"
               class="col-md-12 col-lg-6">
-          <div  addable 
-                class="promethee-edit__library__item" 
+          <div  addable
+                class="promethee-edit__library__item"
                 data-type="{{definition.data.type}}">
             <div class="promethee-edit__library__item__icon" ng-bind-html="definition.icon | htmlSafe"></div>
             <div class="promethee-edit__library__item__name">{{definition.name}}</div>
@@ -152,6 +169,14 @@ promethee.controller('AdderController',
     </div>
     <div class="promethee-edit__library-header">Presets</div>
     <div class="promethee-edit__library-content">
+      <div class="row">
+        <div ng-repeat="preset in promethee.presets" class="col-md-12 col-lg-6">
+          <div addable class="promethee-edit__library__item" data-type="text" data-preset="{{preset.name}}">
+            <div class="promethee-edit__library__item__icon" ng-bind-html="preset.icon | htmlSafe"></div>
+            <div class="promethee-edit__library__item__name">{{preset.name}}</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -175,8 +200,10 @@ promethee.controller('AdderController',
       {{promethee.inspected.type}}
     </div>
     <div class="promethee-edit__inspect-content">
-      <ng-include ng-if="promethee.inspected" 
-                  src="'promethee/components/' + promethee.inspected.type + '/edit/inspect'"></ng-include>
+      <div ng-repeat="definition in promethee.definitions">
+        <ng-include src="'promethee/components/' + definition.data.type + '/edit/inspect'"
+                    ng-show="promethee.inspected.type == definition.data.type"></ng-include>
+      </div>
     </div>
   </div>
 </div>
@@ -189,7 +216,7 @@ promethee.controller('AdderController',
 
 <script type="text/ng-template" id="promethee/move/components">
   <div ng-init="parent_id = component.id; parent_type = component.type; components = component.children">
-    <div 
+    <div
       droppable
       class="<%= promethee_bem_classes 'promethee-edit__move__droppable', '--{{parent_type}}', '--first' %>"
       data-id="{{parent_id}}"

data/app/views/promethee/presets/_icon.image-with-text.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <path fill="#FFF" d="M46.629601,61.6851178 L46.629601,34.36 L16.3737374,34.36 L16.3737374,58.1295698 L23.8181881,48.8040935 L30.7098655,60.0075245 L38.9520095,54.8543739 L46.629601,61.6851178 Z M46.629601,63.5136154 L38.806792,56.5536716 L30.2628248,61.8955281 L23.671799,51.1808504 L16.3737374,60.3229489 L16.3737374,65.1949102 L46.629601,65.1949102 L46.629601,63.5136154 Z M15,33 L48.0033384,33 L48.0033384,66.5549102 L15,66.5549102 L15,33 Z M23.3795232,45.24 C21.2892432,45.24 19.5947365,43.5793834 19.5947365,41.5309091 C19.5947365,39.4824347 21.2892432,37.8218182 23.3795232,37.8218182 C25.4698031,37.8218182 27.1643098,39.4824347 27.1643098,41.5309091 C27.1643098,43.5793834 25.4698031,45.24 23.3795232,45.24 Z M23.3795232,43.88 C24.7142133,43.88 25.7905724,42.8251681 25.7905724,41.5309091 C25.7905724,40.2366501 24.7142133,39.1818182 23.3795232,39.1818182 C22.044833,39.1818182 20.9684739,40.2366501 20.9684739,41.5309091 C20.9684739,42.8251681 22.044833,43.88 23.3795232,43.88 Z M50.8598227,38.5 L50.8598227,37.5 L74.1669281,37.5 L74.1669281,38.5 L50.8598227,38.5 Z M50.8598227,42.5 L50.8598227,41.5 L84.393388,41.5 L84.393388,42.5 L50.8598227,42.5 Z M50.8598227,46.5 L50.8598227,45.5 L84.393388,45.5 L84.393388,46.5 L50.8598227,46.5 Z M50.8598227,50.5 L50.8598227,49.5 L78.3643678,49.5 L78.3643678,50.5 L50.8598227,50.5 Z M50.8598227,54.5 L50.8598227,53.5 L82.3598227,53.5 L82.3598227,54.5 L50.8598227,54.5 Z"/>
+</svg>

data/app/views/promethee/presets/_image-with-text.html.erb

@@ -0,0 +1,33 @@
+<script>
+  angular.injector(['ng', 'Promethee']).get('presets').push({
+    name: 'Image with text',
+    icon: <%= render('promethee/presets/icon.image-with-text').to_json.html_safe %>,
+    components: [
+      {
+        "type": "row",
+        "children": [
+          {
+            "type": "column",
+            "attributes": {"size": 4, "offset": 0},
+            "children": [
+              {
+                "type": "image",
+                "attributes": {"src": "https://images.unsplash.com/photo-1502919280275-1bed9aca68ab?auto=format&fit=crop&w=1500&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"}
+              }
+            ]
+          },
+          {
+            "type": "column",
+            "attributes": {"size": 8, "offset": 0},
+            "children": [
+              {
+                "type": "text",
+                "attributes": {"body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dicta, est quos distinctio culpa! Quasi cupiditate, totam nulla reprehenderit animi iusto qui cumque culpa repellat eum sit? Debitis, laboriosam reiciendis!</p>"}
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  });
+</script>