mirror of
https://github.com/codeninjasllc/discourse.git
synced 2024-11-27 09:36:19 -05:00
Replace $LAB with path aware loadScript
that uses jQuery
This commit is contained in:
parent
fb726cfa0c
commit
de4e4f2b98
17 changed files with 110 additions and 141 deletions
|
@ -4,7 +4,6 @@
|
|||
"$",
|
||||
"RSVP",
|
||||
"Discourse",
|
||||
"$LAB",
|
||||
"Em",
|
||||
"PreloadStore",
|
||||
"Handlebars",
|
||||
|
|
51
app/assets/javascripts/admin/components/ace-editor.js.es6
Normal file
51
app/assets/javascripts/admin/components/ace-editor.js.es6
Normal 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')
|
||||
});
|
|
@ -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);
|
|
@ -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();
|
||||
}
|
||||
});
|
|
@ -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)
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
var helpers = ['input-tip',
|
||||
'pagedown-editor',
|
||||
'category-chooser',
|
||||
'combo-box',
|
||||
'choose-topic',
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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"}}>
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -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')
|
||||
|
||||
});
|
|
@ -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')
|
||||
});
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
5
vendor/assets/javascripts/LAB.js
vendored
5
vendor/assets/javascripts/LAB.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue