From a1a45db9b83f258938af189a66d2f6ee0c2163b8 Mon Sep 17 00:00:00 2001 From: Rolux Date: Mon, 5 Jul 2010 09:09:34 +0200 Subject: [PATCH] update css for classic theme --- build/css/ox.ui.classic.css | 105 +++++++--- build/css/ox.ui.css | 31 ++- build/css/ox.ui.modern.css | 10 - build/js/ox.js | 88 ++++++++- build/js/ox.ui.js | 185 +++++++++++++++++- .../scrollbarHorizontalDecrement.png | Bin 0 -> 2883 bytes .../scrollbarHorizontalIncrement.png | Bin 0 -> 2881 bytes demos/test/list.js | 45 ++++- 8 files changed, 417 insertions(+), 47 deletions(-) create mode 100644 build/png/ox.ui.classic/scrollbarHorizontalDecrement.png create mode 100644 build/png/ox.ui.classic/scrollbarHorizontalIncrement.png diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index 1819106..4b8db5a 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -120,6 +120,58 @@ Forms background: rgb(208, 208, 208); } +/* +================================================================================ +Lists +================================================================================ +*/ + +.OxThemeClassic .OxTextList .OxItem .OxCell { + border-right: 1px solid rgb(224, 224, 224); +} +.OxThemeClassic .OxTextList .OxItem:nth-child(odd) { + background: rgb(242, 242, 242); +} +.OxThemeClassic .OxTextList .OxItem:nth-child(even) { + background: rgb(238, 238, 238); +} +.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(odd) { + background: rgb(226, 226, 226); +} +.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(even) { + background: rgb(222, 222, 222); +} +.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) { + background: rgb(194, 194, 194); +} +.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) { + background: rgb(190, 190, 190); +} +.OxThemeClassic .OxTextList .OxBar .OxSelected { + background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48)); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(160, 160, 160)), color-stop(1, rgb(128, 128, 128))); + color: rgb(0, 0, 0); +} +.OxThemeClassic .OxTextList .OxBar .OxOrder { + color: rgb(0, 0, 0); +} +.OxThemeClassic .OxTextList .OxBar .OxResize .OxCenter { + background: rgb(232, 232, 232); +} +.OxThemeClassic .OxTextList .OxBody .OxItem .OxCell { + border-right: 1px solid rgb(232, 232, 232); +} +.OxThemeClassic .OxTextList .OxItem.OxSelected .OxCell { + border-right: 1px solid rgb(216, 216, 216); +} +.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected .OxCell { + border-right: 1px solid rgb(184, 184, 184); + color: rgb(0, 0, 0); +} +.OxThemeClassic .OxTextList .OxBody .OxItem .OxLine { + background: rgb(232, 232, 232); +} + /* ================================================================================ Menus @@ -163,16 +215,21 @@ Scrollbars ================================================================================ */ -.OxThemeClassic ::-webkit-scrollbar { - width: 12px; - height: 12px; +.OxThemeClassic ::-webkit-scrollbar:horizontal { + border-top: 1px solid rgb(176, 176, 176); + border-bottom: 1px solid rgb(176, 176, 176); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192))); +} +.OxThemeClassic ::-webkit-scrollbar:vertical { border-left: 1px solid rgb(176, 176, 176); border-right: 1px solid rgb(176, 176, 176); background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192))); } -.OxThemeClassic ::-webkit-scrollbar-button { - width: 12px; - height: 12px; +.OxThemeClassic ::-webkit-scrollbar-button:horizontal:decrement { + background: url(../png/ox.ui.classic/scrollbarHorizontalDecrement.png); +} +.OxThemeClassic ::-webkit-scrollbar-button:horizontal:increment { + background: url(../png/ox.ui.classic/scrollbarHorizontalIncrement.png); } .OxThemeClassic ::-webkit-scrollbar-button:vertical:decrement { background: url(../png/ox.ui.classic/scrollbarVerticalDecrement.png); @@ -180,26 +237,30 @@ Scrollbars .OxThemeClassic ::-webkit-scrollbar-button:vertical:increment { background: url(../png/ox.ui.classic/scrollbarVerticalIncrement.png); } -.OxThemeClassic ::-webkit-scrollbar-thumb:vertical { +.OxThemeClassic ::-webkit-scrollbar-corner { + border-right: 1px solid rgb(176, 176, 176); + border-bottom: 1px solid rgb(176, 176, 176); + background: -webkit-gradient(linear, left top, right bottom, from(rgb(224, 224, 224)), to(rgb(160, 160, 160))); +} +.OxThemeClassic ::-webkit-scrollbar-thumb { border: 1px solid rgb(176, 176, 176); +} +.OxThemeClassic ::-webkit-scrollbar-thumb:horizontal { + background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192))); +} +.OxThemeClassic ::-webkit-scrollbar-thumb:vertical { background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192))); - -webkit-border-radius: 6px; +} +.OxThemeClassic ::-webkit-scrollbar-track { + border: 1px solid rgb(176, 176, 176); +} +.OxThemeClassic ::-webkit-scrollbar-track:horizontal { + background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255))); } .OxThemeClassic ::-webkit-scrollbar-track:vertical { - border: 1px solid rgb(176, 176, 176); - background-image: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(255, 255, 255))); - -webkit-border-radius: 6px; + background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(255, 255, 255))); } .OxThemeClassic ::-webkit-scrollbar:active, -.OxThemeClassic ::-webkit-scrollbar-thumb:vertical:active { - background: rgb(192, 192, 192); -} -body { - scrollbar-face-color: #808080; /*/ obviously change this to whatever you want /*/ - scrollbar-arrow-color: #FFFFFF; - scrollbar-highlight-color: #FFFBF0; - scrollbar-3dlight-color: #808080; - scrollbar-shadow-color: #FFFBF0; - scrollbar-darkshadow-color: #808080; - scrollbar-track-color: #CCCCCC; +.OxThemeClassic ::-webkit-scrollbar-thumb:active { + background: rgb(64, 64, 64); } \ No newline at end of file diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 2d41ae1..8e96ee7 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -138,6 +138,16 @@ Dialog cursor: se-resize; } +/* +================================================================================ +Drag & Drop +================================================================================ +*/ + +.OxDrag { + cursor: move; +} + /* ================================================================================ Forms @@ -878,10 +888,23 @@ Requests /* ================================================================================ -Drag & Drop +Scrollbars ================================================================================ */ -.OxDrag { - cursor: move; -} \ No newline at end of file +::-webkit-scrollbar { + width: 12px; + height: 12px; +} +::-webkit-scrollbar-button { + width: 12px; + height: 12px; +} +::-webkit-scrollbar-thumb { + -webkit-border-radius: 6px; +} +::-webkit-scrollbar-track { + -webkit-border-radius: 6px; +} + + diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index 9f03cf4..e3a5598 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -185,10 +185,6 @@ Scrollbars ================================================================================ */ -.OxThemeModern ::-webkit-scrollbar { - width: 12px; - height: 12px; -} .OxThemeModern ::-webkit-scrollbar:horizontal { border-top: 1px solid rgb(48, 48, 48); border-bottom: 1px solid rgb(48, 48, 48); @@ -199,10 +195,6 @@ Scrollbars border-right: 1px solid rgb(48, 48, 48); background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64))); } -.OxThemeModern ::-webkit-scrollbar-button { - width: 12px; - height: 12px; -} .OxThemeModern ::-webkit-scrollbar-button:horizontal:decrement { background: url(../png/ox.ui.modern/scrollbarHorizontalDecrement.png); } @@ -222,7 +214,6 @@ Scrollbars } .OxThemeModern ::-webkit-scrollbar-thumb { border: 1px solid rgb(48, 48, 48); - -webkit-border-radius: 6px; } .OxThemeModern ::-webkit-scrollbar-thumb:horizontal { background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64))); @@ -232,7 +223,6 @@ Scrollbars } .OxThemeModern ::-webkit-scrollbar-track { border: 1px solid rgb(32, 32, 32); - -webkit-border-radius: 6px; } .OxThemeModern ::-webkit-scrollbar-track:horizontal { background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32))); diff --git a/build/js/ox.js b/build/js/ox.js index 28a56c9..b3ae187 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -1498,7 +1498,93 @@ Ox.trim = function(str) { // is in jQuery "foo" */ return str.replace(/^\s+|\s+$/g, ""); -} +}; + +Ox.truncate = function(str, len, pad, pos) { + /* + >>> Ox.truncate("anticonstitutionellement", 16, "...", "center") + anticon...lement + */ + var pad = pad || {}, + pos = pos || "right", + strlen = str.length, + padlen = pad.length, + left, right; + if (strlen > len) { + if (pos == "left") { + str = pad + str.substr(padlen + strlen - len); + } else if (pos == "center") { + left = Math.ceil((len - padlen) / 2); + right = Math.floor((len - padlen) / 2); + str = str.substr(0, left) + pad + str.substr(-right); + } else if (pos == "right") { + str = str.substr(0, len - padlen) + pad; + } + } + return str; +}; + +Ox.wordwrap = function(str, len, sep, bal, spa) { + /* + >>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 25, "
"") + Anticonstitutionellement,
Paris s'eveille + >>> Ox.wordwrap("Anticonstitutionellement, Paris s'eveille", 16, "
") + Anticonstitution
ellement, Paris
s'eveille + >>> Ox.wordwrap("These are short words", 16, "
", true) + These are
short words + */ + var len = len || 80, + sep = sep || "
", + bal = bal || false, + spa = spa || true, + words = str.split(" "), + lines; + if (bal) { + // balance lines: test if same number of lines + // can be achieved with a shorter line length + lines = Ox.wordwrap(str, len, sep, false).split(sep); + if (lines.length > 1) { + // test shorter line, unless + // that means cutting a word + var max = Ox.max($.map(words, function(word) { + return word.length; + })); + while (len > max) { + len--; + if (Ox.wordwrap(str, len, sep, false).split(sep).length > lines.length) { + len++; + break; + } + } + } + } + lines = [""]; + $.each(words, function(i, word) { + if ((lines[lines.length - 1] + word + " ").length <= len + 1) { + // word fits in current line + lines[lines.length - 1] += word + " "; + } else { + if (word.length <= len) { + // word fits in next line + lines.push(word + " "); + } else { + // word is longer than line + var chr = len - lines[lines.length - 1].length; + lines[lines.length - 1] += word.substr(0, chr); + for (var pos = chr; pos < word.length; pos += len) { + lines.push(word.substr(pos, len)); + } + lines[lines.length - 1] += " "; + } + } + }); + if (!spa) { + lines = $.map(lines, function(line) { + return Ox.trim(line); + }); + } + return Ox.trim(lines.join(sep)); +}; /* ================================================================================ diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 193a47b..47bfec2 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -2321,8 +2321,8 @@ requires }) .options(options) .addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size)); - self.buttonId = self.options.id + "_button" - self.groupId = self.options.id + "_group" + self.buttonId = self.options.id + "_button"; + self.groupId = self.options.id; // + "_group" self.menuId = self.options.id + "_menu", $.each(self.options.items, function(i, item) { @@ -2398,6 +2398,177 @@ requires ============================================================================ */ + Ox.IconList = function(options, self) { + + var self = self || {}, + that = new Ox.Element({}, self) + .defaults({ + id: "", + item: function() {}, + keys: [], + orientation: "both", + request: function() {}, + size: 128, + sort: [], + }) + .options(options || {}); + + $.extend(self, { + itemHeight: self.options.size * 1.5, + itemWidth: self.options.size + }); + + that.$element = new Ox.List({ + construct: constructItem, + itemHeight: self.itemHeight, + itemWidth: self.itemWidth, + keys: $, + orientation: "both", + request: function() {}, + rowLength: 1, + size: 128, + type: "icon", + }, self) + .click(click) + .dblclick(dblclick) + .scroll(scroll); + + function click() { + + } + + function constructItem(data) { + var data = self.options.item(data, self.options.sort); + return new Ox.IconItem($.extend(data, { + size: self.options.size + })); + } + + function dblclick() { + + } + + function scroll() { + + } + + return that; + + }; + + Ox.IconItem = function(options, self) { + + var self = self || {} + that = new Ox.Element({}, self) + .defaults({ + height: 0, + id: "", + info: "", + size: 128, + title: "", + width: 0, + url: "" + }) + .options(options || {}); + + $.extend(self, { + height: self.options.size * 1.5, + url: oxui.path + "/png/ox.ui." + Ox.theme() + "/icon.png", + width: self.options.size + 4 + }); + + that.css({ + width: self.width + "px", + height: self.height + "px" + }); + that.$icon = $("
") + .addClass("OxIcon") + .css({ + top: self.options.size == 64 ? -70 : -128, + width: self.options.size + "px", + height: self.options.size + "px" + }); + that.$iconImage = $("") + .attr({ + src: self.url + }) + .css({ + width: iconWidth + "px", + height: iconHeight + "px" + }) + .mouseenter(mouseenter) + .mouseleave(mouseleave) + .one("load", function() { + that.$iconImage.attr({ + src: self.options.url + }); + }); + that.$textBox = $("
") + .addClass("OxText") + .css({ + top: (self.options.size / 2 + 2) + "px", + width: self.width + "px", + height: (self.options.size == 64 ? 38 : 58) + "px" + }) + that.$text = $("
") + .html(self.options.title + "
" + self.options.info + "") + .mouseenter(mouseenter) + .mouseleave(mouseleave) + that.$reflection = $("
") + .addClass("OxReflection") + .css({ + top: (self.options.size + 2) + "px", + width: self.options.size + "px", + height: (self.options.size / 2) + "px" + }); + that.$reflectionImage = $("") + .addClass("OxReflection") + .attr({ + src: self.url + }) + .css({ + width: self.options.width + "px", + height: self.options.height + "px" + }) + .one("load", function() { + that.$reflectionImage.attr({ + src: self.options.url + }); + }); + that.$gradient = $("
") + .addClass("OxGradient") + .css({ + top: (-self.options.size - 2) + "px" + }); + + that.append( + that.$reflection.append( + that.$reflectionImage + ).append( + that.$gradientImage + ) + ).append( + that.$textBox.append( + that.$text + ) + ).append( + that.$icon.append( + that.$iconImage + ) + ); + + function mouseenter() { + that.addClass("OxHover"); + } + + function mouseleave() { + that.removeClass("OxHover"); + } + + return that; + + }; + Ox.List = function(options, self) { var self = self || {}, @@ -2925,6 +3096,7 @@ requires }); that.$element = self.options.construct(self.options.data) + .addClass("OxItem") .attr({ id: self.options.id }) @@ -3114,7 +3286,6 @@ requires function constructItem(data) { var $item = $("
") - .addClass("OxItem") .css({ width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + "px" }); @@ -3139,6 +3310,9 @@ requires positions = $.map(self.visibleColumns, function(v, i) { return self.columnPositions[i] - self.columnPositions[startPos] }); + $(".OxColumn" + Ox.toTitleCase(id)).css({ + opacity: 0.1 + }); that.$titles[startPos].addClass("OxDrag").css({ // fixme: why does the class not work? cursor: "move" }); @@ -3176,6 +3350,9 @@ requires self.visibleColumns.splice(stopPos, 0, column); self.columnWidths.splice(stopPos, 0, width); Ox.print("s.vC", self.visibleColumns) + $(".OxColumn" + Ox.toTitleCase(id)).css({ + opacity: 1 + }); that.$titles[stopPos].removeClass("OxDrag").css({ cursor: "pointer" }); @@ -4329,7 +4506,7 @@ requires }) .options(options || {}) .attr({ - src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png" + src: oxui.path + "/png/ox.ui." + Ox.theme() + "/loading.png" // fixme: oxui.themePath needed? }) .addClass( "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size) diff --git a/build/png/ox.ui.classic/scrollbarHorizontalDecrement.png b/build/png/ox.ui.classic/scrollbarHorizontalDecrement.png new file mode 100644 index 0000000000000000000000000000000000000000..3dfec1cb79bdbc1ab651de79eb55fe18f61a2ee9 GIT binary patch literal 2883 zcmV-J3%vA+P)KLZ*U+IBfRsybQWXdwQbLP>6pAqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uhf59&ghTmgWD0l;*T zI709Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-rV&neh&#Q1i z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_IfqH8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4 zfg=2N-7=cNnjjOr{yriy6mMFgG#l znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U zt5vFIcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya? z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0 z?2xS?_ve_-kiKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$ z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4 z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i& z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01 z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3| zawq-H%e&ckC+@AhPrP6BKT#_XdT7&;F71j}Joy zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F} z0001PNklM;P)KLZ*U+IBfRsybQWXdwQbLP>6pAqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uhf59&ghTmgWD0l;*T zI709Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-rV&neh&#Q1i z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_IfqH8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4 zfg=2N-7=cNnjjOr{yriy6mMFgG#l znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U zt5vFIcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya? z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0 z?2xS?_ve_-kiKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$ z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4 z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i& z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01 z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3| zawq-H%e&ckC+@AhPrP6BKT#_XdT7&;F71j}Joy zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F} z0001NNkl|=}{FSNMgfezuVQWhe|@7%?G#6U?~3 fhb{^KSKK}Thi?}e%eNob00000NkvXXu0mjf<}_7U literal 0 HcmV?d00001 diff --git a/demos/test/list.js b/demos/test/list.js index c7afdcd..b586150 100644 --- a/demos/test/list.js +++ b/demos/test/list.js @@ -198,6 +198,34 @@ $(function() { ] }), + $iconList = new Ox.IconList({ + id: "list", + item: function(data, sort) { + return { + height: data["posterHeight"], + id: data["id"], + info: data[$.inArray(sort[0].key, ["title", "director"]) > -1 ? "year" : sort[0].key], + title: data["title"] + " (" + data["director"] + ")", + url: data["posterURL"], + width: data["posterWidth"] + }; + }, + keys: ["director", "id", "posterHeight", "posterWidth", "posterURL", "title"], + request: function(options) { + app.request("find", $.extend(options, { + query: constructQuery() + }), options.callback); + }, + size: 128, + sort: [ + { + key: "director", + operator: "+" + } + ], + unique: "id" + }), + $toolBar = Ox.Bar({ size: 24 }), @@ -231,23 +259,23 @@ $(function() { title: "View with Timelines" }, { - id: "timelines", + id: "maps", title: "View with Maps" }, { - id: "timelines", + id: "calendars", title: "View with Calendars" }, { - id: "timelines", + id: "clip", title: "View as Clips" }, { - id: "timelines", + id: "map", title: "View on Map" }, { - id: "timelines", + id: "calendar", title: "View on Calendar" }, ] @@ -441,6 +469,12 @@ $(function() { $loadingIcon.stop(); }); + Ox.Event.bind(null, "change_viewSelect", function(event, data) { + if (data.id == "icons") { + $list.replaceWith($iconList); + } + }); + Ox.Event.bind(null, "submit_find", function(event, data) { findCondition = { key: data.key == "all" ? "" : data.key, @@ -503,7 +537,6 @@ $(function() { }); Ox.Event.bind(null, "load_list", function(event, data) { - Ox.print("data", data) var html = [ data.items + " movie" + (data.items != 1 ? "s" : ""), Ox.formatDuration(data.runtime, "long"),