Massive, gross refactor - switched to CKEditor and fully implemented saving and Media library functionality

Author: toastercup

.env.example

@@ -0,0 +1,5 @@
+#
+# 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/

.gitignore

@@ -37,3 +37,9 @@ coverage
 # Dependency directories
 node_modules
 bower_components
+
+# Proprietary components
+redactor.*
+
+# Sensitive Environment-Specific Data
+.env

README.md

@@ -1,6 +1,6 @@
-# Content Snippets
+# Content Snippets (Edit)
 
-A tool to enable in-page editing of elements, with an adaptable content backend. Drop this into a Web page, compose with a content adapter and credentials via a server framework of your choosing, and begin editing!
+A tool to enable in-page editing of elements with [Cortex](https://github.com/cortex-cms) as a backend.
 
 ### Building/Watching
 
@@ -12,6 +12,8 @@ $ npm install
 $ bower install
 ```
 
+You will also need to host/locate several CKEditor plugins, which should be available via any hosted Cortex instance. See `main.js` for further information.
+
 Now you can build or watch the project! Built and Compiled assets will be plopped into the `dist` directory.
 
 ```sh
@@ -24,4 +26,4 @@ $ gulp compile
 
 ### Configuration
 
-Coming soon..
+Before using or distributing `content-snippets-edit`, the `.env` file should be configured. Copy and rename the `.env.example` provided and configure to match the environment.

bower.json

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

gulpfile.js

@@ -1,9 +1,11 @@
 'use strict';
 
-var applicationName = 'content-snippets',
+require('dotenv').load();
+var applicationName = 'content-snippets-edit',
   basePaths = {
     src: 'src/app/',
-    dest: 'dist/'
+    dest: 'dist/',
+    bower: 'bower_components'
   },
   paths = {
     scripts: {
@@ -16,10 +18,12 @@ var applicationName = 'content-snippets',
     }
   },
   appFiles = {
-    styles: paths.styles.src,
-    scripts: paths.scripts.src + '**/*.js'
+    styles: paths.styles.src + 'main.scss',
+    scripts: paths.scripts.src + '**/*.js',
+    riot: '**/tags/**'
   },
   vendorFiles = {
+    styles: 'src/vendor/**/*.css',
     scripts: 'src/vendor/**/*.js'
   },
   destFilenames = {
@@ -29,51 +33,43 @@ var applicationName = 'content-snippets',
     styleMin: applicationName + '.min.css'
   },
   gulp = require('gulp'),
-  es = require('event-stream'),
+  streamqueue = require('streamqueue'),
   bowerFiles = require('main-bower-files'),
   plugins = require("gulp-load-plugins")({
     pattern: ['gulp-*', 'gulp.*'],
     replaceString: /\bgulp[\-.]/
-  });
-
-var changeEvent = function (evt) {
-  plugins.util.log('File', plugins.util.colors.cyan(evt.path.replace(new RegExp('/.*(?=/' + basePaths.src + ')/'), '')), 'was', plugins.util.colors.magenta(evt.type));
-};
-
-var scriptsStream = function () {
-  return gulp.src([appFiles.scripts, vendorFiles.scripts, '!**/tags/**']);
-};
-
-var riotStream = function () {
-  return gulp.src('**/tags/**')
-    .pipe(plugins.riot());
-};
-
-var bowerStream = function () {
-  return gulp.src(bowerFiles({
+  }),
+  changeEvent = function (event) {
+    plugins.util.log('File', plugins.util.colors.cyan(event.path.replace(new RegExp('/.*(?=/' + basePaths.src + ')/'), '')), 'was', plugins.util.colors.magenta(event.type));
+  },
+  scriptsStream = gulp.src([vendorFiles.scripts, appFiles.scripts, '!**/tags/**']),
+  riotStream = gulp.src(appFiles.riot)
+    .pipe(plugins.riot()),
+  bowerStream = gulp.src(bowerFiles({
     filter: '**/*.js'
-  }));
-};
-
-gulp.task('sass', function () {
-  return plugins.rubySass(appFiles.styles)
+  })),
+  sassStream = plugins.rubySass(appFiles.styles, {loadPath: basePaths.bower})
     .on('error', function (err) {
       new plugins.util.PluginError('SASS', err, {showStack: true});
-    })
+    }),
+  vendorStylesStream = gulp.src(vendorFiles.styles);
+
+gulp.task('styles', function () {
+  return streamqueue({objectMode: true}, sassStream, vendorStylesStream)
     .pipe(plugins.concat(destFilenames.style))
     .pipe(plugins.autoprefixer('last 2 versions', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4', 'Firefox >= 4'))
     .pipe(plugins.size())
     .pipe(gulp.dest(paths.styles.dest));
 });
 
 gulp.task('scripts', function () {
-  return es.merge(scriptsStream(), riotStream(), bowerStream())
+  return streamqueue({objectMode: true}, bowerStream, riotStream, scriptsStream)
     .pipe(plugins.concat(destFilenames.script))
     .pipe(plugins.size())
     .pipe(gulp.dest(paths.scripts.dest));
 });
 
-gulp.task('minify-css', ['sass'], function () {
+gulp.task('minify-styles', ['styles'], function () {
   return gulp.src(paths.styles.dest + destFilenames.style)
     .pipe(plugins.combineMq())
     .pipe(plugins.minifyCss())
@@ -88,17 +84,17 @@ gulp.task('minify-scripts', ['scripts'], function () {
     .pipe(gulp.dest(paths.scripts.dest));
 });
 
-gulp.task('build', ['sass', 'scripts']);
+gulp.task('build', ['styles', 'scripts']);
 
 gulp.task('watch', ['build'], function () {
-  gulp.watch(appFiles.styles + '**/*.scss', ['sass']).on('change', function (evt) {
-    changeEvent(evt);
+  gulp.watch([paths.styles.src + '**/*.scss', vendorFiles.styles], ['styles']).on('change', function (event) {
+    changeEvent(event);
   });
-  gulp.watch([appFiles.scripts, vendorFiles.scripts], ['scripts']).on('change', function (evt) {
-    changeEvent(evt);
+  gulp.watch([appFiles.scripts, vendorFiles.scripts, appFiles.riot], ['scripts']).on('change', function (event) {
+    changeEvent(event);
   });
 });
 
-gulp.task('compile', ['minify-scripts', 'minify-css']);
+gulp.task('compile', ['minify-scripts', 'minify-styles']);
 
 gulp.task('default', ['build']);

package.json

@@ -1,34 +1,36 @@
 {
-  "name": "content-snippets",
+  "name": "content-snippets-edit",
   "version": "0.0.1",
   "description": "A tool to enable in-page editing of elements, with an adaptable content backend",
-  "author": "Alex Tharp <toastercup@gmail.com>",
-  "license": "MIT",
-  "repository": "git://github.com/toastercup/content-snippets.git",
+  "author": "CB Content Enablement Product Team <ContentEnablementProductTeam@careerbuilder.com>",
+  "license": "Apache-2.0",
+  "repository": "git://github.com/cortex-cms/content-snippets-edit.git",
   "keywords": [
     "editable",
     "snippet",
     "cms",
-    "content"
+    "content",
+    "edit"
   ],
   "devDependencies": {
-    "event-stream": "~3.3.0",
-    "main-bower-files": "~2.7.0",
-    "gulp": "~3.8.11",
-    "gulp-load-plugins": "~0.10.0",
-    "gulp-autoprefixer": "~2.2.0",
-    "gulp-concat": "~2.5.2",
-    "gulp-ruby-sass": "~1.0.5",
-    "gulp-riot": "~0.2.14",
-    "gulp-size": "~1.2.1",
-    "gulp-util": "~3.0.4",
-    "gulp-uglify": "~1.2.0",
+    "gulp": "~3.9.0",
+    "gulp-load-plugins": "~1.0.0",
+    "gulp-autoprefixer": "~3.1.0",
+    "gulp-concat": "~2.6.0",
+    "gulp-ruby-sass": "~2.0.5",
+    "gulp-riot": "~0.3.1",
+    "gulp-size": "~2.0.0",
+    "gulp-util": "~3.0.7",
+    "gulp-uglify": "~1.4.2",
     "gulp-combine-mq": "~0.4.0",
-    "gulp-minify-css": "~1.1.1",
+    "gulp-minify-css": "~1.2.1",
     "gulp-rename": "~1.2.2",
-    "gulp-ignore": "~1.2.1"
+    "gulp-ignore": "~2.0.1",
+    "main-bower-files": "~2.9.0",
+    "streamqueue": "~1.1.1",
+    "dotenv": "~1.2.0"
   },
   "engines": {
-    "node": ">=0.10.0"
+    "node": ">=4.2.1"
   }
 }

src/app/config.js

@@ -0,0 +1,8 @@
+(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
+  });
+}(this));

src/app/constants.js

@@ -1,11 +1,16 @@
 (function(global) {
   'use strict';
 
-  global.ACTIONS = {
-  };
+  _.extend(global.constants.ACTIONS, {
+    MEDIAS_CHANGED: 'medias_changed',
+    MEDIAS_NEXT: 'medias_next',
+    MEDIAS_PREVIOUS: 'medias_previous',
+    MEDIAS_SEARCH: 'medias_search',
+    INSERT_MEDIA: 'insert_media'
+  });
 
-  global.settings = {
-    API_ROUTES: {
-    }
-  };
+  _.extend(global.constants.FRAME_ACTIONS, {
+    GET_MEDIAS: 'get_medias',
+    MEDIAS_DATA: 'medias_data'
+  });
 }(this));

src/app/main.js

@@ -1,11 +1,32 @@
 (function(global) {
-  var stores = {
-  };
+  'use strict';
 
-  for (var k in stores) {
-    RiotControl.addStore(stores[k]);
-  }
+  $('body').prepend( $('<toolbar></toolbar>') );
+  $('body').append( $('<media-library></media-library>') );
+  $('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() {
+    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' );
+    global.CKEDITOR.plugins.addExternal( 'sourcedialog', global.config.CKEDITOR_PLUGINS_URL + 'sourcedialog/', 'plugin.js' );
+    global.CKEDITOR.plugins.addExternal( 'codemirror', global.config.CKEDITOR_PLUGINS_URL + 'codemirror/', 'plugin.js' );
+    global.CKEDITOR.config.extraPlugins = 'media-selector,sourcedialog';
+    global.CKEDITOR.config.removePlugins = 'image,sourcearea';
 
-  global.stores = stores;
+    var stores = {
+      MediasStore: new MediasStore()
+    };
 
+    for (var k in stores) {
+      RiotControl.addStore(stores[k]);
+    }
+
+    _.extend(global.stores, stores);
+
+    riot.mount('snippet');
+    riot.mount('media-library');
+    riot.mount('toolbar');
+  });
 }(this));

src/app/sass/components/_icons.scss

@@ -0,0 +1,13 @@
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  word-wrap: normal;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}

src/app/sass/components/_modal-overrides.scss

@@ -0,0 +1,27 @@
+// Materialize's Modal is terrible in the most terrible way. We should move to something else ASAP.
+// Also, it turns out Materialize is just poor in general.
+
+.modal {
+  width: 80%;
+  overflow-x: hidden;
+  z-index: 10000 !important; // Just above CKEditor
+
+  .modal-content {
+    width: 100% !important;
+    overflow-y: scroll !important;
+    height: calc(100% - 45px) !important;
+  }
+
+  .modal-footer {
+    height: auto !important;
+
+    .btn-flat {
+      margin: auto !important;
+    }
+  }
+
+  &.modal-fixed-footer {
+    height: 80%;
+    max-height: 80%;
+  }
+}

src/app/sass/components/_reset.scss

@@ -0,0 +1,12 @@
+* {
+  vertical-align: baseline;
+  font-weight: inherit;
+  font-family: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  border: 0 none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  line-height: 1.5;
+}