From 5d454f0a80e4dc0340fbc99201cd5399f7b8b20f Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sun, 28 Aug 2011 06:23:15 +0000 Subject: [PATCH] support for drag and drop --- source/Ox.UI/css/Ox.UI.css | 6 ++---- source/Ox.UI/js/List/Ox.IconList.js | 7 ++++++- source/Ox.UI/js/List/Ox.List.js | 8 ++++++++ source/Ox.UI/js/List/Ox.TextList.js | 7 ++++--- source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js | 4 ++-- source/Ox.UI/js/Window/Ox.Tooltip.js | 2 +- source/Ox.UI/themes/modern/css/modern.css | 14 ++++++++++++++ source/Ox.js | 2 ++ 8 files changed, 39 insertions(+), 11 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 5a0eb7aa..ed0a3dac 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1222,9 +1222,7 @@ Lists .OxTextList .OxPage { position: absolute; } -.OxTextList.OxDrop .OxItem .OxCell { - color: green; -} + .OxTreeList .OxItem .OxCell { border-right-width: 0 } @@ -2094,7 +2092,7 @@ Miscellaneous .OxTooltip { position: absolute; - padding: 1px 2px 1px 2px; + padding: 1px 3px 1px 3px; font-size: 9px; //opacity: 0; z-index: 1001; diff --git a/source/Ox.UI/js/List/Ox.IconList.js b/source/Ox.UI/js/List/Ox.IconList.js index e58c74e4..e3c11c49 100644 --- a/source/Ox.UI/js/List/Ox.IconList.js +++ b/source/Ox.UI/js/List/Ox.IconList.js @@ -77,7 +77,12 @@ Ox.IconList = function(options, self) { type: 'icon', unique: self.options.unique }, $.extend({}, self)) // pass event handler - .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation)); + .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation)) + .bindEvent({ + select: function() { + self.options.selected = that.$element.options('selected'); + } + }); updateKeys(); diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index b2ed3855..db56063b 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -164,6 +164,7 @@ Ox.List = function(options, self) { 0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60, 64, 68, 72, 76, 60 ]; } + /* if (self.options.draggable) { that.bind({ dragstart: function(e) { @@ -172,6 +173,7 @@ Ox.List = function(options, self) { } }); } + */ if (!self.isAsync) { self.listLength = self.options.items.length; @@ -839,7 +841,13 @@ Ox.List = function(options, self) { } else if (self.selected.length > 1) { // this could be the first click // of a double click on multiple items + // or the mousedown of a drag of multiple items selectTimeout = true; + that.$content.one({ + mousemove: function() { + self.clickTimeout && clearTimeout(self.clickTimeout); + } + }); } else if (self.options.type == 'text' && hadFocus) { var $cell = findCell(e), $element = $cell || self.$items[pos]; diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index 27d34a37..ca4d66e3 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -48,6 +48,7 @@ Ox.TextList = function(options, self) { columnsResizable: false, columnsVisible: false, columnWidth: [40, 800], + droppable: null, id: '', items: null, // function() {} {sort, range, keys, callback} or array max: -1, @@ -380,7 +381,7 @@ Ox.TextList = function(options, self) { function constructItem(data) { var $item = $('
') - .addClass('OxTarget') + .addClass('OxTarget' + (data.droppable ? ' OxDroppable' : '')) .css({ width: getItemWidth(true) + 'px' }); @@ -516,7 +517,7 @@ Ox.TextList = function(options, self) { } function getCell(id, key) { - Ox.print('getCell', id, key) + //Ox.print('getCell', id, key) var $item = getItem(id); key = key || ''; return $($item.find('.OxCell.OxColumn' + Ox.toTitleCase(key))[0]); @@ -847,7 +848,7 @@ Ox.TextList = function(options, self) { that.value = function(id, key, value) { // fixme: make this accept id, {k: v, ...} - Ox.print('value', id, key, value) + //Ox.print('value', id, key, value) var $item = getItem(id), $cell = getCell(id, key), column = self.options.columns[getColumnIndexById(key)]; diff --git a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js index 6c067f87..dec19558 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js @@ -63,8 +63,8 @@ Ox.VideoPanelPlayer = function(options, self) { }); self.$video = Ox.VideoPlayer({ - controlsTop: ['fullscreen', 'scale', 'title', 'find'], - controlsBottom: ['play', 'volume', 'timeline', 'position', 'resolution'], + controlsTop: ['fullscreen', 'title', 'find'], + controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'resolution'], enableFind: true, enableKeyboard: true, enableMouse: true, diff --git a/source/Ox.UI/js/Window/Ox.Tooltip.js b/source/Ox.UI/js/Window/Ox.Tooltip.js index 605b6462..08d7b393 100644 --- a/source/Ox.UI/js/Window/Ox.Tooltip.js +++ b/source/Ox.UI/js/Window/Ox.Tooltip.js @@ -14,7 +14,7 @@ Ox.Tooltip = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ - animate: true, + animate: true, // fixme: shouldn't booleans be false by default? title: '' }) .options(options || {}) diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 19861fec..ea95c674 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -295,6 +295,20 @@ Lists .OxThemeModern .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) { background: rgb(66, 66, 66); } +.OxThemeModern .OxTextList .OxItem.OxDrop:nth-child(odd) .OxCell { + background: rgb(78, 78, 78); +} +.OxThemeModern .OxTextList .OxItem.OxDrop:nth-child(even) .OxCell { + background: rgb(82, 82, 82); +} +.OxThemeModern .OxTextList .OxItem.OxDragover:nth-child(odd) .OxCell { + background: rgb(94, 94, 94); +} +.OxThemeModern .OxTextList .OxItem.OxDragover:nth-child(even) .OxCell { + background: rgb(98, 98, 98); +} + + .OxThemeModern .OxTextList .OxBar .OxSelected { background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); background: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); diff --git a/source/Ox.js b/source/Ox.js index decda65a..d2da0840 100644 --- a/source/Ox.js +++ b/source/Ox.js @@ -425,6 +425,7 @@ Ox.find Returns array elements that match a string > Ox.find(['foo', 'bar', 'foobar', 'barfoo'], 'foo') [['foo', 'foobar'], ['barfoo']] @*/ +// fixme: wouldn't it make more sense to return just one array? Ox.find = function(arr, str) { var ret = [[], []]; str = str.toLowerCase(); @@ -4006,6 +4007,7 @@ Ox.loadFile Loads a file (image, script or stylesheet) Ox.loadFile = (function() { // fixme: this doesn't handle errors yet // fixme: rename to getFile? + // fixme: what about array of files? var cache = {}; return function (file, callback) { var element,