Merge pull request #18 from jywarren/main-image

display existing main image
publiclab · Jun 15, 2016 · 052470d · 052470d
2 parents 7123d9d + a4b151a
commit 052470d
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 PublicLab.Editor
 ====
 
+![tests](https://travis-ci.org/publiclab/PublicLab.Editor.svg)
+
 **This library is incomplete -- this page is a rough planning document.**
 
 Please contact [[email protected]](mailto:[email protected]) to get involved! We'd love to make this editor compatible with other platforms.

diff --git a/bower.json b/bower.json
@@ -0,0 +1,61 @@
+{
+  "name": "publiclab-editor",
+  "description": "PublicLab.Editor is a general purpose, JavaScript/Bootstrap UI framework for rich text posting, which provides an author-friendly, minimal, mobile/desktop (fluid) interface for creating blog-like content, designed for PublicLab.org",
+  "main": "dist/PublicLab.Editor.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/publiclab/PublicLab.Editor.git"
+  },
+  "keywords": [
+    "editor",
+    "wysiwyg",
+    "publiclab"
+  ],
+  "author": "Public Lab",
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jywarren/webgl-distort.git"
+  },
+  "ignore": [
+    "example.jpg",
+    "node_modules",
+    "bower.json",
+    "README.md"
+  ],
+  "bugs": {
+    "url": "https://github.com/publiclab/PublicLab.Editor/issues"
+  },
+  "dependencies": {
+    "resig-class": "~0.1.0",
+    "backbone": "~1.3.3",
+    "xhr":      "~2.2.0",
+    "woofmark": "4.1.0",
+    "crossvent": "1.5.0",
+    "domador": "2.4.2",
+    "megamark": "3.2.2",
+    "horsey": "3.0.0",
+    "banksy": "1.0.0",
+    "font-awesome": "~4.5.0",
+    "bootstrap": "~3.2.0",
+    "bootstrap-datepicker": "~1.6.0",
+    "bootstrap-tokenfield": "~0.12.0",
+    "typeahead.js-browserify": "~1.0.7",
+    "jquery": "~2",
+    "jquery-file-upload": "git://github.com/blueimp/jQuery-File-Upload.git#c72c93c3c005bbd0c849c2e35d01daaf7d23ee51",
+    "moment": "~2.10.6",
+    "grow-textarea": "git://github.com/jywarren/grow.git#d54141c9456343f14cc6c935faa0915af09eb669"
+  },
+  "devDependencies": {
+    "browserify": "13.0.0",
+    "grunt": "^0.4.5",
+    "grunt-browserify": "^5.0.0",
+    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "jasmine": "~2.3.0",
+    "jasmine-jquery": "~2.1.1",
+    "matchdep": "^0.3.0",
+    "grunt-contrib-jasmine": "~1.0.3"
+  },
+  "homepage": "https://github.com/publiclab/PublicLab.Editor#readme"
+}
diff --git a/dist/PublicLab.Editor.js b/dist/PublicLab.Editor.js
@@ -36799,6 +36799,7 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
     _module.key = 'main_image_url';
     _module.options = options || _editor.options.mainImageModule || {};
     _module.options.name = 'main_image';
+    _module.options.url = _editor.options.mainImageUrl;
     _module.options.instructions = 'Choose an image to be used as a thumbnail for your post. <br /><a href="">Image tips &raquo;</a>';
 
     _module._super(_editor, _module.options);
@@ -36807,8 +36808,8 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
 
     _module.value = function() {
 
-/////////// get this to return the image object? No, the image ID
-      return _module.image;
+      // a unique identifier for the image, from the server
+      return _module.options.id;
 
     }
 
@@ -36817,6 +36818,7 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
 
 
     _module.dropEl = _module.el.find('.ple-drag-drop');
+    _module.dropEl.css('background-image', 'url("' + _module.options.url + '")');
 
     _module.dropEl.bind('dragover',function(e) {
       e.preventDefault();
@@ -36882,8 +36884,8 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
 
         _editor.validate();
 
-// refactor
-        $("#image_revision").append('<option selected="selected" id="'+data.result.id+'" value="'+data.result.url+'">Temp Image '+data.result.id+'</option>');
+// refactor versioning of main image
+// $("#image_revision").append('<option selected="selected" id="'+data.result.id+'" value="'+data.result.url+'">Temp Image '+data.result.id+'</option>');
 
       },
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "publiclab-editor",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "PublicLab.Editor is a general purpose, JavaScript/Bootstrap UI framework for rich text posting, which provides an author-friendly, minimal, mobile/desktop (fluid) interface for creating blog-like content, designed for PublicLab.org",
   "main": "dist/PublicLab.Editor.js",
   "scripts": {

diff --git a/spec/javascripts/prepopulated_spec.js b/spec/javascripts/prepopulated_spec.js
@@ -13,7 +13,8 @@ describe("Prepopulated editor", function() {
 
     var title = 'My original title',
         body  = 'My **boring** original post.',
-        tags  = 'my,old, tags';
+        tags  = 'my,old, tags',
+        mainImage = 0; // just a unique identifier
 
     $('.ple-module-title input').val(title);
     $('.ple-module-body textarea').val(body);
@@ -32,20 +33,25 @@ describe("Prepopulated editor", function() {
 
   it("accepts prepopulated values via constructor options, by key", function() {
 
-    var title = 'My original title',
-        body  = 'My **boring** original post.',
-        tags  = 'my,old, tags';
+    var title        = 'My original title',
+        body         = 'My **boring** original post.',
+        tags         = 'my,old, tags',
+        mainImageUrl = 'http://example.com/image.jpg';
 
     editor = new PL.Editor({
-      textarea: $('.ple-textarea')[0],
-      title: title,
-      body: body,
-      tags: tags
+      textarea:     $('.ple-textarea')[0],
+      title:        title,
+      body:         body,
+      tags:         tags,
+      mainImageUrl: mainImageUrl
     });
 
     expect(editor.titleModule.value()).toBe(title);
     expect(editor.richTextModule.value()).toBe(body);
     expect(editor.tagsModule.value()).toBe(tags);
+    expect(editor.mainImageModule.options.url).toBe(mainImageUrl);
+    var url = editor.mainImageModule.el.find('.ple-drag-drop').css('background-image').replace(/"/g, ''); // phantomjs removes quotation marks
+    expect(url).toBe('url(' + mainImageUrl + ')');
   });
 
 

diff --git a/src/modules/PublicLab.MainImageModule.js b/src/modules/PublicLab.MainImageModule.js
@@ -12,6 +12,7 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
     _module.key = 'main_image_url';
     _module.options = options || _editor.options.mainImageModule || {};
     _module.options.name = 'main_image';
+    _module.options.url = _editor.options.mainImageUrl;
     _module.options.instructions = 'Choose an image to be used as a thumbnail for your post. <br /><a href="">Image tips &raquo;</a>';
 
     _module._super(_editor, _module.options);
@@ -20,8 +21,8 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
 
     _module.value = function() {
 
-/////////// get this to return the image object? No, the image ID
-      return _module.image;
+      // a unique identifier for the image, from the server
+      return _module.options.id;
 
     }
 
@@ -30,6 +31,7 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
 
 
     _module.dropEl = _module.el.find('.ple-drag-drop');
+    _module.dropEl.css('background-image', 'url("' + _module.options.url + '")');
 
     _module.dropEl.bind('dragover',function(e) {
       e.preventDefault();
@@ -95,8 +97,8 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
 
         _editor.validate();
 
-// refactor
-        $("#image_revision").append('<option selected="selected" id="'+data.result.id+'" value="'+data.result.url+'">Temp Image '+data.result.id+'</option>');
+// refactor versioning of main image
+// $("#image_revision").append('<option selected="selected" id="'+data.result.id+'" value="'+data.result.url+'">Temp Image '+data.result.id+'</option>');
 
       },