diff options
author | Robin Appelman <icewind@owncloud.com> | 2015-08-31 14:58:42 +0300 |
---|---|---|
committer | Robin Appelman <icewind@owncloud.com> | 2015-09-01 14:16:04 +0300 |
commit | f2f8e36f6b62d9a762ecc3332c921fd253b622d4 (patch) | |
tree | 79e647998ea6ff66004b1a08b9ab74ff101edeb2 | |
parent | f20e26b2def62ce65bc83f585286e46cf7b7b8bf (diff) |
Add api that allows other app to register "previews" by mimetype
-rw-r--r-- | css/style.css | 36 | ||||
-rw-r--r-- | js/editor.js | 38 |
2 files changed, 72 insertions, 2 deletions
diff --git a/css/style.css b/css/style.css index 71496c5..4fb366c 100644 --- a/css/style.css +++ b/css/style.css @@ -47,6 +47,34 @@ border-radius: 3px; } +#editor_container.hasPreview { + width: 100%; + height: 100%; + top: 0; + left: 0; + border: none; + margin-top: 45px; + border-radius: 0px; +} + +#editor_container.hasPreview #preview { + display:block; +} + +#editor_container.hasPreview #editor { + width: 50%; +} + +#preview { + right: 0; + position: absolute; + top: 0; + display: none; + height: 100%; + width:50%; + padding-top: 46px; +} + @media(max-width: 768px) { #editor_container { width: 100%; @@ -57,6 +85,14 @@ margin-top: 45px; border-radius: 0px; } + + #editor_container.hasPreview #preview { + display: none; + } + + #editor_container.hasPreview #editor { + width: 100%; + } } #editor_close { diff --git a/js/editor.js b/js/editor.js index 8fef31e..c8321a8 100644 --- a/js/editor.js +++ b/js/editor.js @@ -43,6 +43,22 @@ var Files_Texteditor = { saveTimer: null, /** + * preview plugins by mimetype + */ + previewPlugins: {}, + + registerPreviewPlugin: function(mimeType, plugin) { + this.previewPlugins[mimeType] = plugin; + }, + + /** + * preview element + */ + preview: null, + + previewPluginOnChange: null, + + /** * Save handler, triggered by the button, or keyboard */ _onSaveTrigger: function() { @@ -168,6 +184,10 @@ var Files_Texteditor = { OCA.Files_Texteditor._onUnsaved(); } } + if (this.previewPluginOnChange) { + var text = window.aceEditor.getSession().getValue(); + this.previewPluginOnChange(text, this.preview); + } }, /** @@ -187,6 +207,9 @@ var Files_Texteditor = { this.$container = container; this.registerFileActions(); this.oldTitle = document.title; + $.each(this.previewPlugins, function(mime, plugin) { + plugin.init(); + }); }, /** @@ -227,7 +250,7 @@ var Files_Texteditor = { container.html( '<div id="editor_overlay"></div>' +'<div id="editor_container" class="icon-loading">' - +'<div id="editor_wrap"><div id="editor"></div></div></div>'); + +'<div id="editor_wrap"><div id="editor"></div><div id="preview"></div></div></div>'); $('#app-content').append(container); // Get the file data @@ -246,6 +269,17 @@ var Files_Texteditor = { _self.loadControlBar(file, _self.currentContext); window.aceEditor.getSession().on('change', _self.setupAutosave); window.aceEditor.focus(); + + if (_self.previewPlugins[file.mime]){ + _self.preview = container.find('#preview'); + _self.preview.addClass(file.mime.replace('/','-')); + container.find('#editor_container').addClass('hasPreview'); + _self.previewPluginOnChange = _.debounce(_self.previewPlugins[file.mime].preview, 200); + var text = window.aceEditor.getSession().getValue(); + _self.previewPluginOnChange(text, _self.preview); + } else { + _self.previewPluginOnChange = null; + } }, function(message){ // Oh dear @@ -327,7 +361,7 @@ var Files_Texteditor = { } ); // Bind the edit event - window.aceEditor.getSession().on('change', this._onEdit); + window.aceEditor.getSession().on('change', this._onEdit.bind(this)); // Bind save trigger window.aceEditor.commands.addCommand({ name: "save", |