htmleditor.js in uikit-sass-rails-1.1.0

- old
+ new

@@ -1,6 +1,6 @@
-/*! UIkit 2.8.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+/*! UIkit 2.9.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
 
 (function(addon) {
 
     var component;
 
@@ -19,17 +19,18 @@
     var editors = [];
 
     UI.component('htmleditor', {
 
         defaults: {
+            iframe       : false,
             mode         : 'split',
             markdown     : false,
             autocomplete : true,
             height       : 500,
             maxsplitsize : 1000,
             markedOptions: { gfm: true, tables: true, breaks: true, pedantic: true, sanitize: false, smartLists: true, smartypants: false, langPrefix: 'lang-'},
-            codemirror   : { mode: 'htmlmixed', tabMode: 'indent', tabsize: 4, lineWrapping: true, dragDrop: false, autoCloseTags: true, matchTags: true, autoCloseBrackets: true, matchBrackets: true, indentUnit: 4, hintOptions: {completionSingle:false} },
+            codemirror   : { mode: 'htmlmixed', lineWrapping: true, dragDrop: false, autoCloseTags: true, matchTags: true, autoCloseBrackets: true, matchBrackets: true, indentUnit: 4, indentWithTabs: false, tabSize: 4, hintOptions: {completionSingle:false} },
             toolbar      : [ 'bold', 'italic', 'strike', 'link', 'image', 'blockquote', 'listUl', 'listOl' ],
             lblPreview   : 'Preview',
             lblCodeview  : 'HTML',
             lblMarkedview: 'Markdown'
         },
@@ -55,21 +56,42 @@
             this.editor.htmleditor = this;
             this.editor.on('change', UI.Utils.debounce(function() { $this.render(); }, 150));
             this.editor.on('change', function() { $this.editor.save(); });
             this.code.find('.CodeMirror').css('height', this.options.height);
 
-            $(window).on('resize', UI.Utils.debounce(function() { $this.fit(); }, 200));
+            // iframe mode?
+            if (this.options.iframe) {
 
-            var previewContainer = $this.preview.parent(),
+                this.iframe = $('<iframe class="uk-htmleditor-iframe" frameborder="0" scrolling="auto" height="100" width="100%"></iframe>');
+                this.preview.append(this.iframe);
+
+                // must open and close document object to start using it!
+                this.iframe[0].contentWindow.document.open();
+                this.iframe[0].contentWindow.document.close();
+
+                this.preview.container = $(this.iframe[0].contentWindow.document).find('body');
+
+                // append custom stylesheet
+                if (typeof(this.options.iframe) === 'string') {
+                   this.preview.container.parent().append('<link rel="stylesheet" href="'+this.options.iframe+'">');
+                }
+
+            } else {
+                this.preview.container = this.preview;
+            }
+
+            UI.$win.on('resize', UI.Utils.debounce(function() { $this.fit(); }, 200));
+
+            var previewContainer = this.iframe ? this.preview.container:$this.preview.parent(),
                 codeContent      = this.code.find('.CodeMirror-sizer'),
                 codeScroll       = this.code.find('.CodeMirror-scroll').on('scroll', UI.Utils.debounce(function() {
 
                     if ($this.htmleditor.attr('data-mode') == 'tab') return;
 
                     // calc position
                     var codeHeight       = codeContent.height() - codeScroll.height(),
-                        previewHeight    = previewContainer[0].scrollHeight - previewContainer.height(),
+                        previewHeight    = previewContainer[0].scrollHeight - ($this.iframe ? $this.iframe.height() : previewContainer.height()),
                         ratio            = previewHeight / codeHeight,
                         previewPostition = codeScroll.scrollTop() * ratio;
 
                     // apply new scroll
                     previewContainer.scrollTop(previewPostition);
@@ -121,10 +143,14 @@
 
             this.on('init', function() {
                 $this.redraw();
             });
 
+            this.element.attr('data-uk-check-display', 1).on('uk-check-display', function(e) {
+                if(this.htmleditor.is(":visible")) this.fit();
+            }.bind(this));
+
             editors.push(this);
         },
 
         addButton: function(name, button) {
             this.buttons[name] = button;
@@ -245,19 +271,19 @@
 
             // empty code
             if (!this.currentvalue) {
 
                 this.element.val('');
-                this.preview.html('');
+                this.preview.container.html('');
 
                 return;
             }
 
             this.trigger('render', [this]);
             this.trigger('renderLate', [this]);
 
-            this.preview.html(this.currentvalue);
+            this.preview.container.html(this.currentvalue);
         },
 
         addShortcut: function(name, callback) {
             var map = {};
             if (!$.isArray(name)) {
@@ -440,11 +466,12 @@
                     window.scrollTo(info.scrollLeft, info.scrollTop);
                 }
 
                 setTimeout(function() {
                     editor.fit();
-                }, 10);
+                    UI.$win.trigger('resize');
+                }, 50);
             });
 
             editor.addShortcut(['Ctrl-S', 'Cmd-S'], function() { editor.element.trigger('htmleditor-save', [editor]); });
             editor.addShortcutAction('bold', ['Ctrl-B', 'Cmd-B']);
 
@@ -579,15 +606,9 @@
             var editor = $(this), obj;
 
             if (!editor.data('htmleditor')) {
                 obj = UI.htmleditor(editor, UI.Utils.options(editor.attr('data-uk-htmleditor')));
             }
-        });
-    });
-
-    $(document).on("uk-check-display", function(e) {
-        editors.forEach(function(item) {
-            if(item.htmleditor.is(":visible")) item.fit();
         });
     });
 
     return UI.htmleditor;
 });
\ No newline at end of file