Adding basic image support

examples/officejs/catalog.js

@@ -30,7 +30,7 @@
       "interface" : "http://www.renderjs.org/interface/editor"
     },
     editor_5_dict = {
-      "path" :      "./presentation-editor.html",
+      "path" :      "./presentation-editor/index.html",
       "title" :     "Presentation Editor Gadget",
       "interface" : "http://www.renderjs.org/interface/editor"
     },

examples/officejs/presentation-editor/css/presentation-editor.css

-/* #slide-list { */
-/*     margin: 1%; */
-/* } */
-
 .block {
     display: inline-block;
     float: left;
@@ -17,7 +13,7 @@
 }
 
 .block.slide-thumb {
-    background-color: #F5F5F6;
+    background-color: white;
     box-shadow: 2px 2px 2px 3px #ccc;
     border: 2px solid grey;
 }
@@ -68,9 +64,7 @@
 .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
     padding-right: 35vw;
 }
-/* .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push { */
-/*     margin-left: 100px; */
-/* } */
+
 .ui-panel-page-content-open.ui-panel-page-content-display-push {
     width: auto;
 }
@@ -88,15 +82,16 @@
         left: 100%;
     }
     
-    /* .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(100%,0,0); */
-    /*     -moz-transform: translate3d(100%,0,0); */
-    /*     transform: translate3d(100%,0,0); */
-    /* } */
-
     .ui-panel-animate.ui-panel-page-content-position-left {
         -webkit-transform: translate3d(100%,0,0);
         -moz-transform: translate3d(100%,0,0);
         transform: translate3d(100%,0,0);
     }
 }
+
+#image-preview {
+    position: relative;
+    float: right;
+    width: 24%;
+    margin: 3%
+}
\ No newline at end of file

examples/officejs/presentation-editor/index.html

@@ -31,28 +31,58 @@
     
     <div data-role="page">
 
-      <div id="form-panel" data-role="panel" data-display="push" data-position-fixed="true">
-        <div class="panel-content">
+      <div id="form-panel" data-role="panel" data-display="push">
+        <div class="panel-content page">
           <form id="slide-form">
             <div data-role="fieldcontain">  
-              <label for="title" >Title:</label>
-              <input type="text" name="title" id="title" value="" />
+              <label for="title" ><strong>Title</strong></label>
+              <input type="text" name="title" id="title" placeholder="Type here the slide title" data-clear-btn="true" required/>
             </div>
 
+            <br/>
+
             <div data-role="fieldcontain">
-              <select name="Type" id="type" data-inline="true">
-                <option value="chapter">chapter</option>
-                <option value="illustration">illustration</option>
-              </select>
+              <label for="type"><strong>Type</strong></label>
+              <fieldset data-role="controlgroup" data-mini="true" id="type">
+                <input type="radio" name="type" id="basic-type" value="" checked="checked" />
+                <label for="basic-type">basic</label>
+                <input type="radio" name="type" id="chapter-type" value="chapter" />
+                <label for="chapter-type">chapter</label>
+                <input type="radio" name="type" id="screenshot-type" value="screenshot" />
+                <label for="screenshot-type">screenshot</label>
+                <input type="radio" name="type" id="illustration-type" value="illustration" />
+                <label for="illustration-type">illustration</label>
+                <input type="radio" name="type" id="code-type" value="code" />
+                <label for="code-type">code</label>
+                <input type="radio" name="type" id="master-type" value="master" />
+                <label for="master-type">master</label>  
+              </fieldset>
+            </div>
+            
+            <br/>
+
+            <div data-role="fieldcontain" id="image-field">  
+              <label for="image"><strong>Image</strong></label>
+              <input type="file" name="image" id="image-input" class="ui-btn" />
+              <img id="image-preview" class="ui-shadow ui-corner-all">
             </div>
             
             <div data-role="fieldcontain">  
-              <label for="content">Content:</label>
-              <textarea name="content" id="content"></textarea>
+              <label for="content"><strong>Slide text</strong></label>
+              <textarea name="content" id="content" placeholder="This text will appear in the slide"></textarea>
             </div>
 
-            <input data-inline="true" type="submit" id="submit" value="Add slide">
-            <input data-inline="true" type="button" id="cancel" value="Cancel" data-theme="b">
+            <div data-role="fieldcontain">  
+              <label for="details"><strong>Slide details</strong></label>
+              <textarea name="details" id="details" placeholder="This text will be hidden"></textarea>
+            </div>
+            
+            <br/>
+            
+            <div id="slide-form-buttons" class="ui-grid-a">
+              <div class="ui-block-a"><input type="button" id="cancel" value="Cancel" data-theme="b"></div>
+              <div class="ui-block-b"><input type="submit" id="submit" value="Add slide" class="ui-block-b"></div>
+            </div>
           </form>
         </div>
       </div>
@@ -80,6 +110,7 @@
           <div class="dummy"></div>
           <div class="slide">
             <h1></h1>
+            <img>
             <div class="content"></div>
           </div>
         </section>

examples/officejs/presentation-editor/lib/presentation-editor.js

-/*globals window, document, $, html_beautify */
+/*globals window, document, $, html_beautify, FileReader */
 /*jslint unparam: true */
 $(function () {
   "use strict";
@@ -10,6 +10,7 @@ $(function () {
 
   formPanel.panel({ beforeclose: function () {
     newSlideButton.show();
+    slideForm.reset();
   }});
   
   function openForm() {
@@ -36,11 +37,11 @@ $(function () {
     } else {
       this.update(params);
     }
-    $(this.htmlEditButton()).click(function () {
+    $(this.editBtn()).click(function () {
       slideForm.bindToEdit(that);
       openForm();
     });
-    $(this.htmlDeleteButton()).click(function () {
+    $(this.deleteBtn()).click(function () {
       presentation.deleteSlide(that);
     });
   }
@@ -50,21 +51,11 @@ $(function () {
     dataTemplate: document.querySelector('template#slide-data').content.firstElementChild,
     htmlTemplate: document.querySelector('template#slide-html').content.firstElementChild,
 
-    htmlEditButton: function () {
-      return this.html.querySelector("button.edit");
-    },
-
-    htmlDeleteButton: function () {
-      return this.html.querySelector("button.delete");
-    },
-
-    htmlContent: function () {
-      return this.html.querySelector(".content");
-    },
-
-    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);
@@ -75,40 +66,134 @@ $(function () {
     },
 
     update: function (params) {
+      console.log(params);
       $.extend(this, params);
       this.htmlTitle().textContent = this.title;
       this.htmlContent().innerHTML = this.content;
+      if (this.type === "screenshot" || this.type === "illustration") {
+        this.htmlImage().src = this.image;
+      }else{
+        this.htmlImage().src= "";
+      }
     }
   };
   
   function SlideForm() {
+    var that = this;
     this.elt = document.querySelector("#slide-form");
     this.bindToAdd();
+    $(this.elt).find("#cancel").click(closeForm);
+    $(this.elt).find('input[type="radio"]').click(function () {
+      that.updateFieldVisibility();
+    });
+    $(this.elt).find('#image-input').change(function (evt) {
+      var file = evt.target.files[0];
+      console.log(file);
+      if (file) {
+        var reader = new FileReader();
+        reader.onload = function (e) {
+          console.log(e.target);
+          that.attrImageFile(e.target.result);
+        };
+        reader.readAsDataURL(file);
+      }
+    });
   }
 
   SlideForm.prototype = {
 
+    attrTextInput: function (inputElt, content) {
+      if (content !== undefined) {
+        inputElt.value = content;
+      }else{
+        return inputElt.value;
+      }
+    },
+    
+    attrTitle: function(content) {
+      return this.attrTextInput(this.elt.querySelector('#title'), content);
+    },
+    
+    attrContent: function(content) {
+      return this.attrTextInput(this.elt.querySelector('#content'), content);
+    },
+    
+    attrDetails: function(content) {
+      return this.attrTextInput(this.elt.querySelector('#details'), content);
+    },
+
+    attrType: function(type) {
+      var radios = $(this.elt).find('input[type="radio"]');
+      if (type !== undefined) {
+        radios.prop('checked', false);
+        if (type === "") {type = "basic";}
+        radios.filter("#"+type+"-type").prop('checked', true);
+        radios.checkboxradio('refresh');
+        this.updateFieldVisibility();
+      }else{
+        return radios.filter(':checked').val();
+      }
+    },
+
+    attrImageFile: function (imageFile) {
+      var input = this.elt.querySelector('#image-input');
+      var preview = this.elt.querySelector('#image-preview');
+      if (imageFile !== undefined) {
+        input.value = "";
+        preview.src = imageFile;
+      }else{
+        return preview.src;
+      }
+    },
+    
+    attrAll: function (slide) {
+      if (slide !== undefined) {
+        this.attrTitle(slide.title);
+        this.attrType(slide.type);
+        this.attrContent(slide.content);
+        this.attrDetails(slide.details);
+        this.attrImageFile(slide.image);
+      }else{
+        return {
+          title: this.attrTitle(),
+          type: this.attrType(),
+          content: this.attrContent(),
+          details: this.attrDetails(),
+          image: this.attrImageFile()
+        };
+      }
+    },
+
+    updateFieldVisibility: function () {
+      var type = this.attrType();
+      if (type === "screenshot" || type === "illustration") {
+        $(this.elt).find('#image-field').show("blind", {direction: "up"});
+      }else{
+        $(this.elt).find('#image-field').hide("blind", {direction: "up"});
+      }
+    },
+    
+    setSubmitLabel: function (label) {
+      var submit = $(this.elt).find("#submit");
+      submit.prop("value", label).button('refresh');
+    },
+    
     reset: function () {
-      this.elt.querySelector('#title').value = "";
-      this.elt.querySelector('#type').value = "";
-      this.elt.querySelector('#content').value = "";
+      this.attrAll({title: "", type: "basic", content: "", details: "", image: ""}); 
     },
     
     bindToEdit: function (slide) {
       var that = this;
+      that.currentSlide = slide;
       $(this.elt).off();
-      this.elt.querySelector('#title').value = slide.title;
-      this.elt.querySelector('#type').value = slide.type;
-      this.elt.querySelector('#content').value = slide.content;
+      this.attrAll(slide);
       $(this.elt).submit(function (e) {
-        slide.update({
-          title: that.elt.querySelector('#title').value,
-          type: that.elt.querySelector('#type').value,
-          content: that.elt.querySelector('#content').value
-        });
+        slide.update(that.attrAll());
         e.preventDefault();
+        that.currentSlide = null;
         slideForm.bindToAdd();
       });
+      this.setSubmitLabel("Save");
     },
 
     bindToAdd: function () {
@@ -116,15 +201,11 @@ $(function () {
       $(this.elt).off();
       this.reset();
       $(this.elt).submit(function (e) {
-        presentation.addSlide(new Slide({
-          title: that.elt.querySelector('#title').value,
-          type: that.elt.querySelector('#type').value,
-          content: that.elt.querySelector('#content').value
-        }));
-        this.reset();
+        presentation.addSlide(new Slide(that.attrAll()));
+        that.reset();
         e.preventDefault();
       });
-      $(this.elt).find("#cancel").click(closeForm);
+      this.setSubmitLabel("Add");
     }
   };
 
@@ -149,6 +230,9 @@ $(function () {
     },
 
     deleteSlide: function (slide) {
+      if (slideForm.currentSlide === slide) {
+        slideForm.bindToAdd();
+      }
       var index = this.slides.indexOf(slide);
       this.slides.splice(index,  1);
       slide.html.remove();