Combine view and edit libs into one, refactor

Author: toastercup

.env.example

@@ -1,5 +1,10 @@
+#
+# API Configuration
+#
+API_BASE=http://admin.cbcortex.com/api/v1
+
 #
 # Asset Configuration
 #
 CONTENT_SNIPPETS_EDIT_CSS_URL=https://s3.amazonaws.com/cortex-content-snippets/content-snippets-edit.css
-CKEDITOR_PLUGINS_URL=http://stg.admin.cbcortex.com/ckeditor-plugins/
+CKEDITOR_PLUGINS_URL=http://admin.cbcortex.com/ckeditor-plugins/

bower.json

@@ -1,13 +1,20 @@
 {
   "name": "content-snippets-edit",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "ignore": [
     "**/.*",
     "node_modules",
     "components"
   ],
   "dependencies": {
+    "riot": "~2.3.12",
+    "q": "~1.3.0",
+    "qajax": "[email protected]:cb-talent-development/qajax#master",
+    "underscore": "~1.8.3",
     "materialize": "~0.97",
     "normalize-scss": "~3.0"
+  },
+  "resolutions": {
+    "q": "~1.3.0"
   }
 }

gulpfile.js

@@ -20,7 +20,7 @@ var applicationName = 'content-snippets-edit',
   appFiles = {
     styles: paths.styles.src + 'main.scss',
     scripts: paths.scripts.src + '**/*.js',
-    riot: '**/tags/**'
+    riot: basePaths.src + 'tags/**'
   },
   vendorFiles = {
     styles: 'src/vendor/**/*.css',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "content-snippets-edit",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A tool to enable in-page editing of elements with Cortex as a backend",
   "author": "CB Content Enablement Product Team <[email protected]>",
   "license": "Apache-2.0",
@@ -14,19 +14,19 @@
   ],
   "devDependencies": {
     "gulp": "~3.9.0",
-    "gulp-load-plugins": "~1.0.0",
+    "gulp-load-plugins": "~1.1.0",
     "gulp-autoprefixer": "~3.1.0",
     "gulp-concat": "~2.6.0",
-    "gulp-ruby-sass": "~2.0.5",
-    "gulp-riot": "~0.3.1",
+    "gulp-ruby-sass": "~2.0.6",
+    "gulp-riot": "~0.4.2",
     "gulp-size": "~2.0.0",
     "gulp-util": "~3.0.7",
-    "gulp-uglify": "~1.4.2",
+    "gulp-uglify": "~1.5.1",
     "gulp-combine-mq": "~0.4.0",
-    "gulp-minify-css": "~1.2.1",
+    "gulp-minify-css": "~1.2.2",
     "gulp-rename": "~1.2.2",
     "gulp-ignore": "~2.0.1",
-    "main-bower-files": "~2.9.0",
+    "main-bower-files": "~2.11.0",
     "streamqueue": "~1.1.1",
     "dotenv": "~1.2.0"
   },

src/app/config.js

@@ -1,8 +1,27 @@
 (function(global) {
   'use strict';
 
-  _.extend(global.config, {
-    CONTENT_SNIPPETS_EDIT_CSS_URL: process.env.CONTENT_SNIPPETS_EDIT_CSS_URL,
-    CKEDITOR_PLUGINS_URL: process.env.CKEDITOR_PLUGINS_URL
-  });
+  /**
+   * Temporarily not using Dotenv because it ain't workin!
+   *
+   * global.config = {
+   *   API_BASE: process.env.API_BASE,
+   *   API_ROUTES: {
+   *     WEBPAGES: '/webpages',
+   *     WEBPAGES_FEED: '/webpages/feed'
+   *   },
+   *   CONTENT_SNIPPETS_EDIT_CSS_URL: process.env.CONTENT_SNIPPETS_EDIT_CSS_URL,
+   *   CKEDITOR_PLUGINS_URL: process.env.CKEDITOR_PLUGINS_URL
+   * };
+   */
+
+  global.config = {
+    API_BASE: 'http://localhost:3000/api/v1',
+    API_ROUTES: {
+      WEBPAGES: '/webpages',
+      WEBPAGES_FEED: '/webpages/feed'
+    },
+    CONTENT_SNIPPETS_EDIT_CSS_URL: 'https://s3.amazonaws.com/cortex-content-snippets/content-snippets-edit.css',
+    CKEDITOR_PLUGINS_URL: 'http://admin.cbcortex.com/ckeditor-plugins/'
+  };
 }(this));

src/app/constants.js

@@ -1,16 +1,23 @@
 (function(global) {
   'use strict';
 
-  _.extend(global.constants.ACTIONS, {
-    MEDIAS_CHANGED: 'medias_changed',
-    MEDIAS_NEXT: 'medias_next',
-    MEDIAS_PREVIOUS: 'medias_previous',
-    MEDIAS_SEARCH: 'medias_search',
-    INSERT_MEDIA: 'insert_media'
-  });
-
-  _.extend(global.constants.FRAME_ACTIONS, {
-    GET_MEDIAS: 'get_medias',
-    MEDIAS_DATA: 'medias_data'
-  });
+  global.constants = {
+    ACTIONS: {
+      WEBPAGE_CHANGED: 'webpage_changed',
+      SNIPPET_CHANGED: 'snippet_changed',
+      SAVE_WEBPAGE: 'save_webpage',
+      MEDIAS_CHANGED: 'medias_changed',
+      MEDIAS_NEXT: 'medias_next',
+      MEDIAS_PREVIOUS: 'medias_previous',
+      MEDIAS_SEARCH: 'medias_search',
+      INSERT_MEDIA: 'insert_media'
+    },
+    FRAME_ACTIONS: {
+      LOAD_EDITOR: 'load_editor',
+      GET_MEDIAS: 'get_medias',
+      MEDIAS_DATA: 'medias_data',
+      CANCEL_EDITOR: 'cancel_editor',
+      SAVE_WEBPAGE: 'save_webpage'
+    }
+  };
 }(this));

src/app/main.js

@@ -6,7 +6,7 @@
   $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100') );
   $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'https://fonts.googleapis.com/icon?family=Material+Icons') );
   $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', config.CONTENT_SNIPPETS_EDIT_CSS_URL) );
-  $.getScript('https://cdn.ckeditor.com/4.5.4/standard/ckeditor.js', function() {
+  $.getScript('https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js', function() {
     global.CKEDITOR.config.autoParagraph = false;
     global.CKEDITOR.config.allowedContent = true;
     global.CKEDITOR.plugins.addExternal( 'media-selector', global.config.CKEDITOR_PLUGINS_URL + 'media-selector/', 'plugin.js' );
@@ -16,14 +16,15 @@
     global.CKEDITOR.config.removePlugins = 'image,sourcearea';
 
     var stores = {
+      WebpageStore: new WebpageStore(),
       MediasStore: new MediasStore()
     };
 
     for (var k in stores) {
       RiotControl.addStore(stores[k]);
     }
 
-    _.extend(global.stores, stores);
+    global.stores = stores;
 
     riot.mount('snippet');
     riot.mount('media-library');

src/app/stores/WebpageStore.js

@@ -0,0 +1,56 @@
+(function(global) {
+  'use strict';
+
+  function WebpageStore(webpage) {
+    riot.observable(this);
+
+    this.webpage = webpage || [];
+    this._api = new Api(config.API_BASE);
+
+    this._fetch();
+    this.on(constants.ACTIONS.SNIPPET_CHANGED, this._update_snippet);
+    this.on(constants.ACTIONS.SAVE_WEBPAGE, this._save);
+  }
+
+  WebpageStore.prototype._changed = function() {
+    this.trigger(constants.ACTIONS.WEBPAGE_CHANGED, this.webpage);
+  };
+
+  WebpageStore.prototype._fetch = function() {
+    return new Promise(function(resolve, reject) {
+      var url = window.location.href;
+      this._api
+        .get(config.API_ROUTES.WEBPAGES_FEED + '?url=' + encodeURIComponent(url))
+        .then(function(webpage) {
+          this.webpage = webpage;
+          resolve(webpage);
+          this._changed();
+        }.bind(this), reject);
+    }.bind(this));
+  };
+
+  WebpageStore.prototype._save = function() {
+    parent.postMessage({event: constants.FRAME_ACTIONS.SAVE_WEBPAGE, webpage: this.webpage}, '*');
+  };
+
+  WebpageStore.prototype._update_snippet = function(snippet) {
+    var that = this,
+      foundSnippetIndex = _.findIndex(this.webpage.snippets, function(obj) {
+        return obj.document.name === snippet.name;
+      });
+    
+    if (foundSnippetIndex >= 0) {
+      this.webpage.snippets[foundSnippetIndex].document.body = snippet.body;
+    }
+    else {
+      that.webpage.snippets.push({
+        document: {
+          name: snippet.name,
+          body: snippet.body
+        }
+      });
+    }
+  };
+
+  global.WebpageStore = WebpageStore;
+}(this));

src/app/tags/media-library.tag

@@ -68,15 +68,15 @@
       window.media_select_defer.resolve(e.item);
     }
 
-    mediasNext() {
+    mediasNext(e) {
       RiotControl.trigger(constants.ACTIONS.MEDIAS_NEXT);
     }
 
-    mediasPrevious() {
+    mediasPrevious(e) {
       RiotControl.trigger(constants.ACTIONS.MEDIAS_PREVIOUS);
     }
 
-    mediasSearch() {
+    mediasSearch(e) {
       RiotControl.trigger(constants.ACTIONS.MEDIAS_SEARCH, self.search.value);
     }
   </script>

src/app/tags/snippet.tag

@@ -1,13 +1,25 @@
 <snippet>
   <div class="editor" onblur="{ contentChanged }" contenteditable="true"><yield /></div>
+
   <script>
     fluxableTag(this, RiotControl);
     var self = this;
 
+    RiotControl.on(constants.ACTIONS.WEBPAGE_CHANGED, function(webpage) {
+      var foundSnippet = _.find(webpage.snippets, function(obj) {
+        return obj.document.name == opts.id;
+      });
+      if (typeof foundSnippet != "undefined") {
+        self.getElementsByClassName('editor')[0].innerHTML = foundSnippet.document.body;
+        self.update();
+      }
+    });
+
     this.contentChanged = function(event) {
       RiotControl.trigger(constants.ACTIONS.SNIPPET_CHANGED, {name: opts.id, body: event.target.innerHTML});
     }
   </script>
+
   <style scoped>
     .editor {
       box-shadow: 0px 0px 2px #ccc;

src/app/tags/toolbar.tag

@@ -7,15 +7,18 @@
 
   <script>
     fluxableTag(this, RiotControl);
-    this.saveWebpage = function() {
+
+    this.saveWebpage = function(e) {
       RiotControl.trigger(constants.ACTIONS.SAVE_WEBPAGE);
     };
-    this.cancel = function() {
+
+    this.cancel = function(e) {
       parent.postMessage({event: constants.FRAME_ACTIONS.CANCEL_EDITOR}, '*');
     };
-    this.preview = function() {
+
+    this.preview = function(e) {
       $('.editor').removeClass('editor');
-    }
+    };
   </script>
 
   <style scoped>

src/vendor/api.js

@@ -1,19 +1,13 @@
 (function(global) {
   'use strict';
 
-  var csrf = document.querySelector("meta[name='csrf-token']").attributes['content'].value;
-
   function Api(baseUrl) {
     this.baseUrl = baseUrl || window.location.origin;
   }
 
   Api.prototype._request = function(config) {
     config.headers = config.headers || {};
 
-    if (csrf) {
-      config.headers['X-CSRF-Token'] = csrf;
-    }
-
     config.headers['Accept'] = 'application/json,text/html';
 
     return Qajax(config)