oxjs/source/Ox.UI/js/Code/Ox.ExamplePage.js

175 lines
4.9 KiB
JavaScript

'use strict'
Ox.ExamplePage = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
html: '',
js: '',
replaceCode: [],
replaceComment: [],
selected: 'source',
title: ''
})
.options(options || {});
self.$toolbar = Ox.Bar({size: 24});
self.$title = Ox.Label({
style: 'square',
title: 'Examples: ' + 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.$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) {
self.options.selected = data.value;
self.$reloadButton.options({disabled: data.value == 'source'});
self.$openButton.options({disabled: data.value == 'source'});
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.$keywordMenu = Ox.MenuButton({
items: self.options.keywords.map(function(keyword) {
return {id: keyword, title: keyword};
}),
//title: 'Documentation',
//width: 128
title: 'select',
tooltip: 'References',
type: 'image'
})
.css({float: 'right', margin: '4px 2px 4px 2px'})
.bindEvent({
click: function(data) {
that.triggerEvent('select', {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.$window.bind({
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;
};