Implement Mobile Editor

closes #2957
- add FastClick library to Gruntfile.js
- add touch-editor to client/assets/lib/
- add mobile-specific utils to util/mobile-utils.js
- add codemirror util to set up TouchEditor only if we're really on mobile
- change gh-codemirror from having a default action to a named action. prevents Ember.TextArea firing action on change
- change gh-codemirror `cm.getDoc().getValue()` to `cm.getValue()` for portability
- change codemirror-shortcuts ES6 export/import style
- changed ghostimagepreview.js to check for Ember.touchEditor in addition to Ghost.touchEditor

Gruntfile.js

@@ -512,6 +512,7 @@ var path           = require('path'),
 
                             'bower_components/jquery-ui/ui/jquery-ui.js',
                             'bower_components/jquery-file-upload/js/jquery.fileupload.js',
+                            'bower_components/fastclick/lib/fastclick.js',
                             'bower_components/nprogress/nprogress.js',
 
                             'core/shared/lib/showdown/extensions/ghostimagepreview.js',

core/client/assets/lib/touch-editor.js

@@ -0,0 +1,55 @@
+var createTouchEditor = function createTouchEditor() {
+    var noop = function () {},
+        TouchEditor;
+
+    TouchEditor = function (el, options) {
+        /*jshint unused:false*/
+        this.textarea = el;
+        this.win = { document : this.textarea };
+        this.ready = true;
+        this.wrapping = document.createElement('div');
+
+        var textareaParent = this.textarea.parentNode;
+        this.wrapping.appendChild(this.textarea);
+        textareaParent.appendChild(this.wrapping);
+
+        this.textarea.style.opacity = 1;
+    };
+
+    TouchEditor.prototype = {
+        setOption: function (type, handler) {
+            if (type === 'onChange') {
+                $(this.textarea).change(handler);
+            }
+        },
+        eachLine: function () {
+            return [];
+        },
+        getValue: function () {
+            return this.textarea.value;
+        },
+        setValue: function (code) {
+            this.textarea.value = code;
+        },
+        focus: noop,
+        getCursor: function () {
+            return { line: 0, ch: 0 };
+        },
+        setCursor: noop,
+        currentLine: function () {
+            return 0;
+        },
+        cursorPosition: function () {
+            return { character: 0 };
+        },
+        addMarkdown: noop,
+        nthLine: noop,
+        refresh: noop,
+        selectLines: noop,
+        on: noop
+    };
+
+    return TouchEditor;
+};
+
+export default createTouchEditor;

core/client/components/gh-codemirror.js

@@ -1,8 +1,11 @@
 /*global CodeMirror */
 
 import MarkerManager from 'ghost/mixins/marker-manager';
+import mobileCodeMirror from 'ghost/utils/codemirror-mobile';
 import setScrollClassName from 'ghost/utils/set-scroll-classname';
-import 'ghost/utils/codemirror-shortcuts';
+import codeMirrorShortcuts from 'ghost/utils/codemirror-shortcuts';
+
+codeMirrorShortcuts.init();
 
 var onChangeHandler = function (cm, changeObj) {
     var line,
@@ -18,7 +21,7 @@ var onChangeHandler = function (cm, changeObj) {
     // Is this a line which may have had a marker on it?
     checkMarkers();
 
-    cm.component.set('value', cm.getDoc().getValue());
+    cm.component.set('value', cm.getValue());
 };
 
 var onScrollHandler = function (cm) {
@@ -41,9 +44,12 @@ var Codemirror = Ember.TextArea.extend(MarkerManager, {
     afterRenderEvent: function () {
         var initMarkers = _.bind(this.initMarkers, this);
 
+        // replaces CodeMirror with TouchEditor only if we're on mobile
+        mobileCodeMirror.createIfMobile();
+
         this.initCodemirror();
         this.codemirror.eachLine(initMarkers);
-        this.sendAction('action', this);
+        this.sendAction('setCodeMirror', this);
     },
 
     // this needs to be placed on the 'afterRender' queue otherwise CodeMirror gets wonky

core/client/templates/editor/edit.hbs

@@ -10,7 +10,7 @@
         <a class="markdown-help" href="" {{action "openModal" "markdown"}}><span class="hidden">What is Markdown?</span></a>
     </header>
     <section id="entry-markdown-content" class="entry-markdown-content">
-        {{gh-codemirror value=scratch scrollInfo=view.markdownScrollInfo action="setCodeMirror"}}
+        {{gh-codemirror value=scratch scrollInfo=view.markdownScrollInfo setCodeMirror="setCodeMirror"}}
     </section>
 </section>
 

core/client/utils/codemirror-mobile.js

@@ -0,0 +1,45 @@
+/*global CodeMirror*/
+import mobileUtils from 'ghost/utils/mobile-utils';
+import createTouchEditor from 'ghost/assets/lib/touch-editor';
+
+var setupMobileCodeMirror,
+    TouchEditor,
+    init;
+
+setupMobileCodeMirror = function setupMobileCodeMirror() {
+    var noop = function () {},
+        key;
+
+    for (key in CodeMirror) {
+        if (CodeMirror.hasOwnProperty(key)) {
+            CodeMirror[key] = noop;
+        }
+    }
+
+    CodeMirror.fromTextArea = function (el, options) {
+        return new TouchEditor(el, options);
+    };
+
+    CodeMirror.keyMap = { basic: {} };
+};
+
+init = function init() {
+    if (mobileUtils.hasTouchScreen()) {
+        $('body').addClass('touch-editor');
+
+        // make editor tabs touch-to-toggle in portrait mode
+        $('.floatingheader').on('touchstart', function () {
+            $('.entry-markdown').toggleClass('active');
+            $('.entry-preview').toggleClass('active');
+        });
+
+        Ember.touchEditor = true;
+        mobileUtils.initFastClick();
+        TouchEditor = createTouchEditor();
+        setupMobileCodeMirror();
+    }
+};
+
+export default {
+    createIfMobile: init
+};

core/client/utils/codemirror-shortcuts.js

@@ -3,6 +3,7 @@
  *  See editor-route-base
  */
 
+function init() {
     //Used for simple, noncomputational replace-and-go! shortcuts.
     //  See default case in shortcut function below.
     CodeMirror.prototype.simpleShortcutSyntax = {
@@ -129,3 +130,8 @@ CodeMirror.prototype.shortcut = function (type) {
             }
         }
     };
+}
+
+export default {
+    init: init
+};

core/client/utils/mobile-utils.js

@@ -0,0 +1,48 @@
+/*global DocumentTouch,FastClick*/
+var hasTouchScreen,
+    smallScreen,
+    initFastClick,
+    responsiveAction;
+
+// Taken from "Responsive design & the Guardian" with thanks to Matt Andrews
+// Added !window._phantom so that the functional tests run as though this is not a touch screen.
+// In future we can do something more advanced here for testing both touch and non touch
+hasTouchScreen = function () {
+    return !window._phantom &&
+        (
+            ('ontouchstart' in window) ||
+            (window.DocumentTouch && document instanceof DocumentTouch)
+    );
+};
+
+smallScreen = function () {
+    if (window.matchMedia('(max-width: 1000px)').matches) {
+        return true;
+    }
+
+    return false;
+};
+
+initFastClick = function () {
+    Ember.run.scheduleOnce('afterRender', null, function () {
+        FastClick.attach(document.body);
+    });
+};
+
+responsiveAction = function responsiveAction(event, mediaCondition, cb) {
+    if (!window.matchMedia(mediaCondition).matches) {
+        return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    cb();
+};
+
+export { hasTouchScreen, smallScreen };
+export default {
+    hasTouchScreen: hasTouchScreen,
+    smallScreen: smallScreen,
+    initFastClick: initFastClick,
+    responsiveAction: responsiveAction
+};

core/shared/lib/showdown/extensions/ghostimagepreview.js

@@ -28,7 +28,7 @@ var Ghost = Ghost || {};
                             result = '<img class="js-upload-target" src="' + src + '"/>';
                         }
 
-                        if (Ghost && Ghost.touchEditor) {
+                        if ((Ghost && Ghost.touchEditor) || (typeof window !== 'undefined' && Ember.touchEditor)) {
                             output = '<section class="image-uploader">' +
                                 result + '<div class="description">Mobile uploads coming soon</div></section>';
                         } else {