diff options
-rw-r--r-- | css/style.css | 33 | ||||
-rw-r--r-- | js/editor.js | 49 |
2 files changed, 82 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css index b1fad6f..1e01385 100644 --- a/css/style.css +++ b/css/style.css @@ -202,3 +202,36 @@ small.unsaved-star { #sidebar_editor .ace_scrollbar.ace_scrollbar-h { display: none; } + +#preview_editor_controls { + float: right; +} + +#preview_editor_controls button { + height: 42px; + width: 42px; + background-position: center center; + background-repeat: no-repeat; + background-size: 32px 32px; + margin: 0; + margin-top: 2px; + border-radius: 0; + border-left-width: 0; +} + +#preview_editor_controls button:hover, +#preview_editor_controls button.active { + background-color: #eee; + border-left-width: 1px; +} + +#preview_editor_controls button:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + border-left-width: 1px; +} + +#preview_editor_controls button:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} diff --git a/js/editor.js b/js/editor.js index 59b7fc4..c03fddc 100644 --- a/js/editor.js +++ b/js/editor.js @@ -316,6 +316,7 @@ var Files_Texteditor = { var text = window.aceEditor.getSession().getValue(); _self.previewPluginOnChange(text, _self.preview); window.aceEditor.resize(); + _self.loadPreviewControlBar(); } else { _self.previewPluginOnChange = null; } @@ -349,6 +350,54 @@ var Files_Texteditor = { }, + setPreviewMode: function(mode) { + var container = $('#app-content-texteditor'); + var controlBar = $('#preview_editor_controls'); + controlBar.find('button').removeClass('active'); + controlBar.find('button[data-type="' + mode + '"]').addClass('active'); + switch (mode) { + case 'mixed': + container.find('#editor_container').addClass('hasPreview'); + container.find('#editor').show(); + container.find('#preview_wrap').css('width', '50%'); + break; + case 'text': + container.find('#editor_container').removeClass('hasPreview'); + container.find('#editor').show(); + container.find('#preview_wrap').css('width', '50%'); + break; + case 'image': + container.find('#editor_container').addClass('hasPreview'); + container.find('#editor').hide(); + container.find('#preview_wrap').css('width', '100%'); + break; + } + }, + + loadPreviewControlBar: function() { + var makeButton = function (type, tooltip, active) { + var button = $('<button/>'); + button.tooltip({ + title: tooltip, + container: 'body', + placement: 'bottom', + delay: {show: 500, hide: 0} + }); + if (active) { + button.addClass('active'); + } + button.click(this.setPreviewMode.bind(this, type)); + button.attr('data-type', type); + return button.css('background-image', 'url("' + OC.imagePath('files_texteditor', type) + '")'); + }.bind(this); + + var controls = $('<span/>').attr('id', 'preview_editor_controls'); + controls.append(makeButton('text', t('files_texteditor', 'Edit'))); + controls.append(makeButton('mixed', t('files_texteditor', 'Mixed'), true)); + controls.append(makeButton('image', t('files_texteditor', 'Preview'))); + $('#editor_close').after(controls); + }, + /** * Removes the control bar */ |