Aquileo | OJ - Unified Templating
A JavaScript library to build websites with objects.
Abstracts the web into view objects
that create and change websites
- Unifies templating of HTML, CSS and JS
A library written entirely in JavaScript
Backbone support built-in with
two-way model and collection binding
DOM manipulation client-side
HTML and CSS creation server-side
Node server-side support
(in progress)
', {\n mode:'html'\n});\n\n// Change theme with a list box\nListBox({options:[\n '',\n 'solarized_light',\n 'solarized_dark'\n ], change:function(){\n myEditor.theme = this.value;\n }\n});",
cs: "h1 'AceEditor Plugin'\nmyEditor = AceEditor(\"\"\"\n
\n Choose theme below...
\n \n \"\"\",\n mode:'html'\n)\n\n# Change theme with a list box\nListBox options:[\n ''\n 'solarized_light'\n 'solarized_dark'\n ],\n change: ->\n myEditor.theme = @value"
}, {
js: "h1('VimeoVideo Plugin');\n\nVimeoVideo(24715531);",
cs: "h1 'VimeoVideo Plugin'\n\nVimeoVideo 24715531"
}, {
js: "h1('TwitterButton Plugin')\n\nTwitterButton('evanmoran')",
cs: "h1 'TwitterButton Plugin'\n\nTwitterButton 'evanmoran'"
}, {
js: "h1('GitHub Button Plugin');\n\n// Follow\nGitHubButton('evanmoran');\n\n// Star\nGitHubButton('ojjs', 'oj');\n\n// Fork\nGitHubButton('ojjs', 'oj', {type:'fork'});",
cs: "h1 'GitHub Button Plugin'\n\n# Follow\nGitHubButton 'evanmoran'\n\n# Star\nGitHubButton 'ojjs', 'oj'\n\n# Fork\nGitHubButton 'ojjs', 'oj', type:'fork'"
}
],
each: function(model) {
return div({
c: 'dot',
'data-js': model.js,
'data-cs': model.cs
});
}
});
css({
'ul.dots': {
listStyleType: 'none',
width: '' + (dots.count * 21) + 'px',
margin: '0 auto 30px',
'li': {
display: 'inline-block',
margin: '10px 0 0 0',
'&:not(:first-child)': {
marginLeft: '10px'
}
},
'.dot': {
width: '11px',
height: '11px',
display: 'inline-block',
position: 'relative',
background: 'url(media/dot_empty.png) no-repeat left top',
cursor: 'pointer',
'&.filled': {
background: 'url(media/dot_filled.png) no-repeat left top'
}
}
}
});
onload(function() {
var nextDot, selectDot, selectDotWithFade, _keepAnimatedDots;
selectDot = function($dot, fade) {
var cs, js;
js = $dot.attr('data-js');
cs = $dot.attr('data-cs');
window.editor = editor;
editor.set({
js: js,
cs: cs
});
$('ul.dots .dot').removeClass('filled');
return $dot.addClass('filled');
};
selectDotWithFade = function($dot) {
return editor.$el.fadeOut(300, function() {
selectDot($dot);
return editor.$el.fadeIn(300);
});
};
setTimeout((function() {
var $dots, random;
$dots = $('ul.dots .dot');
random = 0;
return selectDot($dots.eq(random));
}), 100);
_keepAnimatedDots = true;
nextDot = function() {};
nextDot();
$('ul.dots .dot').click(function(e) {
_keepAnimatedDots = false;
return selectDotWithFade($(e.target));
});
editor.$el.click(function(e) {
return _keepAnimatedDots = false;
});
return setTimeout;
});
div({
c: 'row'
}, function() {
div({
c: 'gg50'
}, function() {
return BulletList({
c: 'bullets'
}, function() {
return markdown("Abstracts the web into view objects
that *create* and *change* websites");
}, 'Unifies templating of HTML, CSS and JS', function() {
return markdown("A library written entirely in JavaScript");
}, function() {
return markdown("Backbone support built-in with
two-way model and collection binding");
});
});
div({
c: 'gg50'
}, function() {
return BulletList({
c: 'bullets'
}, function() {
return markdown("Includes the simple smart objects:
[List](docs.html#List), [Table](docs.html#Table), [Button](docs.html#Button), and [form elements](docs.html#form-types)");
}, function() {
return markdown("A growing collection of plugins:
[VimeoVideo](plugins.html#VimeoVideo), [AceEditor](plugins.html#AceEditor), [and more!](plugins.html)");
}, function() {
return markdown("DOM manipulation client-side
HTML and CSS creation server-side");
}, function() {
return markdown("Node server-side support
(in progress)");
});
});
return css({
'.bullets': {
'> li': {
background: 'url(media/oj_bullet.png) no-repeat left top',
listStyleType: 'none',
margin: '20px 0 10px 0',
padding: '0 0 0 35px',
minHeight: '50px',
fontFamily: fontFamilySansSerif,
fontSize: '18px',
color: '#666666',
fontWeight: 'lighter',
p: {
fontFamily: 'Helvetica, Arial, sans-serif',
fontSize: '18px',
color: '#666666',
fontWeight: 'lighter'
}
}
}
});
});
div({
c: 'row'
}, function() {
a({
c: 'button yellow gg50'
}, 'Learn More', {
href: 'learn.html'
});
a({
c: 'button orange gg50'
}, 'Download oj.js', {
href: 'download.html'
});
return css({
'.button': {
height: '34px',
borderRadius: '10px',
textAlign: 'center',
fontSize: '22px',
fontWeight: 'lighter',
fontFamily: fontFamilySansSerif,
color: 'white',
backgroundColor: '#FF9B00',
'&.yellow': {
backgroundColor: '#FFC000'
},
'&.orange': {
'@media only screen and (max-width: 739px)': {
marginTop: '15px'
}
},
paddingTop: '11px'
}
});
});
return footer({
c: 'gg100'
}, function() {
GitHubButton({
c: 'github-star-button'
}, 'ojjs', 'oj', {
type: 'watch',
showCount: false,
size: 'large',
width: 130
});
TwitterButton({
c: 'twitter-follow-button'
}, 'evanmoran', {
showCount: false,
size: 'large'
});
return span('Copyright 2013 Evan Moran', {
style: {
'float': 'right'
}
});
});
}
});
};
}}).call(this);})(require.RR('/pages/index.ojc'),require.P,require.G,'/pages','index.ojc');});
require.F['/pages/modules/index.ojc'] = (function(module,exports){(function(require,process,global,__dirname,__filename){
(function(){with(oj.sandbox){module.exports._ = require('underscore');
oj.use(require('oj-markdown'));
oj.use(require('oj-mustache'));
oj.use(require('oj-ace-editor'));
oj.use(require('oj-vimeo-video'));
oj.use(require('oj-youtube-video'));
oj.use(require('oj-twitter-button'));
oj.use(require('oj-github-button'));
oj.use(require('oj-jsfiddle'));
oj.use(require('../oj.TryEditor'));
}}).call(this);})(require.RR('/pages/modules/index.ojc'),require.P,require.G,'/pages/modules','index.ojc');});
require.F['/pages/oj.TryEditor.ojc'] = (function(module,exports){(function(require,process,global,__dirname,__filename){
(function(){with(oj.sandbox){var SCRIPT, TEXTJ, consolePadding, editorBackgroundColor, editorBorderColor, editorBorderWidth, editorPadding, lineHeight, makeCSS, maximizeDuration, phoneWidth, _arraysEqual, _calculateScripts, _escapeCode, _foundScripts, _pluginScripts, _replaceIFRAME, _scriptTagForCode, _scriptTagForCodeBody, _scriptTagWithUpdater, _updateIFRAME;
editorBorderColor = '#ffd272';
editorBackgroundColor = '#fefaf3';
editorBorderWidth = 2;
editorPadding = 4;
consolePadding = 4;
phoneWidth = 696;
maximizeDuration = 500;
lineHeight = 21;
makeCSS = null;
SCRIPT = 'scr' + 'ipt';
TEXTJ = 'text="text/javascript"';
module.exports = function(oj, settings) {
var TryEditor;
TryEditor = createType('TryEditor', {
base: ModelKeyView,
constructor: function() {
var args, options, _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6,
_this = this;
_ref = oj.unionArguments(arguments), options = _ref.options, args = _ref.args;
this._editor = new AceEditor({
c: 'oj-TryEditor-input-editor',
theme: 'orange',
mode: 'oj',
fontSize: 15,
tabSize: 2,
behaviorsEnabled: true,
useSoftTabs: true,
showGutter: false,
highlightActiveLine: false,
showPrintMargin: false,
readOnly: false,
showIndentGuides: false,
change: function() {
return _this.editorChanged.apply(_this, arguments);
}
});
this.el = oj(function() {
return div(function() {
div({
c: 'oj-TryEditor-resizer'
}, function() {
return div({
c: 'oj-TryEditor-gripper'
});
});
div({
c: 'oj-TryEditor-inputs'
}, function() {
div({
c: 'oj-TryEditor-bar'
}, function() {
return div({
c: 'oj-TryEditor-bar-states'
}, function() {
div({
c: 'oj-TryEditor-bar-state cs'
}, 'CS', {
title: 'Use CoffeeScript'
});
return div({
c: 'oj-TryEditor-bar-state js selected'
}, 'JS', {
title: 'Use JavaScript'
});
});
});
return _this.editor.emit();
});
div({
c: 'oj-TryEditor-outputs'
}, function() {
div({
c: 'oj-TryEditor-console'
});
iframe();
return div({
c: 'oj-TryEditor-bar'
}, function() {
return div({
c: 'oj-TryEditor-bar-maximize',
title: 'Maximize'
});
});
});
return div({
c: 'oj-TryEditor-seperator'
});
});
});
this.$inputs = this.$('.oj-TryEditor-inputs');
this.$input = this.$('.oj-TryEditor-input-editor');
this.$outputs = this.$('.oj-TryEditor-outputs');
this.$seperator = this.$('.oj-TryEditor-seperator');
this.$resizer = this.$('.oj-TryEditor-resizer');
this.$console = this.$('.oj-TryEditor-console');
this.$gripper = this.$('.oj-TryEditor-gripper');
this.$jsButton = this.$('.oj-TryEditor-bar-state.js');
this.$csButton = this.$('.oj-TryEditor-bar-state.cs');
this.$maximizeButton = this.$('.oj-TryEditor-bar-maximize');
if (oj.isString(options.state)) {
this.state = oj.argumentShift(options, 'state');
}
if (oj.isString(options.js)) {
this.js = oj.argumentShift(options, 'js');
}
if (oj.isString(options.cs)) {
this.cs = oj.argumentShift(options, 'cs');
}
if (args.length > 0) {
this.value = args.join('\n');
} else {
this.value = (this.state === 'js' ? this.js : this.cs) || '';
}
if (this.value === '') {
this.value = ' ';
this.value = '';
}
this.minWidth = (_ref1 = oj.argumentShift(options, 'minWidth')) != null ? _ref1 : 400;
this.minHeight = (_ref2 = oj.argumentShift(options, 'minHeight')) != null ? _ref2 : lineHeight * 1 + 2 * editorPadding;
if (options.width != null) {
this.width = oj.argumentShift(options, 'width');
}
if (options.height != null) {
this.height = oj.argumentShift(options, 'height');
}
this.split = (_ref3 = oj.argumentShift(options, 'split')) != null ? _ref3 : 0.5;
this.fontSize = (_ref4 = oj.argumentShift(options, 'fontSize')) != null ? _ref4 : 15;
this.lineCount = (_ref5 = oj.argumentShift(options, 'lineCount')) != null ? _ref5 : 'fit';
this.maximize = (_ref6 = oj.argumentShift(options, 'maximize')) != null ? _ref6 : false;
TryEditor.base.constructor.apply(this, [options]);
return this._bindEvents();
},
properties: {
width: {
get: function() {
return this.$el.width();
}
},
height: {
get: function() {
var _ref;
return (_ref = this._height) != null ? _ref : this.minHeight;
},
set: function(v) {
this._height = v;
return this.updateFrame();
}
},
fontSize: {
get: function() {
return this.editor.fontSize;
},
set: function(v) {
this.editor.fontSize = v;
}
},
lineCount: {
get: function() {
return this._lineCount;
},
set: function(v) {
var lineCount, _ref, _ref1, _ref2, _ref3;
this._lineCount = v;
lineCount = 1;
if (v === 'fit' && (this.value != null)) {
lineCount = Math.max(((_ref = this.cs) != null ? (_ref1 = _ref.split(/\r\n|\r|\n/)) != null ? _ref1.length : void 0 : void 0) || 1, ((_ref2 = this.js) != null ? (_ref3 = _ref2.split(/\r\n|\r|\n/)) != null ? _ref3.length : void 0 : void 0) || 1);
} else if (oj.isNumber(v)) {
lineCount = v;
}
this.height = lineCount * lineHeight + editorPadding * 2 + 4;
}
},
split: {
get: function() {
return this._split;
},
set: function(v) {
this._split = v;
return this.updateFrame();
}
},
editor: {
get: function() {
return this._editor;
}
},
value: {
get: function() {
var _ref;
return (_ref = this.editor.value) != null ? _ref : '';
},
set: function(v) {
if (this.state === 'cs') {
this._cs = v;
} else {
this._js = v;
}
this.editor.value = v;
return this.recompile();
}
},
js: {
get: function() {
var _ref;
return (_ref = this._js) != null ? _ref : '';
},
set: function(v) {
this._js = v;
if (this.state === 'js') {
this.value = v;
}
}
},
cs: {
get: function() {
var _ref;
return (_ref = this._cs) != null ? _ref : '';
},
set: function(v) {
this._cs = v;
if (this.state === 'cs') {
this.value = v;
}
}
},
state: {
get: function() {
var _ref;
return (_ref = this._state) != null ? _ref : 'js';
},
set: function(v) {
this._state = v;
if (v === 'js') {
this.value = this.js;
this.mode = 'oj';
this.$jsButton.addClass('selected');
return this.$csButton.removeClass('selected');
} else {
this.value = this.cs;
this.mode = 'ojc';
this.$jsButton.removeClass('selected');
return this.$csButton.addClass('selected');
}
}
},
mode: {
get: function() {
return this.editor.mode;
},
set: function(v) {
return this.editor.mode = v;
}
},
fit: {
get: function() {
var _ref;
return (_ref = this._fit) != null ? _ref : true;
},
set: function(v) {
return this._fit = v;
}
},
maximize: {
get: function() {
var _ref;
return (_ref = this._maximize) != null ? _ref : false;
},
set: function(v) {
var pos,
_this = this;
this._maximize = v;
if (!this.isInserted) {
return;
}
if (v) {
pos = this.$el.offset();
pos.top -= $(window).scrollTop();
pos.left -= $(window).scrollLeft();
this._prevWidth = this.width;
this._prevHeight = this.height;
this._prevTop = pos.top;
this._prevLeft = pos.left;
this._prevZIndex = this.$el.css('z-index');
this.$el.css({
position: 'fixed',
top: pos.top,
left: pos.left,
zIndex: 1000
});
$('body').css({
overflow: 'hidden'
});
this.$el.animate({
top: 0,
height: '100%'
}, {
progress: function() {
return _this.height = _this.$el.height();
},
complete: function() {
return _this.$el.animate({
left: 0,
width: '100%'
}, {
duration: maximizeDuration
});
},
duration: maximizeDuration
});
return this.$gripper.hide();
} else {
this.$el.animate({
left: this._prevLeft,
width: this._prevWidth
}, {
duration: maximizeDuration,
complete: function() {
return _this.$el.animate({
top: _this._prevTop,
height: _this._prevHeight
}, {
progress: function() {
return _this.height = _this.$el.height();
},
complete: function() {
return _this.$el.css({
position: 'relative',
top: '',
left: ''
});
},
duration: maximizeDuration
});
}
});
this.$gripper.show();
return $('body').css({
overflow: 'auto'
});
}
}
},
$inputs: null,
$input: null,
$outputs: null,
$output: {
get: function() {
return this.$('.oj-TryEditor-outputs > iframe');
}
},
$seperator: null,
$resizer: null,
$console: null,
$gripper: null,
$jsButton: null,
$csButton: null,
$maximizeButton: null,
_scriptTagsLast: null
},
methods: {
toggleState: function() {
return this.state = this.state === 'js' ? 'cs' : 'js';
},
editorChanged: function() {
if (this.state === 'js') {
this._js = this.value;
} else {
this._cs = this.value;
}
return this.recompile();
},
valueChanged: function() {
return TryEditor.base.valueChanged.apply(this, arguments);
},
windowResized: function(innerWidth, innerHeight) {
if (this.maximize) {
return this.height = innerHeight - editorBorderWidth * 2;
}
},
updateFrame: function() {
var h, w;
w = this.width;
h = this.height;
this.$resizer.width(w);
this.editor.height = h - editorPadding * 2;
this.$inputs.height(h);
this.$outputs.height(h);
if (w >= phoneWidth || this.maximize) {
this.$inputs.css({
display: 'inline-block'
});
this.editor.width = w / 2 - editorPadding * 2;
this.$outputs.css({
'border-top': ''
});
this.$outputs.height(h);
this.$outputs.width(w / 2);
this.$output.width(w / 2);
this.$output.height(h);
this.$console.width(w / 2 - 2 * consolePadding);
this.$console.height(h - 2 * consolePadding);
this.$seperator.show();
this.$seperator.height(this.height);
this.$seperator.css('left', Math.floor(this.width * this.split));
if (Math.abs(h - this.$resizer.height()) > 10) {
this.$resizer.height(h);
}
return this.$el.height(h);
} else {
this.$inputs.css({
display: 'block'
});
this.editor.width = w - editorPadding * 2;
this.$outputs.width(w);
this.$output.width(w);
this.$output.height(h - editorPadding);
this.$console.height(h - 2 * consolePadding);
this.$console.width(w - 2 * consolePadding);
this.$seperator.hide();
this.$outputs.css({
'border-top': "" + editorBorderWidth + "px solid " + editorBorderColor
});
if (Math.abs(h / 2 - this.$resizer.height()) > 10) {
this.$resizer.height(h * 2);
}
return this.$el.height(h * 2);
}
},
inserted: function() {
var d,
_this = this;
TryEditor.base.inserted.apply(this, arguments);
this.lineCount = this.lineCount;
this.editor.width = this.editor.width;
this.editor.value = this.value;
this.editor.height = this.height;
this.editor.mode = this.mode;
d = maximizeDuration;
maximizeDuration = 0;
this.maximize = this.maximize;
maximizeDuration = d;
setTimeout((function() {
return _this.value = _this.value;
}), 350);
return setTimeout((function() {
return _this.updateFrame();
}), 50);
},
consoleError: function(message) {
if (this.isConstructed) {
this.$console.html(message);
this.$console.show();
}
},
consoleSuccess: function() {
if (this.isConstructed) {
this.$console.hide();
}
},
recompile: function() {
var code, eCoffee, scriptTags;
if (!this.isInserted) {
return;
}
code = this.value;
if (this.state === 'cs') {
try {
code = CoffeeScript.compile(code, {
bare: true
});
} catch (_error) {
eCoffee = _error;
this.consoleError("CoffeeScript Error: " + eCoffee.message);
return;
}
}
scriptTags = _calculateScripts(code, _pluginScripts);
if (scriptTags === this._scriptTagsLast) {
_updateIFRAME(this.$output, code);
} else {
this._scriptTagsLast = scriptTags;
_replaceIFRAME(this.$outputs, this.$output, scriptTags, code);
}
return this.consoleSuccess();
},
_bindEvents: function() {
var _$gripper, _$resizer, _ref,
_this = this;
this.$jsButton.click(function() {
return _this.state = 'js';
});
this.$csButton.click(function() {
return _this.state = 'cs';
});
this.$maximizeButton.click(function() {
return _this.maximize = !_this.maximize;
});
if (oj.isClient) {
if ($.resize != null) {
$.resize.throttleWindow = false;
$.resize.delay = 100;
$(window).resize(function() {
return _this.windowResized(window.innerWidth, window.innerHeight);
});
this.$el.resize(function(e, ui) {
return _this.updateFrame();
});
this.$resizer.resize(function(e, ui) {
var h;
h = $(e.currentTarget).height();
if (_this.width _this.minHeight) {
_this.height = h / 2;
}
} else {
_this.height = h;
}
return _this.updateFrame();
});
}
if (((_ref = this.$resizer) != null ? _ref.drag : void 0) != null) {
_$resizer = this.$resizer;
_$gripper = this.$gripper;
return this.$resizer.drag().drag("start", function(ev, dd) {
dd.width = $(this).width();
dd.height = $(this).height();
_$gripper.css({
style: {
height: '100%'
}
});
}).drag("end", function(ev, dd) {
_$gripper.css({
style: {
height: '12px'
}
});
}).drag(function(ev, dd) {
$(this).css({
height: Math.max(lineHeight, dd.height + dd.deltaY)
});
}, {
handle: '.oj-TryEditor-gripper'
});
}
}
}
}
});
TryEditor.css({
border: "" + editorBorderWidth + "px solid " + editorBorderColor,
boxShadow: '2px 2px 4px RGBA(0,0,0,0.15)',
display: 'block',
position: 'relative',
zIndex: 20,
backgroundColor: '#FEFAF3',
'.oj-TryEditor-seperator': {
position: 'absolute',
top: '0px',
left: '0px',
backgroundColor: editorBorderColor,
width: '2px',
height: '1px',
zIndex: 100
},
'.oj-TryEditor-resizer': {
position: 'absolute',
top: '-1px',
left: '-1px',
width: '2px',
height: '1px'
},
'.oj-TryEditor-inputs': {
display: 'inline-block',
zIndex: 30,
position: 'relative'
},
'.oj-TryEditor-input-editor': {
resize: 'none',
border: "" + editorPadding + "px solid " + editorBackgroundColor
},
'.oj-TryEditor-outputs': {
display: 'inline-block',
position: 'relative',
zIndex: 40
},
'.oj-TryEditor-outputs > iframe': {
width: '100%',
height: '100%',
position: 'absolute',
backgroundColor: 'white',
border: 'none',
zIndex: 20
},
'.oj-TryEditor-console': {
position: 'absolute',
color: 'red',
backgroundColor: 'RGBA(255,255,255,0.8)',
textAlign: 'left',
fontSize: '16px',
padding: "" + consolePadding + "px",
width: '100%',
height: '100%',
zIndex: 30,
display: 'none'
},
'.oj-TryEditor-bar': {
position: 'absolute',
top: '0px',
right: '0px',
margin: '8px 4px 0 0',
height: '21px',
zIndex: 100
},
'.oj-TryEditor-example-chooser': {
position: 'relative',
float: 'right',
height: '100%',
zIndex: 10,
marginLeft: '8px'
},
'.oj-TryEditor-bar-state': {
display: 'inline-block',
color: '#D5A876',
width: '25px',
height: '100%',
float: 'right',
marginLeft: '0px',
zIndex: 101,
textAlign: 'center',
cursor: 'pointer',
fontSize: '12px'
},
'.oj-TryEditor-bar-state:hover': {
textDecoration: 'underline'
},
'.oj-TryEditor-bar-state.selected': {
fontWeight: 'bold',
color: '#E88E00',
textDecoration: 'none !important'
},
'.oj-TryEditor-bar-maximize': {
display: 'inline-block',
backgroundImage: 'url(media/try_popout.png)',
width: '15px',
height: '12px',
float: 'right',
zIndex: 101,
cursor: 'pointer',
'@media only screen and (max-width: 739px)': {
display: 'none'
}
},
'.oj-TryEditor-gripper': {
position: 'absolute',
bottom: '2px',
right: '2px',
left: 'auto',
width: '100%',
height: '12px',
cursor: 's-resize',
backgroundImage: 'url(media/try_gripper.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'bottom right',
zIndex: 101
}
});
return {
TryEditor: TryEditor
};
};
_pluginScripts = {
Backbone: ["" + SCRIPT + ">\n", "" + SCRIPT + ">\n"],
AceEditor: ["" + SCRIPT + ">\n", "" + SCRIPT + ">\n"],
VimeoVideo: ["" + SCRIPT + ">\n"],
YouTubeVideo: ["" + SCRIPT + ">\n"],
GitHubButton: ["" + SCRIPT + ">\n"],
TwitterButton: ["" + SCRIPT + ">\n"],
markdown: ["" + SCRIPT + ">\n"],
md: ["" + SCRIPT + ">\n"],
marked: ["" + SCRIPT + ">\n"],
mustache: ["" + SCRIPT + ">\n"],
JSFiddle: ["" + SCRIPT + ">\n"]
};
_foundScripts = function(code, pluginScripts) {
var out, plugin, v;
out = [];
for (plugin in pluginScripts) {
v = pluginScripts[plugin];
if (code.indexOf(plugin) !== -1) {
out.push(plugin);
}
}
return out.sort();
};
_arraysEqual = function(a, b) {
var i, v, _i, _len;
if (a === b) {
return true;
}
if (a === null || b === null) {
return false;
}
if (a.length !== b.length) {
return false;
}
for (i = _i = 0, _len = a.length; _i " + SCRIPT + ">\n";
out += "" + SCRIPT + ">\n";
foundScripts = _foundScripts(code, _pluginScripts);
for (_i = 0, _len = foundScripts.length; _i \n(function(){\n // Allow editor to rebuild iframe at will\n var _code = null;\n document.showError = function(err){\n // Error style\n var errorStyle = {style:{color:'red', fontSize:'16px', fontFamily:'sans-serif'}};\n\n // Report error\n $('body').oj([oj.div, errorStyle, err.toString()]);\n };\n document.rebuild = function(code){\n if (code == _code)\n return;\n $('script.build').remove()\n try {\n $('head').append(\"\"+code+\"\"+\"ipt>\");\n } catch(eAppend) {\n document.showError(eAppend);\n }\n };\n // Allow dom manipulation within the iframe\n document.oj = oj;\n document.$ = $;\n})(this);\n" + SCRIPT + ">";
};
_scriptTagForCodeBody = function(code) {
return "// Start onready\noj.$(function(){try{with(oj){\n\n// Insert code into body\noj.$.ojBody(function(){\n\n" + code + "\n\n});\n\n// Handle errors\n}} catch(e) {\n document.showError(e);\n}});";
};
_scriptTagForCode = function(code) {
return "\n\n" + (_scriptTagForCodeBody(code)) + "\n\n" + SCRIPT + ">";
};
_replaceIFRAME = function($iframeParent, $iframe, scriptTags, code) {
var doc, html, iframe;
html = "
\n" + scriptTags + "\n" + (_scriptTagWithUpdater()) + "\n" + (_scriptTagForCode(code)) + "\n\n
\n";
$iframe.remove();
iframe = document.createElement('iframe');
$iframeParent.append(iframe);
doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) {
doc = doc.document;
}
doc.open();
doc.write(html);
return doc.close();
};
_updateIFRAME = function($iframe, code) {
var $body, $html, $styles, doc$, docOJ;
if ($iframe.contents() && $iframe.contents()[0] && oj.isFunction($iframe.contents()[0].rebuild)) {
$html = $iframe.contents().find('html');
$body = $iframe.contents().find('body');
doc$ = $iframe.contents()[0].$;
$styles = doc$('style');
$styles.each(function() {
var $this, cls;
$this = $(this);
cls = $this.attr('class');
if (oj.isString(cls) && cls.match(/^oj-.*style$/)) {
return $this.remove();
}
});
doc$('body').html('');
$iframe.contents()[0].rebuild(_scriptTagForCodeBody(code));
docOJ = $iframe.contents()[0].oj;
if (typeof docOJ !== 'undefined' && typeof docOJ.TwitterButton !== 'undefined') {
docOJ.TwitterButton._loaded = false;
}
if (typeof docOJ !== 'undefined' && typeof docOJ.YouTubeVideo !== 'undefined') {
return docOJ.YouTubeVideo.onYouTubeIframeAPIReady();
}
}
};
}}).call(this);})(require.RR('/pages/oj.TryEditor.ojc'),require.P,require.G,'/pages','oj.TryEditor.ojc');});
require.F['/pages/_template.ojc'] = (function(module,exports){(function(require,process,global,__dirname,__filename){
(function(){with(oj.sandbox){var makeFooter, makeHeader, _, _styles, _template;
_ = require('underscore');
_styles = require('./_styles');
module.exports = _template = function(parts) {
var orangeSize;
doctype(5);
html(function() {
head(function() {
var s, _i, _j, _len, _len1, _ref, _ref1;
meta({
name: 'viewport',
content: 'width=device-width'
});
meta({
'http-equiv': "X-UA-Compatible",
content: 'IE=edge'
});
title(parts.title);
if (_.isArray(parts.styles)) {
_ref = parts.styles;
for (_i = 0, _len = _ref.length; _i 0) {
return table({
c: "code-items " + type
}, function() {
return tbody(function() {
var prop, _i, _len, _results;
_results = [];
for (_i = 0, _len = items.length; _i