promethee 0.1.3 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6a5abc092c00e4049ba607e2ebc872a0931d0867
-  data.tar.gz: a7f576297eaa4141d5d604253277e39de45592d3
+  metadata.gz: 713537989be982b85b811ad216982e6f8fe8b381
+  data.tar.gz: 4ce491f4b51ec1e55e66e096061a63648caf4f72
 SHA512:
-  metadata.gz: a03d2253f4d73c7bc929ae968f07fc45063e4d41af31081e9adb02a978a0152251e612528a93b172f92164723e5d81aca92559f8c26b6de3a764456e24e18a81
-  data.tar.gz: 9fff7842e2088cf11f903df9693ee44437d4f3e094a2027c8fb753f9c4c4e737be759392197fcd0e41a01e48743e17aa579fdecc353c2afc6f3e87419a24eea7
+  metadata.gz: 9d3c1a3f84b077d64559f399577b642ab2f792ceddb944ed3963f071d3eb8b18840f98faa6bbc3aa98eaf6d138cb2102b3340593a980aaf56859e3ef5f3bc8af
+  data.tar.gz: b83effefd44a2d04dde64173b458a01171809747490b4b447b75d5e5861f51927877ed3c6d0ef48e30555b7431e7bd16bb2ced012ad62b0409ecaf421badd11d

data/README.md

@@ -62,35 +62,38 @@ In this example, we have a page with a title (string) and a data (jsonb) attribu
 The data is:
 
 ```ruby
-@page.data = [
-  {
-    type: 'row',
-    children: [
-      {
-        type: 'col',
-        attributes: {
-          size: 4,
-          offset: 0
-        },
-        children: [
-          {
-            type: 'text',
-            attributes: {
-              body: '<p><b>This</b> is a text</p>'
-            }
+@page.data = {
+  type: 'page',
+  children: [
+    {
+      type: 'row',
+      children: [
+        {
+          type: 'col',
+          attributes: {
+            size: 4,
+            offset: 0
           },
-          {
-            type: 'image',
-            attributes: {
-              src: 'https://c1.staticflickr.com/5/4089/4975306844_f849232195_b.jpg',
-              alt: 'Prométhée'
+          children: [
+            {
+              type: 'text',
+              attributes: {
+                body: '<p><b>This</b> is a text</p>'
+              }
+            },
+            {
+              type: 'image',
+              attributes: {
+                src: 'https://c1.staticflickr.com/5/4089/4975306844_f849232195_b.jpg',
+                alt: 'Prométhée'
+              }
             }
-          }
-        ]
-      }
-    ]
-  }
-]
+          ]
+        }
+      ]
+    }
+  ]
+}
 ```
 
 The view is:
@@ -102,13 +105,15 @@ The view is:
 Which renders to:
 
 ```html
-<div class="row promethee__component promethee__component--row">
-  <div class="col-md-4 promethee__component promethee__component--col">
-    <div class="promethee__component promethee__component--text">
-      <p><b>This</b> is a text</p>
-    </div>
-    <div class="promethee__component promethee__component--image">
-      <img src="https://c1.staticflickr.com/5/4089/4975306844_f849232195_b.jpg" alt="Prométhée">
+<div class="promethee">
+  <div class="row promethee__component promethee__component--row">
+    <div class="col-md-4 promethee__component promethee__component--col">
+      <div class="promethee__component promethee__component--text">
+        <p><b>This</b> is a text</p>
+      </div>
+      <div class="promethee__component promethee__component--image">
+        <img src="https://c1.staticflickr.com/5/4089/4975306844_f849232195_b.jpg" alt="Prométhée">
+      </div>
     </div>
   </div>
 </div>
@@ -142,6 +147,7 @@ This would do quite the same thing:
 With javascript set:
 ```
 //= require promethee
+//= require promethee-editor
 ```
 
 With stylesheets set:
@@ -168,17 +174,12 @@ In the edit, the component description looks like:
 }
 ```
 
-#### An editor in an iframe
+#### The editor previews in an iframe
 
-At first, the editor was rendered in the view.
-When trying to create a preview, it was impossible to manage responsivity, because it relies on the page width, and the page width does not change.
-This is the first problem of the kind, but many others would follow: stylesheet conflicts, bootstrap parameters (number of columns...) conflicts, maybe javascript conflicts...
+To be able to preview responsivity, there is a POST "promethee/preview" route.
+When you send your data, it renders the page in the default layout.
 
-The solution is to put the editor in an iframe.
-The editor creates an iframe.
-The global scheme is illustrated in docs/iframe.html.
-The idea is to create the angular app inside the iframe so it's completely independant.
-Before the form is submit, we take the data from the angular app (through a plain javascript variable) and put it in the form input.
+This is used to generate a live responsive preview.
 
 ### Roadmap
 - ~~Gem setup~~
@@ -191,20 +192,22 @@ Before the form is submit, we take the data from the angular app (through a plai
 - ~~Show Image (http)~~
 - ~~Show Video (http vimeo / youtube)~~
 - ~~Edit Row~~
-- ~~Edit Col~~
 - ~~Edit Text~~
 - ~~Edit Image (http)~~
 - ~~Edit Video (http)~~
-- Editor in iframe
-- UI et branding
+- ~~Preview in iframe~~
+- ~~Preview~~
+- ~~Fullscreen~~
 - Hooks (needed for image and video)
+- promethee-i18n
+- Component versioning
+- Edit in a column
+- UI et branding
 - Gallery
 - Menu
 - Tab
 - Cover
 - Chapter (or maybe it's a cover too?)
-- Preview
-- Fullscreen
 
 ## Development
 After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
@@ -212,7 +215,7 @@ After checking out the repo, run `bin/setup` to install dependencies. You can al
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
 ## Contributing
-Bug reports and pull requests are welcome on GitHub at https://github.com/arnaudlevy/promethee. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at https://github.com/lespoupeesrusses/promethee. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 ## Code of Conduct
-Everyone interacting in the Promethee project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/arnaudlevy/promethee/blob/master/CODE_OF_CONDUCT.md).
+Everyone interacting in the Promethee project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/lespoupeesrusses/promethee/blob/master/CODE_OF_CONDUCT.md).

data/app/assets/javascripts/promethee-editor.js

@@ -0,0 +1,8 @@
+//= require tinymce
+//= require jquery
+//= require jquery-ui
+//= require bootstrap
+//= require angular
+//= require angular-animate
+//= require angular-ui-tinymce-rails
+//= require_self

data/app/assets/javascripts/promethee.js

@@ -1,59 +0,0 @@
-//= require tinymce
-//= require jquery
-//= require bootstrap
-//= require angular
-//= require angular-ui-tinymce-rails
-//= require angular-drag-and-drop-lists
-//= require_self
-//= require_tree './promethee'
-
-Promethee = function(id, data) {
-  this.id = id;
-  this.data = data;
-};
-
-Promethee.prototype = {
-  constructor: Promethee,
-  dependencies: ['ui.tinymce', 'dndLists'],
-
-  get app() {
-    if(!this.initialized) this.initialize();
-    return this._app;
-  },
-
-  get initialized() {
-    return !!this._app;
-  },
-
-  initialize: function() {
-    this._app = angular
-      .module(this.id, this.dependencies)
-      .constant('promethee', this)
-      .value('state', {
-        editing: false
-      })
-
-    this.app.filter('htmlSafe', ['$sce', function($sce) {
-      return function(val) {
-        return $sce.trustAsHtml(val);
-      };
-    }]);
-
-    this.app.filter('urlSafe', ['$sce', function($sce) {
-      return function(val) {
-        return $sce.trustAsResourceUrl(val);
-      };
-    }]);
-
-    this.app.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();
-      };
-    });
-
-    this.constructor.Controller.initialize(this);
-
-    Promethee.app = this.app;
-  }
-};

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

@@ -1,89 +1,41 @@
 @import 'bootstrap'
-
-@import 'promethee-editor/variables'
 @import 'font-awesome.css'
 @import 'material_icons.css'
-@import 'promethee-editor/mixins'
 
+$promethee-grey: #bbb
+$promethee-transparent-grey: transparentize($promethee-grey, .8)
+$promethee-light-grey: #eee
 $promethee-color: #ff9900
 
-.promethee-editor
-  +grid-builder-set-gutter-width(0)
+@import 'promethee-editor/mover'
+@import 'promethee-editor/preview'
+@import 'promethee-editor/component'
 
+.promethee-editor
   background: white
+  position: relative
+  &--fullscreen
+    position: fixed
+    left: 0
+    right: 0
+    bottom: 0
+    top: 0
+    overflow: auto
+  &--preview
+    overflow: hidden
 
-  .navbar
+  &__navbar
     border-radius: 0
     border: none
     border-bottom: 2px solid $promethee-color
     background: transparent
 
-  .dndPlaceholder
-    height: 30px
-    border: 2px dotted transparentize($promethee-color, .5)
-    list-style: none
-    margin: 6px
-
-  &__page
-    margin-left: -6px
-    margin-right: -6px
-
-  &--preview
-    .promethee-editor__toolbar
-      display: none
-    .promethee-editor__component
-      border: none
-      margin: 0
-    .promethee-editor__page
-      margin: 0 auto
-    &--mobile
-      .promethee-editor__page
-        width: 375px
-        border-left: 1px dotted #eee
-        border-right: 1px dotted #eee
-    &--tablet
-      .promethee-editor__page
-        width: 768px
-        border-left: 1px dotted #eee
-        border-right: 1px dotted #eee
-
-  &__sidebar
-    background: $promethee-light-grey
-    width: 300px
-    flex-grow: 0
-    flex-shrink: 0
-
-  &__content
-    flex-grow: 1
-    flex-shrink: 1
-
-  &__components
-    min-height: 30px
-
-  &__component
-    background: #fff
-    border: 1px solid #eee
-    margin: 6px
-    overflow: auto
-
-    &--text
-      .mce-tinymce
-        border: none
-
-      .mce-panel
-        border-top-color: $promethee-transparent-grey
-
-      .mce-btn-group:not(:first-child)
-        border-left-color: $promethee-transparent-grey
-
-      .mce-top-part::before
-        box-shadow: none
-
-    &--final
-      background: #fff
+  &__button
+    color: $promethee-color
+    margin-left: 10px
 
   &__toolbar
-    background: #fff
+    background: #eee
     padding: 10px
     font-size: 11px
     text-transform: uppercase
@@ -91,15 +43,8 @@ $promethee-color: #ff9900
     color: $promethee-color
     &, *
       user-select: none
-      cursor: move
 
   &__wrapper
     padding: 10px
 
-  &.fullscreen
-    position: fixed
-    left: 0
-    right: 0
-    bottom: 0
-    top: 0
-    overflow: auto
+

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

@@ -0,0 +1,10 @@
+.promethee-editor__component
+  &--text
+    .mce-tinymce
+      border: none
+    .mce-panel
+      border-top-color: $promethee-transparent-grey
+    .mce-btn-group:not(:first-child)
+      border-left-color: $promethee-transparent-grey
+    .mce-top-part::before
+      box-shadow: none

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

@@ -0,0 +1,67 @@
+.promethee-editor__mover
+  transform-origin: top
+  transition: transform ease-out 0.5s
+  transform: scale(0.3)
+  &.ng-hide
+    transform: scale(1)
+  .row, .col
+    position: relative
+  &--draggable
+    h4
+      font-size: 11px
+      text-transform: uppercase
+      font-weight: bold
+      color: $promethee-color
+      padding: 0 0 0 3px
+      margin: 0
+    &--row
+      padding-left: 10px
+  &--droppable
+    position: relative
+    background: white
+    width: 200px
+    height: 50px
+    &--hidden
+      visibility: hidden
+    &--row
+      display: none
+      &--first
+        display: block
+        position: absolute
+        top: 0
+        left: -25px
+        width: 50px
+        height: 200px
+      &--inside-column
+        position: absolute
+        top: 0
+        right: -25px
+        width: 50px
+        height: 200px
+  &--dragged
+    opacity: 0.25
+  .ui-droppable-hover
+    opacity: 1 !important
+    margin-bottom: 0
+  .ui-droppable-active
+    background: $promethee-color
+    opacity: 0.5
+  // By default, nothing is dropped in rows
+  &--dragging
+    .promethee-editor__mover--droppable.promethee-editor__mover--droppable--row
+      display: none
+  // Except for columns, which can be dropped only on rows
+  &--dragging.promethee-editor__mover--dragging--column 
+    .promethee-editor__mover--droppable
+      display: none
+      // It's a little specific, columns can be dropped on rows "first droppable", or on columns "inside droppables"
+      &.promethee-editor__mover--droppable.promethee-editor__mover--droppable--row--inside-column,
+      &.promethee-editor__mover--droppable.promethee-editor__mover--droppable--row--first
+        display: block
+  .video-neutralizing-overlay
+    background: transparent
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0

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

@@ -0,0 +1,25 @@
+.promethee-editor__preview
+  position: relative
+  height: 100%
+  min-height: 500px
+  background: black
+  margin-top: -20px
+  &--frame
+    transition: width 1s, left 1s, margin 1s
+    position: absolute
+    height: 100%
+  &--mobile
+    .promethee-editor__preview--frame
+      left: 50%
+      margin-left: -187px
+      width: 375px
+  &--tablet
+    .promethee-editor__preview--frame
+      left: 50%
+      margin-left: -384px
+      width: 768px
+  &--desktop
+    .promethee-editor__preview--frame
+      width: 100%
+      left: 0
+      right: 0