From 0549f127b0ed782e5decdcecfd8266fff40d3a16 Mon Sep 17 00:00:00 2001 From: Sean McArthur Date: Tue, 22 Nov 2011 10:30:19 -0500 Subject: [PATCH] removed MooTools dependencies for FDEditor and Ace Editor --- .../js/ide/controllers/PackageController.js | 4 - media/jetpack/js/ide/views/FDEditor.Ace.js | 247 +++++++++--------- media/jetpack/js/ide/views/FDEditor.js | 105 ++++---- 3 files changed, 179 insertions(+), 177 deletions(-) diff --git a/media/jetpack/js/ide/controllers/PackageController.js b/media/jetpack/js/ide/controllers/PackageController.js index ecaee707..3e43e095 100644 --- a/media/jetpack/js/ide/controllers/PackageController.js +++ b/media/jetpack/js/ide/controllers/PackageController.js @@ -385,10 +385,6 @@ module.exports = new Class({ }, setupButtonTooltips: function() { - if(typeof FloatingTips === 'undefined') { - return false; - } - this.tips = new FloatingTips('.UI_Editor_Menu .UI_Editor_Menu_Button', { position: 'top', balloon: true diff --git a/media/jetpack/js/ide/views/FDEditor.Ace.js b/media/jetpack/js/ide/views/FDEditor.Ace.js index b30c46e1..a91d7c31 100644 --- a/media/jetpack/js/ide/views/FDEditor.Ace.js +++ b/media/jetpack/js/ide/views/FDEditor.Ace.js @@ -5,151 +5,156 @@ * Class: FDEditor */ var Class = require('shipyard/class/Class'), - object = require('shipyard/utils/object'), - ace = require('ace/ace'), - FDEditor = require('./FDEditor'); + object = require('shipyard/utils/object'), + log = require('shipyard/utils/log'), + ace = require('ace/ace'), + FDEditor = require('./FDEditor'); -// globals: Spinner +var JSMode = require('ace/modes/javascript').Mode, + CSSMode = require('ace/modes/css').Mode, + HTMLMode = require('ace/modes/html').Mode, + TextMode = require('ace/modes/txt').Mode; + +var Modes = { + 'javascript': new JSMode(), + 'css': new CSSMode(), + 'html': new HTMLMode(), + 'txt': new TextMode() +}; var stripDeltas = function(stack) { - // Change Stack (undo/redo) in Ace is represented as - // [[DeltaObject1], [DeltaObject2], ... ] - // these objects have to be copied - not referenced - var deltas = []; - stack.each(function(single){ - deltas.push(object.merge({}, single[0])); - }); - return deltas; + // Change Stack (undo/redo) in Ace is represented as + // [[DeltaObject1], [DeltaObject2], ... ] + // these objects have to be copied - not referenced + var deltas = []; + stack.each(function(single){ + deltas.push(object.merge({}, single[0])); + }); + return deltas; }; var buildStack = function(deltas) { - // Extract stored deltas into the stack - var stack = []; - deltas.each(function(delta){ - stack.push([object.merge({}, delta)]); - }); - return stack; + // Extract stored deltas into the stack + var stack = []; + deltas.each(function(delta){ + stack.push([object.merge({}, delta)]); + }); + return stack; }; module.exports = new Class({ - Extends: FDEditor, + Extends: FDEditor, - options: { - element_type: 'div' - }, + options: { + element_type: 'div' + }, - modes: {}, + modes: {}, - available_modes: ['js', 'txt', 'html', 'css'], + available_modes: ['js', 'txt', 'html', 'css'], - default_kind: 'txt', + default_kind: 'txt', - mode_translate: { - 'js': 'javascript', - 'txt': 'text' - }, + mode_translate: { + 'js': 'javascript', + 'txt': 'text' + }, - initialize: function(wrapper, options) { - this.parent(wrapper, options); - this.editor = ace.edit(this.element); - this.editor.getSession().setUseWorker(false); - this.spinner = new Spinner(this.element.getElement('.ace_scroller'), { - maskBorder: false - }); - var that = this; - - ['blur', 'focus'].each(function(ev) { - that.editor.on(ev, function(){ - that.fireEvent(ev); - }); - }); - }, + initialize: function(wrapper, options) { + this.parent(wrapper, options); + this.editor = ace.edit(this.element.getNode()); + this.editor.getSession().setUseWorker(false); + this.spinner = this.element.getElement('.ace_scroller'); - addMode: function(mode) { - var name; - var Mode; - if (!this.modes[mode]) { - name = mode; - if (this.mode_translate[mode]) { - name = this.mode_translate[mode]; - } - //TODO: explicitly require the modes we plan to use up - //above, so that they can be bundled with `shipyard build` - Mode = require('ace/mode/' + name).Mode; - this.modes[mode] = new Mode(); - } - }, + var that = this; + + ['blur', 'focus'].each(function(ev) { + that.editor.on(ev, function(){ + that.emit(ev); + }); + }); + }, - setEditable: function() { - this.editor.setReadOnly(false); - this.hookChangeIfNeeded(); - }, - - setReadOnly: function() { - this.editor.setReadOnly(true); - if (this.change_hooked) { - this.unhookChange(); - } - }, - - hookChange: function(){ - // hook to onChange Event - this.editor.getSession().on('change', this.boundWhenItemChanged); - this.change_hooked = true; - }, + setEditable: function() { + this.editor.setReadOnly(false); + this.hookChangeIfNeeded(); + }, + + setReadOnly: function() { + this.editor.setReadOnly(true); + if (this.change_hooked) { + this.unhookChange(); + } + }, + + hookChange: function(){ + // hook to onChange Event + this.editor.getSession().on('change', this.boundWhenItemChanged); + this.change_hooked = true; + }, - unhookChange: function(){ - // unhook the onChange Event - this.editor.getSession().removeEventListener('change', this.boundWhenItemChanged); - this.change_hooked = false; - }, + unhookChange: function(){ + // unhook the onChange Event + this.editor.getSession().removeEventListener('change', this.boundWhenItemChanged); + this.change_hooked = false; + }, - getContent: function(){ - var value = this.editor.getSession().getValue(); - return value; - }, + getContent: function(){ + var value = this.editor.getSession().getValue(); + return value; + }, - _setContent: function(value){ - this.editor.getSession().setValue(value); - var cursor = this.current.cursorPos || { row: 0, column: 0 }; - this.editor.selection.moveCursorTo(cursor.row, cursor.column); - }, + _setContent: function(value){ + this.editor.getSession().setValue(value); + var cursor = this.current.cursorPos || { row: 0, column: 0 }; + this.editor.selection.moveCursorTo(cursor.row, cursor.column); + }, - getUndoRedoStack: function() { - var current_manager = this.editor.getSession().getUndoManager(); - return { - redoDeltas: stripDeltas(current_manager.$redoStack), - undoDeltas: stripDeltas(current_manager.$undoStack) - }; - }, - setUndoRedoStack: function(obj){ - var current_manager = this.editor.getSession().getUndoManager(); - current_manager.$redoStack = buildStack(obj.redoDeltas); - current_manager.$undoStack = buildStack(obj.undoDeltas); - }, + getUndoRedoStack: function() { + var current_manager = this.editor.getSession().getUndoManager(); + return { + redoDeltas: stripDeltas(current_manager.$redoStack), + undoDeltas: stripDeltas(current_manager.$undoStack) + }; + }, + setUndoRedoStack: function(obj){ + var current_manager = this.editor.getSession().getUndoManager(); + current_manager.$redoStack = buildStack(obj.redoDeltas); + current_manager.$undoStack = buildStack(obj.undoDeltas); + }, - dumpCurrent: function() { - // dump undo buffers - this.current.undo_manager = this.getUndoRedoStack(); - this.current.cursorPos = this.editor.selection.getCursor(); - this.parent(); - }, + dumpCurrent: function() { + // dump undo buffers + this.current.undo_manager = this.getUndoRedoStack(); + this.current.cursorPos = this.editor.selection.getCursor(); + this.parent(); + }, - activateItem: function(item) { - this.parent(item); - // load undo buffers - if (this.current.undo_manager) { - this.setUndoRedoStack(this.current.undo_manager); - } - }, + activateItem: function(item) { + this.parent(item); + // load undo buffers + if (this.current.undo_manager) { + this.setUndoRedoStack(this.current.undo_manager); + } + }, - setSyntax: function(kind){ - if (!this.available_modes.contains(kind)) { - kind = this.default_kind; - } - this.addMode(kind); - this.editor.getSession().setMode(this.modes[kind]); - } + setSyntax: function(kind){ + if (this.available_modes.indexOf(kind) === -1) { + log.info('Mode (%s) not found. Using txt mode.', kind); + kind = this.default_kind; + } else if (this.mode_translate[kind]) { + kind = this.mode_translate[kind]; + } + + if (!Modes[kind]) { + // This should only ever be the case if above is broken. + // ie, available_modes and mode_translate aren't in sync + // with Modes at the top. + log.warn('Mode (%s) not found. Bad.'); + kind = this.default_kind; + } + this.editor.getSession().setMode(Modes[kind]); + } }); diff --git a/media/jetpack/js/ide/views/FDEditor.js b/media/jetpack/js/ide/views/FDEditor.js index 4e733585..37b52e41 100644 --- a/media/jetpack/js/ide/views/FDEditor.js +++ b/media/jetpack/js/ide/views/FDEditor.js @@ -7,49 +7,48 @@ * Otherwise standard textarea will be used. */ var Class = require('shipyard/class/Class'), - Events = require('shipyard/class/Events'), - Options = require('shipyard/class/Options'), - object = require('shipyard/utils/object'); + Events = require('shipyard/class/Events'), + Options = require('shipyard/class/Options'), + dom = require('shipyard/dom'), + object = require('shipyard/utils/object'), + log = require('shipyard/utils/log'); -// globals: Element, Spinner, fd +var LOADING_CLASS = 'loading'; var FDEditor = module.exports = new Class({ - Implements: [Options, Events], + Implements: [Options, Events], options: { element_type: 'textarea' }, - $name: 'FlightDeckEditor', - items: {}, current: false, - initialize: function(wrapper, options) { - this.setOptions(options); + initialize: function(wrapper, options) { + this.setOptions(options); + wrapper = this.spinner = dom.$(wrapper); // create empty editor - this.element = new Element(this.options.element_type,{ + this.element = new dom.Element(this.options.element_type,{ 'text': '', 'class': 'UI_Editor_Area' }); - this.element.inject(wrapper); - this.spinner = new Spinner('editor-wrapper'); - this.changed = false; + wrapper.appendChild(this.element); + this.changed = false; // prepare change events this.boundWhenItemChanged = this.whenItemChanged.bind(this); this.boundSetContent = this.setContent.bind(this); - this.addEvent('setContent', function(c) { + this.emit('setContent', function(c) { this.switching = false; }); }, registerItem: function(uid, item){ - this.items[uid] = item; + this.items[uid] = item; var editor = this; item.observe('uid', function(updated, old) { - $log('uid changed for registed item:' + updated); editor.items[updated] = item; delete editor[old]; }); @@ -60,7 +59,7 @@ var FDEditor = module.exports = new Class({ }, deactivateCurrent: function(){ - // deactivate and store changes + // deactivate and store changes this.current.active = false; // store changes this.dumpCurrent(); @@ -72,10 +71,10 @@ var FDEditor = module.exports = new Class({ this.current = item; this.current.active = true; if (!this.current.isLoaded()) { - this.spinner.show(); - this.setContent('', true); + this.spinner.addClass(LOADING_CLASS); + this.setContent('', true); this.current.loadContent(function(content) { - if (item == editor.current) { + if (item === editor.current) { editor.setContent(content); editor.spinner.hide(); } @@ -83,7 +82,7 @@ var FDEditor = module.exports = new Class({ }); } else { this.setContent(this.current.get('content')); - this.spinner.hide(); + this.spinner.removeClass(LOADING_CLASS); } if (this.current.get('readonly')) { this.setReadOnly(); @@ -94,13 +93,13 @@ var FDEditor = module.exports = new Class({ }, switchTo: function(uid){ - $log('FD: DEBUG: FDEditor.switchTo ' + uid); + log.debug('FDEditor.switchTo ' + uid); var self = this; this.switching = true; var item = this.getItem(uid); if (!item) { //this.registerItem(item); - $log('no item wtf'); + log.error('No item found in Editor with uid:', uid); } if (this.current) { this.deactivateCurrent(); @@ -122,8 +121,8 @@ var FDEditor = module.exports = new Class({ }, setEditable: function() { - if (this.element.get('readonly')) { - this.element.erase('readonly'); + if (this.element.get('readonly')) { + this.element.set('readonly', null); } this.hookChangeIfNeeded(); }, @@ -149,21 +148,21 @@ var FDEditor = module.exports = new Class({ }, hookChange: function(){ - this.element.addEvent('keyup', this.boundWhenItemChanged); + this.element.addListener('keyup', this.boundWhenItemChanged); this.change_hooked = true; - }, + }, unhookChange: function(){ this.element.removeEvent('keyup', this.boundWhenItemChanged); this.change_hooked = false; - $log('FD: INFO: No longer following changes'); + log.info('No longer following changes'); }, whenItemChanged: function() { - if (!this.switching && this.getContent() != this.current.original_content) { + if (!this.switching && this.getContent() !== this.current.original_content) { this.current.setChanged(true); - this.fireEvent('change'); - $log('DEBUG: changed, code is considered dirty and will remain'+ + this.emit('change'); + log.debug('changed, code is considered dirty and will remain'+ 'be treated as such even if changes are reverted'); this.unhookChange(); } else if (!this.switching && this.current.changed) { @@ -171,19 +170,21 @@ var FDEditor = module.exports = new Class({ } }, - getContent: function() { - return this.element.value; - }, + getContent: function() { + return this.element.value; + }, - setContent: function(value, quiet) { + setContent: function(value, quiet) { this._setContent(value); - if (!quiet) this.fireEvent('setContent', value); - return this; - }, - - _setContent: function(value) { - this.element.set('value', value); - }, + if (!quiet) { + this.emit('setContent', value); + } + return this; + }, + + _setContent: function(value) { + this.element.set('value', value); + }, isChanged: function() { return this.items.some(function(item) { @@ -192,14 +193,14 @@ var FDEditor = module.exports = new Class({ }, setSyntax: function(){}, - - focus: function() { - this.editor.focus(); - this.fireEvent('focus'); - }, - - blur: function() { - this.editor.blur(); - this.fireEvent('blur'); - } + + focus: function() { + this.editor.focus(); + this.emit('focus'); + }, + + blur: function() { + this.editor.blur(); + this.emit('blur'); + } });