promethee 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 43b25ff2d3518e7be7489ed2faba0f297ad9a174
-  data.tar.gz: 7b8cea02c58ccd0ddfb0dd4144444776a2502766
+  metadata.gz: 5329192fbb6d6dff5ce76400ea7d1e893a85d986
+  data.tar.gz: 252c1911ebeee040d1fdd554b227b497d770adb4
 SHA512:
-  metadata.gz: 5be117d3d5f51b79301e3ed737346ae5fcdd2d12f237b4fa129383b35b310058d896de742103bd72909b010824306e614ce3aca1eeb451b6d063dd2bf2dcfc6d
-  data.tar.gz: c7ac43e207dabe38b8bbf8c59972570e27e49cf78b7e7fe4fdfa18bb881450158cca33dcb3cf555beaa0e68f7d793af7be3e568f11e7718aa27849dd795cfe24
+  metadata.gz: 63893b3d2074a7591666dca95e6ac011feff3602281e38c2965c3a18b930e3e2399c339a7d278a61b1771fb2bec60106da882272528486aa08d5c08588e79e43
+  data.tar.gz: 72ac5c6055d870b14ffe63341684e74b05b124a0b7fbc5baf7f3d676a4929695d1b9229b28c15187aac39962bd92d00e2aff97988ae2e242bfeb93dee0597e84

data/README.md

@@ -1,29 +1,44 @@
-# Prométhée
-## Brings fire to your pages
+![Prométhée](https://github.com/lespoupeesrusses/promethee/blob/master/app/assets/images/logo-promethee-vertical.svg)
+
+# Bring fire to your page
+
+[![Maintainability](https://api.codeclimate.com/v1/badges/98a8649f411bc9f50786/maintainability)](https://codeclimate.com/github/lespoupeesrusses/promethee/maintainability)
 
 ## Where does it come from?
-As we built sites and digital solutions for some of the most prestigious brands (Givenchy, L’Oréal, Lancôme, Cartier, Hermès…) we often need to build spectacular pages, with a responsive layout, using a predefined design system or visual guidelines. Very often, our clients need to be able to do some creation or adaptation on their own. And in most situation, it has to be translated very easily, with no technical cost.
-Our first approach was to generate custom templates. For example, 10 years ago, before responsivity, we did a lot of multilingual content for Parfums Lolita Lempicka using a simple read/write system with something like 10 templates. We soon made a “Do what you feel” template, allowing the designer to put fields wherever he needed on the page, but it was completely unusable for people who lacked either design or development background. 
-We then built a system for Cartier, where the content was made by a designer, then implemented by a front end developer with keys allowing the translation. This was good because creation was very free, but the client could make no content on its own. 
+As we build sites and digital solutions for some of the most prestigious brands (Givenchy, L’Oréal, Lancôme, Cartier, Hermès…) we often need to build spectacular pages, with a responsive layout, using a predefined design system or visual guidelines. Very often, our clients need to be able to do some creation or adaptation on their own. And in most situation, it has to be translated very easily, with no technical cost.
+
+Our first approach was to generate custom templates. For example, 10 years ago, before responsivity, we did a lot of multilingual content for Parfums Lolita Lempicka using a simple read/write system with something like 10 templates. We soon made a “Do what you feel” template, allowing the designer to put fields wherever he needed on the page, but it was completely unusable for people who lacked either design or development background.
+
+We then built a system for Cartier, where the content was made by a designer, then implemented by a front end developer with keys allowing the translation. This was good because creation was very free, but the client could make no content on its own.
+
 We built another tool for Diptyque, with content bricks that we assembled. Basically, it looked like vertical slides doing a nice one-page. It seemed like the perfect solution, but in the end it had so many options it became very hard to use, and still the different pages like quite similar.
-Then came the page builder. Inspired by Divi, the idea was to offer rows and columns, based on bootstrap. We built that for Hermès, as one of the different components available to build pages. Translation was fine, responsivity was fine, content was not super simple to do, but still quite simple, and the use of presets provided a good “easy to use” solution. 
+
+Then came the page builder. Inspired by Divi, the idea was to offer rows and columns, based on bootstrap. We built that for Hermès, as one of the different components available to build pages. Translation was fine, responsivity was fine, content was not super simple to do, but still quite simple, and the use of presets provided a good “easy to use” solution.
+
 We re-used the concept for Céline, and realized we had a mis-conception: the builder was the basic page editor, and we could add components in it.
+
 As we needed the solution for 2 projects, and a third one coming, we decided to make it a gem.
+
 Prométhée was born.
 
 ## What does it do?
 It builds responsive pages!
+
 There are 2 parts: the editor, which lets you build the pages, and the renderer. The pages are stored as json data, which can easily be added to a model in rails, and saved via a regular form.
 
 ## How does it relate to existing solutions?
-tinymce / trix...
-divi
-semplice
-shogun
 
+### Regarding wysiwyg editors like tinymce, trix...
 
-## Installation
+It's not only rich text: it lets you build complete pages, with a grid system.
 
+### Regarding page builders like Divi, Semplice, Shogun
+
+It's for Rails (unlike Divi or Semplice which are for Wordpress).
+It's open source.
+It does not provide as many options, as it's intended to be integrated in a website with specific brand guidelines through some custom css.
+
+## Installation
 Add this line to your application's Gemfile:
 
 ```ruby
@@ -31,27 +46,157 @@ gem 'promethee'
 ```
 
 And then execute:
-
-    $ bundle
+```bash
+$ bundle
+```
 
 Or install it yourself as:
-
-    $ gem install promethee
+```bash
+$ gem install promethee
+```
 
 ## Usage
+In this example, we have a page with a title (string) and a data (jsonb) attribute.
 
-TODO: Write usage instructions here
+### Render
+The data is:
 
-## Development
+```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>'
+            }
+          },
+          {
+            type: 'image',
+            attributes: {
+              src: 'https://c1.staticflickr.com/5/4089/4975306844_f849232195_b.jpg',
+              alt: 'Prométhée'
+            }
+          }
+        ]
+      }
+    ]
+  }
+]
+```
 
+The view is:
+
+```erb
+<%= promethee @page.data %>
+```
+
+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>
+  </div>
+</div>
+```
+
+### Editor
+
+This would allow editing for a page model, with a jsonb data attribute:
+
+```erb
+<%= form_for @page do |f| %>
+  <%= f.promethee :data %>
+  <%= f.submit %>
+<% end %>
+```
+
+This would do quite the same thing:
+
+```erb
+<form action="/pages" method="post">
+  <%= promethee_editor :page, :data, @page.data %>
+  <input type="submit">
+</form>
+```
+
+#### The editor has components
+
+The component is made of a show and and edit.
+
+In the edit, the component description looks like:
+```
+{
+  name: 'Image',
+  thumb: 'http://via.placeholder.com/300x200',
+  data: {
+    type: 'image',
+    attributes: {
+      src: 'https://source.unsplash.com/random/1920x1080'
+    }
+  }
+}
+```
+
+#### An editor 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...
+
+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.
+
+### Roadmap
+- ~~Gem setup~~
+- ~~renderer helper~~
+- ~~editor helper (for form tag)~~
+- ~~editor helper (for simple form)~~
+- ~~Show Row~~
+- ~~Show Col~~
+- ~~Show Text~~
+- ~~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
+- Hooks (needed for image and video)
+- 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.
 
 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.
 
 ## 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).

data/Rakefile

@@ -1,2 +1,33 @@
-require "bundler/gem_tasks"
-task :default => :spec
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Promethee'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+
+
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/images/logo-promethee-horizontal.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 390 116" style="enable-background:new 0 0 390 116;" xml:space="preserve">
+	<path fill="#ff9900" d="M79.2,28.8c-2-0.7-8.6-2.6-8.6-7.6c0,0-6,3.8,0.4,10.3c1,1.1,15.4,15.4-6.2,25.5,c6.1-15.5-5.2-26.5-5.2-26.5L51,21.2v66.5h-6.7v2.9H71v-2.9h-6.6V63.5c2.6-0.1,5.1-0.1,6.7-0.1c13,0,21.1-7.1,21.1-17.5,C92.2,38.3,87.6,32,79.2,28.8z"/>
+	<path d="M114.7,60h-8.1v10.3h-1.2v-23h9.2c4.2,0,6.8,2.5,6.8,6.4C121.4,57.3,118.7,60,114.7,60z M114.6,48.4h-8v10.3h8.1,c2.8,0,5.5-1.6,5.5-5.2C120.2,50.3,118.1,48.4,114.6,48.4z"/>
+	<path d="M148,70.2h-1.3c-0.3-0.6-0.5-1.4-0.5-2.5v-3.4c0-3.7-2.7-4.5-4.9-4.5h-8.5v10.3h-1.2v-23h9.7c4.3,0,6.9,2.5,6.9,6.4,c0,2.8-1.5,4.8-3.9,5.8c2,0.8,3.2,2.5,3.2,5v3.1C147.5,68.3,147.7,69.6,148,70.2z M146.9,53.5c0-3.3-2-5.1-5.6-5.1h-8.5v10.3h8.6,C144.2,58.7,146.9,57.1,146.9,53.5z"/>
+	<path d="M180,58.6c0,6.6-5.1,12-11.4,12c-6.3,0-11.4-5.4-11.4-12s5.1-12,11.4-12C175,46.6,180,51.8,180,58.6z M178.7,58.6,c0-6-4.5-10.8-10.1-10.8s-10.2,4.8-10.2,10.8s4.5,10.8,10.2,10.8C174.2,69.4,178.7,64.5,178.7,58.6z"/>
+	<path d="M212,70.2h-1.3V50l-8.8,20.2h-1.4L191.6,50v20.2h-1.2v-23h1.3l9.5,21.6l9.5-21.6h1.3L212,70.2L212,70.2z"/>
+	<path d="M225.3,57.5h12.6v1.2h-12.6V69h14v1.2H224v-23h15.3v1.2h-14V57.5z M232,44.8h-1.4l2.8-3.4h1.6L232,44.8z"/>
+	<path d="M256.6,48.4v21.8h-1.2V48.4h-7.7v-1.2h16.7v1.2H256.6L256.6,48.4z"/>
+	<path d="M291.9,70.2h-1.2V58.7h-15.5v11.5H274v-23h1.2v10.3h15.5V47.2h1.2L291.9,70.2L291.9,70.2z"/>
+	<path d="M305.2,57.5h12.6v1.2h-12.6V69h14v1.2H304v-23h15.3v1.2h-14L305.2,57.5L305.2,57.5z M312,44.8h-1.4l2.8-3.4h1.6L312,44.8z"/>
+	<path d="M331.7,57.5h12.6v1.2h-12.6V69h14v1.2h-15.3v-23h15.3v1.2h-14V57.5z"/>
+</svg>

data/app/assets/images/logo-promethee-vertical.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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 500 340" style="enable-background:new 0 0 500 340;" xml:space="preserve">
+	<path fill="#ff9900" d="M263.6,96.1c-2.5-1-10.8-3.2-10.8-9.5c0,0-7.5,4.8,0.4,12.9c1.3,1.4,19.3,19.2-7.8,31.9,c7.6-19.3-6.5-33.2-6.5-33.2l-10.6-11.6v49.6l-0.2,8.4v25.3H220v3.7h33.5V170h-8.2v-30.3c3.2-0.1,6.4-0.2,8.4-0.2,c16.3,0,26.3-8.8,26.3-21.8C280,107.9,274.1,100.1,263.6,96.1z"/>
+	<path d="M99.6,227.5h-11v13.9H87v-31.3h12.5c5.7,0,9.3,3.3,9.3,8.7C108.8,223.9,105,227.5,99.6,227.5z M99.5,211.8H88.6v14h11,c3.7,0,7.5-2.2,7.5-7C107.1,214.4,104.3,211.8,99.5,211.8z"/>
+	<path d="M144.8,241.4h-1.7c-0.4-0.9-0.6-1.9-0.6-3.4v-4.6c0-5-3.6-6-6.6-6h-11.6v14h-1.7v-31.3h13.2c5.8,0,9.3,3.3,9.3,8.7,c0,3.7-2,6.6-5.2,7.8c2.8,1,4.3,3.4,4.3,6.9v4.1C144.2,238.8,144.5,240.5,144.8,241.4z M143.4,218.8c0-4.4-2.8-7-7.6-7h-11.5v14,H136C139.7,225.8,143.4,223.6,143.4,218.8z"/>
+	<path d="M188.3,225.6c0,9-6.9,16.3-15.5,16.3s-15.5-7.3-15.5-16.3s6.9-16.3,15.5-16.3C181.6,209.4,188.3,216.5,188.3,225.6z M186.6,225.6c0-8.2-6-14.6-13.8-14.6c-7.6,0-13.8,6.6-13.8,14.6c0,8.1,6.2,14.7,13.8,14.7C180.5,240.3,186.6,233.7,186.6,225.6z"/>
+	<path d="M231.7,241.4H230V214l-12,27.4h-1.8l-12-27.4v27.4h-1.7v-31.3h1.8l12.9,29.3l12.9-29.3h1.8v31.3H231.7z"/>
+	<path d="M249.8,224.2h17.1v1.6h-17.1v13.9h19.1v1.7h-20.7v-31.3h20.7v1.7h-19.1L249.8,224.2L249.8,224.2z M259,206.9h-1.8l3.8-4.6,h2.1L259,206.9z"/>
+	<path d="M292.3,211.8v29.6h-1.7v-29.6h-10.5v-1.7h22.7v1.7H292.3z"/>
+	<path d="M340.2,241.4h-1.7v-15.6h-21v15.6h-1.7v-31.3h1.7v14h21v-14h1.7V241.4z"/>
+	<path d="M358.4,224.2h17.1v1.6h-17.1v13.9h19.1v1.7h-20.7v-31.3h20.7v1.7h-19.1V224.2z M367.6,206.9h-1.8l3.8-4.6h2.1L367.6,206.9z"/>
+	<path d="M394.3,224.2h17.1v1.6h-17.1v13.9h19.1v1.7h-20.7v-31.3h20.7v1.7h-19.1V224.2z"/>
+</svg>

data/app/assets/javascripts/promethee.js

@@ -0,0 +1,59 @@
+//= 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/javascripts/promethee/controller.js

@@ -0,0 +1,22 @@
+Promethee.Controller = function(name, initializer) {
+  this.name = name;
+  this.initializer = initializer;
+};
+
+Promethee.Controller.prototype = {
+  constructor: Promethee.Controller,
+
+  initialize: function(promethee) {
+    promethee.app.controller(this.name, this.initializer);
+  }
+};
+
+Promethee.Controller.controllers = {};
+
+Promethee.Controller.for = function(name, initializer) {
+  this.controllers[name] = new this(name, initializer);
+};
+
+Promethee.Controller.initialize = function(promethee) {
+  for(var name in this.controllers) this.controllers[name].initialize(promethee);
+};

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

@@ -0,0 +1,105 @@
+@import 'bootstrap'
+
+@import 'promethee-editor/variables'
+@import 'font-awesome.css'
+@import 'material_icons.css'
+@import 'promethee-editor/mixins'
+
+$promethee-color: #ff9900
+
+.promethee-editor
+  +grid-builder-set-gutter-width(0)
+
+  background: white
+
+  .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
+
+  &__toolbar
+    background: #fff
+    padding: 10px
+    font-size: 11px
+    text-transform: uppercase
+    font-weight: bold
+    color: $promethee-color
+    &, *
+      user-select: none
+      cursor: move
+
+  &__wrapper
+    padding: 10px
+
+  &.fullscreen
+    position: fixed
+    left: 0
+    right: 0
+    bottom: 0
+    top: 0
+    overflow: auto