0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add demos

Browse source
This commit is contained in:
rolux 2011-08-15 16:18:27 +02:00
parent 1083a324dc
commit 72b892f982
8 changed files with 407 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
demos/dialog/index.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>OxJS Dialog Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
</head>
<body>
</body>
</html>

276
demos/dialog/js/dialog.js Normal file
View file

@ -0,0 +1,276 @@
Ox.load('UI', {debug: true}, function() {
var $buttons = Ox.Bar({size: 24});
var $img, $previewDialog, preview = false;
var $list = Ox.IconList({
item: function(data, sort, size) {
var ratio = data.width / data.height;
size = size || 128;
return {
height: ratio <= 1 ? size : size / ratio,
id: data.id,
info: data.width + ' x ' + data.height + ' px',
title: Ox.toTitleCase(data.id),
url: 'png/' + data.id + '.png',
width: ratio >= 1 ? size : size * ratio
};
},
items: [
{
id: 'earth',
width: 1024,
height: 1024
},
{
id: 'north',
width: 1024,
height: 512
},
{
id: 'west',
width: 512,
height: 1024
}
],
orientation: 'horizontal',
size: 128,
sort: [{key: 'id', operator: '+'}],
unique: 'id'
}).bindEvent({
closepreview: function() {
$previewDialog.close();
preview = false;
},
openpreview: function(event) {
var data = Ox.getObjectById($list.options('items'), event.ids[0]),
ratio = data.width / data.height,
windowWidth = window.innerWidth * 0.8
windowHeight = window.innerHeight * 0.8
windowRatio = windowWidth / windowHeight,
width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);
Ox.print('d/w/h', data, width, height)
if (!preview) {
if (!$previewDialog) {
$previewDialog = Ox.Dialog({
closeButton: true,
content: $img = $('<img>')
.attr({src: 'png/' + data.id + '.png'})
.css({width: width + 'px', height: height + 'px'}),
fixedRatio: true,
focus: false,
height: height,
maximizeButton: true,
title: Ox.toTitleCase(data.id),
width: width
})
.bindEvent({
close: function() {
$list.closePreview();
preview = false;
},
resize: function(event) {
$img.css({
width: event.width + 'px',
height: event.height + 'px'
});
}
}).open();
} else {
$previewDialog.options({
content: $img = $('<img>')
.attr({src: 'png/' + data.id + '.png'})
.css({width: width + 'px', height: height + 'px'}),
height: height,
title: Ox.toTitleCase(data.id),
width: width
}).open();
}
preview = true;
} else {
$previewDialog.options({
content: $img = $('<img>')
.attr({src: 'png/' + data.id + '.png'})
.css({width: width + 'px', height: height + 'px'}),
title: Ox.toTitleCase(data.id),
}).setSize(width, height);
}
}
});
Ox.SplitPanel({
elements: [
{
element: $buttons,
size: 24
},
{
element: $('<div>').css({background: 'rgb(128, 128, 128)'})
},
{
element: $list,
size: 208
}
],
orientation: 'vertical'
}).appendTo(Ox.UI.$body);
Ox.UI.$body
.css({
padding: '4px',
background: 'rgb(240, 240, 240)'
});
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
title: 'Cancel'
}).bindEvent({
click: function() {
$dialog.close();
}
}),
Ox.Button({
title: 'Close'
}).bindEvent({
click: function() {
$dialog.close();
}
})
],
content: Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.Element({id: 'foo'}).css({background: 'rgb(240, 240, 240)'}),
resizable: true,
resize: [128, 256, 384],
size: 256
},
{
element: Ox.Element({id: 'bar'}).css({background: 'rgb(240, 240, 240)'}),
}
],
orientation: 'horizontal'
}),
title: Ox.repeat('Foo bar. ', 10)
});
var $dialogA = Ox.Dialog({
buttons: [
Ox.Button({title: 'Foo'}),
Ox.Button({title: 'Bar'}),
{},
Ox.Button({title: 'Baz'}),
Ox.Button({title: 'Close'}).bindEvent({
click: function() {
$dialogA.close();
}
})
],
content: $('<div>')
.css({padding: '16px'})
.html(Ox.repeat('Foo bar. ', 100)),
title: Ox.repeat('Foo bar. ', 10)
}).bindEvent({
key_escape: function() {
$dialogA.close();
}
});
var $img = $('<img>')
.attr({src: 'png/earth.png'})
.css({width: '256px', height: '256px'});
var $dialogB = Ox.Dialog({
closeButton: true,
content: $img,
fixedRatio: true,
focus: false,
height: 256,
maximizeButton: true,
width: 256,
title: Ox.repeat('Foo bar. ', 10)
}).bindEvent({
resize: function(event) {
$img.css({
width: event.width + 'px',
height: event.height + 'px'
});
}
});
var $dialogC = Ox.Dialog({
closeButton: true,
content: Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.Element({id: 'foo'}).css({background: 'rgb(240, 240, 240)'}),
resizable: true,
resize: [128, 256, 384],
size: 256
},
{
element: Ox.Element({id: 'bar'}).css({background: 'rgb(240, 240, 240)'}),
}
],
orientation: 'horizontal'
})
},
{
element: Ox.Bar({
size: 16}
).css({
borderBottomLeftRadius: '8px',
borderBottomRightRadius: '8px'
}),
size: 16
}
],
orientation: 'vertical'
}),
height: Math.round((window.innerHeight - 24) * 0.9),
maximizeButton: true,
title: Ox.repeat('Foo bar. ', 10),
width: Math.round(window.innerWidth * 0.9)
});
Ox.Button({
title: 'Dialog'
}).css({
margin: '4px'
}).bindEvent({
click: $dialog.open
}).appendTo($buttons);
Ox.Button({
title: 'Dialog A'
}).css({
margin: '4px'
}).bindEvent({
click: $dialogA.open
}).appendTo($buttons);
Ox.Button({
title: 'Dialog B'
}).css({
margin: '4px'
}).bindEvent({
click: $dialogB.open
}).appendTo($buttons);
Ox.Button({
title: 'Dialog C'
}).css({
margin: '4px'
}).bindEvent({
click: $dialogC.open
}).appendTo($buttons);
});

BIN
demos/dialog/png/earth.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
demos/dialog/png/north.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 897 KiB

BIN
demos/dialog/png/west.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 719 KiB

11
demos/editable/index.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>OxJS Editable Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="js/editable.js"></script>
</head>
<body>
</body>
</html>

108
demos/editable/js/editable.js Normal file
View file

@ -0,0 +1,108 @@
Ox.load('UI', {debug: true}, function() {
var $box = Ox.Element()
.css({width: '512px', height: '512px', margin: '8px'})
.bind({
click: function(e) {
if ($(e.target).is('a')) {
return false;
}
}
})
.bindEvent({
singleclick: function(e) {
var $target = $(e.target);
if ($target.is('a')) {
Ox.print('href=' + $target.attr('href'));
}
}
})
.appendTo(Ox.UI.$body);
/*
$container.append(
Ox.Input({
height: 64,
style: 'square',
type: 'textarea',
width: 256
})
);
$container.append($('<br>'))
*/
var data = {
country: ['France'],
director: ['Jean-Luc Godard'],
language: ['French', 'English'],
runtime: 5400,
title: 'Deux ou trois choses que je sais d\'elle',
year: '1967'
};
Ox.Editable({
value: data.title
})
.css({
height: '16px',
fontWeight: 'bold',
fontSize: '13px'
})
.appendTo($box);
Ox.Editable({
format: function(value) {
return value ? value.split(', ').map(function(value) {
return '<a href="/?find=' + value + '">' + value + '</a>'
}).join(', ') : 'Unknown Director'
},
value: data.director.join(', ')
})
.css({
height: '16px',
fontWeight: 'bold',
fontSize: '13px'
})
.appendTo($box);
var $div = $('<div>').appendTo($box.$element);
['country', 'year', 'language', 'runtime'].forEach(function(key, i) {
var $div_ = $('<div>')
.css({float: 'left', margin: '1px 0 0 1px'})
.append(
$('<div>')
.css({float: 'left'})
.html((i ? '; ' : '') + Ox.toTitleCase(key) + ':&nbsp;')
)
.appendTo($div);
Ox.Editable({
format: function(value) {
return value ? (
Ox.isArray(data[key]) ? value.split(', ').map(function(value) {
return '<a href="/?find=' + value + '">' + value + '</a>'
}).join(', ') : value
) : 'unknown';
},
value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key]
})
.css({
float: 'left'
})
.appendTo($div_);
});
$div = $('<div>')
.css({clear: 'both'})
.appendTo($box.$element);
Ox.Editable({
format: function(value) {
return value ? Ox.parseHTML(value) : 'No description'
},
type: 'textarea',
value: 'foo bar\nfoo bar'
})
.appendTo($div);
});

1
source/Ox.UI/css/Ox.UI.css
View file

@ -278,6 +278,7 @@ Dialog
.OxDialog > .OxResize { .OxDialog > .OxResize {
position: absolute; position: absolute;
z-index: 12;
} }
.OxDialog > .OxResizeTopLeft { .OxDialog > .OxResizeTopLeft {
left: -2px; left: -2px;