diff --git a/demos/dialog/index.html b/demos/dialog/index.html new file mode 100644 index 00000000..eb54261b --- /dev/null +++ b/demos/dialog/index.html @@ -0,0 +1,11 @@ + + + + OxJS Dialog Demo + + + + + + \ No newline at end of file diff --git a/demos/dialog/js/dialog.js b/demos/dialog/js/dialog.js new file mode 100644 index 00000000..6b6cc833 --- /dev/null +++ b/demos/dialog/js/dialog.js @@ -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 = $('') + .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 = $('') + .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 = $('') + .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: $('
').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: $('
') + .css({padding: '16px'}) + .html(Ox.repeat('Foo bar. ', 100)), + title: Ox.repeat('Foo bar. ', 10) + }).bindEvent({ + key_escape: function() { + $dialogA.close(); + } + }); + + var $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); + +}); \ No newline at end of file diff --git a/demos/dialog/png/earth.png b/demos/dialog/png/earth.png new file mode 100644 index 00000000..3462ad70 Binary files /dev/null and b/demos/dialog/png/earth.png differ diff --git a/demos/dialog/png/north.png b/demos/dialog/png/north.png new file mode 100644 index 00000000..20d54698 Binary files /dev/null and b/demos/dialog/png/north.png differ diff --git a/demos/dialog/png/west.png b/demos/dialog/png/west.png new file mode 100644 index 00000000..18f69993 Binary files /dev/null and b/demos/dialog/png/west.png differ diff --git a/demos/editable/index.html b/demos/editable/index.html new file mode 100644 index 00000000..2409c45d --- /dev/null +++ b/demos/editable/index.html @@ -0,0 +1,11 @@ + + + + OxJS Editable Demo + + + + + + \ No newline at end of file diff --git a/demos/editable/js/editable.js b/demos/editable/js/editable.js new file mode 100644 index 00000000..73583ead --- /dev/null +++ b/demos/editable/js/editable.js @@ -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($('
')) + */ + + 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 '' + value + '' + }).join(', ') : 'Unknown Director' + }, + value: data.director.join(', ') + }) + .css({ + height: '16px', + fontWeight: 'bold', + fontSize: '13px' + }) + .appendTo($box); + + var $div = $('
').appendTo($box.$element); + + ['country', 'year', 'language', 'runtime'].forEach(function(key, i) { + var $div_ = $('
') + .css({float: 'left', margin: '1px 0 0 1px'}) + .append( + $('
') + .css({float: 'left'}) + .html((i ? '; ' : '') + Ox.toTitleCase(key) + ': ') + ) + .appendTo($div); + Ox.Editable({ + format: function(value) { + return value ? ( + Ox.isArray(data[key]) ? value.split(', ').map(function(value) { + return '' + value + '' + }).join(', ') : value + ) : 'unknown'; + }, + value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key] + }) + .css({ + float: 'left' + }) + .appendTo($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); + +}); \ No newline at end of file diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index c8ffc1c0..d99be57d 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -278,6 +278,7 @@ Dialog .OxDialog > .OxResize { position: absolute; + z-index: 12; } .OxDialog > .OxResizeTopLeft { left: -2px;