'use strict' /*@ Ox.ExamplePage <f> Example Page ([options[, self]]) -> <o:Ox.SplitPanel> Example Page options <o> Options self <o> Shared private variable @*/ Ox.ExamplePage = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ html: '', js: '', references: [], replaceCode: [], replaceComment: [], selected: 'source', title: '' }) .options(options || {}); self.$toolbar = Ox.Bar({size: 24}); self.$title = Ox.Label({ style: 'square', title: self.options.title }) .css({float: 'left', margin: '4px'}) .appendTo(self.$toolbar) self.$openButton = Ox.Button({ disabled: self.options.selected == 'source', title: 'open', tooltip: 'Open in New Tab', type: 'image' }) .css({float: 'right', margin: '4px 4px 4px 2px'}) .bindEvent({ click: function() { window.open(self.options.html); } }) .appendTo(self.$toolbar); self.$reloadButton = Ox.Button({ disabled: self.options.selected == 'source', title: 'redo', tooltip: 'Reload', type: 'image' }) .css({float: 'right', margin: '4px 2px 4px 2px'}) .bindEvent({ click: function() { self.$frame.attr({src: self.options.html}); } }) .appendTo(self.$toolbar); self.$switchButton = Ox.Button({ disabled: self.options.selected == 'source', title: 'switch', tooltip: 'Switch Theme', type: 'image' }) .css({float: 'right', margin: '4px 2px 4px 2px'}) .bindEvent({ click: function() { self.$frame[0].contentWindow.postMessage( 'Ox && Ox.Theme && Ox.Theme(' + 'Ox.Theme() == "classic" ? "modern" : "classic"' + ')', '*' ); } }) .appendTo(self.$toolbar); self.$tabs = Ox.ButtonGroup({ buttons: [ { id: 'source', title: 'View Source', width: 80 }, { id: 'live', title: 'View Live', width: 80 } ], selectable: true, value: self.options.selected }) .css({float: 'right', margin: '4px 2px 4px 2px'}) .bindEvent({ change: function(data) { var disabled = data.value == 'source'; self.options.selected = data.value; self.hasUI && self.$switchButton.options({disabled: disabled}); self.$reloadButton.options({disabled: disabled}); self.$openButton.options({disabled: disabled}); self.$content.animate({ marginLeft: data.value == 'source' ? 0 : -self.options.width + 'px' }, 250, function() { if (data.value == 'live' && !self.$frame.attr('src')) { self.$frame.attr({src: self.options.html}); } }); } }) .appendTo(self.$toolbar); /* self.$referencesMenu = Ox.MenuButton({ items: self.options.references.map(function(reference) { return {id: reference, title: reference}; }), //title: 'Documentation', //width: 128 title: 'select', tooltip: 'References', type: 'image' }) .css({float: 'right', margin: '4px 2px 4px 2px'}) .bindEvent({ click: function(data) { that.triggerEvent('doc', {id: data.id}); } }) .appendTo(self.$toolbar); */ self.$viewer = Ox.SourceViewer({ file: self.options.js, replaceCode: self.options.replaceCode, replaceComment: self.options.replaceComment }) .css({ position: 'absolute', left: 0, top: 0, width: self.options.width + 'px', height: self.options.height - 24 + 'px' }); self.$frame = Ox.Element('<iframe>') .css({ position: 'absolute', left: self.options.width + 'px', top: 0, border: 0 }) .attr({ width: self.options.width, height: self.options.height }); self.$content = Ox.Element() .css({ position: 'absolute', width: self.options.width * 2 + 'px' }) .append(self.$viewer) .append(self.$frame) self.$container = Ox.Element() .append(self.$content) that.setElement( Ox.SplitPanel({ elements: [ {element: self.$toolbar, size: 24}, {element: self.$container} ], orientation: 'vertical' }) ); Ox.get(self.options.js, function(js) { self.hasUI = /Ox\.load\(.+UI.+,/.test(js); !self.hasUI && self.$switchButton.options({disabled: true}); }); Ox.$window.on({ resize: function() { setSize(); } }); setTimeout(setSize, 100); function setSize() { self.options.width = that.width(); self.options.height = that.height(); self.$content.css({ width: self.options.width * 2 + 'px' }) self.$viewer.css({ width: self.options.width + 'px', height: self.options.height - 24 + 'px' }) self.$frame.attr({ width: self.options.width, height: self.options.height - 24 }); } return that; };