Working presentation editor gadget

Gruntfile.js

@@ -94,7 +94,9 @@ module.exports = function (grunt) {
           "<%= global_config.dest %>/erp5/erp5.css":
             "<%= global_config.src %>/erp5/erp5.less",
           "<%= global_config.dest %>/twin_erp5/superindex.css":
-            "<%= global_config.src %>/twin_erp5/superindex.less"
+            "<%= global_config.src %>/twin_erp5/superindex.less",
+          "<%= global_config.dest %>/presentation_editor/presentation_editor.css":
+            "<%= global_config.src %>/presentation_editor/presentation_editor.css"
         }
       }
     },
@@ -149,6 +151,12 @@ module.exports = function (grunt) {
           }
         }
       },
+      images: {
+        expand: true,
+        cwd: "<%= global_config.src %>/",
+        src: "**/images/*.*",
+        dest: "<%= global_config.dest %>/"
+      },
       rsvp: {
         src: "node_modules/rsvp/dist/rsvp-2.0.4.min.js",
         relative_dest: "lib/rsvp.min.js",

src/presentation_editor/presentation_editor.css

@@ -110,3 +110,66 @@ body {
     width: 24%;
     margin: 3%
 }
+
+.ui-panel {
+    width: 35%;
+}
+
+.ui-panel-position-left {
+    left: -35%;
+}
+
+.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay,
+.ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
+    -webkit-transform: translate3d(-35%,0,0);
+    -moz-transform: translate3d(-35%,0,0);
+    transform: translate3d(-35%,0,0);
+}
+
+.ui-panel-position-right {
+    right: -35%;
+}
+
+.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay,
+.ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
+    -webkit-transform: translate3d(35%,0,0);
+    -moz-transform: translate3d(35%,0,0);
+    transform: translate3d(35%,0,0);
+}
+
+.ui-panel-page-content-position-left,
+.ui-panel-dismiss-open.ui-panel-dismiss-position-left {
+	left: 35%;
+	right: -35%;
+}
+
+.ui-panel-animate.ui-panel-page-content-position-left.ui-panel-page-content-display-reveal,
+.ui-panel-animate.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
+    -webkit-transform: translate3d(35%,0,0);
+    -moz-transform: translate3d(35%,0,0);
+    transform: translate3d(35%,0,0);
+}
+/* panel right open */
+.ui-panel-page-content-position-right,
+.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
+	left: -35%;
+	right: 35%;
+}
+/* animated: panel right open (for reveal and push) */
+.ui-panel-animate.ui-panel-page-content-position-right.ui-panel-page-content-display-reveal, 
+.ui-panel-animate.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
+	-webkit-transform: translate3d(-35%,0,0);
+	-moz-transform: translate3d(-35%,0,0);
+	transform: translate3d(-35%,0,0);
+}
+
+@media (min-width:55em) {
+    .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push,
+    .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-reveal {
+	margin-right: 35%;
+    }
+    .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push,
+    .ui-responsive-panel .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-reveal {
+	margin-left: 35%;
+    }
+}
\ No newline at end of file

src/presentation_editor/presentation_editor.js

@@ -3,6 +3,8 @@
 (function (window, $, html_beautify, rJS) {
   "use strict";
 
+  rJS(window).ready(function (g) {
+
     var presentation = null,
       slideForm,
       newSlideButton = $('#add-slide'),
@@ -73,16 +75,28 @@
 
     Slide.prototype = {
 
-    dataTemplate: document.querySelector('template#slide-data')
+      dataTemplate: document
+        .querySelector('template#slide-data')
         .content.firstElementChild,
-    htmlTemplate: document.querySelector('template#slide-html')
+      htmlTemplate: document
+        .querySelector('template#slide-html')
         .content.firstElementChild,
 
-    editBtn: function () {return this.html.querySelector("button.edit"); },
-    deleteBtn: function () {return this.html.querySelector("button.delete"); },
-    htmlContent: function () {return this.html.querySelector(".content"); },
-    htmlImage: function () {return this.html.querySelector("img"); },
-    htmlTitle: function () {return this.html.querySelector("h1"); },
+      editBtn: function () {
+        return this.html.querySelector("button.edit");
+      },
+      deleteBtn: function () {
+        return this.html.querySelector("button.delete");
+      },
+      htmlContent: function () {
+        return this.html.querySelector(".content");
+      },
+      htmlImage: function () {
+        return this.html.querySelector("img");
+      },
+      htmlTitle: function () {
+        return this.html.querySelector("h1");
+      },
 
       data: function () {
         var res = document.importNode(this.dataTemplate, true), img;
@@ -158,7 +172,8 @@
       },
 
       attrImageURL: function (content) {
-      return this.attrTextInput(this.elt.querySelector('#image-url'), content);
+        return this.attrTextInput(this.elt.querySelector('#image-url'),
+                                  content);
       },
 
       updatePreview: function (content) {
@@ -328,18 +343,15 @@
       }
     });
 
-  rJS(window)
+    g.editor = $('#slide-list').presentation();
+  })
 
     .declareMethod('setContent', function (content) {
-      rJS(this).editor.setContent(content);
+      this.editor.setContent(content);
     })
 
     .declareMethod('getContent', function () {
-      return rJS(this).editor.getContent();
-    })
-
-    .ready(function (g) {
-      g.editor = $('#slide-list').presentation();
+      return this.editor.getContent();
     });
 
 }(window, $, html_beautify, rJS));