oxjs/source/Ox.UI/js/Code/ExamplePage.js
2012-06-23 12:50:34 +02:00

225 lines
6.3 KiB
JavaScript

'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.$homeButton = Ox.Button({
title: 'home',
tooltip: 'Home',
type: 'image'
})
.css({float: 'left', margin: '4px 2px 4px 4px'})
.bindEvent({
click: function() {
that.triggerEvent('close');
}
})
.appendTo(self.$toolbar)
self.$title = Ox.Label({
style: 'square',
title: self.options.title
})
.css({float: 'left', borderRadius: '4px', margin: '4px 2px 4px 2px'})
.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'
})
.addClass('OxExamplePage')
);
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;
};