+++ /dev/null
-/*
- Layout using CodeMirror
- */
-
-Element.implement({
- getInnerWidth: function() {
- return this.getSize().x -
- this.getStyle('padding-left').toInt() -
- this.getStyle('padding-right').toInt() -
- this.getStyle('border-left-width').toInt() -
- this.getStyle('border-right-width').toInt();
- },
- getInnerHeight: function() {
- return this.getSize().y -
- this.getStyle('padding-top').toInt() -
- this.getStyle('padding-bottom').toInt() -
- this.getStyle('border-top-width').toInt() -
- this.getStyle('border-bottom-width').toInt();
- }
-});
-
-var keyMods = {
- 'shift': false,
- 'shiftKey': false,
- 'control': false,
- 'ctrlKey': false
-}; // these mods will be checked
-
-var Layout = {
- editors: $H({}),
- editors_order: ['html', 'css', 'js'],
- reservedKeys: [ // list of [modifier,keycode,callbackname]
- ['ctrlKey', 13, 'run'], ['control', 13, 'run'], // c+ret+run
- ['ctrlKey', 38, 'switchPrev'], // c+upArrow
- ['ctrlKey', 40, 'switchNext'], // c+dnArrow
- ['ctrlKey+shiftKey', 13, 'loadDraft'], ['control+shift', 13, 'loadDraft'],
- ['ctrlKey+shiftKey', 38, 'toggleSidebar'], ['control+shift', 38, 'toggleSidebar'],
- ['ctrlKey+shiftKey', 76, 'showShortcutDialog'], ['control+shift', 76, 'showShortcutDialog'],
- ['ctrlKey', 83, 'saveAndReload'], ['control', 83, 'saveAndReload'],
- ['ctrlKey', 75, 'launchTowtruck'], ['control', 75, 'launchTowtruck']
- // future
- // ['ctrlKey', f, 'searchBox'], ['control', f, 'searchBox']
- ],
- isMobile: (navigator.userAgent.match(/(iPhone|iPod|iPad)/) ||
- navigator.userAgent.match(/BlackBerry/) ||
- navigator.userAgent.match(/Android/)),
- render: function () {
- // instantiate sidebar
-// this.sidebar = new Sidebar({
-// DOM: 'sidebar'
-// });
- window.addEvents({
- 'resize': this.resize.bind(this),
- 'keydown': function(keyEvent) {
- // console.log(keyEvent)
- if (this.isReservedKey(false, keyEvent)) {
- this.routeReservedKey(keyEvent);
- }
- }.bind(this)
- });
-// this.sidebar.addEvents({
-// 'accordion_resized': this.resize.bind(this)
-// });
- // set editor labels
- var result = document.id('result');
- $$('.window_label').setStyle('opacity', 0.8);
- if (result) {
- result.getElement('.window_label').setStyle('opacity', 0.3);
- this.result = result.getElement('iframe');
- }
- // resize
- this.resize();
- this.resize.bind(this).delay(20);
- // change behaviour for IE
- if (!Browser.Engine.trident4) {
- this.createDragInstances();
- }
- this.createErrorTooltips();
- // send an event
- this.fireEvent('ready');
- // jordan:
- this.refreshEditors();
- },
-
- createErrorTooltips: function(){
- var tooltip = Element('span', {
- 'class': 'CodeMirror-error-tooltip'
- }).inject(document.body);
- document.id('content').addEvents({
- 'mouseover:relay(.CodeMirror-line-error)': function(el){
- tooltip.set({
- html: this.get('data-title'),
- styles: {
- display: 'block'
- }
- });
- tooltip.position({
- relativeTo: this,
- edge: 'centerBottom',
- offset: {
- y: -15
- }
- });
- },
- 'mouseout:relay(.CodeMirror-line-error)': function(){
- tooltip.set({
- html: '',
- styles: {
- top: 0,
- left: 0,
- display: 'none'
- }
- });
- }
- });
- },
-
- routeReservedKey: function(keyEvent) {
- this.reservedKeys.each(function(keyDef){
- if (this.matchKey(keyEvent, keyDef)) {
- mooshell[keyDef.getLast()].bind(mooshell).call();
- }
- }, this);
- },
-
- matchKey: function(keyEvent, keyDef) {
- if (!keyEvent) return false;
- var key = keyEvent.keyCode || keyEvent.code;
- // check if the right key is pressed
- if (!keyDef.contains(key)) return false;
- // check for the modifications
- var pass = true;
- if (keyDef.length > 1) {
- var mods = {};
- keyDef[0].split('+').each(function(mod) {
- mods[mod] = true;
- });
- // adding other mods
- $each(keyMods, function(value, mod) {
- if (!mods[mod]) mods[mod] = false;
- });
- // check all possibilities
- $each(mods, function(required, mod) {
- if (!!keyEvent[mod] != required) pass = false;
- });
- }
- return pass;
- },
-
- isReservedKey: function(keyCode, keyEvent) {
- return (this.reservedKeys.some(function(keyDef) {
- return this.matchKey(keyEvent, keyDef);
- }, this));
- },
-
- findLayoutElements: function() {
- // look up some elements, and cache the findings
- this.content = document.id('content');
- this.columns = this.content.getChildren('.column');
- this.windows = this.content.getElements('.window');
- this.shims = this.content.getElements('.column .shim');
- this.handlers = $H({
- 'vertical': this.content.getElementById('handler_vertical'),
- 'left': this.columns[0].getElement('.handler_horizontal'),
- 'right': this.columns[1].getElement('.handler_horizontal')
- });
- },
-
- registerEditor: function(editor) {
- this.editors[editor.options.name] = editor;
- this.resize();
- },
-
- decodeEditors: function() {
- this.editors.each(function(ed) {
- ed.b64decode();
- });
- },
-
- updateFromMirror: function() {
- this.editors.each(function(ed) {
- ed.updateFromMirror();
- });
- },
-
- cleanMirrors: function() {
- this.editors.each(function(ed) {
- ed.clean();
- });
- },
-
- createDragInstances: function() {
- var onDrag_horizontal = function(h) {
- var windows = h.getParent().getElements('.window');
- var top = (h.getPosition(this.content).y + h.getHeight() / 2) / this.content.getHeight() * 100;
- windows[0].setStyle('height', top + '%');
- windows[1].setStyle('height', 100 - top + '%');
- this.refreshEditors();
- }.bind(this);
-
- var onDrag_vertical = function(h) {
- var left = (h.getPosition(this.content).x + h.getWidth() / 2) / this.content.getWidth() * 100;
- this.columns[0].setStyle('width', left + '%');
- this.columns[1].setStyle('width', 100 - left + '%');
- }.bind(this);
-
- this.handlers.each(function(h) {
- var isHorizontal = h.hasClass('handler_horizontal');
- h.dragInstance = new Drag(h, {
- 'modifiers': isHorizontal ? {'x': null, 'y': 'top'} : {'x': 'left', 'y': null},
- 'limit': {
- 'x': [100, this.content.getWidth() - 100],
- 'y': [100, this.content.getHeight() - 100]
- },
- 'onBeforeStart': function() { this.shims.show(); }.bind(this),
- 'onDrag': isHorizontal ? onDrag_horizontal : onDrag_vertical,
- 'onCancel': function() { this.shims.hide(); }.bind(this),
- 'onComplete': function() { this.shims.hide(); }.bind(this)
- });
- }, this);
-
- // Save window sizes to cookie onUnload.
- window.addEvent('unload', function() {
- var sizes = {
- 'w': [],
- 'h': []
- };
- this.columns.each(function(col, i) {
- var width = col.getStyle('width');
- sizes.w[i] = width.contains('%') ? width : null;
- });
- this.windows.each(function(win, i) {
- var height = win.getStyle('height');
- sizes.h[i] = height.contains('%') ? height : null;
- });
- Cookie.write('window_sizes', JSON.encode(sizes), {'domain': location.host});
- }.bind(this));
-
- // Read window sizes from cookie.
- this.setWindowSizes();
- },
-
- setWindowSizes: function(sizes) {
- // sizes === undefined --> read from cookie
- // sizes == null/false --> reset sizes + delete cookie
- // sizes == true --> use sizes
- if (typeof sizes === 'undefined') {
- sizes = Cookie.read('window_sizes');
- if (sizes) {
- sizes = JSON.decode(sizes);
- }
- }
- if (sizes) {
- if ($type(sizes.w) === 'array') {
- sizes.w.each(function(width, i) {
- this.columns[i].setStyle('width', width);
- }, this);
- }
- if ($type(sizes.h) == 'array') {
- sizes.h.each(function(height, i) {
- this.windows[i].setStyle('height', height);
- }, this);
- }
- } else {
- this.columns.setStyle('width', null);
- this.windows.setStyle('height', null);
- Cookie.dispose('window_sizes', {'domain': location.host});
- }
- this.resize();
- },
-
- resize: function(e) {
- if (!this.content) {
- this.findLayoutElements();
- }
-
- var win_size = window.getSize();
- var av_height = win_size.y -
- this.columns[0].getPosition().y +
- this.windows[0].getStyle('top').toInt() +
- this.windows[1].getStyle('bottom').toInt();
-
- this.content.setStyle('height', av_height);
-
- // set handler positions
- this.handlers.vertical.setStyle('left', this.windows[0].getCoordinates(this.content).right);
- this.handlers.left.setStyle('top', this.windows[0].getCoordinates(this.content).bottom);
- this.handlers.right.setStyle('top', this.windows[2].getCoordinates(this.content).bottom);
-
- this.fireEvent('resize');
- },
-
- refreshEditors: function(){
- Object.each(this.editors, function(editorInstance){
- editorInstance.editor.refresh();
- });
- }
-};
-
-// add events to Layout object
-$extend(Layout, new Events());
git://git.onelab.eu / unfold.git / blobdiff