Replace $LAB with path aware loadScript that uses jQuery

This commit is contained in:
Robin Ward
2015-03-09 12:49:11 -04:00
parent fb726cfa0c
commit de4e4f2b98
17 changed files with 110 additions and 141 deletions
@@ -0,0 +1,51 @@
/*global ace:true */
import loadScript from 'discourse/lib/load-script';
export default Ember.Component.extend({
mode: 'css',
classNames: ['ace-wrapper'],
_editor: null,
_skipContentChangeEvent: null,
contentChanged: function() {
if (this._editor && !this._skipContentChangeEvent) {
this._editor.getSession().setValue(this.get('content'));
}
}.observes('content'),
render(buffer) {
buffer.push("<div class='ace'>");
if (this.get('content')) {
buffer.push(Handlebars.Utils.escapeExpression(this.get('content')));
}
buffer.push("</div>");
},
_destroyEditor: function() {
if (this._editor) {
this._editor.destroy();
this._editor = null;
}
}.on('willDestroyElement'),
_initEditor: function() {
const self = this;
loadScript("/javascripts/ace/ace.js").then(function() {
const editor = ace.edit(self.$('.ace')[0]);
editor.setTheme("ace/theme/chrome");
editor.setShowPrintMargin(false);
editor.getSession().setMode("ace/mode/" + (self.get('mode')));
editor.on('change', function() {
self._skipContentChangeEvent = true;
self.set('content', editor.getSession().getValue());
self._skipContentChangeEvent = false;
});
self.$().data('editor', editor);
self._editor = editor;
});
}.on('didInsertElement')
});
@@ -44,16 +44,16 @@
</div>
<div class="admin-container">
{{#if view.stylesheetActive}}{{aceEditor content=selectedItem.stylesheet mode="scss"}}{{/if}}
{{#if view.headerActive}}{{aceEditor content=selectedItem.header mode="html"}}{{/if}}
{{#if view.topActive}}{{aceEditor content=selectedItem.top mode="html"}}{{/if}}
{{#if view.footerActive}}{{aceEditor content=selectedItem.footer mode="html"}}{{/if}}
{{#if view.headTagActive}}{{aceEditor content=selectedItem.head_tag mode="html"}}{{/if}}
{{#if view.bodyTagActive}}{{aceEditor content=selectedItem.body_tag mode="html"}}{{/if}}
{{#if view.mobileStylesheetActive}}{{aceEditor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
{{#if view.mobileHeaderActive}}{{aceEditor content=selectedItem.mobile_header mode="html"}}{{/if}}
{{#if view.mobileTopActive}}{{aceEditor content=selectedItem.mobile_top mode="html"}}{{/if}}
{{#if view.mobileFooterActive}}{{aceEditor content=selectedItem.mobile_footer mode="html"}}{{/if}}
{{#if view.stylesheetActive}}{{ace-editor content=selectedItem.stylesheet mode="scss"}}{{/if}}
{{#if view.headerActive}}{{ace-editor content=selectedItem.header mode="html"}}{{/if}}
{{#if view.topActive}}{{ace-editor content=selectedItem.top mode="html"}}{{/if}}
{{#if view.footerActive}}{{ace-editor content=selectedItem.footer mode="html"}}{{/if}}
{{#if view.headTagActive}}{{ace-editor content=selectedItem.head_tag mode="html"}}{{/if}}
{{#if view.bodyTagActive}}{{ace-editor content=selectedItem.body_tag mode="html"}}{{/if}}
{{#if view.mobileStylesheetActive}}{{ace-editor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
{{#if view.mobileHeaderActive}}{{ace-editor content=selectedItem.mobile_header mode="html"}}{{/if}}
{{#if view.mobileTopActive}}{{ace-editor content=selectedItem.mobile_top mode="html"}}{{/if}}
{{#if view.mobileFooterActive}}{{ace-editor content=selectedItem.mobile_footer mode="html"}}{{/if}}
</div>
<div class='admin-footer'>
<div class='status-actions'>
@@ -8,10 +8,10 @@
{{textarea value=value class="plain"}}
{{/if}}
{{#if html}}
{{aceEditor content=value mode="html"}}
{{ace-editor content=value mode="html"}}
{{/if}}
{{#if css}}
{{aceEditor content=value mode="css"}}
{{ace-editor content=value mode="css"}}
{{/if}}
<div class='controls'>
@@ -1,62 +0,0 @@
/*global ace:true */
/**
A view that wraps the ACE editor (http://ace.ajax.org/)
@class AceEditorView
@extends Discourse.View
@namespace Discourse
@module Discourse
**/
Discourse.AceEditorView = Discourse.View.extend({
mode: 'css',
classNames: ['ace-wrapper'],
contentChanged: (function() {
if (this.editor && !this.skipContentChangeEvent) {
return this.editor.getSession().setValue(this.get('content'));
}
}).observes('content'),
render: function(buffer) {
buffer.push("<div class='ace'>");
if (this.get('content')) {
buffer.push(Handlebars.Utils.escapeExpression(this.get('content')));
}
return buffer.push("</div>");
},
willDestroyElement: function() {
if (this.editor) {
this.editor.destroy();
this.editor = null;
}
},
didInsertElement: function() {
var self = this;
var initAce = function() {
self.editor = ace.edit(self.$('.ace')[0]);
self.editor.setTheme("ace/theme/chrome");
self.editor.setShowPrintMargin(false);
self.editor.getSession().setMode("ace/mode/" + (self.get('mode')));
self.editor.on("change", function() {
self.skipContentChangeEvent = true;
self.set('content', self.editor.getSession().getValue());
self.skipContentChangeEvent = false;
});
self.$().data('editor', self.editor);
};
if (window.ace) {
initAce();
} else {
$LAB.script('/javascripts/ace/ace.js').wait(initAce);
}
}
});
Discourse.View.registerHelper('aceEditor', Discourse.AceEditorView);