From 02f53a57c11371b446c13f7a632f8cde0f3e6f4a Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Thu, 22 Dec 2011 15:47:46 +0000 Subject: [PATCH] use new form element syntax, continued --- demos/form2/js/form.js | 15 +++-- demos/form2/png/timeline.png | Bin 0 -> 17305 bytes source/Ox.UI/css/Ox.UI.css | 33 +++++----- source/Ox.UI/js/Form/Ox.Button.js | 32 ++++----- source/Ox.UI/js/Form/Ox.Checkbox.js | 5 -- source/Ox.UI/js/Form/Ox.Form.js | 2 +- source/Ox.UI/js/Form/Ox.OptionGroup.js | 2 +- source/Ox.UI/js/Form/Ox.Select.js | 7 +- source/Ox.UI/js/Menu/Ox.Menu.js | 2 +- source/Ox.UI/js/Panel/Ox.CollapsePanel.js | 66 ++++++++++--------- source/Ox.UI/js/Panel/Ox.TabPanel.js | 3 +- source/Ox.UI/js/Video/Ox.VideoEditor.js | 5 ++ source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js | 7 +- source/Ox.UI/themes/classic/css/classic.css | 7 +- source/Ox.UI/themes/modern/css/modern.css | 9 ++- 15 files changed, 107 insertions(+), 88 deletions(-) create mode 100644 demos/form2/png/timeline.png diff --git a/demos/form2/js/form.js b/demos/form2/js/form.js index 807929c7..25376516 100644 --- a/demos/form2/js/form.js +++ b/demos/form2/js/form.js @@ -811,23 +811,23 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() { options: { id: 'debug', inputs: [ - new Ox.Checkbox({ + Ox.Checkbox({ id: 'tttt', width: 16 }), - new Ox.FormElementGroup({ + Ox.FormElementGroup({ elements: [ - new Ox.Input({ + Ox.Input({ //overlap: "right", width: 64 }), - new Ox.Select({ + Ox.Select({ items: [ {id: "items", title: "items"}, - //{}, + {}, {id: "hours", title: "hours"}, {id: "days", title: "days"}, - //{}, + {}, {id: "GB", title: "GB"}, ], overlap: "left", @@ -837,11 +837,12 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() { float: "right", width: 128 }), - new Ox.Select({ + Ox.Select({ items: [ {id: "title", title: "Title"}, {id: "director", title: "Director"}, ], + value: 'title', width: 128 }) ], diff --git a/demos/form2/png/timeline.png b/demos/form2/png/timeline.png new file mode 100644 index 0000000000000000000000000000000000000000..d8813cc111ccbf76bfdfdd994072006856b08c35 GIT binary patch literal 17305 zcmX7vbyO7Z|MrIv7erW)Sd?5sKvHrAq!vGPEZr#`(%rR$bS^0p(%mUYr_znoiYu&$ zfb_%j{mq;+Xa1aX=AQR`UDxZH70UD!k-RRj^^B$zi)Oc#qMQTxb@299KQh^;QF`bJqXJ z{DXS&Tn?2v8E;i^NUYz7Fvk9t!tGcma>GO66~UXrdBxOHyV(g3wy6o1piL~yWP*j_ z3m$g7T@?MhXWBRa;rGOWCS|zeJ`xGifbdH%1{zNghbRsza=H>bvjl+G$SY?e)^q5nntI zY8VKF6oVdcS^#>!u9y^rrI}rpA5=P)k(i1qGa=YZ86*vll=(jMK{g+osaW#Sg`S(j zO--UX4$|TG@+KT(JbZC*ofu`F_F`N>fVw#COYwo7;8{|y23gdTJ4U0_z=nnij=~S zPdBK6nShya`O7rv2*>$UPRc45+1PsVfc2Thssl=d&RDu%HAx%pPYLtqMN!RH_EIT5XPXkgU1DBsaXFUQeDrbKjgCyitff+R79XnP z@IH!~5%*&i*Lr?_k7x_l*FpxqcuKqI#FHEsgfXVc2p%ZLI=}~=DlhJjS7k@pEn*Td(fR0KH&;F1 z@;X7*b6L|Y2VWB1HL48qfM6P)VzEPZHv6I>E_Fdod=@r@YelE`j}N^;$GuN7?B2Mh z$v5paEGw2+K>Wb?H5gA%FB0@0qOItQX9MlD0!{~$L7u0IGOcfj@LcjQOP?>-`wxT< z_T{ws9TX%wUuX*7-5$g^s5W;s35tk3FVRwb@91Cj-B**k6o)ZSwfE*oOv(F5RCQ;m ze#dh9wIyml6z?Hmw)o@6?adY5ruS1-o&q(t)IGO7Q{EoEY8~$*S{epP{ptl0hS%Q~ z7S4vA)dv6jKCG#!S*}GymX6qYvQwrOxH|U|YVGG=lB7YwBvbCu`h520=l5`%Y30B_ zU(4v|=d~h<`N=4Pt*%`Pg!mYV@x;N%lwap0XXT%3M zSc|})Iy4FRL0^kvrDAXaDUSKnsj5TMO08mrNq6J%Cg(L2Zw3}RHdxeH@uS*MxU93& zXz@j6=GC8e#IgqdsMQt9(b@Lh?;l@Vi`eah%snm{Z^H3!Efk`7;>sM9GBKqkk6k8AZc26q zuRYYJlNWE9)pNxpPj1d_xW=K@*22Wy-QAOdo`6&YBXYa#t&r+E>po?oONWGAl|d{V zXQucS-X@hFEZ5 zuFk{IDxh^H8LgKg7GA2Ov4oGd^iGqQDvnBJsOgU>myeu}CaRdUJT+q}8zDPFoC5wn zK9J#KA8`~-<0pF_f)hJbsV}bCzVgQW)b>04y_y(CHUq7u*f4B0WM}4lFqYDAI8sOn z6PHcdSayq#ADKk$Wo`HcBR@Dp?C%~DDW$C~#G>)fZO3T9)H(c|FSs7dIwYG1X{8*HeE6AFRxDk+kD z;S3?7ZO_8Pf9d@^ICqN4Rx>i^L!P@T>=B1RBi~xBsCx(@Nt;+Gk7BFFJD&Z_UA%Wy zR9UtrL?F(mmPRq8A?Xd9Skmas;5%RH?L}^`F>PWlDy@Yxj+VpTY~S*VK4ody_|M;= zMHQZ!*z>CsAA+yWy_pcXy?1TN5NUcDNYsaKTh7rrHY(b8$KN-pr(H-zrf)C*mM8H* zB{wz_&dV@zLC-Ez$FQsI`3Oah$&-LCN&3WL^B;>zZYCLT?N->nh~_=l&O_Vb(K}7g z9?W^tg{-a)V03Hcw6!IJZ}IQKbf7;wOyEPuuB$dxA2R1-R0(~jVpJl0f zF*sfzBUFdvBOQ2mzRy!qTmfw$FR!SuU-T@S<(RZv&(8iHmoCVw8m~A?yex$eMQO%J z2jA??r?6=UisoH*1fHA~90c5Q@_Bn9G9VSDq9RU@QhG3}E!yeN;qM3ST*bww>c1vL zW-IaRv$OF0R1;rBB%t{x?eN+xQA!#j11YU!zs)B)8S*3j+S_4O-{`}JIHNfG14
L?<#- z>s4(B-|MEkyMQeH1X?+8l;vni%hAuH<#a$D=o&?nYiFa^Rx83;&2a9 zTB?H6+A=!>^qQNLqfcvR#p+Wju(UK8g$9@cK%qpsCl#o&V#9>+8G*tP!ki+S2il&} zL`2Z72dqBdC;Evg<)G|*B+JFAX%-;~=-*XtzP+2n5Y1Qs^t!2yZs9dq5ASN8xa#DpiG#M8da!PB#f^BeH2J0 z%JPmxrrj(g`|5BC;x79Bo%o#+5w-48wRa~*w*;<^P-oF%O;?tOMGoKmCuIg@n?fi~ z0bqe#yg_-U&lKcP^6j*wNG%~kW`Fh5jfg6c*$5YBv%PL*&BHcE)eF6J3PN*PdSVS4KZjg%gwvSOi*pMd)Fl}B+= zEYd?k-!}HEzAW{u_gAS0fHoAh|Ksps-2%+UCtJsF4eL^a-RQabIlUQdC~_t+Lnigv za8*c~N@!xdwltUc1fe)UEAxqScw*?Or4z???xBdpvyDTq9X`hIM?c5JrqeqkpJ_%s z<}N}$Xc(EFpX{jF6vnt5IiI0r4QuZp51m(5RnC9k-e{g&2Z}0x55py+8Fua6EKoz+ zA&lr%i!7(e7*sn%n!avLkiHCKh9DG1KJ$b%YAmv{vZ zTt@N=++tk0@2O~Z{)94V?X1ZY7t=SUw$-N_nULVif9Qqkfpp>Z4!9=^XTa4f@jGJucL? zWJq^{w+3gSLwoVTvm`K(^ws&Pum!g}B>=>%)bQ#dWoLz_t_DANVVci_>~!HQ?3^^2 zOZcHn+&ZeeMYU>gU%*s`-w}#~jpw0c5^o+QUQd?^=aEqbs{3sX_|_ub59Os5JeMzNYsX?M2Ws{MpN5NW#3z(?k*<3S3mYN z8i&3HcwIJ3bK~H!GoAr@egmZr4k4yeIFuS6C^+PRz6((a{o*;N)||^*I&zx*uO9ok zPm(9CKk6qHf}Y+Rx}LVtu>+5O)Utz z@?91j`0s?(6Ss-W#vML-hG7+elqb3qKi!1fJ=Wk%65@XcT zkKVU~J8n}U>W6e^VoS-0j{C$l?5r ztEE|vX=-d#Nx!?ZNpZ~68vABzEy$8{10>05?tDq#aGjlZ#QoBK9>fqal;uim8DH|N zS*$iUt|IJ{9wwkrD;YcjvE^TyO+DWL!_X)?tLkT$w=FLu>7&ez7rjbruw@78?cdfz z)X6A)s9h?)z4}CYWd2LUGKZR_Xe!&69q22mD$}K`uIfy{cfx!2)i#_E4%XSzNwng^ zed-d3&W6>*E!?RWH+#Lubi4t!j20FJXjWdYxy9R=pih)-iAx3qoBka6kGtW+lPSW2 zgMvcu42PC#9>HznM>z%|kCQ(|@ci4-9BVdNXe&)S%2SsA{H&>`B-Su_&qF^$pfMtL zqdl!9OT@;QtC64Oh!M{Erp7f!q=p#q)Sul$ohpGid>}>k`RQyD z4J9|sh8Ry6UYRaSU23=TO_<~(k`{C9BRZEx$rw>HgpAh~DzzGcp?|g*yZcH@K3zjx zUIh>mL*tJm9PxkI*c{Tqch7whSIJoi&>}=tV>bd)~H-7x? z-%YEe;^@5^@XSY}U8XC>nqNx>`v(SgV-tZX1Iub5um6@bKd+^su=e`pD?9eB_P?2h9*yNY=7{fzsK=6OHQmU$-q@f#-#!s~K94XwU#z zeI4|JNYp3ej`T5C{Zc#7Yoz;UeXQ~Cnz3$q3cw;Bv+ZthXH$-~WC4Rt5)dtHR(7JVp>AcIRVi&s`&H>YJ&h40&XmSF0qun8NtO zEwd1b9t`Q5A9>SRvLL32Gz8V+*BB&?97(tsqpr@q`=_AP^!M}ovw_Za;Aqy?W-i_6 ztnkBx|9-2LL% z?rAS~P6c=)s+d{EBg#=;>Q~d8j@*0X%mdjlu-1Q?p@1d2UcuwxEBDqqD^Kyqz`3IX+m9Imy@utXFZ4_Lv(Utg|^qiI2tINrdV-VIF z2ZN3oA+!HwR4=*Mwio9bxI7bh_9J9fykUP*nY$d;vQp*EjCcbq8sfoUjDC~(yRmdZ zJnp@!AON5~K!QNd?}>@8Ko@^r=X?0-FV%ZIX7cgQS?_)H-@sOxt4v+>*+v?Yu-yx7t=dL4-7dn z1YoUmXDv0P=1)USr_rONUgvWl-f_2^%HI7BXPEbz^yu(>p9_D-TjN~!VYUCrI9Q|W z@O*8n^QO^!1e%n|67;wt3DHySOc98&lau@Oeq&>UC-aeji?4rB&~4&rr2Irvr|^}x zNTe(+4r9Vji<4mudK?P9JDK3R7x-5Dxeu|q=ivz6sE%+gYl~>-wgu~0s~=f*zl(^> zs#`ZY&hziCxfy*KNS-i3ph#Ott~ZYlFSKlyuy4t=^3dZ|^M)LJb5s#iJtw1F)IU)w ztTHP;y?RPpM$?3&PNpfu<`oY_Aw3-=dx9irZ7>EcxwYC6*FJwy=ktG5^X<-U_Xm`b zmhr#D$%i4s;9PeGtnD|$(P}GMM^=GkWU@k~r;~9f(3jcUE9%v}FgzR$VGgooB+>#u zPze27x-{wT2=1TT_nm@0(J)xt3plDiT8%>@43@vsSF6vbEp)L0pH36)H&3Dp5{Kzf z_L)sp#+UTuUE25-)vU&|9ck8bB^j)mO22mi|ebH-Cv?|1#sHQrR`5GF&kdIi z?;K|#F8|G%FGWI9D-5vFOkBD-N-a}R%Q)dQgaNhVSf6(b5mS>)@Ni9ZjsFT(WIko~ z?Q2ss%*SRF_GPNDBCL6g5^ytWc{`RZTUP033wRk-Nsx3~9q z_{q~bJC5Ky-a<3(a+xX6^VV++~`2KMG@=Dq?6h(Tv zgmL-ktg!0Dh^x7v(g)P_TZZI&{IFWNnUTyqv>!F8UG&X2WRAEqI<4bDx3&f&Hd<&k z74yZDm3;9cjJ_TA39(eu*b{_&#h^(cPx5sy?!C&_!k||{Kf>n`f>&FQajk@0{ha>z z&c0COSZxt}ZOhfnMGeRaatxkaL?GcqNKhNZQ)HPzwKEU z?N@(PRbr^LCt=MfD8Pga6SDr%pRw&+oCrEQn`v>Ho}Mnrc&oqQnTPf@ zUX=YYvSMdE1TNfVb#}=dS5-F_QAwpsjCP&wI|=aBr1l2b3Hl-P zRtJO;h)&=<5FPkKhPrhmy|V^$IhEqMQD&Rl*o-VX$ivYFK60iH7Lpb9_KIH_x2|G$ z#IXTVY2X0P)9xDvOOFgB=u~)~MlgiE2-DGB8_)bJd=>lZSwLL`GGpcwe?^AlxIL3a z90t6+AGjvKu@&|}16}>WFtDp}125clfnOv&@5Q1)`}bNhSV3v7rC}7ZX0b%yv3cP< z_yO|W4ET~>3q_3t5lF%9t3?Wk)%CWi)XGwk6DK8yj@8=Q@V14q{yW_NKO2m4#+_;Z zBbHO3>a6Ind6QDYQs;#pN;H#QPXny29p!OrbKyga-jZSM{7r!n z?V{a7S1j`L?zYGJ)xW)WOJ)5L+7*gq!|LQYd{CKF)Lfr@8dBR|Ib!psIXm6JO?A8h zU_`y*AVRW*NSS5XVAV@^%BJrc+#}jvr;le&*QGj%of5dL2TZ1Lyq z#rHpZqX+uKYo4F`EQkXcu0GtIPOef;1m6T2SBSHu5TG&had9U`74lAxgq~E3$JxJF z*VbLD&8}jI0?Q~KTwjY1={cNkOrNYJ4OXnc7SF>|`*-(qKa%d#l3jpBFqDRQ?g{(} zuyyW6vOMRheY?wl$2$WqvY-CKAz;#I%XrtuW#k-!e!?Q2Y{G3U5BrqspxdPbS}{Ce z{&d)twm{;=jw>9>qNR;SW*4~mPFx?Yi(v!f$$*yD*3Qn_MUmB;8+u@cWj&}}A<(7t zdRJJN+0`Pxox&?2+nu9xead^?RZ*o*jw|z}>UfYp8tl4+k1pHcFZo99LU#PR=|4$d zR&-|#QaIx?eI$}Lu>HawQch7-BS#Oz&Ut!F5 zj1d#-2g~*)GXZ7yBo{F@RbPQBKc^>bx73vF&wW`4^MYRfZClL{|2yE?lxSDvm74xb`;9tMu6wxO)te?(>48sps%|vum%sncAxZEi%xWHV$1Bt zV49AFc1&#e>R(t&LtyBfoO|s)QPa8#*`Yy_^8-cpGs@apr&rhC&pgCmUs<5O?Plw& zV&rA|_A_g67s$$7x~1wox8%YK98wdB(q7gB!jKy>cI#+_q)_Js9Z_bK1T<-Y^!YU_Jf zH{;i*-}f$jv3bwX*Osleg`$)KPW-JPX*7tOc=lj7=jfiL_Z+O9IMLqO8AtN=g~KPQ znOHOzl#4)81fTh!54S?lry7y7?9Ja=AW?%BI3VLivafQW)t2s#4n_A@vm-Dp$_m5)q|h6wFD9&pM85a#9F51T{*$CUERvPskfUTSS14cZyx%B){;m1;*iLnL zmILY}V{1v9yD8{g@B>?R!!_7gleAbbnRG((LNtH&R|pZXnEe6@IU9NJZoRp(q<}JUpC>h73#|9!8r=X03=Oj1Pu^&@kfwF9~O? zWLF~7KZsV-)%C^k_wR|((JogKKw2)&R&7q_;m-u1nFk$|hMNAMR zcI4(p0{A3asrWKawA8K<8R~jWu21zSUxm(!4rf1VkNFLtQEK_D1VmpMx&T+^{YHQ_J9X z{Fc&DLyl&Hb+N>=c!|D!@IP=t?)9A^a2K*>fnWDL`d5{A zOPPPiDWe=!rJEVnEXnABA_YsV>HK+;K;v+*6X%%q%QgaogCm z!r!DT;e@1V^US?~hE?F;EED1V7 z&S_lq%f&O2FywtPD@{|C5NOQMBqCbkHAj^(mRE`T#7E2;H9V97Jaz+AVSBjcTz59B zm5+|j&d$mTZrxrN#4Kywog5J2EClu*E%JZqyt-;}LjF+UzyY-N5QI!|t!*RVZDlz+ z>cO?&-^`rlBT{8q*tYFk+`JuWERYCnrAH^z(AlYb?^sAax{ zI{o2$=#n0~7OwI z2Lw!;=Er5EAw;U9&3{k9&Tl$Ef{C*Sw_TJqOO5&d?CfQ- zW3NtMA0NHuLslK>84nT)RJu(tq3w~gOVBN5v&OmCe;FHmam5>DU-9MWa{uQfSL5oT z4kmq`xO3&;l)};|gEivkr&=mLF1e-Sb5e%MwCrV}-n%no3J%X$jka5DnmHueTx;GH zLOM*XJzoSR-*3n00KZNDPlgzc{(r3TVCLB2st5u-lem4Fj-Lfpp8G0!UxlWOrKs{VARJ%F$&p0MZic*iG{Uv8 z;!1npji_CG-q}z1R7fqWUE8xz{+@wukQMQrJHZ6sYV)o&_eIT!X@&5dn-MtF35O80 zXH1`5AHVx?(}K@XEI~_h3?7|{!M~)wOhnf5@C-%~3|->LHPkx)GD)o&9ljr23t2dV z``3$Q(}FdV&fcEl`zr~y4zr&iU9JmYCbBuBSF8?s7X_*NnBU0bv$Jqe>re@WvvQOd zDQQLDL@Rcad0SA0jy0%j)ba5Hmuev*^+<1(#On01&Qi`c%caaATXzG!zdoXuV|J~Q zYm)ztyUy1RU4wcD5f2D~B>i3%d0bE*k-96?*Q(^q$a;$J1n=b!c`91SGcO z*Ck3B?!H2z49F^_juDTuC(5Kp*3?G<56d767^lvHY^v4^GW`$P+H>%Q!(%;HEp35_ zby~s?s|pXSf|s1I*fMP?1~-$}L0u}W62U?I3G`{<-p~dEwVcT}aFd<@U$3Ab_Y*3h zXX51Qkg7WRG~50V(V9$bxtLuUcIJ1eI=s=y!U`ughYa)Uvdw&k{bvR2H_@JT=4OQa zUXMc$2r@mb;ztwN%C(UeFx2qAo;(QZeW)!vN2r94Ys-XxIo6(^(YT=}hYto3wrevz z@a4n>d?NahfHrHHk&@65xrU`qY;Bs-vpq8j6j)mi9NYO#CY9cL ze*U)Ex#}KZ+brtlOz!XRmu61>9DF-P^Lp(pN0d0cv1MV1t2&U*ERW6f+xB&~K*or; zoXH%5aN=NZBG-#jPGlGF`$3t>^7rcI=F?Mjic?U$ceVM&W z{A5LC{`m}Yhxr>v^tdQ0{ybcO?1b~;=+<%{M{$t7 zwI*ZQ2TMFzuCT{p1IYNGPXqwSN1YdwTwWgp6qL1Usc*ncQn4G;c{R$45uieOmar&` zI&@f`B@+n%P!#3((|PJp(y*n#NWUD*9TW_wms+=HNTt=Oxq8fsH|_XLq`!BqT3oP= zBzpgqOHTb@kL{n+Qyj*jA8S?3Zd0em)6k(Gc5XuuDM%R^j(6ue<_$ZPzf>mKu3C_g zQFOD6LSR(f8zf2Q7HxBa+e?pxneOexYYmWv+%&n$T|wHg0TC4PSP@d2dA#PQ)Uis^=dZ5z?OkcJb3pZk_ z|Avo`OhC8gjQ?-VlTO@>AiIvzQLpq3W7@=FJ?*=f#e4;-WdVVDhGLJ`zp4=3qSY^3 z9`kblR`v)E-V~htb?w|Mt98u!ngD$N68jBAREkgC6l&j@DIR=3mVU9`a%kO2xxaih zrn4g&0gg8JG5im@9n@-Cy?F8~y}zQtDHY3*PoMZ45PdE2en1`;KD4du(@8c2f&H@( zGpWhQ)YZLOui0=!SqDwYG@SkUvz05^+ks%Wxw^dkx$W~xWwscsAHi;FY}`9K3|9(k3?d3c1QL~=c5JcFbp}%=QS(H-dvQn57yWE z{Mz)tDOu7BGu@HG&t{6tJQ*V_=@q(cQvyKzj{0_KPvBLjodNXEASJ=}x2$aGk}Ny` zJbV0aNs#-8{g3F}RKzRIDcIWjMt43)^6t1~UnMBYxy}xiQy?;wm79tTxcy_-xSXc{ zD){{Mo9F#$>9{M-4&dzdECl%bYNuf&M6+Qb=;ovnS)AqU;!KqACQbG?JO+7-_dmX3 zwCqeP0{#^~JYnnIY_Qruyh`{>5|k8ueP_xt68@Iy9n?YB;Lu1MmG>~gN^IoB3=}5d z*icdVb5)uhI$fH(*HFdzfU5riVHVge9NBh&z5Mwr@cn#?ZD5m}QZH~(^7K1%NHJ+zO2G6dgViWLCYyH5JKf2fGH&$BE& zi=PpE1U3pu=-&=_gL!I2@W<*I=UCQq&_`a*cCL~MA^Fj(^}Wh?su(Q8(X7wQmbVT| zZ7V<6;OKb%H^pG)oIB|V%EvCPtBDMfzs|4b?dMw#zrQmR21cS{M#NmI4?1etH0N5E zAX13=BKC>}f6QvyP}&3Ex4DCMoG7vbk2Pk78;7K&S9AP^7cGnvs+y-v=qy z$as**PnLX7`~bi**VXB>6`kKE`3G~s8vcwWJRy{0k|;H?82e9K(V>XbTxxC7%*nt1I}M~MA`L;P_z4?9A2r^)q? z#a_&BpS$@kAED_~W+ys1$Jj8YUoDu){oEzoLW-shAq+v~5!?gBA49G`AgokF(@r!N zC5E9OOkyc}{s;tp2KQ54k0UQnvteng66It!a}sG#QZOTdrr&YQ-vupU8!51;yMLf= zhXtD#nSb;bp}0&*{oqKj787~`2%Sh{ErH8N)NL}HU4>V?)SQxm^S`x(ek#pcYTfk# zxyRQtr6MXkFOGat1k2K*u09@El<*uPwA^T$pWrc&T9aN9exOfKwS)p2$jw|ApqeGy5eV@=F2oN(na4hDoT9lj@9OEf{ae19 z7JPXTxGL;9a5*?WJ(MN4%7qXLJfW3Rn%MIz;ESI~D)-bmI%1$uAbO{u5JUXTH{W>s%ADo`cfC|ua#`d~_r-8k9vQ_iZ4^KW0$~_@!tF3r(v$y`!%h>r7V?wE& zg@qI`Q`3pBwi6!vSuN26Ml2_Kh8SGYaX`fW(ivo-Wm2D1Sy0=}-5$Z+T+|8>!a77Iz zEv{3T#(tI4A`BnRm}o^$SELCS;uGMvDXbtR%}EKOi(*nC%Ud=5`r5u-w=v6?_Mx_+ z%h8iPS6V>orIN)|mECzCj^5spGyUDQ105}GL2hntK9XR5X$MD5j~V zVnE-?3|X^_GltnhEdU`YvVx{++3aP;(#~&*06xBG=dplyGc_(pjW{vH16l4=r5FsR zGSQniao^O`cGrpBZc{Fjm6phD4UtODO)u_W1hr0~<@@XSJ2Q`W7$+J_>4%wA0^8G+VQBFL z2|e7I(qonPjp6#M&2Obk?Cli2y;pA=BF=u6O1!@5>c3bxkaFFi*HKxe>mOEYb=mC6 zn|wN^C33pAx7Sm`(=%9<`@vpc3c-fY0+k{?{a|JO+dPQEy`vjrV;ns-T^}3o8~>rE zA(l)@2eGuKBoK_tg$LL{$o(ExnbePQRXzQQl6w?tdlwSD+=cRVM$JU3FNWYEi=}b& zlD#b6T;wB#bE0u?LbrqSx`@~xCLNAVTy2PE#^B>8af92x|Bt13_9UQdZh6dhZXHR<(!0Us>MczN_;%Fjm{2iQ_Wzgbut*k&L9 zFZ${#djbbY@&S@d^)_V!Gtm|ZA}mKgL)Bx18-AOEW9`+&X?i^c0|j(&#%+RqIFfIu zu_e@KH#aFJfJ^a6qTFl#Ao}x8w+qTzOyShPbe)S<>5X)JW46YrUpqzEVs(Bz>wqo3 z%FArV9VR`df0sJ9S3w^&3u}09+ukkg`Q|Hfl*BKU>B%yNkTSi|+v*9LIGJ0fVBgCv zNx9nE;LWJO8iD5R*IP#oPMaHsSmFi3X68KY1O5HcRO1#QF9)2~jnd5WGZf_o z2r!s8;jVe_ifTK52{6tSt?)4p)ftGKmdf_Ev=TlY(qj{NI>B5+eVKgaY&h4a&KRAf zNOKoO#yq5e8X^e}RvC&sG*XsQ=;uYx2lQCW53L+H?&l@)n*hq>p-BJ6b+v+Eg!fY# z?#~??>@fz9HrOez5$EF)5g*K%#(4t%D~fE!%Sp=5uJadE+!#Q5D|jI z?l&C(+IVQA5}_`Jl^{)d1X2Iz>i8e?z&lZgfty6zHt_KCVd`GfA11t1<2i#C828UO z@Wcg!`Ifh^gm1+6|G&YZ7Jt6L7Eg_h7Y%Z5Zn}H0%(hOeMxgK4*8#8cbmmi#T9u-f z`Y6z6oIV3g?mdH}e@}#qTuVHR)X>2PrlPf2ao9_GE-ou4OL0QHX3vbzZ@f2qt`73f zZ^tuvO?!R2*T>?-*zvWvGgk!w!Mv&byg-ljB?$DbYT}qe%AOI6w`ZeCH3#3o{uU=p_kW4)Jnw~QMk%y@ZOqQjrp|sGopNln^DBX%JN^Ct8-AXh7Rv7DfDX)U#NV6n8Yo;ixw*JIRd z$#Z|?siJ*)RCDsNK!&Br$Y-@Gs`~I!OD{?j(L8|cw&C#-CB_&2$EX;j{B?FHe{OsB z{{`*>5&e{D2sW45%Ahdxqf99yB8#pJfLcQo7ZsPP z5ol4eD)lShifDCl5RoYaLaO*%NZ5HQtW~-T0IKK;`H;CJ2JqhZT{nf$_dOzd@0+IaQ%>-s z*>BL00uVR_w9cBG(4eeaUAMSd%c>EB!pxb$Su_TSz>pBtfI|_ivjmD?dS8HZ4grX) zNKsV;K*C&vkj!GE0^#3 z`noPojPc`#kKX%n9GfP0hpy|owvA2WhG7`T@mPJ7bAI;Av-Qa;gdn0fH#fWO77=Wv zPnS~L#_hk^JLiJ;bmV$-TrUKGVI1Focz<ATkj)Kz;a%EW@RM zI6z1-Nhxv4g=gkYRRO>f(1+mf?>`405LA_F*dD`VtRaIuTj+fu09X1q&Q5#SSgXPh zCSstVEWwXpOq$|uzc*yh&dwh{dD^yZl>-Lvnb{H{5wm=I_ULrG div { - width: 52px; +.OxVideoPlayer .OxSettings > div { + width: 64px; +} +.OxVideoPlayer .OxSettings > .OxItem { height: 16px; } -.OxVideoPlayer .OxResolution > div:first-child { +.OxVideoPlayer .OxSettings > .OxItem:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } -.OxVideoPlayer .OxResolution > div > * { +.OxVideoPlayer .OxSettings > .OxItem > * { float: left; } -.OxVideoPlayer .OxResolution > div > div { - width: 36px; +.OxVideoPlayer .OxSettings > .OxItem > div { + width: 48px; height: 14px; padding-top: 2px; font-size: 9px; text-align: right; cursor: default; } -.OxVideoPlayer .OxResolution > div > img { +.OxVideoPlayer .OxSettings > .OxItem > img { width: 9px; height: 9px; padding: 3px 3px 4px 4px; } - - -.OxVideoPlayer .OxResolutionButton { - width: 32px; - height: 12px; - padding: 2px; - font-size: 9px; - text-align: center; - cursor: default; +.OxVideoPlayer .OxSettings > .OxLine { + height: 1px; +} +.OxVideoPlayer .OxSettings > .OxSpace { + height: 0; } .OxVideoPlayer .OxSubtitle { diff --git a/source/Ox.UI/js/Form/Ox.Button.js b/source/Ox.UI/js/Form/Ox.Button.js index 012e2932..c0d0bf11 100644 --- a/source/Ox.UI/js/Form/Ox.Button.js +++ b/source/Ox.UI/js/Form/Ox.Button.js @@ -47,10 +47,9 @@ Ox.Button = function(options, self) { values: [], width: 'auto' }) - .options(options ? Ox.extend(Ox.clone(options), { - // tooltip may be an array, so we can't pass it yet - tooltip: '' - }) : {}) + .options(Ox.isArray(options.tooltip) ? Ox.extend(Ox.clone(options), { + tooltip: options.tooltip[0] + }) : options || {}) .attr({ disabled: self.options.disabled, type: self.options.type == 'text' ? 'button' : 'image' @@ -87,19 +86,20 @@ Ox.Button = function(options, self) { setTitle(); - options.tooltip && that.options({ - tooltip: Ox.isArray(options.tooltip) - ? options.tooltip[self.value] - : options.tooltip - }); + if (Ox.isArray(options.tooltip)) { + self.options.tooltip = options.tooltip; + Ox.print('TOOLTIP', self.options.tooltip); + that.$tooltip.options({ + title: self.options.tooltip[self.value] + }); + } function click() { if (!self.options.disabled) { + that.triggerEvent('click'); if (self.options.values.length || self.options.selectable) { that.toggle(); that.triggerEvent('change', {value: self.options.value}); - } else { - that.triggerEvent('click'); } } } @@ -143,16 +143,16 @@ Ox.Button = function(options, self) { }; that.toggle = function() { - var index; if (self.options.values.length) { - index = 1 - Ox.getPositionById(self.options.values, self.options.value); - self.options.title = self.options.values[index].title; - self.options.value = self.options.values[index].id; + self.value = 1 - Ox.getPositionById(self.options.values, self.options.value); + Ox.print('S:O:', self.options, self.value) + self.options.title = self.options.values[self.value].title; + self.options.value = self.options.values[self.value].id; setTitle(); // fixme: if the tooltip is visible // we also need to call show() that.$tooltip && that.$tooltip.options({ - title: self.options.tooltips[index] + title: self.options.tooltip[self.value] }); } else { self.options.value = !self.options.value; diff --git a/source/Ox.UI/js/Form/Ox.Checkbox.js b/source/Ox.UI/js/Form/Ox.Checkbox.js index e3582ced..fddf7620 100644 --- a/source/Ox.UI/js/Form/Ox.Checkbox.js +++ b/source/Ox.UI/js/Form/Ox.Checkbox.js @@ -113,11 +113,6 @@ Ox.Checkbox = function(options, self) { } }; - // fixme: added for forms, duplicated, checked() shouldn't be neccessary - that.value = function() { - return self.options.checked; - } - return that; }; diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js index 6f269d1c..33a22f33 100644 --- a/source/Ox.UI/js/Form/Ox.Form.js +++ b/source/Ox.UI/js/Form/Ox.Form.js @@ -45,7 +45,7 @@ Ox.Form = function(options, self) { self.itemIsValid[i] = data.valid; }); } else { - self.itemIsValid[i] = item.value().length > 0; + self.itemIsValid[i] = item.value !== ''; } self.itemIds[i] = item.options('id') || item.id; self.$items[i] = Ox.FormItem({element: item}).appendTo(that); diff --git a/source/Ox.UI/js/Form/Ox.OptionGroup.js b/source/Ox.UI/js/Form/Ox.OptionGroup.js index b3bb0c1a..8af9fe2c 100644 --- a/source/Ox.UI/js/Form/Ox.OptionGroup.js +++ b/source/Ox.UI/js/Form/Ox.OptionGroup.js @@ -37,7 +37,7 @@ Ox.OptionGroup = function(items, min, max, property) { function getNumber() { // returns the number of checked items return items.reduce(function(prev, curr) { - return prev + curr[property]; + return prev + !!curr[property]; }, 0); } diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index 9460af54..c9efbf4f 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -75,13 +75,15 @@ Ox.Select = function(options, self) { Ox.Log('Form', 'Ox.Select', self.options); self.options.items = self.options.items.map(function(item) { - return { + return Ox.isEmpty(item) ? item : { id: item.id || item, title: item.title || item, checked: Ox.toArray(self.options.value).indexOf(item.id || item) > -1 }; }); + Ox.Log('Form', 'S.O.V.', '"'+self.options.value+'"', JSON.stringify(self.options.items)) + self.optionGroup = new Ox.OptionGroup( self.options.items, self.options.min, @@ -91,6 +93,8 @@ Ox.Select = function(options, self) { self.options.items = self.optionGroup.init(); self.options.value = self.optionGroup.value(); + Ox.Log('Form', 'S.O.V.', '"'+self.options.value+'"', JSON.stringify(self.options.items)) + if (self.options.label) { self.$label = Ox.Label({ overlap: 'right', @@ -102,7 +106,6 @@ Ox.Select = function(options, self) { } if (self.options.type == 'text') { - Ox.Log('Form', 'S.O.V.', self.options.value) self.$title = $('
') .addClass('OxTitle') .css({ diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 3f8baff2..75b5297a 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/source/Ox.UI/js/Menu/Ox.Menu.js @@ -288,7 +288,7 @@ Ox.Menu = function(options, self) { that.items = []; items.forEach(function(item) { var position; - if (!Ox.isEmpty(item)) { + if ('id' in item) { that.items.push( Ox.MenuItem(Ox.extend(item, { maxWidth: self.options.maxWidth, diff --git a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js index 01aed3d0..b00bfecf 100644 --- a/source/Ox.UI/js/Panel/Ox.CollapsePanel.js +++ b/source/Ox.UI/js/Panel/Ox.CollapsePanel.js @@ -26,36 +26,42 @@ Ox.CollapsePanel = function(options, self) { title: '' }) .options(options) - .addClass('OxCollapsePanel'), - // fixme: the following should all be self.foo - title = self.options.collapsed ? - [{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] : - [{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}], - $titlebar = Ox.Bar({ - orientation: 'horizontal', - size: self.options.size, - }) - .dblclick(dblclickTitlebar) - .appendTo(that), - $switch = Ox.Button({ - style: 'symbol', - title: title, - type: 'image', - }) - .click(toggleCollapsed) - .appendTo($titlebar), - $title = Ox.Element() - .addClass('OxTitle') - .html(self.options.title/*.toUpperCase()*/) - .appendTo($titlebar), - $extras; + .addClass('OxCollapsePanel'); + + self.$titlebar = Ox.Bar({ + orientation: 'horizontal', + size: self.options.size, + }) + .bindEvent({ + doubleclick: doubleclickTitlebar + }) + .appendTo(that); + + self.$button = Ox.Button({ + style: 'symbol', + type: 'image', + value: self.options.collapsed ? 'expand' : 'collapse', + values: [ + {id: 'expand', title: 'right'}, + {id: 'collapse', title: 'down'} + ] + }) + .bindEvent({ + click: toggleCollapsed + }) + .appendTo(self.$titlebar); + + self.$title = Ox.Element() + .addClass('OxTitle') + .html(self.options.title) + .appendTo(self.$titlebar); if (self.options.extras.length) { - $extras = Ox.Element() + self.$extras = Ox.Element() .addClass('OxExtras') - .appendTo($titlebar); + .appendTo(self.$titlebar); self.options.extras.forEach(function($extra) { - $extra.appendTo($extras); + $extra.appendTo(self.$extras); }); } @@ -70,9 +76,9 @@ Ox.CollapsePanel = function(options, self) { }); } - function dblclickTitlebar(e) { + function doubleclickTitlebar(e) { if (!$(e.target).hasClass('OxButton')) { - $switch.trigger('click'); + self.$button.trigger('click'); } } @@ -94,9 +100,9 @@ Ox.CollapsePanel = function(options, self) { @*/ self.setOption = function(key, value) { if (key == 'collapsed') { - + self.$button.trigger('click'); } else if (key == 'title') { - $title.html(self.options.title); + self.$title.html(self.options.title); } }; diff --git a/source/Ox.UI/js/Panel/Ox.TabPanel.js b/source/Ox.UI/js/Panel/Ox.TabPanel.js index 9694867b..2b6e746f 100644 --- a/source/Ox.UI/js/Panel/Ox.TabPanel.js +++ b/source/Ox.UI/js/Panel/Ox.TabPanel.js @@ -17,7 +17,8 @@ Ox.TabPanel = function(options, self) { self.$tabs = Ox.ButtonGroup({ buttons: self.options.tabs, id: 'tabs', - selectable: true + selectable: true, + value: self.selected }) .bindEvent({ change: function(data) { diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 04fb84e3..6c3831d8 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -22,6 +22,7 @@ Ox.VideoEditor = function(options, self) { censored: [], cuts: [], duration: 0, + enableSubtitles: false, find: '', fps: 25, getFrameURL: null, @@ -181,6 +182,7 @@ Ox.VideoEditor = function(options, self) { duration: self.options.duration, enableMouse: true, enablePosition: true, + enableSubtitles: self.options.enableSubtitles, externalControls: true, find: self.options.find, height: self.sizes.player[i].height, @@ -221,6 +223,9 @@ Ox.VideoEditor = function(options, self) { that.triggerEvent('resolution', data); }, size: toggleSize, + subtitles: function(data) { + that.triggerEvent('subtitles', data); + }, volume: function(data) { that.triggerEvent('volume', data); } diff --git a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js index 7898d331..8710b334 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js @@ -19,6 +19,7 @@ Ox.VideoPanelPlayer = function(options, self) { annotationsSize: 256, censored: [], duration: 0, + enableSubtitles: false, find: '', fullscreen: false, height: 0, @@ -64,11 +65,12 @@ Ox.VideoPanelPlayer = function(options, self) { self.$video = Ox.VideoPlayer({ censored: self.options.censored, controlsTop: ['fullscreen', 'title', 'find'], - controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'resolution'], + controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'], enableFind: true, enableKeyboard: true, enableMouse: true, enablePosition: true, + enableSubtitles: self.options.enableSubtitles, enableTimeline: true, find: self.options.find, fullscreen: self.options.fullscreen, @@ -111,6 +113,9 @@ Ox.VideoPanelPlayer = function(options, self) { scale: function(data) { that.triggerEvent('scale', data); }, + subtitles: function(data) { + that.triggerEvent('subtitles', data); + }, volume: function(data) { that.triggerEvent('volume', data); } diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 63668927..71d2d5b0 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -681,14 +681,17 @@ Video background-image: -o-linear-gradient(top, rgba(192, 192, 192, 0.75), rgba(255, 255, 255, 0.75)); background-image: -webkit-linear-gradient(top, rgba(192, 192, 192, 0.75), rgba(255, 255, 255, 0.75)); } -.OxThemeClassic .OxVideoPlayer .OxResolution > div { +.OxThemeClassic .OxVideoPlayer .OxSettings > div { background: rgba(224, 224, 224, 0.5); } -.OxThemeClassic .OxVideoPlayer .OxResolution > div.OxSelected { +.OxThemeClassic .OxVideoPlayer .OxSettings > div.OxSelected { background-image: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5)); background-image: -o-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5)); background-image: -webkit-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5)); } +.OxThemeClassic .OxVideoPlayer .OxSettings > div.OxLine { + background-color: rgba(192, 192, 192, 0.5); +} .OxThemeClassic .OxVideoPlayer .OxVolume { background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5)); diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 959e6c83..a6119700 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -682,14 +682,17 @@ Video background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75)); } -.OxThemeModern .OxVideoPlayer .OxResolution > div { - background: rgba(32, 32, 32, 0.5); +.OxThemeModern .OxVideoPlayer .OxSettings > div { + background-color: rgba(32, 32, 32, 0.5); } -.OxThemeModern .OxVideoPlayer .OxResolution > div.OxSelected { +.OxThemeModern .OxVideoPlayer .OxSettings > div.OxSelected { background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5)); background-image: -o-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5)); background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5)); } +.OxThemeModern .OxVideoPlayer .OxSettings > div.OxLine { + background-color: rgba(64, 64, 64, 0.5); +} .OxThemeModern .OxVideoPlayer .OxVolume { background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5)); background-image: -o-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));