ExamplePanel/ExamplePage: add mode/selected option ('source' or 'live')

This commit is contained in:
rolux 2012-07-05 21:38:02 +02:00
parent d70b996472
commit 01717f3727
2 changed files with 47 additions and 30 deletions

View file

@ -5,6 +5,8 @@ Ox.ExamplePage <f> Example Page
options <o> Options
self <o> Shared private variable
([options[, self]]) -> <o:Ox.SplitPanel> Example Page
change <!> Change event
close <!> Close event
@*/
Ox.ExamplePage = function(options, self) {
@ -20,7 +22,12 @@ Ox.ExamplePage = function(options, self) {
selected: 'source',
title: ''
})
.options(options || {});
.options(options || {})
.update({
selected: function() {
self.$tabs.options({value: self.options.selected});
}
});
self.$toolbar = Ox.Bar({size: 24});
@ -116,37 +123,21 @@ Ox.ExamplePage = function(options, self) {
self.$reloadButton.options({disabled: disabled});
self.$openButton.options({disabled: disabled});
self.$content.animate({
marginLeft: data.value == 'source'
marginLeft: self.options.selected == 'source'
? 0 : -self.options.width + 'px'
}, 250, function() {
if (data.value == 'live' && !self.$frame.attr('src')) {
if (
self.options.selected == 'live'
&& !self.$frame.attr('src')
) {
self.$frame.attr({src: self.options.html});
}
});
that.triggerEvent('change', data);
}
})
.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,
@ -173,7 +164,9 @@ Ox.ExamplePage = function(options, self) {
self.$content = Ox.Element()
.css({
position: 'absolute',
width: self.options.width * 2 + 'px'
width: self.options.width * 2 + 'px',
marginLeft: self.options.selected == 'source'
? 0 : -self.options.width + 'px'
})
.append(self.$viewer)
.append(self.$frame);
@ -202,7 +195,12 @@ Ox.ExamplePage = function(options, self) {
}
});
setTimeout(setSize, 100);
setTimeout(function() {
setSize();
if (self.options.selected == 'live') {
self.$frame.attr({src: self.options.html});
}
}, 100);
function setSize() {
self.options.width = that.width();

View file

@ -5,8 +5,10 @@ Ox.ExamplePanel <f> Example Panel
options <o> Options
self <o> Shared private variable
([options[, self]]) -> <o:Ox.SplitPanel> Example Panel
load <!> load
select <!> select
change <!> Change event
value <s> 'source' or 'live'
load <!> Load event
select <!> Select event
id <s> selected example
@*/
@ -17,6 +19,7 @@ Ox.ExamplePanel = function(options, self) {
.defaults({
element: '',
examples: [],
mode: 'source',
path: '',
references: null,
replaceCode: [],
@ -26,7 +29,15 @@ Ox.ExamplePanel = function(options, self) {
})
.options(options || {})
.update({
mode: function() {
Ox.print('mode handler', self.options.selected)
if (self.options.selected) {
self.$page.options({selected: self.options.mode});
}
},
selected: function() {
Ox.print('selected handler');
self.options.mode = 'source';
selectItem(self.options.selected);
}
});
@ -74,6 +85,7 @@ Ox.ExamplePanel = function(options, self) {
.bindEvent({
select: function(data) {
if (!data.ids[0] || !Ox.endsWith(data.ids[0], '/')) {
self.options.mode = 'source';
selectItem(
data.ids[0] ? data.ids[0].split('/').pop() : ''
);
@ -82,7 +94,7 @@ Ox.ExamplePanel = function(options, self) {
});
self.$panel.replaceElement(0, self.$list);
selectItem(self.options.selected);
that.triggerEvent('load', {});
that.triggerEvent('load', {items: self.items});
});
function getItemByName(name) {
@ -127,7 +139,8 @@ Ox.ExamplePanel = function(options, self) {
}
function selectItem(id) {
var item = id ? getItemByName(id) : null;
var item = id ? getItemByName(id) : null,
selected = self.options.selected;
if (item) {
self.options.selected = id;
self.$list.options({selected: [item.section + '/' + id]});
@ -138,10 +151,14 @@ Ox.ExamplePanel = function(options, self) {
references: item.references,
replaceCode: self.options.replaceCode,
replaceComment: self.options.replaceComment,
selected: self.options.mode,
title: item.title,
width: window.innerWidth - self.options.size
})
.bindEvent({
change: function(data) {
that.triggerEvent('change', data);
},
close: function() {
selectItem();
}
@ -152,7 +169,9 @@ Ox.ExamplePanel = function(options, self) {
self.$list.options({selected: []});
self.$page.empty().append(self.options.element);
}
that.triggerEvent('select', {id: self.options.selected});
if (self.options.selected != selected) {
that.triggerEvent('select', {id: self.options.selected});
}
}
function sortById(a, b) {