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

View file

@ -4,7 +4,6 @@
"$",
"RSVP",
"Discourse",
"$LAB",
"Em",
"PreloadStore",
"Handlebars",

View file

@ -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')
});

View file

@ -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'>

View file

@ -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'>

View file

@ -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);

View file

@ -0,0 +1,23 @@
import loadScript from 'discourse/lib/load-script';
export default Ember.Component.extend({
elementId: 'pagedown-editor',
_initializeWmd: function() {
const self = this;
loadScript('defer/html-sanitizer-bundle').then(function() {
$('#wmd-input').data('init', true);
self._editor = Discourse.Markdown.createEditor();
self._editor.run();
Ember.run.scheduleOnce('afterRender', self, self._refreshPreview);
});
}.on('didInsertElement'),
observeValue: function() {
Ember.run.scheduleOnce('afterRender', this, this._refreshPreview);
}.observes('value'),
_refreshPreview() {
this._editor.refreshPreview();
}
});

View file

@ -1,13 +1,12 @@
/* global assetPath:true */
import DiscourseController from 'discourse/controllers/controller';
import loadScript from 'discourse/lib/load-script';
export default DiscourseController.extend({
needs: ['topic', 'composer'],
init: function() {
this._super();
$LAB.script(assetPath('defer/html-sanitizer-bundle'));
},
_loadSanitizer: function() {
loadScript('defer/html-sanitizer-bundle');
}.on('init'),
/**
If the buffer is cleared, clear out other state (post)

View file

@ -1,5 +1,4 @@
var helpers = ['input-tip',
'pagedown-editor',
'category-chooser',
'combo-box',
'choose-topic',

View file

@ -1,5 +1,17 @@
/* global assetPath */
const _loaded = {};
export default function loadScript(url) {
return new Ember.RSVP.Promise(function(resolve) {
$LAB.script(Discourse.getURL(url)).wait(() => resolve());
url = Discourse.getURL((assetPath && assetPath(url)) || url);
// If we already loaded this url
if (_loaded[url]) { return resolve(); }
$.getScript(url).then(function() {
_loaded[url] = true;
resolve();
});
});
}

View file

@ -0,0 +1,3 @@
<div id='wmd-button-bar'></div>
{{textarea value=value elementId="wmd-input"}}
<div id='wmd-preview' {{bind-attr class=":preview value::hidden"}}>

View file

@ -1,7 +1,6 @@
/*global assetPath:true */
import userSearch from 'discourse/lib/user-search';
import afterTransition from 'discourse/lib/after-transition';
import loadScript from 'discourse/lib/load-script';
const ComposerView = Discourse.View.extend(Ember.Evented, {
_lastKeyTimeout: null,
@ -214,7 +213,7 @@ const ComposerView = Discourse.View.extend(Ember.Evented, {
this.wmdInput = $wmdInput = $('#wmd-input');
if ($wmdInput.length === 0 || $wmdInput.data('init') === true) return;
$LAB.script(assetPath('defer/html-sanitizer-bundle'));
loadScript('defer/html-sanitizer-bundle');
ComposerView.trigger("initWmdEditor");
this._applyEmojiAutocomplete();

View file

@ -1,33 +0,0 @@
/*global assetPath:true */
import PagedownPreviewView from 'discourse/views/pagedown-preview';
import DiscourseContainerView from 'discourse/views/container';
export default DiscourseContainerView.extend({
elementId: 'pagedown-editor',
init: function() {
this._super();
$LAB.script(assetPath('defer/html-sanitizer-bundle'));
// Add a button bar
this.pushObject(Em.View.create({ elementId: 'wmd-button-bar' }));
this.pushObject(Em.TextArea.create({ valueBinding: 'parentView.value', elementId: 'wmd-input' }));
this.attachViewClass(PagedownPreviewView);
},
didInsertElement: function() {
$('#wmd-input').data('init', true);
this.set('editor', Discourse.Markdown.createEditor());
this.get('editor').run();
},
observeValue: function() {
var editor = this.get('editor');
if (!editor) return;
Ember.run.next(null, function() { editor.refreshPreview(); });
}.observes('value')
});

View file

@ -1,13 +0,0 @@
/**
A helper view to display a preview of the pagedown content
@class PagedownPreviewView
@extends Discourse.View
@namespace Discourse
@module Discourse
**/
export default Discourse.View.extend({
elementId: 'wmd-preview',
classNameBindings: [':preview', 'hidden'],
hidden: Em.computed.empty('parentView.value')
});

View file

@ -10,6 +10,7 @@
//
// Stuff we need to load first
//= require ./discourse/lib/load-script
//= require ./discourse/lib/notification-levels
//= require ./discourse/lib/app-events
//= require ./discourse/helpers/i18n
@ -47,7 +48,6 @@
//= require ./discourse/components/dropdown-button
//= require ./discourse/components/notifications-button
//= require ./discourse/components/topic-notifications-button
//= require ./discourse/views/pagedown-preview
//= require ./discourse/views/composer
//= require ./discourse/routes/discourse_route
//= require ./discourse/routes/build-topic-route

View file

@ -10,7 +10,6 @@
//= require loader
//= require message-bus
//= require jquery.ui.widget.js
//= require LAB.js
//= require Markdown.Converter.js
//= require better_markdown.js
//= require bootbox.js

View file

@ -1,9 +1,7 @@
<script>
window.assetPath = (function(){
var map = <%= deferred_scripts %>;
return function(asset){ return map[asset]; };
return function(asset) { return map[asset]; };
})();
</script>

File diff suppressed because one or more lines are too long