2010-01-07 20:21:07 +00:00
/ *
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
ox . ui . js
requires
2010-01-25 11:42:28 +00:00
jquery - 1.4 . js
2010-01-07 20:21:07 +00:00
ox . js
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
* /
// also see test.js, in demos ...
2011-02-07 05:34:18 +00:00
// fixme: render might be a better function name than construct
2010-01-07 20:21:07 +00:00
( function ( ) {
2011-01-30 03:54:06 +00:00
// fixme: move into Ox.UI
2010-01-07 20:21:07 +00:00
var oxui = {
2010-09-03 20:54:40 +00:00
defaultTheme : 'classic' ,
2010-01-07 20:21:07 +00:00
elements : { } ,
getDimensions : function ( orientation ) {
2010-09-03 20:54:40 +00:00
return orientation == 'horizontal' ?
[ 'width' , 'height' ] : [ 'height' , 'width' ] ;
2010-01-07 20:21:07 +00:00
} ,
getEdges : function ( orientation ) {
2010-09-03 20:54:40 +00:00
return orientation == 'horizontal' ?
[ 'left' , 'right' , 'top' , 'bottom' ] :
[ 'top' , 'bottom' , 'left' , 'right' ] ;
2010-01-07 20:21:07 +00:00
} ,
getBarSize : function ( size ) {
var sizes = {
2010-02-20 03:58:46 +00:00
small : 20 ,
medium : 24 ,
large : 28 ,
2010-01-07 20:21:07 +00:00
} ;
return sizes [ size ] ;
} ,
2011-02-22 10:02:28 +00:00
path : $ ( 'script[src*="ox.ui.js"]' ) . attr ( 'src' ) . replace ( 'js/ox.ui.js' , '' ) ,
2010-06-30 18:47:10 +00:00
scrollbarSize : $ . browser . mozilla ? 16 : 12 ,
2010-06-30 09:27:02 +00:00
symbols : {
2010-09-03 20:54:40 +00:00
alt : '\u2325' ,
apple : '\uF8FF' ,
arrow _down : '\u2193' ,
arrow _left : '\u2190' ,
arrow _right : '\u2192' ,
arrow _up : '\u2191' ,
backspace : '\u232B' ,
backup : '\u2707' ,
ballot : '\u2717' ,
black _star : '\u2605' ,
burn : '\u2622' ,
caps _lock : '\u21EA' ,
check : '\u2713' ,
//clear: '\u2327',
clear : '\u00D7' ,
click : '\uF803' ,
close : '\u2715' ,
command : '\u2318' ,
control : '\u2303' ,
cut : '\u2702' ,
'delete' : '\u2326' ,
diamond : '\u25C6' ,
edit : '\uF802' ,
eject : '\u23CF' ,
escape : '\u238B' ,
end : '\u2198' ,
enter : '\u2324' ,
fly : '\u2708' ,
gear : '\u2699' ,
home : '\u2196' ,
info : '\u24D8' ,
navigate : '\u2388' ,
option : '\u2387' ,
page _up : '\u21DE' ,
page _down : '\u21DF' ,
redo : '\u21BA' ,
'return' : '\u21A9' ,
//select: '\u21D5',
select : '\u25BE' ,
shift : '\u21E7' ,
sound : '\u266B' ,
space : '\u2423' ,
tab : '\u21E5' ,
trash : '\u267A' ,
triangle _down : '\u25BC' ,
triangle _left : '\u25C0' ,
triangle _right : '\u25BA' ,
triangle _up : '\u25B2' ,
undo : '\u21BB' ,
voltage : '\u26A1' ,
warning : '\u26A0' ,
white _star : '\u2606'
2010-02-03 12:12:21 +00:00
}
2010-01-07 20:21:07 +00:00
} ,
2010-12-26 20:16:35 +00:00
$elements = { } ,
2010-01-07 20:21:07 +00:00
$window , $document , $body ;
2011-01-02 10:01:55 +00:00
_$elements = $elements ;
2010-12-31 11:01:35 +00:00
2010-01-07 20:21:07 +00:00
$ ( function ( ) {
2011-03-01 11:06:37 +00:00
$window = $ ( window ) ;
$document = $ ( document ) ;
$body = $ ( 'body' ) ;
2010-01-07 20:21:07 +00:00
Ox . theme ( oxui . defaultTheme ) ;
2010-02-04 09:50:45 +00:00
} ) ;
2010-01-07 20:21:07 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Application
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2011-01-18 04:07:33 +00:00
Ox . App = ( function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
Ox . App
Basic application instance that communicates with a JSON API .
The JSON API should support at least the following actions :
api returns all api methods
init returns { config : { ... } , user : { ... } }
Options
timeout API timeout in msec
type 'GET' or 'POST'
url URL of the API
Methods
api [ action ] make a request
api . cancel cancel a request
launch launch the App
options get or set options
* * * /
2010-01-27 12:30:00 +00:00
return function ( options ) {
options = options || { } ;
var self = { } ,
that = this ;
2010-09-05 14:24:22 +00:00
self . time = + new Date ( ) ;
2010-01-27 12:30:00 +00:00
self . options = $ . extend ( {
2011-01-30 03:54:06 +00:00
timeout : 60000 ,
type : 'POST' ,
url : '/api/' ,
2010-01-27 12:30:00 +00:00
} , options ) ;
2011-01-30 03:54:06 +00:00
that . $element = new Ox . Element ( 'body' ) ;
2010-09-05 14:24:22 +00:00
function getUserAgent ( ) {
var userAgent = '' ;
$ . each ( [ 'Chrome' , 'Firefox' , 'Internet Explorer' , 'Opera' , 'Safari' ] , function ( i , v ) {
if ( navigator . userAgent . indexOf ( v ) > - 1 ) {
userAgent = v ;
return false ;
}
} ) ;
2011-03-01 11:06:37 +00:00
if ( ! userAgent && $ . browser . mozilla ) {
userAgent = 'Firefox' ;
}
if ( ! userAgent && $ . browser . webkit ) {
userAgent = 'Chrome' ;
}
2010-09-05 14:24:22 +00:00
return userAgent ;
}
2010-09-05 00:31:58 +00:00
function getUserData ( ) {
return {
navigator : {
cookieEnabled : navigator . cookieEnabled ,
plugins : $ . map ( navigator . plugins , function ( plugin , i ) {
return plugin . name ;
} ) ,
userAgent : navigator . userAgent
} ,
screen : screen ,
2010-09-05 14:24:22 +00:00
time : ( + new Date ( ) - self . time ) / 1000 ,
2010-09-05 00:31:58 +00:00
window : {
innerHeight : window . innerHeight ,
innerWidth : window . innerWidth ,
outerHeight : window . outerHeight ,
outerWidth : window . outerWidth ,
screenLeft : window . screenLeft ,
screenTop : window . screenTop
}
} ;
}
function loadImages ( callback ) {
2011-02-02 12:01:22 +00:00
window . OxImageCache = [ ] ;
2010-09-05 00:31:58 +00:00
$ . getJSON ( oxui . path + 'json/ox.ui.images.json' , function ( data ) {
var counter = 0 ,
length = data . length ;
data . forEach ( function ( src , i ) {
2011-01-31 19:31:15 +00:00
var image = new Image ( ) ;
2010-09-05 00:31:58 +00:00
image . src = oxui . path + src ;
image . onload = function ( ) {
( ++ counter == length ) && callback ( ) ;
}
2011-02-02 12:01:22 +00:00
window . OxImageCache . push ( image ) ;
2010-09-05 00:31:58 +00:00
} ) ;
} ) ;
}
2010-07-07 12:36:12 +00:00
self . change = function ( key , value ) {
2010-01-27 12:30:00 +00:00
} ;
2010-09-13 13:54:22 +00:00
that . api = {
api : function ( callback ) {
Ox . Request . send ( {
2011-01-30 03:54:06 +00:00
url : self . options . url ,
2010-09-13 13:54:22 +00:00
data : {
action : 'api'
} ,
callback : callback
} ) ;
} ,
cancel : function ( id ) {
Ox . Request . cancel ( id ) ;
}
} ;
2011-01-18 04:07:33 +00:00
that . bindEvent = function ( ) {
} ;
2010-09-05 00:31:58 +00:00
that . launch = function ( callback ) {
2010-09-05 14:24:22 +00:00
var time = + new Date ( ) ,
userAgent = getUserAgent ( ) ,
2011-01-02 10:01:55 +00:00
userAgents = [ 'Chrome' , 'Firefox' , 'Opera' , 'Safari' ] ;
2010-01-27 12:30:00 +00:00
$ . ajaxSetup ( {
2011-01-30 03:54:06 +00:00
timeout : self . options . timeour ,
type : self . options . type ,
url : self . options . url
2010-01-27 12:30:00 +00:00
} ) ;
2010-09-05 14:24:22 +00:00
userAgents . indexOf ( userAgent ) > - 1 ? start ( ) : stop ( ) ;
function start ( ) {
2011-01-30 03:54:06 +00:00
// fixme: rename config to site?
var counter = 0 , config , user ;
that . api . api ( function ( result ) {
$ . each ( result . data . actions , function ( key , value ) {
that . api [ key ] = function ( data , callback ) {
if ( arguments . length == 1 && Ox . isFunction ( data ) ) {
callback = data ;
data = { } ;
}
return Ox . Request . send ( $ . extend ( {
url : self . options . url ,
data : {
action : key ,
data : JSON . stringify ( data )
} ,
callback : callback
} , ! value . cache ? { age : 0 } : { } ) ) ;
} ;
} ) ;
that . api . init ( getUserData ( ) , function ( result ) {
2011-03-01 11:06:37 +00:00
config = result . data . config ;
2011-01-30 03:54:06 +00:00
user = result . data . user ;
document . title = config . site . name ;
launchCallback ( ) ;
2010-09-05 00:31:58 +00:00
} ) ;
} ) ;
2011-01-30 03:54:06 +00:00
loadImages ( launchCallback ) ;
function launchCallback ( ) {
++ counter == 2 && $ ( function ( ) {
var $div = $body . find ( 'div' ) ;
$body . find ( 'img' ) . remove ( ) ;
$div . animate ( {
opacity : 0
} , 1000 , function ( ) {
$div . remove ( ) ;
} ) ;
callback ( { config : config , user : user } ) ;
} ) ;
}
2010-09-05 14:24:22 +00:00
}
function stop ( ) {
2010-09-13 13:54:22 +00:00
that . request . send ( self . options . init , getUserData ( ) , function ( ) { } ) ;
2010-09-05 14:24:22 +00:00
}
2010-09-05 00:31:58 +00:00
return that ;
2010-01-27 12:30:00 +00:00
} ;
that . options = function ( ) {
2010-09-07 15:58:15 +00:00
return Ox . getset ( self . options , Array . prototype . slice . call ( arguments ) , self . change , that ) ;
2010-01-27 12:30:00 +00:00
} ;
return that ;
} ;
2011-01-18 04:07:33 +00:00
} ( ) ) ;
2010-01-27 12:30:00 +00:00
2011-01-15 06:09:22 +00:00
Ox . Clipboard = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
Ox . Clipboard
Basic clipboard handler
Methods
copy ( data ) copy data to clipboard
paste paste data from clipboard
* * * /
2011-01-15 06:09:22 +00:00
var clipboard = { } ;
return {
_print : function ( ) {
Ox . print ( JSON . stringify ( clipboard ) ) ;
} ,
copy : function ( data ) {
clipboard = data ;
Ox . print ( 'copy' , JSON . stringify ( clipboard ) ) ;
} ,
paste : function ( type ) {
return clipboard ;
}
} ;
} ( ) ;
2010-01-07 20:21:07 +00:00
Ox . Focus = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
Ox . Focus
Basic focus handler
Methods
blur ( id ) blur element
focus ( id ) focus element
focused ( ) return id of focused element , or null
* * * /
2010-01-07 20:21:07 +00:00
var stack = [ ] ;
return {
2010-12-26 20:16:35 +00:00
_print : function ( ) {
Ox . print ( stack ) ;
} ,
2010-06-30 09:27:02 +00:00
blur : function ( id ) {
2010-09-03 08:47:40 +00:00
var index = stack . indexOf ( id ) ;
2011-01-04 02:37:33 +00:00
if ( index > - 1 && index == stack . length - 1 ) {
2010-09-03 08:47:40 +00:00
stack . length == 1 ? stack . pop ( ) :
stack . splice ( stack . length - 2 , 0 , stack . pop ( ) ) ;
2010-09-04 14:28:40 +00:00
//$elements[id].removeClass('OxFocus');
$ ( '.OxFocus' ) . removeClass ( 'OxFocus' ) ; // fixme: the above is better, and should work
stack . length && $elements [ stack [ stack . length - 1 ] ] . addClass ( 'OxFocus' ) ;
2010-09-03 20:54:40 +00:00
Ox . print ( 'blur' , id , stack ) ;
2010-06-30 09:27:02 +00:00
}
} ,
2010-01-07 20:21:07 +00:00
focus : function ( id ) {
2010-02-07 15:01:22 +00:00
var index = stack . indexOf ( id ) ;
2010-09-03 08:47:40 +00:00
if ( index == - 1 || index < stack . length - 1 ) {
index > - 1 && stack . splice ( index , 1 ) ;
stack . push ( id ) ;
2010-09-04 14:28:40 +00:00
$ ( '.OxFocus' ) . removeClass ( 'OxFocus' ) ; // fixme: see above
$elements [ id ] . addClass ( 'OxFocus' ) ;
2010-09-03 20:54:40 +00:00
Ox . print ( 'focus' , id , stack ) ;
2010-01-07 20:21:07 +00:00
}
2010-02-05 09:13:03 +00:00
} ,
focused : function ( ) {
2010-12-27 05:01:24 +00:00
return stack . length ? stack [ stack . length - 1 ] : null ;
2010-01-07 20:21:07 +00:00
}
} ;
} ( ) ;
2011-01-30 03:54:06 +00:00
/ * * *
2010-12-06 17:42:45 +00:00
Ox . History
2011-01-30 03:54:06 +00:00
* * * /
2010-01-07 20:21:07 +00:00
2011-01-30 03:54:06 +00:00
/ * * *
2010-12-06 17:42:45 +00:00
Ox . Keyboard
2011-01-30 03:54:06 +00:00
* * * /
2010-01-07 20:21:07 +00:00
( function ( ) {
2010-01-25 11:42:28 +00:00
2010-09-03 20:54:40 +00:00
var buffer = '' ,
2010-01-07 20:21:07 +00:00
bufferTime = 0 ,
bufferTimeout = 1000 ,
2011-01-30 03:54:06 +00:00
// wrapped in function so it can be collapsed in text editor
keyNames = ( function ( ) {
2010-01-07 20:21:07 +00:00
return {
2010-09-03 20:54:40 +00:00
0 : 'section' ,
8 : 'backspace' ,
9 : 'tab' ,
12 : 'clear' ,
13 : 'enter' ,
16 : 'shift' ,
17 : 'control' ,
18 : 'alt' ,
20 : 'capslock' ,
27 : 'escape' ,
32 : 'space' ,
33 : 'pageup' ,
34 : 'pagedown' ,
35 : 'end' ,
36 : 'home' ,
37 : 'left' ,
38 : 'up' ,
39 : 'right' ,
40 : 'down' ,
45 : 'insert' ,
46 : 'delete' ,
47 : 'help' ,
48 : '0' ,
49 : '1' ,
50 : '2' ,
51 : '3' ,
52 : '4' ,
53 : '5' ,
54 : '6' ,
55 : '7' ,
56 : '8' ,
57 : '9' ,
65 : 'a' ,
66 : 'b' ,
67 : 'c' ,
68 : 'd' ,
69 : 'e' ,
70 : 'f' ,
71 : 'g' ,
72 : 'h' ,
73 : 'i' ,
74 : 'j' ,
75 : 'k' ,
76 : 'l' ,
77 : 'm' ,
78 : 'n' ,
79 : 'o' ,
80 : 'p' ,
81 : 'q' ,
82 : 'r' ,
83 : 's' ,
84 : 't' ,
85 : 'u' ,
86 : 'v' ,
87 : 'w' ,
88 : 'x' ,
89 : 'y' ,
90 : 'z' ,
91 : 'meta.left' ,
92 : 'meta.right' ,
93 : 'select' ,
96 : '0.numpad' ,
97 : '1.numpad' ,
98 : '2.numpad' ,
99 : '3.numpad' ,
100 : '4.numpad' ,
101 : '5.numpad' ,
102 : '6.numpad' ,
103 : '7.numpad' ,
104 : '8.numpad' ,
105 : '9.numpad' ,
106 : 'asterisk.numpad' ,
107 : 'plus.numpad' ,
109 : 'minus.numpad' ,
108 : 'enter.numpad' ,
110 : 'dot.numpad' ,
111 : 'slash.numpad' ,
112 : 'f1' ,
113 : 'f2' ,
114 : 'f3' ,
115 : 'f4' ,
116 : 'f5' ,
117 : 'f6' ,
118 : 'f7' ,
119 : 'f8' ,
120 : 'f9' ,
121 : 'f10' ,
122 : 'f11' ,
123 : 'f12' ,
124 : 'f13' ,
125 : 'f14' ,
126 : 'f15' ,
127 : 'f16' ,
144 : 'numlock' ,
145 : 'scrolllock' ,
186 : 'semicolon' ,
187 : 'equal' ,
188 : 'comma' ,
189 : 'minus' ,
190 : 'dot' ,
191 : 'slash' ,
192 : 'backtick' ,
219 : 'openbracket' ,
220 : 'backslash' ,
221 : 'closebracket' ,
222 : 'quote'
2010-01-07 20:21:07 +00:00
// see dojo, for ex.
} ;
2011-01-30 03:54:06 +00:00
} ) ( ) ,
2010-01-07 20:21:07 +00:00
modifierNames = {
2010-09-03 20:54:40 +00:00
altKey : 'alt' , // mac: option
ctrlKey : 'control' ,
// metaKey: 'meta', // mac: command
shiftKey : 'shift'
2010-01-07 20:21:07 +00:00
} ;
2010-02-05 15:42:52 +00:00
2010-02-04 09:50:45 +00:00
$ ( function ( ) {
2010-02-05 15:42:52 +00:00
// fixme: how to do this better?
2010-02-19 14:19:48 +00:00
// in firefox on mac, keypress doesn't fire for up/down
2010-02-19 11:47:13 +00:00
// if the cursor is at the start/end of an input element
2010-02-19 14:19:48 +00:00
// on linux, it doesn't seem to fire if the input element has focus
2010-02-19 11:47:13 +00:00
if ( $ . browser . mozilla ) {
2010-02-18 07:27:32 +00:00
$document . keypress ( keypress ) ;
2010-02-19 11:47:13 +00:00
$document . keydown ( function ( event ) {
2010-09-03 20:54:40 +00:00
var $element = $ ( 'input:focus' ) ;
2010-02-19 11:47:13 +00:00
if ( $element . length ) {
if (
(
2010-09-03 20:54:40 +00:00
keyNames [ event . keyCode ] == 'up' &&
2010-02-19 11:47:13 +00:00
$element [ 0 ] . selectionStart + $element [ 0 ] . selectionEnd == 0
) || (
2010-09-03 20:54:40 +00:00
keyNames [ event . keyCode ] == 'down' &&
2010-02-19 11:47:13 +00:00
$element [ 0 ] . selectionStart == $element . val ( ) . length &&
$element [ 0 ] . selectionEnd == $element . val ( ) . length
)
) {
keypress ( event ) ;
}
}
2010-09-07 15:58:15 +00:00
} ) ;
2010-02-19 11:47:13 +00:00
} else {
2010-09-07 15:58:15 +00:00
$document . keydown ( keypress ) ;
2010-02-05 15:31:19 +00:00
}
2010-02-04 09:50:45 +00:00
} ) ;
2011-01-30 03:54:06 +00:00
2010-02-18 07:27:32 +00:00
function keypress ( event ) {
2010-12-27 05:01:24 +00:00
var focused = Ox . Focus . focused ( ) ,
key ,
2010-02-04 09:50:45 +00:00
keys = [ ] ,
2010-02-20 03:58:46 +00:00
//ret = true,
2010-02-04 09:50:45 +00:00
time ;
$ . each ( modifierNames , function ( k , v ) {
2011-01-30 03:54:06 +00:00
event [ k ] && keys . push ( v ) ;
2010-02-04 09:50:45 +00:00
} ) ;
// avoid pushing modifier twice
2011-01-13 12:43:20 +00:00
//Ox.print('keys', keys)
2010-02-04 09:50:45 +00:00
if ( keyNames [ event . keyCode ] && keys . indexOf ( keyNames [ event . keyCode ] ) == - 1 ) {
keys . push ( keyNames [ event . keyCode ] ) ;
}
2010-09-03 20:54:40 +00:00
key = keys . join ( '_' ) ;
2011-03-01 11:06:37 +00:00
if ( key . match ( /^[\w\d\-]$|SPACE/ ) ) {
2010-02-04 09:50:45 +00:00
time = Ox . getTime ( ) ;
if ( time - bufferTime > bufferTimeout ) {
2010-09-03 20:54:40 +00:00
buffer = '' ;
2010-01-07 20:21:07 +00:00
}
2010-09-03 20:54:40 +00:00
buffer += key == 'SPACE' ? ' ' : key ;
2010-09-07 15:58:15 +00:00
bufferTime = time ;
2010-01-07 20:21:07 +00:00
}
2011-01-02 10:01:55 +00:00
focused && $elements [ focused ] . triggerEvent ( 'key_' + key ) ;
2011-02-11 14:43:13 +00:00
if ( [ 'down' , 'space' , 'up' ] . indexOf ( key ) > - 1 && ! $elements [ focused ] . hasClass ( 'OxInput' ) ) {
2011-01-16 04:55:08 +00:00
// prevent chrome from scrolling
return false ;
}
2010-02-04 09:50:45 +00:00
/ *
$ . each ( stack , function ( i , v ) {
// fixme: we dont get the return value!
2010-09-03 20:54:40 +00:00
ret = Ox . event . trigger ( keyboard + Ox . toCamelCase ( key ) + '.' + v ) ;
2010-02-04 09:50:45 +00:00
return ret ;
} ) ;
2010-09-07 15:58:15 +00:00
* /
2010-02-04 09:50:45 +00:00
}
2010-09-07 15:58:15 +00:00
2010-01-07 20:21:07 +00:00
} ) ( ) ;
2011-01-30 03:54:06 +00:00
Ox . Request = function ( options ) {
2010-01-07 20:21:07 +00:00
2011-01-30 03:54:06 +00:00
/ * * *
Ox . Request
Basic request handler
Options
timeout
Methods
cancel ( ) cancel request
clearCache ( ) clear cache
options ( ) get or set options
requests ( ) return number of active requests
send ( ) send request
* * * /
2010-01-27 12:30:00 +00:00
var cache = { } ,
pending = { } ,
requests = { } ,
self = {
2011-01-30 03:54:06 +00:00
options : $ . extend ( {
2011-01-23 04:59:16 +00:00
timeout : 60000 ,
2010-09-03 20:54:40 +00:00
type : 'POST' ,
2011-01-30 03:54:06 +00:00
url : '/api/'
} , options )
2010-01-27 12:30:00 +00:00
} ;
return {
cancel : function ( ) {
if ( arguments . length == 0 ) {
2011-01-30 03:54:06 +00:00
// cancel all requests
2010-01-27 12:30:00 +00:00
requests = { } ;
} else if ( Ox . isFunction ( arguments [ 0 ] ) ) {
// cancel with function
$ . each ( requests , function ( id , req ) {
if ( arguments [ 0 ] ( req ) ) {
delete requests [ id ] ;
}
2011-03-01 11:06:37 +00:00
} ) ;
2010-01-27 12:30:00 +00:00
} else {
// cancel by id
2011-03-01 11:06:37 +00:00
delete requests [ arguments [ 0 ] ] ;
2010-01-27 12:30:00 +00:00
}
} ,
2011-01-30 03:54:06 +00:00
clearCache : function ( ) {
2010-01-27 12:34:27 +00:00
cache = { } ;
2010-01-27 12:35:37 +00:00
} ,
2010-01-27 12:34:27 +00:00
2010-01-27 12:30:00 +00:00
options : function ( options ) {
2010-01-27 12:34:27 +00:00
return Ox . getset ( self . options , options , $ . noop ( ) , this ) ;
2010-01-27 12:30:00 +00:00
} ,
2011-01-30 03:54:06 +00:00
requests : function ( ) {
return Ox . length ( requests ) ;
} ,
2010-01-27 12:30:00 +00:00
send : function ( options ) {
2010-07-01 23:51:08 +00:00
var options = $ . extend ( {
age : - 1 ,
2011-01-30 03:54:06 +00:00
callback : null ,
2010-07-01 23:51:08 +00:00
id : Ox . uid ( ) ,
timeout : self . options . timeout ,
type : self . options . type ,
url : self . options . url
} , options ) ,
req = JSON . stringify ( {
2010-01-27 12:30:00 +00:00
url : options . url ,
data : options . data
} ) ;
2011-01-30 03:54:06 +00:00
if ( pending [ options . id ] ) {
setTimeout ( function ( ) {
Ox . Request . send ( options ) ;
} , 0 ) ;
} else {
requests [ options . id ] = {
url : options . url ,
data : options . data
} ;
if ( cache [ req ] && ( options . age == - 1 || options . age > Ox . getTime ( ) - cache [ req ] . time ) ) {
setTimeout ( function ( ) {
callback && callback ( cache [ req ] . data ) ;
} , 0 ) ;
} else {
pending [ options . id ] = true ;
$ . ajax ( {
data : options . data ,
dataType : 'json' ,
error : error ,
success : success ,
timeout : options . timeout ,
type : options . type ,
url : options . url
} ) ;
}
}
2010-01-31 10:06:52 +00:00
function callback ( data ) {
2010-01-27 12:30:00 +00:00
delete requests [ options . id ] ;
2011-01-16 04:55:08 +00:00
//Ox.length(requests) == 0 && $body.trigger('requestStop');
2011-01-11 06:17:45 +00:00
options . callback && options . callback ( data ) ;
2010-01-27 12:30:00 +00:00
}
2010-01-31 09:32:41 +00:00
function debug ( request ) {
2010-09-03 20:54:40 +00:00
var $iframe = $ ( '<iframe>' )
2010-01-31 09:32:41 +00:00
. css ( { // fixme: should go into a class
width : 768 ,
height : 384
} ) ,
$dialog = new Ox . Dialog ( {
2010-09-03 20:54:40 +00:00
title : 'Application Error' ,
2010-01-31 09:32:41 +00:00
buttons : [
2010-12-24 17:13:18 +00:00
new Ox . Button ( {
title : 'Close'
} )
. bindEvent ( {
2010-12-26 20:16:35 +00:00
click : function ( ) {
$dialog . close ( ) ;
}
2010-12-24 17:13:18 +00:00
} )
2010-01-31 09:32:41 +00:00
] ,
2010-12-24 17:13:18 +00:00
content : $iframe ,
2010-01-31 09:32:41 +00:00
width : 800 ,
height : 400
} )
. open ( ) ,
iframe = $iframe [ 0 ] . contentDocument || $iframe [ 0 ] . contentWindow . document ;
iframe . open ( ) ;
iframe . write ( request . responseText ) ;
iframe . close ( ) ;
}
2010-01-27 12:30:00 +00:00
function error ( request , status , error ) {
2010-01-31 10:06:52 +00:00
var data ;
2010-02-01 06:11:35 +00:00
if ( arguments . length == 1 ) {
data = arguments [ 0 ]
} else {
try {
data = JSON . parse ( request . responseText ) ;
} catch ( err ) {
2011-01-02 10:01:55 +00:00
try {
data = {
status : {
code : request . status ,
text : request . statusText
}
} ;
} catch ( err ) {
data = {
status : {
code : '500' ,
text : 'Unknown Error'
}
} ;
}
2010-02-01 06:11:35 +00:00
}
2010-01-27 13:25:37 +00:00
}
2010-01-31 10:06:52 +00:00
if ( data . status . code < 500 ) {
callback ( data ) ;
} else {
2010-01-27 13:25:37 +00:00
var $dialog = new Ox . Dialog ( {
2010-09-03 20:54:40 +00:00
title : 'Application Error' ,
2010-01-31 09:32:41 +00:00
buttons : [
2010-12-24 17:13:18 +00:00
new Ox . Button ( {
2011-01-30 03:54:06 +00:00
id : 'details' ,
title : 'Details'
} )
. bindEvent ( {
click : function ( ) {
$dialog . close ( function ( ) {
debug ( request ) ;
} ) ;
}
} ) ,
2010-12-24 17:13:18 +00:00
new Ox . Button ( {
2011-01-30 03:54:06 +00:00
id : 'close' ,
title : 'Close'
} )
. bindEvent ( {
click : function ( ) {
$dialog . close ( ) ;
}
} )
2010-01-31 09:32:41 +00:00
] ,
2010-12-24 17:13:18 +00:00
content : 'Sorry, we have encountered an application error while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.' ,
2011-01-30 03:54:06 +00:00
keys : { enter : 'close' , escape : 'close' } ,
2010-01-31 09:32:41 +00:00
width : 400 ,
2010-06-30 18:47:10 +00:00
height : 200
2010-01-31 09:32:41 +00:00
} )
. open ( ) ;
2010-02-01 06:11:35 +00:00
// fixme: change this to Send / Don't Send
2011-01-13 12:43:20 +00:00
/ * O x . p r i n t ( {
2010-01-27 13:25:37 +00:00
request : request ,
status : status ,
error : error
2011-01-13 12:43:20 +00:00
} ) ; * /
2010-01-27 13:25:37 +00:00
}
2010-01-27 12:30:00 +00:00
pending [ options . id ] = false ;
}
function success ( data ) {
pending [ options . id ] = false ;
cache [ req ] = {
data : data ,
time : Ox . getTime ( )
} ;
2010-01-31 10:06:52 +00:00
callback ( data ) ;
2010-01-27 12:30:00 +00:00
}
return options . id ;
2010-07-01 23:51:08 +00:00
2010-01-27 12:30:00 +00:00
}
} ;
2011-01-30 03:54:06 +00:00
2010-01-27 12:30:00 +00:00
} ( ) ;
2010-09-05 15:51:11 +00:00
Ox . Theme = function ( ) {
} ;
2011-02-28 10:03:01 +00:00
Ox . UI = ( function ( ) {
2011-03-03 21:02:35 +00:00
/ *
$ ( function ( ) {
Ox . extend ( Ox . UI , {
$body : $ ( 'body' ) ,
$document : $ ( document ) ,
$window : $ ( window )
} ) ;
} ) ;
* /
2011-01-13 11:54:31 +00:00
return {
2011-03-03 21:02:35 +00:00
getDimensions : function ( orientation ) {
return orientation == 'horizontal' ?
[ 'width' , 'height' ] : [ 'height' , 'width' ] ;
2011-01-13 11:54:31 +00:00
} ,
2011-03-03 21:02:35 +00:00
getEdges : function ( orientation ) {
return orientation == 'horizontal' ?
[ 'left' , 'right' , 'top' , 'bottom' ] :
[ 'top' , 'bottom' , 'left' , 'right' ] ;
} ,
DIMENSIONS : {
horizontal : [ 'width' , 'height' ] ,
vertical : [ 'height' , 'width' ]
} ,
EDGES : {
horizontal : [ [ 'left' , 'right' ] , [ 'top' , 'bottom' ] ] ,
vertical : [ [ 'top' , 'bottom' ] , [ 'left' , 'right' ] ]
} ,
PATH : $ ( 'script[src*="ox.ui.js"]' )
. attr ( 'src' ) . replace ( 'js/ox.ui.js' , '' ) ,
2011-01-13 11:54:31 +00:00
theme : function ( ) {
} ,
themePath : function ( ) {
}
2011-03-03 21:02:35 +00:00
} ;
2011-02-28 10:03:01 +00:00
} ( ) ) ;
2011-01-13 11:54:31 +00:00
2011-01-30 03:54:06 +00:00
/ * * *
2010-01-07 20:21:07 +00:00
Ox . URL
2011-01-30 03:54:06 +00:00
* * * /
2010-01-07 20:21:07 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Core
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
// fixme: wouldn't it be better to let the elements be,
// rather then $element, $content, and potentially others,
// 0, 1, 2, etc, so that append would append 0, and appendTo
// would append (length - 1)?
2010-12-06 17:42:45 +00:00
2010-06-28 11:19:04 +00:00
Ox . Container = function ( options , self ) {
2011-01-30 03:54:06 +00:00
// fixme: to be deprecated
2010-09-03 20:54:40 +00:00
var that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxContainer' ) ;
that . $content = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxContent' )
2010-01-07 20:21:07 +00:00
. appendTo ( that ) ;
return that ;
2010-02-07 15:01:22 +00:00
} ;
2010-01-07 20:21:07 +00:00
2011-01-30 03:54:06 +00:00
Ox . jQueryElement = ( function ( ) {
// Basic jQuery element
var jQueryFunctions = ( function ( ) {
var functions = [ ] ;
Ox . each ( $ ( '<div>' ) , function ( key , val ) {
typeof val == 'function' && functions . push ( key ) ;
} ) ;
return functions . sort ( ) ;
} ) ( ) ;
return function ( element ) {
var that = { } ;
Ox . each ( jQueryFunctions , function ( i , fn ) {
that [ fn ] = function ( ) {
var args = arguments , id , ret ;
$ . each ( args , function ( i , arg ) {
// if an ox object was passed
// then pass its $element instead
// so that we can do oxObj.jqFn(oxObj)
if ( arg && arg . ox ) {
args [ i ] = arg . $element ;
}
} ) ;
ret = element . $element [ fn ] . apply ( element . $element , args ) ;
// if the $element of an ox object was returned
// then return the ox object instead
// so that we can do oxObj.jqFn().oxFn()
/ *
if ( fn == 'appendTo' ) {
Ox . print ( 'ret' , ret , $element , ret . jquery && $elements [ id = ret . data ( 'ox' ) ] == true )
}
* /
return ret . jquery && $elements [ id = ret . data ( 'ox' ) ] ?
$elements [ id ] : ret ;
} ;
} ) ;
return that ;
}
} ) ( ) ;
2010-01-07 20:21:07 +00:00
// check out http://ejohn.org/apps/learn/#36 (-#38, making fns work w/o new)
2011-01-30 03:54:06 +00:00
2010-01-07 20:21:07 +00:00
Ox . Element = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
Basic element object
* * * /
2010-01-07 20:21:07 +00:00
return function ( options , self ) {
2011-02-28 10:03:01 +00:00
if ( ! ( this instanceof arguments . callee ) ) {
return new arguments . callee ( options , self ) ;
}
2010-01-07 20:21:07 +00:00
self = self || { } ;
2011-01-02 10:01:55 +00:00
self . options = options || { } ;
if ( ! self . $eventHandler ) {
self . $eventHandler = $ ( '<div>' ) ;
}
2010-01-07 20:21:07 +00:00
var that = this ;
2011-01-30 03:54:06 +00:00
// allow for Ox.Element('tagname', self)
if ( typeof self . options == 'string' ) {
self . options = {
element : self . options
} ;
}
2011-03-03 21:02:35 +00:00
that . ox = Ox . VERSION ;
2011-01-30 03:54:06 +00:00
that . id = Ox . uid ( ) ;
that . $element = $ ( '<' + ( self . options . element || 'div' ) + '/>' , {
data : {
ox : that . id
} ,
mousedown : mousedown
} ) ;
$elements [ that . id ] = that ;
2010-01-07 20:21:07 +00:00
2011-01-30 03:54:06 +00:00
$ . extend ( that , Ox . jQueryElement ( that ) ) ;
2011-01-16 19:02:29 +00:00
function mousedown ( e ) {
/ *
better mouse events
on mousedown :
trigger mousedown
within 250 msec :
mouseup : trigger anyclick ( "click" would collide with click events of certain widgets )
mouseup + mousedown : trigger doubleclick
after 250 msec :
mouseup + no mousedown within 250 msec : trigger singleclick
2011-01-16 22:23:01 +00:00
no mouseup within 250 msec :
trigger mouserepeat every 50 msec
trigger dragstart
mousemove : trigger drag
mouseup : trigger dragend
2011-01-16 19:02:29 +00:00
* /
2011-01-16 22:23:01 +00:00
var mouseInterval = 0 ;
2011-01-16 19:02:29 +00:00
if ( ! self . mouseTimeout ) {
// first mousedown
that . triggerEvent ( 'mousedown' , e ) ;
self . mouseup = false ;
self . mouseTimeout = setTimeout ( function ( ) {
self . mouseTimeout = 0 ;
if ( self . mouseup ) {
// singleclick
that . triggerEvent ( 'singleclick' , e ) ;
} else {
2011-01-16 22:23:01 +00:00
// mouserepeat, drag
that . triggerEvent ( {
mouserepeat : e ,
dragstart : e
} ) ;
mouseInterval = setInterval ( function ( ) {
that . triggerEvent ( 'mouserepeat' ) ;
} , 50 ) ;
2011-01-16 19:02:29 +00:00
$window . unbind ( 'mouseup' , mouseup )
. mousemove ( mousemove )
. one ( 'mouseup' , function ( e ) {
2011-01-16 22:23:01 +00:00
clearInterval ( mouseInterval ) ;
2011-01-16 19:02:29 +00:00
$window . unbind ( 'mousemove' , mousemove ) ;
that . triggerEvent ( 'dragend' , e ) ;
} ) ;
2011-01-16 22:23:01 +00:00
that . one ( 'mouseleave' , function ( ) {
clearInterval ( mouseInterval ) ;
} ) ;
2011-01-16 19:02:29 +00:00
}
} , 250 ) ;
} else {
// second mousedown
clearTimeout ( self . mouseTimeout ) ;
self . mouseTimeout = 0 ;
that . triggerEvent ( 'doubleclick' ) ;
}
$window . one ( 'mouseup' , mouseup ) ;
function mousemove ( e ) {
that . triggerEvent ( 'drag' , e ) ;
}
function mouseup ( e ) {
if ( ! self . mouseup ) { // fixme: shouldn't be necessary, bound only once
that . triggerEvent ( 'anyclick' , e ) ;
self . mouseup = true ;
}
}
}
2010-01-07 20:21:07 +00:00
self . onChange = function ( ) {
2010-02-07 15:01:22 +00:00
// self.onChange(key, value)
2010-01-07 20:21:07 +00:00
// is called when an option changes
// (to be implemented by widget)
2011-02-25 10:23:33 +00:00
// fixme: rename to self.setOption
2010-01-07 20:21:07 +00:00
} ;
2011-02-07 18:57:05 +00:00
that . _leakSelf = function ( ) { // fixme: remove
return self ;
}
2010-02-05 09:13:03 +00:00
that . bindEvent = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
2010-09-03 08:47:40 +00:00
binds a function to an event triggered by this object
2011-01-30 03:54:06 +00:00
Usage
bindEvent ( event , fn ) or bindEvent ( { event0 : fn0 , event1 : fn1 , ... } )
* * * /
2010-02-05 09:13:03 +00:00
if ( arguments . length == 1 ) {
$ . each ( arguments [ 0 ] , function ( event , fn ) {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'bind', event);
2010-12-31 11:01:35 +00:00
self . $eventHandler . bind ( 'ox_' + event , fn ) ;
2010-02-10 16:37:26 +00:00
} ) ;
2010-02-05 09:13:03 +00:00
} else {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'bind', arguments[0]);
2010-12-31 11:01:35 +00:00
self . $eventHandler . bind ( 'ox_' + arguments [ 0 ] , arguments [ 1 ] ) ;
2010-02-05 09:13:03 +00:00
}
2010-02-06 06:21:01 +00:00
return that ;
2010-09-03 08:47:40 +00:00
}
2010-01-07 20:21:07 +00:00
that . defaults = function ( defaults ) {
2011-01-30 03:54:06 +00:00
/ * * *
sets the default options
Usage
that . defaults ( { key0 : value0 , key1 : value1 , ... } )
* * * /
2010-01-07 20:21:07 +00:00
self . defaults = defaults ;
2010-02-20 10:01:32 +00:00
delete self . options ; // fixme: hackish fix for that = Ox.Foo({...}, self).defaults({...}).options({...})
2010-01-07 20:21:07 +00:00
return that ;
2010-02-05 09:13:03 +00:00
} ;
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that . gainFocus = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
make this object gain focus
* * * /
2010-02-05 09:13:03 +00:00
Ox . Focus . focus ( that . id ) ;
2010-02-09 05:43:36 +00:00
return that ;
2010-02-05 09:13:03 +00:00
} ;
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that . hasFocus = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
returns true if this object has focus
* * * /
2010-02-05 09:13:03 +00:00
return Ox . Focus . focused ( ) == that . id ;
} ;
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that . loseFocus = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
make this object lose focus
* * * /
2010-02-05 09:13:03 +00:00
Ox . Focus . blur ( that . id ) ;
2010-02-09 05:43:36 +00:00
return that ;
2010-02-05 09:13:03 +00:00
} ;
2010-09-03 08:47:40 +00:00
2010-02-05 09:13:03 +00:00
that . options = function ( ) { // fixme: use Ox.getset
2011-01-30 03:54:06 +00:00
/ * * *
get or set options
Usage
2010-01-07 20:21:07 +00:00
that . options ( ) returns self . options
2010-09-03 20:54:40 +00:00
that . options ( 'foo' ) returns self . options . foo
that . options ( 'foo' , x ) sets self . options . foo ,
2010-01-07 20:21:07 +00:00
returns that
that . options ( { foo : x , bar : y } ) sets self . options . foo
and self . options . bar ,
returns that
2011-01-30 03:54:06 +00:00
* * * /
2010-12-24 17:13:18 +00:00
var args ,
length = arguments . length ,
oldOptions ,
ret ;
2010-01-07 20:21:07 +00:00
if ( length == 0 ) {
// options()
2011-01-02 10:01:55 +00:00
ret = self . options ;
2010-09-03 20:54:40 +00:00
} else if ( length == 1 && typeof arguments [ 0 ] == 'string' ) {
2010-01-07 20:21:07 +00:00
// options(str)
2010-07-06 18:28:58 +00:00
ret = self . options ? self . options [ arguments [ 0 ] ] : options [ arguments [ 0 ] ] ;
2010-01-07 20:21:07 +00:00
} else {
// options (str, val) or options({str: val, ...})
// translate (str, val) to ({str: val})
2011-01-02 10:01:55 +00:00
args = Ox . makeObject . apply ( that , arguments || { } ) ;
2010-12-24 17:13:18 +00:00
oldOptions = $ . extend ( { } , self . options ) ;
2010-02-20 09:56:33 +00:00
// if options have not been set, extend defaults,
// otherwise, extend options
2011-01-02 10:01:55 +00:00
//self.options = $.extend(self.options, self.options ? {} : self.defaults, args);
self . options = $ . extend ( { } , self . defaults , self . options , args ) ;
//self.options = $.extend(self.options || self.defaults, args);
2010-02-06 06:21:01 +00:00
$ . each ( args , function ( key , value ) {
2010-12-26 20:16:35 +00:00
// key == 'id' && id && Ox.Event.changeId(id, value);
2010-12-31 07:03:36 +00:00
/*!Ox.equals(value, oldOptions[key]) &&*/ self . onChange ( key , value ) ;
2010-01-07 20:21:07 +00:00
} ) ;
2010-09-07 15:58:15 +00:00
ret = that ;
2010-01-07 20:21:07 +00:00
}
return ret ;
2010-02-10 16:37:26 +00:00
} ;
2010-09-03 08:47:40 +00:00
2010-12-27 05:01:24 +00:00
that . remove = function ( ) { // fixme: clashes with jquery, should be removeElement
2011-01-30 03:54:06 +00:00
/ * * *
remove this element , including its event handler
* * * /
2011-01-03 23:38:43 +00:00
that . loseFocus ( ) ;
delete self . $eventHandler ;
2010-01-07 20:21:07 +00:00
that . $element . remove ( ) ;
2010-06-30 09:27:02 +00:00
delete $elements [ that . ox ] ;
2010-02-06 06:21:01 +00:00
return that ;
2010-02-10 16:37:26 +00:00
} ;
2010-09-03 08:47:40 +00:00
2010-12-26 20:16:35 +00:00
that . triggerEvent = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
2010-12-26 20:16:35 +00:00
triggers an event
2011-01-30 03:54:06 +00:00
Usage
triggerEvent ( event )
triggerEvent ( event , data )
triggerEvent ( { event0 : data0 , event1 : data1 , ... } )
* * * /
2010-12-26 20:16:35 +00:00
if ( Ox . isObject ( arguments [ 0 ] ) ) {
$ . each ( arguments [ 0 ] , function ( event , data ) {
2011-01-17 21:12:17 +00:00
if ( [ 'mousedown' , 'mouserepeat' , 'anyclick' , 'singleclick' , 'doubleclick' , 'dragstart' , 'drag' , 'dragend' , 'playing' ] . indexOf ( event ) == - 1 ) {
2011-01-16 19:02:29 +00:00
Ox . print ( that . id , self . options . id , 'trigger' , event , data ) ;
2011-01-17 21:12:17 +00:00
}
2010-12-31 11:01:35 +00:00
self . $eventHandler . trigger ( 'ox_' + event , data ) ;
2010-09-03 08:47:40 +00:00
} ) ;
} else {
2011-01-17 21:12:17 +00:00
if ( [ 'mousedown' , 'mouserepeat' , 'anyclick' , 'singleclick' , 'doubleclick' , 'dragstart' , 'drag' , 'dragend' , 'playing' ] . indexOf ( arguments [ 0 ] ) == - 1 ) {
2011-01-16 19:02:29 +00:00
Ox . print ( that . id , self . options ? self . options . id : '' , 'trigger' , arguments [ 0 ] , arguments [ 1 ] || { } ) ;
2011-01-17 21:12:17 +00:00
}
2010-12-31 11:01:35 +00:00
self . $eventHandler . trigger ( 'ox_' + arguments [ 0 ] , arguments [ 1 ] || { } ) ;
2010-09-03 08:47:40 +00:00
}
return that ;
} ;
2010-02-05 09:13:03 +00:00
that . unbindEvent = function ( ) {
2011-01-30 03:54:06 +00:00
/ * * *
unbinds a function from an event triggered by this element
Usage
unbindEvent ( event , fn )
unbindEvent ( { event0 : fn0 , event1 : fn1 , ... } )
* * * /
2010-12-26 20:16:35 +00:00
if ( arguments . length == 1 ) {
$ . each ( arguments [ 0 ] , function ( event , fn ) {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'unbind', arguments[0]);
2010-12-31 11:01:35 +00:00
self . $eventHandler . unbind ( 'ox_' + event , fn ) ;
2010-12-26 20:16:35 +00:00
} ) ;
} else {
2011-01-13 19:41:10 +00:00
// Ox.print(that.id, 'unbind', arguments[0]);
2010-12-31 11:01:35 +00:00
self . $eventHandler . unbind ( 'ox_' + arguments [ 0 ] , arguments [ 1 ] ) ;
2010-02-05 09:13:03 +00:00
}
2010-02-06 06:21:01 +00:00
return that ;
2010-02-10 16:37:26 +00:00
} ;
2010-01-07 20:21:07 +00:00
return that ;
}
} ( ) ;
2010-07-24 01:32:08 +00:00
Ox . Window = function ( options , self ) {
self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-07-24 01:32:08 +00:00
. defaults ( {
draggable : true ,
fullscreenable : true , // fixme: silly name
height : 225 ,
resizeable : true ,
scaleable : true ,
width : 400
} )
. options ( options || { } )
self . center = function ( ) {
} ;
self . drag = function ( ) {
} ;
self . fullscreen = function ( ) {
} ;
self . onChange = function ( ) {
} ;
self . reset = function ( ) {
} ;
self . resize = function ( ) {
} ;
self . scale = function ( ) {
} ;
that . close = function ( ) {
} ;
that . open = function ( ) {
} ;
return that ;
} ;
2010-01-07 20:21:07 +00:00
2010-09-03 22:12:25 +00:00
// fixme: this should be Ox.Theme, and provide Ox.Theme.set(), Ox.Theme.load, etc.
2010-12-06 17:42:45 +00:00
/ * *
if name is given as argument , switch to this theme .
return current theme otherwise .
Ox . theme ( )
get theme
Ox . theme ( 'foo' )
set theme to 'foo'
* /
2010-01-07 20:21:07 +00:00
Ox . theme = function ( ) {
var length = arguments . length ,
2010-09-03 20:54:40 +00:00
classes = $body . attr ( 'class' ) . split ( ' ' ) ,
2010-01-07 20:21:07 +00:00
arg , theme ;
$ . each ( classes , function ( i , v ) {
2010-09-03 20:54:40 +00:00
if ( Ox . startsWith ( v , 'OxTheme' ) ) {
theme = v . replace ( 'OxTheme' , '' ) . toLowerCase ( ) ;
2010-01-07 20:21:07 +00:00
if ( length == 1 ) {
$body . removeClass ( v ) ;
}
return false ;
}
} ) ;
if ( length == 1 ) {
arg = arguments [ 0 ]
2010-09-03 20:54:40 +00:00
$body . addClass ( 'OxTheme' + Ox . toTitleCase ( arg ) ) ;
2010-01-07 20:21:07 +00:00
if ( theme ) {
2011-01-15 16:27:10 +00:00
$ ( 'img' ) . each ( function ( ) {
var $this = $ ( this ) ;
2011-01-15 23:26:20 +00:00
if ( ! $this . attr ( 'src' ) ) return ; // fixme: remove, should't be neccessary
2011-01-15 16:27:10 +00:00
$this . attr ( {
src : $this . attr ( 'src' ) . replace (
'/ox.ui.' + theme + '/' , '/ox.ui.' + arg + '/'
)
} ) ;
} ) ;
2010-09-03 20:54:40 +00:00
$ ( 'input[type=image]' ) . each ( function ( ) {
2010-01-07 20:21:07 +00:00
var $this = $ ( this ) ;
$this . attr ( {
2010-09-03 20:54:40 +00:00
src : $this . attr ( 'src' ) . replace (
'/ox.ui.' + theme + '/' , '/ox.ui.' + arg + '/'
2010-01-07 20:21:07 +00:00
)
} ) ;
} ) ;
2010-09-03 20:54:40 +00:00
$ ( '.OxLoadingIcon' ) . each ( function ( ) {
2010-02-20 10:34:50 +00:00
var $this = $ ( this ) ;
$this . attr ( {
2010-09-03 20:54:40 +00:00
src : $this . attr ( 'src' ) . replace (
'/ox.ui.' + theme + '/' , '/ox.ui.' + arg + '/'
2010-02-20 10:34:50 +00:00
)
} ) ;
} )
2010-01-07 20:21:07 +00:00
}
}
return theme ;
} ;
2011-01-13 11:54:31 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Bars
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2010-12-06 17:42:45 +00:00
/ * *
2010-01-07 20:21:07 +00:00
* /
Ox . Bar = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
2010-09-03 20:54:40 +00:00
orientation : 'horizontal' ,
size : 'medium' // can be int
2010-01-07 20:21:07 +00:00
} )
2010-02-18 07:27:32 +00:00
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxBar Ox' + Ox . toTitleCase ( self . options . orientation ) ) ,
2010-01-07 20:21:07 +00:00
dimensions = oxui . getDimensions ( self . options . orientation ) ;
2010-02-20 03:58:46 +00:00
self . options . size = Ox . isString ( self . options . size ) ?
oxui . getBarSize ( self . options . size ) : self . options . size ;
2010-09-03 20:54:40 +00:00
that . css ( dimensions [ 0 ] , '100%' )
. css ( dimensions [ 1 ] , self . options . size + 'px' ) ;
2010-01-07 20:21:07 +00:00
return that ;
} ;
2010-12-06 17:42:45 +00:00
/ * *
2010-07-06 18:28:58 +00:00
* /
Ox . Resizebar = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
2010-07-07 07:18:38 +00:00
collapsed : false ,
2010-07-06 18:28:58 +00:00
collapsible : true ,
2010-09-03 20:54:40 +00:00
edge : 'left' ,
2010-07-06 18:28:58 +00:00
elements : [ ] ,
2010-09-03 20:54:40 +00:00
orientation : 'horizontal' ,
2010-07-06 18:28:58 +00:00
parent : null ,
resizable : true ,
resize : [ ] ,
size : 0
} )
. options ( options || { } ) // fixme: options function should be able to handle undefined, no need for || {}
2010-09-03 20:54:40 +00:00
. addClass ( 'OxResizebar Ox' + Ox . toTitleCase ( self . options . orientation ) )
2010-07-06 18:28:58 +00:00
/ *
. attr ( {
2010-09-03 20:54:40 +00:00
draggable : 'true'
2010-07-06 18:28:58 +00:00
} )
2010-09-03 20:54:40 +00:00
. bind ( 'dragstart' , function ( e ) {
// e.originalEvent.dataTransfer.setDragImage($('<div>')[0], 0, 0);
2010-07-06 18:28:58 +00:00
} )
2010-09-03 20:54:40 +00:00
. bind ( 'drag' , function ( e ) {
Ox . print ( 'dragging' , e )
2010-07-06 18:28:58 +00:00
} )
* /
2011-01-16 19:02:29 +00:00
. bindEvent ( {
2011-01-18 04:07:33 +00:00
anyclick : toggle ,
2011-01-16 19:02:29 +00:00
dragstart : dragstart ,
drag : drag ,
dragend : dragend
} )
2010-09-03 20:54:40 +00:00
. append ( $ ( '<div>' ) . addClass ( 'OxSpace' ) )
. append ( $ ( '<div>' ) . addClass ( 'OxLine' ) )
. append ( $ ( '<div>' ) . addClass ( 'OxSpace' ) ) ;
2010-07-06 18:28:58 +00:00
$ . extend ( self , {
2010-09-03 20:54:40 +00:00
clientXY : self . options . orientation == 'horizontal' ? 'clientY' : 'clientX' ,
2010-07-15 19:04:47 +00:00
dimensions : oxui . getDimensions ( self . options . orientation ) , // fixme: should orientation be the opposite orientation here?
edges : oxui . getEdges ( self . options . orientation ) ,
2011-01-16 19:02:29 +00:00
leftOrTop : self . options . edge == 'left' || self . options . edge == 'top'
2010-07-06 18:28:58 +00:00
} ) ;
2011-01-16 19:02:29 +00:00
function dragstart ( event , e ) {
if ( self . options . resizable && ! self . options . collapsed ) {
2011-01-18 04:07:33 +00:00
Ox . print ( 'DRAGSTART' )
2011-01-16 19:02:29 +00:00
self . drag = {
startPos : e [ self . clientXY ] ,
startSize : self . options . size
}
2011-01-18 04:07:33 +00:00
} else { Ox . print ( 'NO DRAGSTART r !c' , self . options . resizable , ! self . options . collapsed ) }
2011-01-16 19:02:29 +00:00
}
function drag ( event , e ) {
2011-01-17 21:12:17 +00:00
if ( self . options . resizable && ! self . options . collapsed ) {
var d = e [ self . clientXY ] - self . drag . startPos ,
size = self . options . size ;
self . options . size = Ox . limit (
self . drag . startSize + d * ( self . leftOrTop ? 1 : - 1 ) ,
self . options . resize [ 0 ] ,
self . options . resize [ self . options . resize . length - 1 ]
) ;
$ . each ( self . options . resize , function ( i , v ) {
if ( self . options . size >= v - 8 && self . options . size <= v + 8 ) {
self . options . size = v ;
return false ;
}
} ) ;
if ( self . options . size != size ) {
that . css ( self . edges [ self . leftOrTop ? 2 : 3 ] , self . options . size + 'px' ) ;
// fixme: send {size: x}, not x
if ( self . leftOrTop ) {
self . options . elements [ 0 ]
. css ( self . dimensions [ 1 ] , self . options . size + 'px' )
self . options . elements [ 1 ]
. css ( self . edges [ 2 ] , ( self . options . size + 1 ) + 'px' )
} else {
self . options . elements [ 0 ]
. css ( self . edges [ 3 ] , ( self . options . size + 1 ) + 'px' )
self . options . elements [ 1 ]
. css ( self . dimensions [ 1 ] , self . options . size + 'px' )
}
triggerEvents ( 'resize' ) ;
self . options . parent . updateSize ( self . leftOrTop ? 0 : 1 , self . options . size ) ; // fixme: listen to event instead?
2010-09-18 10:48:20 +00:00
}
2010-09-17 16:37:11 +00:00
}
2010-07-06 18:28:58 +00:00
}
2011-01-16 19:02:29 +00:00
function dragend ( ) {
2011-01-17 21:12:17 +00:00
if ( self . options . resizable && ! self . options . collapsed ) {
self . options . size != self . drag . startSize && triggerEvents ( 'resizeend' ) ;
}
2010-07-06 18:28:58 +00:00
}
function toggle ( ) {
2010-12-23 02:34:31 +00:00
if ( self . options . collapsible ) {
2011-01-04 02:29:30 +00:00
// fixme: silly, pass a parameter
2011-01-16 19:02:29 +00:00
self . options . parent . toggle (
self . leftOrTop ? 0 :
self . options . parent . options ( 'elements' ) . length - 1
) ;
2010-12-23 02:34:31 +00:00
self . options . collapsed = ! self . options . collapsed ;
}
2010-11-28 15:06:47 +00:00
/ *
2011-01-13 12:43:20 +00:00
//Ox.print('toggle');
2010-07-16 06:50:30 +00:00
if ( Ox . isUndefined ( self . options . position ) ) {
self . options . position = parseInt ( self . options . parent . css ( self . options . edge ) ) +
2010-11-28 15:06:47 +00:00
( self . options . collapsed ? self . options . size : 0 ) ;
2010-07-16 06:50:30 +00:00
}
var size = self . options . position -
( self . options . collapsed ? 0 : self . options . size ) ,
2010-07-07 07:18:38 +00:00
animate = { } ;
2011-01-13 12:43:20 +00:00
//Ox.print('s.o.e', self.options.edge);
2010-07-07 07:18:38 +00:00
animate [ self . options . edge ] = size ;
self . options . parent . animate ( animate , 200 , function ( ) {
2010-11-28 15:06:47 +00:00
var i = ( self . options . edge == 'left' || self . options . edge == 'top' ) ? 0 : 1 ;
2010-07-07 07:18:38 +00:00
self . options . collapsed = ! self . options . collapsed ;
2010-11-28 15:06:47 +00:00
Ox . Event . trigger ( self . ids [ i ] , 'toggle' , self . options . collapsed ) ;
Ox . Event . trigger ( self . ids [ 1 - i ] , 'resize' , self . options . elements [ 1 - i ] [ self . dimensions [ 1 ] ] ( ) ) ;
2010-07-07 07:18:38 +00:00
} ) ;
2010-11-28 15:06:47 +00:00
* /
2010-07-06 18:28:58 +00:00
}
2011-01-15 14:22:05 +00:00
function triggerEvents ( event ) {
self . options . elements [ 0 ] . triggerEvent ( event ,
self . leftOrTop ?
self . options . size :
self . options . elements [ 0 ] [ self . dimensions [ 1 ] ] ( )
) ;
self . options . elements [ 1 ] . triggerEvent ( event ,
self . leftOrTop ?
self . options . elements [ 1 ] [ self . dimensions [ 1 ] ] ( ) :
self . options . size
) ;
}
2010-07-06 18:28:58 +00:00
return that ;
} ;
2010-12-06 17:42:45 +00:00
/ * *
2010-01-07 20:21:07 +00:00
* /
Ox . Tabbar = function ( options , self ) {
var self = self || { } ,
that = new Ox . Bar ( {
size : 20
} , self )
. defaults ( {
selected : 0 ,
2010-02-10 09:59:59 +00:00
tabs : [ ]
2010-01-07 20:21:07 +00:00
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTabbar' ) ;
2010-01-07 20:21:07 +00:00
2010-02-08 09:35:24 +00:00
Ox . ButtonGroup ( {
2010-02-10 09:59:59 +00:00
buttons : self . options . tabs ,
2010-02-08 09:35:24 +00:00
group : true ,
selectable : true ,
selected : self . options . selected ,
2010-09-03 20:54:40 +00:00
size : 'medium' ,
style : 'tab' ,
2010-02-08 09:35:24 +00:00
} ) . appendTo ( that ) ;
2010-01-07 20:21:07 +00:00
return that ;
} ;
2010-12-06 17:42:45 +00:00
/ * *
fixme : no need for this
* /
2010-01-07 20:21:07 +00:00
Ox . Toolbar = function ( options , self ) {
var self = self || { } ,
that = new Ox . Bar ( {
2010-02-07 15:01:22 +00:00
size : oxui . getBarSize ( options . size )
} , self ) ;
2010-01-07 20:21:07 +00:00
return that ;
} ;
2011-02-26 04:22:49 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Calendars
=== === === === === === === === === === === === === === === === === === === === === === === === === =
2010-01-27 12:30:00 +00:00
* /
2011-02-26 04:22:49 +00:00
Ox . Calendar = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
dates : [ ] ,
height : 256 ,
width : 256
} )
. options ( options || { } ) ;
return that ;
} ;
2010-01-27 12:30:00 +00:00
Ox . Dialog = function ( options , self ) {
2010-02-20 07:46:31 +00:00
2010-02-18 07:27:32 +00:00
// fixme: dialog should be derived from a generic draggable
2010-09-04 14:28:40 +00:00
// fixme: buttons should have a close attribute, or the dialog a close id
2010-01-27 12:30:00 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-02-20 03:42:03 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
title : '' ,
2010-02-20 03:42:03 +00:00
buttons : [ ] ,
2010-12-24 17:13:18 +00:00
content : null ,
2010-02-21 06:47:18 +00:00
height : 216 ,
2010-12-26 20:16:35 +00:00
keys : { } ,
2010-02-21 06:47:18 +00:00
minHeight : 144 ,
2010-02-21 05:40:11 +00:00
minWidth : 256 ,
2010-09-13 11:53:31 +00:00
movable : true ,
2010-07-24 01:32:08 +00:00
padding : 16 ,
2010-09-13 11:53:31 +00:00
resizable : true ,
2010-02-21 05:20:39 +00:00
width : 384
2010-02-20 03:42:03 +00:00
} )
. options ( options || { } )
2010-09-04 14:28:40 +00:00
. addClass ( 'OxDialog' )
2010-12-26 20:16:35 +00:00
. bindEvent ( {
key _enter : function ( ) {
keypress ( 'enter' ) ;
} ,
2010-09-04 14:28:40 +00:00
key _escape : function ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('KEY ESCAPE')
2010-12-26 20:16:35 +00:00
keypress ( 'escape' ) ;
2010-09-04 14:28:40 +00:00
}
} ) ;
2010-02-20 07:46:31 +00:00
2010-09-13 11:53:31 +00:00
$ . extend ( self , {
initialWidth : self . options . width ,
initialHeight : self . options . height
} )
2010-01-31 08:03:22 +00:00
that . $titlebar = new Ox . Bar ( {
2010-09-03 20:54:40 +00:00
size : 'medium'
2010-01-31 08:03:22 +00:00
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTitleBar' )
2010-01-27 12:30:00 +00:00
. appendTo ( that ) ;
2010-09-13 11:53:31 +00:00
self . options . movable && that . $titlebar
2011-01-16 19:02:29 +00:00
. dblclick ( center )
. bindEvent ( {
dragstart : dragstart ,
drag : drag
} ) ;
2010-09-04 14:28:40 +00:00
2010-02-09 05:43:36 +00:00
that . $title = new Ox . Element ( )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTitle' )
2010-02-20 03:42:03 +00:00
. html ( self . options . title )
2010-02-09 05:43:36 +00:00
. appendTo ( that . $titlebar ) ;
2010-09-04 14:28:40 +00:00
2010-07-24 01:32:08 +00:00
that . $content = new Ox . Element ( )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxContent' )
2010-07-24 01:32:08 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
padding : self . options . padding + 'px' ,
overflow : 'auto'
2010-07-24 01:32:08 +00:00
} )
2010-12-24 17:13:18 +00:00
. append ( self . options . content )
2010-01-27 12:30:00 +00:00
. appendTo ( that ) ;
2010-09-04 14:28:40 +00:00
2010-02-20 04:26:53 +00:00
that . $buttonsbar = new Ox . Bar ( { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxButtonsBar' )
2010-01-27 12:30:00 +00:00
. appendTo ( that ) ;
2010-12-24 17:13:18 +00:00
loadButtons ( ) ;
2010-09-04 14:28:40 +00:00
2010-12-26 20:16:35 +00:00
//that.$buttons[0].focus();
2010-09-04 14:28:40 +00:00
that . $layer = new Ox . Element ( ) // fixme: Layer widget that would handle click?
2010-09-03 20:54:40 +00:00
. addClass ( 'OxLayer' )
2010-02-21 07:09:32 +00:00
. mousedown ( mousedownLayer )
. mouseup ( mouseupLayer ) ;
2010-02-20 07:46:31 +00:00
2010-02-21 06:23:37 +00:00
function center ( ) {
2010-07-20 20:04:13 +00:00
var documentHeight = $document . height ( ) ;
2010-02-21 06:23:37 +00:00
that . css ( {
left : 0 ,
2010-09-03 20:54:40 +00:00
top : Math . max ( parseInt ( - documentHeight / 10 ) , self . options . height - documentHeight + 40 ) + 'px' ,
2010-02-21 06:23:37 +00:00
right : 0 ,
bottom : 0 ,
2010-09-03 20:54:40 +00:00
margin : 'auto'
2010-02-21 06:23:37 +00:00
} ) ;
}
2011-01-16 19:02:29 +00:00
function dragstart ( event , e ) {
self . drag = {
bodyWidth : $body . width ( ) ,
bodyHeight : $document . height ( ) ,
elementWidth : that . width ( ) ,
offset : that . offset ( ) ,
x : e . clientX ,
y : e . clientY
} ;
that . css ( {
margin : 0
2010-02-21 05:20:39 +00:00
} ) ;
2011-01-16 19:02:29 +00:00
}
function drag ( event , e ) {
var left = Ox . limit (
self . drag . offset . left - self . drag . x + e . clientX ,
24 - self . drag . elementWidth , self . drag . bodyWidth - 24
//0, self.drag.documentWidth - self.drag.elementWidth
) ,
top = Ox . limit (
self . drag . offset . top - self . drag . y + e . clientY ,
24 , self . drag . bodyHeight - 24
//24, self.drag.documentHeight - self.drag.elementHeight
) ;
that . css ( {
left : left + 'px' ,
top : top + 'px'
} ) ;
}
function dragstartResize ( event , e ) {
self . drag = {
documentWidth : $document . width ( ) ,
documentHeight : $document . height ( ) ,
elementWidth : that . width ( ) ,
elementHeight : that . height ( ) ,
offset : that . offset ( ) ,
x : e . clientX ,
y : e . clientY
} ;
$ . extend ( self . drag , {
ratio : self . drag . elementWidth / self . drag . elementHeight
} ) ;
that . css ( {
left : self . drag . offset . left ,
top : self . drag . offset . top ,
margin : 0
2010-09-07 15:58:15 +00:00
} ) ;
2010-02-21 05:20:39 +00:00
}
2011-01-16 19:02:29 +00:00
function dragResize ( event , e ) {
if ( ! e . shiftKey ) {
self . drag . ratio = self . options . width / self . options . height ;
}
self . options . width = Ox . limit (
self . drag . elementWidth - self . drag . x + e . clientX ,
self . options . minWidth ,
Math . min (
self . drag . documentWidth ,
self . drag . documentWidth - self . drag . offset . left
)
) ;
self . options . height = Ox . limit (
self . drag . elementHeight - self . drag . y + e . clientY ,
self . options . minHeight ,
Math . min (
self . drag . documentHeight ,
self . drag . documentHeight - self . drag . offset . top
)
) ;
if ( e . shiftKey ) {
self . options . height = Ox . limit (
self . options . width / self . drag . ratio ,
self . options . minHeight ,
Math . min (
self . drag . documentHeight ,
self . drag . documentHeight - self . drag . offset . top
)
) ;
self . options . width = self . options . height * self . drag . ratio ;
}
that . width ( self . options . width ) ;
that . height ( self . options . height ) ;
that . $content . height ( self . options . height - 48 - 2 * self . options . padding ) ; // fixme: this should happen automatically
}
function dragendResize ( event , e ) {
triggerResizeEvent ( ) ;
}
2010-07-24 01:32:08 +00:00
function getButtonById ( id ) {
2010-12-26 20:16:35 +00:00
var ret = null ;
2011-01-13 12:43:20 +00:00
//Ox.print('that.$buttons', that.$buttons, id)
2010-07-24 01:32:08 +00:00
$ . each ( that . $buttons , function ( i , button ) {
2010-09-03 20:54:40 +00:00
if ( button . options ( 'id' ) == id ) {
2010-07-24 01:32:08 +00:00
ret = button ;
return false ;
}
} ) ;
return ret ;
}
2010-12-26 20:16:35 +00:00
function keypress ( key ) {
var id = self . options . keys [ key ] ;
2011-01-13 12:43:20 +00:00
//Ox.print('X', key, self.options.keys)
2010-12-26 20:16:35 +00:00
id && getButtonById ( id ) . $element . trigger ( 'click' ) ;
}
2010-12-24 17:13:18 +00:00
function loadButtons ( ) {
2011-01-13 12:43:20 +00:00
/ * O x . p r i n t ( ' l o a d B u t t o n s ' , $ . m a p ( s e l f . o p t i o n s . b u t t o n s , f u n c t i o n ( v ) {
2010-12-26 20:16:35 +00:00
return v ;
2011-01-13 12:43:20 +00:00
} ) ) ; * /
2010-12-24 17:13:18 +00:00
if ( that . $buttons ) {
that . $buttons . forEach ( function ( $button ) {
$button . remove ( ) ;
} ) ;
that . $resize . remove ( ) ;
2010-12-26 20:16:35 +00:00
// that.$buttonsbar.empty();
2010-12-24 17:13:18 +00:00
}
that . $buttons = [ ] ;
if ( ! Ox . isArray ( self . options . buttons [ 0 ] ) ) {
self . options . buttons = [ [ ] , self . options . buttons ] ;
}
2011-01-13 12:43:20 +00:00
//Ox.print('--- one', self.options.buttons[0]);
2010-12-24 17:13:18 +00:00
$ . each ( self . options . buttons [ 0 ] , function ( i , button ) {
// Ox.print('---', button, self.options.buttons)
that . $buttons [ i ] = button
. addClass ( 'OxLeft' )
. appendTo ( that . $buttonsbar ) ;
} ) ;
if ( self . options . resizable ) {
that . $resize = new Ox . Element ( )
. addClass ( 'OxResize' )
. dblclick ( reset )
2011-01-16 19:02:29 +00:00
. bindEvent ( {
dragstart : dragstartResize ,
drag : dragResize ,
dragend : dragendResize
} )
2010-12-24 17:13:18 +00:00
. appendTo ( that . $buttonsbar ) ;
}
2011-01-13 12:43:20 +00:00
//Ox.print('--- two', self.options.buttons[1]);
2010-12-24 17:13:18 +00:00
$ . each ( self . options . buttons [ 1 ] . reverse ( ) , function ( i , button ) {
//Ox.print('---', button, self.options.buttons)
that . $buttons [ that . $buttons . length ] = button
. addClass ( 'OxRight' )
. appendTo ( that . $buttonsbar ) ;
} ) ;
}
2010-02-21 07:09:32 +00:00
function mousedownLayer ( ) {
that . $layer . stop ( ) . animate ( {
opacity : 0.5
2010-03-06 12:59:13 +00:00
} , 0 ) ;
2010-02-21 07:09:32 +00:00
}
function mouseupLayer ( ) {
that . $layer . stop ( ) . animate ( {
opacity : 0
2010-03-06 12:59:13 +00:00
} , 0 ) ;
2010-02-21 07:09:32 +00:00
}
2010-02-21 06:47:18 +00:00
function reset ( ) {
2010-09-13 11:53:31 +00:00
$ . extend ( self . options , {
height : self . initialHeight ,
width : self . initialWidth
} ) ;
2010-09-04 14:28:40 +00:00
that / * . css ( {
2010-07-24 01:32:08 +00:00
left : Math . max ( that . offset ( ) . left , 24 - that . width ( ) )
2010-09-04 14:28:40 +00:00
} ) * /
2010-02-21 08:58:41 +00:00
. width ( self . options . width )
. height ( self . options . height ) ;
2010-07-24 01:32:08 +00:00
that . $content . height ( self . options . height - 48 - 2 * self . options . padding ) ; // fixme: this should happen automatically
2010-09-13 11:53:31 +00:00
triggerResizeEvent ( ) ;
2010-02-21 06:47:18 +00:00
}
2010-09-13 11:53:31 +00:00
function triggerResizeEvent ( ) {
that . triggerEvent ( 'resize' , {
width : self . options . width ,
height : self . options . height
} ) ;
}
2010-01-31 08:03:22 +00:00
self . onChange = function ( key , value ) {
2010-12-24 17:13:18 +00:00
if ( key == 'buttons' ) {
loadButtons ( ) ;
/ *
that . $buttonsbar . children ( ) . animate ( {
opacity : 0
} , 100 , function ( ) {
loadButtons ( ) ;
that . $buttonsbar . children ( ) . animate ( {
opacity : 1
} , 100 ) ;
} ) ;
* /
} else if ( key == 'content' ) {
that . $content . html ( value ) ;
} else if ( key == 'height' || key == 'width' ) {
2010-07-24 01:32:08 +00:00
that . animate ( {
2010-09-03 20:54:40 +00:00
height : self . options . height + 'px' ,
width : self . options . width + 'px'
2010-09-13 11:53:31 +00:00
} , 100 ) ;
2010-07-24 01:32:08 +00:00
that . $content . height ( self . options . height - 48 - 2 * self . options . padding ) ; // fixme: this should happen automatically
2010-09-03 20:54:40 +00:00
} else if ( key == 'title' ) {
2010-07-20 20:04:13 +00:00
that . $title . animate ( {
opacity : 0
2010-09-13 11:53:31 +00:00
} , 100 , function ( ) {
2010-07-20 20:04:13 +00:00
that . $title . html ( value ) . animate ( {
opacity : 1
2010-09-13 11:53:31 +00:00
} , 100 ) ;
2010-07-20 20:04:13 +00:00
} ) ;
2010-01-31 08:03:22 +00:00
}
}
2010-02-20 07:46:31 +00:00
2010-09-13 11:53:31 +00:00
that . center = function ( ) {
} ;
2010-02-20 07:46:31 +00:00
2010-01-31 09:32:41 +00:00
that . close = function ( callback ) {
callback = callback || function ( ) { } ;
2010-01-27 12:30:00 +00:00
that . animate ( {
opacity : 0
} , 200 , function ( ) {
2010-12-26 20:16:35 +00:00
that . $buttons . forEach ( function ( $button ) {
$button . remove ( ) ;
} ) ;
that . loseFocus ( ) ;
2010-01-27 12:30:00 +00:00
that . $layer . remove ( ) ;
2010-12-26 20:16:35 +00:00
that . remove ( ) ;
2010-01-31 09:32:41 +00:00
callback ( ) ;
2010-02-20 09:56:33 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
$window . unbind ( 'mouseup' , mouseupLayer )
2010-02-20 09:56:33 +00:00
return that ;
2010-09-13 11:53:31 +00:00
} ;
2010-02-20 07:46:31 +00:00
2010-12-24 17:13:18 +00:00
that . content = function ( $element ) {
that . $content . empty ( ) . append ( $element ) ;
return that ;
}
2010-02-20 07:46:31 +00:00
that . disable = function ( ) {
2010-02-10 16:37:26 +00:00
// to be used on submit of form, like login
2010-09-03 20:54:40 +00:00
that . $layer . addClass ( 'OxFront' ) ;
2010-07-20 20:04:13 +00:00
return that ;
2010-02-10 16:37:26 +00:00
} ;
2010-02-20 07:46:31 +00:00
2010-07-24 01:32:08 +00:00
that . disableButton = function ( id ) {
getButtonById ( id ) . options ( {
disabled : true
} ) ;
2010-09-04 14:28:40 +00:00
return that ;
2010-07-24 01:32:08 +00:00
} ;
2010-02-20 07:46:31 +00:00
that . enable = function ( ) {
2010-09-03 20:54:40 +00:00
that . $layer . removeClass ( 'OxFront' ) ;
2010-07-20 20:04:13 +00:00
return that ;
2010-07-24 01:32:08 +00:00
} ;
that . enableButton = function ( id ) {
getButtonById ( id ) . options ( {
disabled : false
} ) ;
2010-09-04 14:28:40 +00:00
return that ;
2010-07-24 01:32:08 +00:00
} ;
2010-02-20 07:46:31 +00:00
2010-01-27 12:30:00 +00:00
that . open = function ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('before open')
2010-02-20 07:46:31 +00:00
that . $layer . appendTo ( $body ) ;
2010-01-27 12:30:00 +00:00
that . css ( {
opacity : 0
2010-05-05 18:27:09 +00:00
} ) . appendTo ( $body ) . animate ( {
2010-01-27 12:30:00 +00:00
opacity : 1
} , 200 ) ;
2010-09-04 14:28:40 +00:00
center ( ) ;
reset ( ) ;
2010-12-26 20:16:35 +00:00
// fixme: the following line prevents preview-style dialog
that . gainFocus ( ) ;
2010-09-03 20:54:40 +00:00
$window . bind ( 'mouseup' , mouseupLayer )
2011-01-13 12:43:20 +00:00
//Ox.print('after open')
2010-01-27 12:30:00 +00:00
return that ;
2010-07-24 01:32:08 +00:00
} ;
2010-02-20 07:46:31 +00:00
2010-11-25 10:05:50 +00:00
that . size = function ( width , height , callback ) {
2010-09-13 11:53:31 +00:00
$ . extend ( self , {
initialWidth : width ,
initialHeight : height
} ) ;
$ . extend ( self . options , {
width : width ,
height : height
} ) ;
// fixme: duplicated
that . animate ( {
height : self . options . height + 'px' ,
width : self . options . width + 'px'
} , 100 , function ( ) {
that . $content . height ( self . options . height - 48 - 2 * self . options . padding ) ; // fixme: this should happen automatically
callback ( ) ;
} ) ;
}
2010-01-27 12:30:00 +00:00
return that ;
2010-02-20 07:46:31 +00:00
2010-01-27 12:30:00 +00:00
}
2010-01-07 20:21:07 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Forms
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2010-07-24 01:32:08 +00:00
Ox . Filter = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * * *
Options :
Methods :
Events :
* * * /
2011-01-23 04:59:16 +00:00
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
2010-07-24 01:32:08 +00:00
. defaults ( {
2011-01-24 04:08:19 +00:00
findKeys : [ ] ,
2011-01-23 04:59:16 +00:00
query : {
conditions : [ ] ,
operator : '&'
2011-01-24 04:08:19 +00:00
} ,
sortKeys : [ ] ,
viewKeys : [ ]
2010-07-24 01:32:08 +00:00
} )
. options ( options || { } ) ;
2011-01-24 04:08:19 +00:00
Ox . print ( 'Ox.Filter self.options' , self . options )
2011-01-23 04:59:16 +00:00
$ . extend ( self , {
2011-01-24 04:08:19 +00:00
conditionOperators : {
2011-01-23 04:59:16 +00:00
date : [
2011-01-24 04:08:19 +00:00
{ id : '' , title : 'is' } ,
{ id : '!' , title : 'is not' } ,
{ id : '<' , title : 'is before' } ,
{ id : '>' , title : 'is after' } ,
{ id : '>&<' , title : 'is between' } ,
{ id : '<|>' , title : 'is not between' }
2011-01-23 04:59:16 +00:00
] ,
list : [
2011-01-24 04:08:19 +00:00
{ id : '' , title : 'is' } ,
{ id : '!' , title : 'is not' }
2011-01-23 04:59:16 +00:00
] ,
number : [
2011-01-24 04:08:19 +00:00
{ id : '' , title : 'is' } ,
{ id : '!' , title : 'is not' } ,
{ id : '<' , title : 'is less than' } ,
{ id : '>' , title : 'is greater than' } ,
{ id : '>&<' , title : 'is between' } ,
{ id : '<|>' , title : 'is not between' }
2011-01-23 04:59:16 +00:00
] ,
string : [
2011-01-24 04:08:19 +00:00
{ id : '=' , title : 'is' } ,
{ id : '!=' , title : 'is not' } ,
{ id : '^' , title : 'begins with' } ,
{ id : '$' , title : 'ends with' } ,
{ id : '' , title : 'contains' } ,
{ id : '!' , title : 'does not contain' }
2011-01-23 04:59:16 +00:00
] ,
text : [
2011-01-24 04:08:19 +00:00
{ id : '' , title : 'contains' } ,
{ id : '!' , title : 'does not contain' }
2011-01-23 04:59:16 +00:00
]
2011-01-24 04:08:19 +00:00
} ,
operators : [
{ id : '&' , title : 'all' } ,
{ id : '|' , title : 'any' }
]
2011-01-23 04:59:16 +00:00
} ) ;
2011-01-24 04:08:19 +00:00
if ( ! self . options . query . conditions . length ) {
self . options . query . conditions = [ {
key : self . options . findKeys [ 0 ] . id ,
value : '' ,
operator : self . conditionOperators [
getConditionType ( self . options . findKeys [ 0 ] . type )
] [ 0 ] . id
} ] ;
}
2011-01-23 04:59:16 +00:00
self . $operator = new Ox . FormElementGroup ( {
elements : [
new Ox . Label ( {
title : 'Match' ,
overlap : 'right' ,
width : 48
} ) ,
2011-01-24 04:08:19 +00:00
new Ox . FormElementGroup ( {
elements : [
new Ox . Select ( {
items : self . operators ,
width : 48
} )
. bindEvent ( {
change : changeOperator
} ) ,
new Ox . Label ( {
overlap : 'left' ,
title : 'of the following conditions' ,
width : 160
} )
2011-01-23 04:59:16 +00:00
] ,
2011-01-24 04:08:19 +00:00
float : 'right' ,
width : 208
} )
2011-01-23 04:59:16 +00:00
] ,
float : 'left' ,
} ) ;
self . $buttons = [ ] ;
self . $conditions = $ . map ( self . options . query . conditions , function ( condition , i ) {
return constructCondition ( condition , i ) ;
} ) ;
self . $limit = new Ox . InputGroup ( {
inputs : [
new Ox . Checkbox ( {
width : 16
} ) ,
new Ox . FormElementGroup ( {
elements : [
new Ox . Input ( {
width : 56
} ) ,
new Ox . Select ( {
items : [
{ id : 'items' , title : 'items' } ,
{ } ,
{ id : 'hours' , title : 'hours' } ,
{ id : 'days' , title : 'days' } ,
{ } ,
{ id : 'GB' , title : 'GB' }
] ,
overlap : 'left' ,
width : 64
} )
] ,
float : 'right' ,
width : 120
} ) ,
new Ox . Select ( {
2011-01-24 04:08:19 +00:00
items : self . options . sortKeys ,
2011-01-23 04:59:16 +00:00
width : 128
2011-01-24 04:08:19 +00:00
} ) ,
new Ox . FormElementGroup ( {
elements : [
new Ox . Select ( {
items : [
{ id : 'ascending' , title : 'ascending' } ,
{ id : 'descending' , title : 'descending' }
] ,
width : 96
} ) ,
new Ox . Label ( {
overlap : 'left' ,
title : 'order' ,
width : 72
} )
] ,
float : 'right' ,
width : 168
2011-01-23 04:59:16 +00:00
} )
] ,
separators : [
{ title : 'Limit to' , width : 56 } ,
2011-01-24 04:08:19 +00:00
{ title : 'sorted by' , width : 64 } ,
{ title : 'in' , width : 32 }
]
} ) ;
self . $view = new Ox . InputGroup ( {
inputs : [
new Ox . Checkbox ( {
width : 16
} ) ,
new Ox . Select ( {
items : self . options . viewKeys ,
width : 128
} )
] ,
separators : [
{ title : 'By default, view' , width : 112 }
]
} ) ;
self . $save = new Ox . InputGroup ( {
inputs : [
new Ox . Checkbox ( {
width : 16
} ) ,
new Ox . Input ( {
id : 'list' ,
width : 128
} )
] ,
separators : [
{ title : 'Save as Smart List' , width : 112 }
2011-01-23 04:59:16 +00:00
]
} ) ;
2011-01-24 04:08:19 +00:00
self . $items = $ . merge ( $ . merge ( [ self . $operator ] , self . $conditions ) , [ self . $limit , self . $view , self . $save ] ) ;
2011-01-23 04:59:16 +00:00
2011-01-24 04:08:19 +00:00
self . $form = new Ox . Form ( {
2011-01-23 04:59:16 +00:00
items : self . $items
2011-01-24 04:08:19 +00:00
} ) ;
that . $element = self . $form . $element ;
2011-01-23 04:59:16 +00:00
function addCondition ( pos ) {
2011-01-24 04:08:19 +00:00
var key = self . options . findKeys [ 0 ] ;
2011-01-23 04:59:16 +00:00
self . options . query . conditions . splice ( pos , 0 , {
key : key . id ,
value : '' ,
2011-01-24 04:08:19 +00:00
operator : self . conditionOperators [ key . type ] [ 0 ] . id
2011-01-23 04:59:16 +00:00
} ) ;
self . $conditions . splice ( pos , 0 , constructCondition ( { } , pos ) ) ;
updateConditions ( ) ;
2011-01-24 04:08:19 +00:00
self . $form . addItem ( pos + 1 , self . $conditions [ pos ] ) ;
}
2011-01-30 03:54:06 +00:00
function addGroup ( pos ) {
self . $form . addItem ( pos + 1 , constructGroup ( pos ) )
}
2011-01-24 04:08:19 +00:00
function changeConditionKey ( pos , key ) {
Ox . print ( 'changeConditionKey' , pos , key ) ;
var oldOperator = self . options . query . conditions [ pos ] . operator ,
oldType = Ox . getObjectById (
self . options . findKeys , self . options . query . conditions [ pos ] . key
) . type ,
newType = Ox . getObjectById (
self . options . findKeys , key
) . type ,
oldConditionType = getConditionType ( oldType ) ,
newConditionType = getConditionType ( newType ) ;
changeConditionType = oldConditionType != newConditionType ;
Ox . print ( 'old new' , oldConditionType , newConditionType )
self . options . query . conditions [ pos ] . key = key ;
if ( changeConditionType ) {
self . $conditions [ pos ] . replaceElement ( 1 , constructConditionOperator ( pos , oldOperator ) ) ;
}
}
function changeConditionOperator ( pos , operator ) {
2011-01-30 03:54:06 +00:00
self . options . query . conditions [ pos ] . operator = operator ;
2011-01-24 04:08:19 +00:00
}
function changeOperator ( event , data ) {
self . options . query . operator = data . selected [ 0 ] . id ;
2011-01-23 04:59:16 +00:00
}
function constructCondition ( condition , pos ) {
var $condition ;
return $condition = new Ox . FormElementGroup ( {
elements : [
new Ox . Select ( {
2011-01-24 04:08:19 +00:00
items : $ . map ( self . options . findKeys , function ( key ) {
return {
id : key . id ,
title : key . title
} ;
} ) ,
//items: $.extend({}, self.options.findKeys), // fixme: Ox.Menu messes with keys
overlap : 'right' ,
width : 128
} )
. bindEvent ( {
change : function ( event , data ) {
Ox . print ( 'event' , event )
changeConditionKey ( $condition . data ( 'position' ) , data . selected [ 0 ] . id ) ;
}
2011-01-23 04:59:16 +00:00
} ) ,
2011-01-24 04:08:19 +00:00
constructConditionOperator ( pos ) ,
2011-01-23 04:59:16 +00:00
new Ox . Input ( {
width : 256
} ) ,
new Ox . Button ( {
disabled : self . options . query . conditions . length == 1 ,
id : 'remove' ,
title : 'remove' ,
type : 'image'
} )
. css ( { margin : '0 4px 0 8px' } )
. bindEvent ( {
click : function ( ) {
removeCondition ( $condition . data ( 'position' ) ) ;
}
} ) ,
new Ox . Button ( {
id : 'add' ,
title : 'add' ,
type : 'image'
} )
. css ( { margin : '0 4px 0 4px' } )
. bindEvent ( {
click : function ( ) {
2011-01-24 04:08:19 +00:00
Ox . print ( 'add' , $ ( this ) . parent ( ) . parent ( ) . data ( 'position' ) )
2011-01-23 04:59:16 +00:00
addCondition ( $condition . data ( 'position' ) + 1 )
}
} ) ,
new Ox . Button ( {
2011-01-30 03:54:06 +00:00
id : 'addgroup' ,
2011-01-23 04:59:16 +00:00
title : 'more' ,
type : 'image'
} )
2011-01-24 04:08:19 +00:00
. css ( { margin : '0 0 0 4px' } )
. bindEvent ( {
click : function ( ) {
2011-01-30 03:54:06 +00:00
addGroup ( $condition . data ( 'position' ) + 1 )
2011-01-24 04:08:19 +00:00
}
} )
2011-01-23 04:59:16 +00:00
]
} )
. data ( { position : pos } ) ;
}
2011-01-24 04:08:19 +00:00
function constructConditionOperator ( pos , selected ) {
return new Ox . Select ( {
items : $ . map ( self . conditionOperators [ getConditionType (
Ox . getObjectById (
self . options . findKeys ,
self . options . query . conditions [ pos ] . key
) . type
) ] , function ( operator ) {
return {
checked : operator . id == selected , // fixme: should be "selected", not "checked"
id : operator . operator ,
title : operator . title
} ;
} ) ,
overlap : 'right' ,
width : 128
} )
. bindEvent ( {
change : function ( event , data ) {
changeConditionOperator ( /*$condition.data('position')*/ pos , data . selected [ 0 ] . id )
}
} ) ;
}
2011-01-30 03:54:06 +00:00
function constructGroup ( ) {
// fixme: duplicated
return new Ox . FormElementGroup ( {
elements : [
new Ox . Label ( {
title : self . options . operator == '&' ? 'and' : 'or' ,
overlap : 'right' ,
width : 48
} ) ,
new Ox . FormElementGroup ( {
elements : [
new Ox . Select ( {
items : $ . map ( self . operators , function ( operator ) {
Ox . print ( '!!!!' , {
checked : operator . id != self . options . operator ,
id : operator . id ,
title : operator . title
} ) ;
return {
//checked: operator.id != self.options.operator,
id : operator . id ,
title : operator . title
}
} ) ,
width : 48
} )
. bindEvent ( {
change : changeOperator
} ) ,
new Ox . Label ( {
overlap : 'left' ,
title : 'of the following conditions' ,
width : 160
} )
] ,
float : 'right' ,
width : 208
} )
] ,
float : 'left' ,
} ) ;
}
2011-01-24 04:08:19 +00:00
function getConditionType ( type ) {
type = Ox . isArray ( type ) ? type [ 0 ] : type ;
2011-01-30 03:54:06 +00:00
if ( [ 'float' , 'integer' , 'year' ] . indexOf ( type ) > - 1 ) {
2011-01-24 04:08:19 +00:00
type = 'number' ;
}
return type ;
}
2011-01-23 04:59:16 +00:00
function removeCondition ( pos ) {
self . options . query . conditions . splice ( pos , 1 ) ;
self . $conditions . splice ( pos , 1 ) ;
updateConditions ( ) ;
2011-01-24 04:08:19 +00:00
self . $form . removeItem ( pos + 1 ) ;
2011-01-23 04:59:16 +00:00
}
function updateConditions ( ) {
self . $conditions . forEach ( function ( condition , pos ) {
condition . data ( { position : pos } ) ;
} ) ;
self . $conditions [ 0 ] . options ( 'elements' ) [ 3 ] . options ( {
disabled : self . options . query . conditions . length == 1
} ) ;
}
2010-07-24 01:32:08 +00:00
return that ;
} ;
2010-02-10 16:37:26 +00:00
Ox . Form = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
* /
2010-02-10 16:37:26 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-02-20 09:56:33 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
error : '' ,
id : '' ,
2010-07-24 01:32:08 +00:00
items : [ ] ,
submit : null
2010-02-20 09:56:33 +00:00
} )
2010-12-24 17:13:18 +00:00
. options ( options || { } ) // fixme: the || {} can be done once, in the options function
. addClass ( 'OxForm' ) ;
2010-02-20 09:56:33 +00:00
2010-07-20 20:04:13 +00:00
$ . extend ( self , {
2010-07-24 01:32:08 +00:00
$items : [ ] ,
$messages : [ ] ,
2010-07-20 20:04:13 +00:00
formIsValid : false ,
2010-07-24 01:32:08 +00:00
itemIds : [ ] ,
itemIsValid : [ ]
} ) ;
// fixme: form isn't necessarily empty/invalid
2010-02-20 09:56:33 +00:00
$ . each ( self . options . items , function ( i , item ) {
2010-12-26 20:16:35 +00:00
self . itemIds [ i ] = item . options ( 'id' ) || item . id ;
self . itemIsValid [ i ] = ! ! item . value ( ) . length ;
2011-01-23 04:59:16 +00:00
that . append ( self . $items [ i ] = new Ox . FormItem ( { element : item } ) ) ;
2010-12-26 20:16:35 +00:00
item . bindEvent ( {
2010-12-24 17:13:18 +00:00
/ *
2010-12-06 17:42:05 +00:00
blur : function ( event , data ) {
validate ( i , data . valid ) ;
if ( data . valid ) {
self . $messages [ i ] . html ( '' ) . hide ( ) ;
} else {
self . $messages [ i ] . html ( data . message ) . show ( ) ;
}
} ,
2010-12-24 17:13:18 +00:00
* /
2010-12-26 20:16:35 +00:00
autovalidate : function ( event , data ) {
data . valid = ! ! data . value . length ;
validate ( i , data . valid ) ;
2011-01-23 04:59:16 +00:00
data . valid && self . $items [ i ] . setMessage ( '' ) ;
2010-12-26 20:16:35 +00:00
} ,
2010-12-06 17:42:05 +00:00
submit : function ( event , data ) {
self . formIsValid && that . submit ( ) ;
2010-12-24 17:13:18 +00:00
} ,
validate : function ( event , data ) {
validate ( i , data . valid ) ;
2011-01-23 04:59:16 +00:00
self . $items [ i ] . setMessage ( data . valid ? '' : data . message ) ;
2010-12-06 17:42:05 +00:00
}
} ) ;
2010-02-20 09:56:33 +00:00
} ) ;
2010-07-24 01:32:08 +00:00
function getItemPositionById ( id ) {
return self . itemIds . indexOf ( id ) ;
}
function submitCallback ( data ) {
$ . each ( data , function ( i , v ) {
2011-01-23 04:59:16 +00:00
self . $items [ i ] . setMessage ( v . message ) ;
2010-07-24 01:32:08 +00:00
} ) ;
}
function validate ( pos , valid ) {
2011-01-13 12:43:20 +00:00
//Ox.print('FORM validate', pos, valid)
2010-07-24 01:32:08 +00:00
self . itemIsValid [ pos ] = valid ;
2010-07-20 20:04:13 +00:00
if ( Ox . every ( self . itemIsValid ) != self . formIsValid ) {
self . formIsValid = ! self . formIsValid ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'validate' , {
2010-07-24 01:32:08 +00:00
valid : self . formIsValid
2010-07-20 20:04:13 +00:00
} ) ;
}
}
2011-01-23 04:59:16 +00:00
that . addItem = function ( pos , item ) {
Ox . print ( 'addItem' , pos )
self . options . items . splice ( pos , 0 , item ) ;
self . $items . splice ( pos , 0 , new Ox . FormItem ( { element : item } ) ) ;
pos == 0 ?
self . $items [ pos ] . insertBefore ( self . $items [ 0 ] ) :
self . $items [ pos ] . insertAfter ( self . $items [ pos - 1 ] ) ;
}
that . removeItem = function ( pos ) {
Ox . print ( 'removeItem' , pos ) ;
self . $items [ pos ] . remove ( ) ;
self . options . items . splice ( pos , 1 ) ;
self . $items . splice ( pos , 1 ) ;
}
2010-07-24 01:32:08 +00:00
that . submit = function ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('---- that.values()', that.values())
2010-07-24 01:32:08 +00:00
self . options . submit ( that . values ( ) , submitCallback ) ;
} ;
that . values = function ( ) { // fixme: can this be private?
2010-12-06 17:42:45 +00:00
/ *
get / set form values
call without arguments to get current form values
pass values as array to set values ( not implemented )
* /
2010-02-20 09:56:33 +00:00
var values = { } ;
if ( arguments . length == 0 ) {
2010-07-24 01:32:08 +00:00
$ . each ( self . $items , function ( i , $item ) {
values [ self . itemIds [ i ] ] = self . $items [ i ] . value ( ) ;
2010-02-20 09:56:33 +00:00
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('VALUES', values)
2010-02-20 09:56:33 +00:00
return values ;
} else {
$ . each ( arguments [ 0 ] , function ( key , value ) {
} ) ;
return that ;
}
} ;
return that ;
2010-02-10 16:37:26 +00:00
} ;
2010-02-20 09:56:33 +00:00
Ox . FormItem = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-02-20 09:56:33 +00:00
. defaults ( {
2010-07-20 20:04:13 +00:00
element : null ,
2010-09-03 20:54:40 +00:00
error : '' ,
2010-02-20 09:56:33 +00:00
} )
2010-07-20 20:04:13 +00:00
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxFormItem' )
2010-07-20 20:04:13 +00:00
. append ( self . options . element ) ;
2010-02-20 09:56:33 +00:00
2011-01-23 04:59:16 +00:00
self . $message = new Ox . Element ( )
. addClass ( 'OxFormMessage' )
. appendTo ( that ) ;
that . setMessage = function ( message ) {
self . $message . html ( message ) [ message !== '' ? 'show' : 'hide' ] ( ) ;
}
2010-07-24 01:32:08 +00:00
that . value = function ( ) {
2010-12-24 17:13:18 +00:00
return self . options . element . value ( ) ;
2010-07-24 01:32:08 +00:00
} ;
2010-02-20 09:56:33 +00:00
return that ;
}
2010-12-06 17:42:45 +00:00
/ * *
2010-09-03 08:47:40 +00:00
Form Elements
2010-01-07 20:21:07 +00:00
* /
2010-12-06 17:42:45 +00:00
Ox . Button = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
methods :
toggleDisabled enable / disable button
toggleSelected select / unselect button
toggleTitle if more than one title was provided ,
toggle to next title .
events :
click non - selectable button was clicked
deselect selectable button was deselected
select selectable button was selected
* /
2010-01-07 20:21:07 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'input' , self )
2010-01-07 20:21:07 +00:00
. defaults ( {
disabled : false ,
2010-09-03 08:47:40 +00:00
group : false ,
2010-09-03 20:54:40 +00:00
id : '' ,
overlap : 'none' ,
2010-01-07 20:21:07 +00:00
selectable : false ,
selected : false ,
2010-09-03 20:54:40 +00:00
size : 'medium' ,
// fixme: 'default' or ''?
style : 'default' , // can be default, checkbox, symbol, or tab
title : '' ,
tooltip : '' ,
type : 'text' ,
width : 'auto'
2010-01-07 20:21:07 +00:00
} )
2010-09-03 08:47:40 +00:00
. options ( options || { } )
2010-02-06 08:23:42 +00:00
. attr ( {
2010-09-03 20:54:40 +00:00
disabled : self . options . disabled ? 'disabled' : '' ,
type : self . options . type == 'text' ? 'button' : 'image'
2010-02-06 06:21:01 +00:00
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxButton Ox' + Ox . toTitleCase ( self . options . size ) +
( self . options . disabled ? ' OxDisabled' : '' ) +
( self . options . selected ? ' OxSelected' : '' ) +
( self . options . style != 'default' ? ' Ox' + Ox . toTitleCase ( self . options . style ) : '' ) +
( self . options . overlap != 'none' ? ' OxOverlap' + Ox . toTitleCase ( self . options . overlap ) : '' ) )
. css ( self . options . width == 'auto' ? { } : {
width : ( self . options . width - 14 ) + 'px'
2010-09-03 08:47:40 +00:00
} )
2010-02-06 06:21:01 +00:00
. mousedown ( mousedown )
. click ( click ) ;
2010-09-03 08:47:40 +00:00
$ . extend ( self , Ox . isArray ( self . options . title ) ? {
2010-09-03 20:54:40 +00:00
selectedTitle : Ox . setPropertyOnce ( self . options . title , 'selected' ) ,
2010-09-03 08:47:40 +00:00
titles : self . options . title
} : {
selectedTitle : 0 ,
titles : [ {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
title : self . options . title
} ]
} ) ;
setTitle ( self . titles [ self . selectedTitle ] . title ) ;
if ( self . options . tooltip ) {
self . tooltips = Ox . isArray ( self . options . tooltip ) ? self . options . tooltip : [ self . options . tooltip ] ;
self . $tooltip = new Ox . Tooltip ( {
title : self . tooltips [ self . selectedTitle ]
} ) ;
that . mouseenter ( mouseenter )
. mouseleave ( mouseleave ) ;
2010-01-07 20:21:07 +00:00
}
2010-09-03 08:47:40 +00:00
2010-01-07 20:21:07 +00:00
function click ( ) {
2010-12-26 20:16:35 +00:00
if ( ! self . options . disabled ) {
var data = self . titles [ self . selectedTitle ] ;
if ( ! self . options . selectable ) {
that . triggerEvent ( 'click' , data ) ;
2010-02-10 09:59:59 +00:00
} else {
2011-01-14 09:54:28 +00:00
//self.options.selected = !self.options.selected;
//that.toggleClass('OxSelected');
2010-12-26 20:16:35 +00:00
if ( self . options . group ) {
that . triggerEvent ( 'select' , data ) ;
} else {
that . toggleSelected ( ) ;
2011-01-14 09:54:28 +00:00
//that.triggerEvent('change', {selected: self.options.selected});
2010-12-26 20:16:35 +00:00
}
}
if ( self . titles . length == 2 ) {
that . toggleTitle ( ) ;
2010-02-10 09:59:59 +00:00
}
2010-09-03 08:47:40 +00:00
}
}
2011-01-16 22:23:01 +00:00
function mousedown ( e ) {
2010-09-03 20:54:40 +00:00
if ( self . options . type == 'image' && $ . browser . safari ) {
2010-09-03 08:47:40 +00:00
// keep image from being draggable
2011-01-16 22:23:01 +00:00
e . preventDefault ( ) ;
2010-09-03 08:47:40 +00:00
}
}
2011-01-16 22:23:01 +00:00
function mouseenter ( e ) {
self . $tooltip . show ( e . clientX , e . clientY ) ;
2010-09-07 15:58:15 +00:00
}
2010-09-03 08:47:40 +00:00
2011-01-16 22:23:01 +00:00
function mouseleave ( ) {
2010-09-03 08:47:40 +00:00
self . $tooltip . hide ( ) ;
}
function setTitle ( title ) {
self . title = title ;
2010-09-03 20:54:40 +00:00
if ( self . options . type == 'image' ) {
2010-09-03 08:47:40 +00:00
that . attr ( {
2010-09-03 20:54:40 +00:00
src : oxui . path + 'png/ox.ui.' + Ox . theme ( ) +
'/symbol' + Ox . toTitleCase ( title ) + '.png'
2010-09-03 08:47:40 +00:00
} ) ;
} else {
that . val ( title ) ;
2010-01-07 20:21:07 +00:00
}
}
2010-09-03 08:47:40 +00:00
2010-02-06 06:21:01 +00:00
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'disabled' ) {
2010-07-24 01:32:08 +00:00
that . attr ( {
2010-09-03 20:54:40 +00:00
disabled : value ? 'disabled' : ''
2010-07-24 01:32:08 +00:00
} )
2010-09-03 20:54:40 +00:00
. toggleClass ( 'OxDisabled' ) ;
} else if ( key == 'selected' ) {
if ( value != that . hasClass ( 'OxSelected' ) ) { // fixme: neccessary?
that . toggleClass ( 'OxSelected' ) ;
2010-01-07 20:21:07 +00:00
}
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' ) ;
} else if ( key == 'title' ) {
2010-09-03 08:47:40 +00:00
setTitle ( value ) ;
2010-09-03 20:54:40 +00:00
} else if ( key == 'width' ) {
2010-09-03 08:47:40 +00:00
that . $element . css ( {
2010-09-03 20:54:40 +00:00
width : ( value - 14 ) + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
2010-01-07 20:21:07 +00:00
}
}
2010-09-03 08:47:40 +00:00
2010-01-31 08:03:22 +00:00
that . toggleDisabled = function ( ) {
that . options ( {
enabled : ! self . options . disabled
} ) ;
2011-01-14 09:54:28 +00:00
//self.options.disabled = !self.options.disabled;
2010-01-31 08:03:22 +00:00
}
2010-09-03 08:47:40 +00:00
2010-01-07 20:21:07 +00:00
that . toggleSelected = function ( ) {
that . options ( {
selected : ! self . options . selected
} ) ;
2011-01-14 09:54:28 +00:00
//self.options.selected = !self.options.selected;
2010-01-07 20:21:07 +00:00
}
2010-09-03 08:47:40 +00:00
that . toggleTitle = function ( ) {
self . selectedTitle = 1 - self . selectedTitle ;
setTitle ( self . titles [ self . selectedTitle ] . title ) ;
2010-09-03 20:54:40 +00:00
self . $tooltip && self . $tooltip . options ( {
2010-09-03 08:47:40 +00:00
title : self . tooltips [ self . selectedTitle ]
} ) ;
}
2010-01-07 20:21:07 +00:00
return that ;
2010-09-03 08:47:40 +00:00
} ;
2010-01-07 20:21:07 +00:00
2010-12-06 17:42:45 +00:00
Ox . ButtonGroup = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
options
buttons array of buttons
max integer , maximum number of selected buttons , 0 for all
min integer , minimum number of selected buttons , 0 for none
selectable if true , buttons are selectable
type string , 'image' or 'text'
methods :
events :
change { id , value } selection within a group changed
* /
2010-01-07 20:21:07 +00:00
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
2010-02-10 09:59:59 +00:00
buttons : [ ] ,
2010-09-03 08:47:40 +00:00
max : 1 ,
min : 1 ,
2010-01-07 20:21:07 +00:00
selectable : false ,
2010-09-03 20:54:40 +00:00
size : 'medium' ,
style : '' ,
type : 'text' ,
2010-01-07 20:21:07 +00:00
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxButtonGroup' ) ;
2010-02-08 09:35:24 +00:00
2010-09-03 08:47:40 +00:00
if ( self . options . selectable ) {
self . optionGroup = new Ox . OptionGroup (
self . options . buttons ,
self . options . min ,
self . options . max ,
2010-09-03 20:54:40 +00:00
'selected'
2010-09-03 08:47:40 +00:00
) ;
self . options . buttons = self . optionGroup . init ( ) ;
}
self . $buttons = [ ] ;
2010-02-10 09:59:59 +00:00
$ . each ( self . options . buttons , function ( position , button ) {
2010-09-03 08:47:40 +00:00
var id = self . options . id + Ox . toTitleCase ( button . id )
self . $buttons [ position ] = Ox . Button ( {
disabled : button . disabled ,
group : true ,
id : id ,
selectable : self . options . selectable ,
selected : button . selected ,
size : self . options . size ,
style : self . options . style ,
title : button . title ,
type : self . options . type
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'select' , function ( ) {
2010-09-03 08:47:40 +00:00
selectButton ( position ) ;
} )
. appendTo ( that ) ;
2010-02-08 09:35:24 +00:00
} ) ;
2010-09-03 08:47:40 +00:00
function selectButton ( pos ) {
var toggled = self . optionGroup . toggle ( pos ) ;
if ( toggled . length ) {
$ . each ( toggled , function ( i , pos ) {
self . $buttons [ pos ] . toggleSelected ( ) ;
} ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' , {
2010-09-03 08:47:40 +00:00
selected : $ . map ( self . optionGroup . selected ( ) , function ( v , i ) {
return self . options . buttons [ v ] . id ;
} )
} ) ;
2010-02-08 09:35:24 +00:00
}
}
2010-02-10 09:59:59 +00:00
2010-01-07 20:21:07 +00:00
return that ;
} ;
2010-12-06 17:42:45 +00:00
Ox . Checkbox = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
options
disabled boolean , if true , checkbox is disabled
id element id
group boolean , if true , checkbox is part of a group
checked boolean , if true , checkbox is checked
title string , text on label
width integer , width in px
methods :
toggleChecked function ( )
toggles checked property
returns that
events :
change triggered when checked property changes
passes { checked , id , title }
* /
2010-02-19 10:24:02 +00:00
2010-01-07 20:21:07 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-01-07 20:21:07 +00:00
. defaults ( {
2010-09-03 08:47:40 +00:00
disabled : false ,
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
group : false ,
checked : false ,
2011-01-23 04:59:16 +00:00
overlap : 'none' ,
2010-09-03 20:54:40 +00:00
title : '' ,
width : 'auto'
2010-01-07 20:21:07 +00:00
} )
2010-02-18 07:27:32 +00:00
. options ( options || { } )
2011-01-23 04:59:16 +00:00
. addClass ( 'OxCheckbox' +
( self . options . overlap == 'none' ? '' : ' OxOverlap' +
Ox . toTitleCase ( self . options . overlap ) )
)
2010-09-03 08:47:40 +00:00
. attr ( self . options . disabled ? {
2010-09-03 20:54:40 +00:00
disabled : 'disabled'
2010-09-03 08:47:40 +00:00
} : { } ) ;
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
if ( self . options . title ) {
2010-09-03 20:54:40 +00:00
self . options . width != 'auto' && that . css ( {
width : self . options . width + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
self . $title = new Ox . Label ( {
disabled : self . options . disabled ,
2010-09-03 20:54:40 +00:00
id : self . options . id + 'Label' ,
overlap : 'left' ,
2010-09-03 08:47:40 +00:00
title : self . options . title ,
width : self . options . width - 16
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'right'
2010-02-19 10:24:02 +00:00
} )
2010-09-03 08:47:40 +00:00
. click ( clickTitle )
2010-02-19 10:24:02 +00:00
. appendTo ( that ) ;
}
2010-09-03 08:47:40 +00:00
self . $button = new Ox . Button ( {
disabled : self . options . disabled ,
2010-09-03 20:54:40 +00:00
id : self . options . id + 'Button' ,
2010-09-03 08:47:40 +00:00
title : [
2010-09-03 20:54:40 +00:00
{ id : 'none' , title : 'none' , selected : ! self . options . checked } ,
{ id : 'check' , title : 'check' , selected : self . options . checked }
2010-09-03 08:47:40 +00:00
] ,
2010-09-03 20:54:40 +00:00
type : 'image'
2010-02-19 10:24:02 +00:00
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxCheckbox' )
2010-09-03 08:47:40 +00:00
. click ( clickButton )
2010-02-19 10:24:02 +00:00
. appendTo ( that ) ;
2010-09-03 08:47:40 +00:00
function clickButton ( ) {
self . options . checked = ! self . options . checked ;
// click will have toggled the button,
// if it is part of a group, we have to revert that
self . options . group && that . toggleChecked ( ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' , {
2010-09-03 08:47:40 +00:00
checked : self . options . checked ,
id : self . options . id ,
title : self . options . title
2010-02-18 07:27:32 +00:00
} ) ;
}
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
function clickTitle ( ) {
2010-09-03 20:54:40 +00:00
! self . options . disabled && self . $button . trigger ( 'click' ) ;
2010-02-26 13:46:14 +00:00
}
2010-07-24 01:32:08 +00:00
2010-09-03 08:47:40 +00:00
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'checked' ) {
2010-09-03 08:47:40 +00:00
that . toggleChecked ( ) ;
}
} ;
2010-12-26 20:16:35 +00:00
that . checked = function ( ) {
return self . options . checked ;
}
2010-09-03 08:47:40 +00:00
that . toggleChecked = function ( ) {
self . $button . toggleTitle ( ) ;
return that ;
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
return that ;
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
} ;
Ox . CheckboxGroup = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
options
checkboxes [ ] array of checkboxes
max 1 integer
min 1 integer
width integer , width in px
events :
change triggered when checked property changes
passes { checked , id , title }
* /
2010-09-03 08:47:40 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
checkboxes : [ ] ,
max : 1 ,
min : 1 ,
width : 256
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxCheckboxGroup' ) ;
2010-09-03 08:47:40 +00:00
self . optionGroup = new Ox . OptionGroup (
self . options . checkboxes ,
self . options . min ,
self . options . max ) ;
self . options . checkboxes = self . optionGroup . init ( ) ;
$ . extend ( self , {
$checkboxes : [ ] ,
checkboxWidth : $ . map ( Ox . divideInt (
self . options . width + ( self . options . checkboxes . length - 1 ) * 6 ,
self . options . checkboxes . length
) , function ( v , i ) {
return v + ( i < self . options . checkboxes . length - 1 ? 10 : 0 ) ;
} )
2010-09-05 00:31:58 +00:00
} ) ;
2010-09-03 08:47:40 +00:00
$ . each ( self . options . checkboxes , function ( position , checkbox ) {
var id = self . options . id + Ox . toTitleCase ( checkbox . id )
self . $checkboxes [ position ] = new Ox . Checkbox ( $ . extend ( checkbox , {
group : true ,
id : id ,
width : self . checkboxWidth [ position ]
} ) )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , function ( ) {
2010-09-03 08:47:40 +00:00
change ( position ) ;
} )
. appendTo ( that ) ;
} ) ;
function change ( pos ) {
var toggled = self . optionGroup . toggle ( pos ) ;
2010-09-03 20:54:40 +00:00
//Ox.print('change', pos, 'toggled', toggled)
2010-09-03 08:47:40 +00:00
if ( toggled . length ) {
$ . each ( toggled , function ( i , pos ) {
self . $checkboxes [ pos ] . toggleChecked ( ) ;
} ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' , {
2010-09-03 08:47:40 +00:00
checked : $ . map ( self . optionGroup . checked ( ) , function ( v , i ) {
return self . options . checkboxes [ v ] . id ;
} )
} ) ;
}
}
return that ;
} ;
2010-12-06 17:42:45 +00:00
Ox . Input = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
options
arrows boolearn , if true , and type is 'float' or 'integer' , display arrows
arrowStep number , step when clicking arrows
autocomplete array of possible values , or
function ( key , value , callback ) , returns one or more values
autocompleteReplace boolean , if true , value is replaced
autocompleteReplaceCorrect boolean , if true , only valid values can be entered
autocompleteSelect boolean , if true , menu is displayed
autocompleteSelectHighlight boolean , if true , value in menu is highlighted
autocompleteSelectSubmit boolean , if true , submit input on menu selection
autocorrect string ( 'email' , 'float' , 'integer' , 'phone' , 'url' ) , or
regexp ( value ) , or
function ( key , value , blur , callback ) , returns value
autovalidate -- remote validation --
clear boolean , if true , has clear button
disabled boolean , if true , is disabled
height integer , px ( for type = 'textarea' and type = 'range' with orientation = 'horizontal' )
id string , element id
key string , to be passed to autocomplete and autovalidate functions
max number , max value if type is 'integer' or 'float'
min number , min value if type is 'integer' or 'float'
name string , will be displayed by autovalidate function ( 'invalid ' + name )
overlap string , '' , 'left' or 'right' , will cause padding and negative margin
picker
//rangeOptions
arrows boolean , if true , display arrows
//arrowStep number, step when clicking arrows
//arrowSymbols array of two strings
max number , maximum value
min number , minimum value
orientation 'horizontal' or 'vertical'
step number , step
thumbValue boolean , if true , value is displayed on thumb , or
array of strings per value , or
function ( value ) , returns string
thumbSize integer , px
trackGradient string , css gradient for track
trackImage string , image url , or
array of image urls
//trackStep number, 0 for 'scroll here', positive for step
trackValues boolean
serialize
textAlign 'left' , 'center' or 'right'
2011-02-11 13:54:54 +00:00
type 'float' , 'integer' , 'password' , 'text' , 'textarea'
2011-01-24 04:08:19 +00:00
value string
validate function , remote validation
width integer , px
methods :
events :
change
submit
* /
2010-09-03 08:47:40 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
arrows : false ,
arrowStep : 1 ,
autocomplete : null ,
autocompleteReplace : false ,
autocompleteReplaceCorrect : false ,
autocompleteSelect : false ,
autocompleteSelectHighlight : false ,
autocompleteSelectSubmit : false ,
autovalidate : null ,
clear : false ,
2010-11-28 15:06:47 +00:00
disabled : false ,
2010-09-03 20:54:40 +00:00
key : '' ,
2010-09-03 08:47:40 +00:00
min : 0 ,
max : 100 ,
2010-09-03 20:54:40 +00:00
label : '' ,
2010-09-03 08:47:40 +00:00
labelWidth : 64 ,
2010-09-03 20:54:40 +00:00
overlap : 'none' ,
placeholder : '' ,
2010-09-03 08:47:40 +00:00
serialize : null ,
2011-01-11 06:17:45 +00:00
style : 'rounded' ,
2010-09-03 20:54:40 +00:00
textAlign : 'left' ,
type : 'text' ,
2010-12-24 17:13:18 +00:00
validate : null ,
2010-09-03 20:54:40 +00:00
value : '' ,
2010-09-03 08:47:40 +00:00
width : 128
} )
. options ( options )
2011-02-25 10:23:33 +00:00
. addClass (
'OxInput OxMedium Ox' + Ox . toTitleCase ( self . options . style ) / * + (
self . options . overlap != 'none' ?
' OxOverlap' + Ox . toTitleCase ( self . options . overlap ) : ''
) * /
)
2010-12-26 20:16:35 +00:00
. bindEvent ( $ . extend ( self . options . type == 'textarea' ? { } : {
2010-09-03 08:47:40 +00:00
key _enter : submit
} , {
2011-01-15 06:09:22 +00:00
key _control _v : paste ,
2010-09-03 08:47:40 +00:00
key _escape : cancel
} ) ) ;
if (
Ox . isArray ( self . options . autocomplete ) &&
self . options . autocompleteReplace &&
self . options . autocompleteReplaceCorrect &&
2010-09-03 20:54:40 +00:00
self . options . value === ''
2010-09-03 08:47:40 +00:00
) {
self . options . value = self . options . autocomplete [ 0 ]
}
// fixme: set to min, not 0
2010-09-03 20:54:40 +00:00
if ( self . options . type == 'float' ) {
2010-09-03 08:47:40 +00:00
$ . extend ( self . options , {
2010-09-03 20:54:40 +00:00
autovalidate : 'float' ,
textAlign : 'right' ,
value : self . options . value || '0.0'
2010-09-03 08:47:40 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
} else if ( self . options . type == 'integer' ) {
2010-09-03 08:47:40 +00:00
$ . extend ( self . options , {
2010-09-03 20:54:40 +00:00
autovalidate : 'integer' ,
textAlign : 'right' ,
value : self . options . value || '0'
2010-09-03 08:47:40 +00:00
} ) ;
}
if ( self . options . label ) {
self . $label = new Ox . Label ( {
2010-09-03 20:54:40 +00:00
overlap : 'right' ,
textAlign : 'right' ,
2010-09-03 08:47:40 +00:00
title : self . options . label ,
width : self . options . labelWidth
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'left' , // fixme: use css rule
2010-09-03 08:47:40 +00:00
} )
. click ( function ( ) {
2011-02-25 10:23:33 +00:00
// fixme: ???
// that.focus();
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
}
if ( self . options . arrows ) {
self . arrows = [ ] ;
self . arrows [ 0 ] = [
new Ox . Button ( {
2010-09-03 20:54:40 +00:00
overlap : 'right' ,
title : 'previous' ,
type : 'image'
2010-09-03 08:47:40 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'left'
2010-09-03 08:47:40 +00:00
} )
. click ( function ( ) {
clickArrow ( 0 ) ;
} )
. appendTo ( that ) ,
new Ox . Button ( {
2010-09-03 20:54:40 +00:00
overlap : 'left' ,
title : 'next' ,
type : 'image'
2010-09-03 08:47:40 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'right'
2010-09-03 08:47:40 +00:00
} )
. click ( function ( ) {
clickArrow ( 1 ) ;
} )
. appendTo ( that )
]
}
$ . extend ( self , {
bindKeyboard : self . options . autocomplete || self . options . autovalidate ,
2010-09-03 20:54:40 +00:00
hasPasswordPlaceholder : self . options . type == 'password' && self . options . placeholder ,
2010-09-03 08:47:40 +00:00
inputWidth : getInputWidth ( )
} ) ;
if ( self . options . clear ) {
self . $button = new Ox . Button ( {
2010-09-03 20:54:40 +00:00
overlap : 'left' ,
title : 'clear' ,
type : 'image'
2010-09-03 08:47:40 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'right' // fixme: use css rule
2010-09-03 08:47:40 +00:00
} )
. click ( clear )
. appendTo ( that ) ;
}
2011-02-01 09:56:16 +00:00
self . $input = $ ( self . options . type == 'textarea' ? '<textarea>' : '<input>' )
2011-01-11 06:17:45 +00:00
. addClass ( 'OxInput OxMedium Ox' + Ox . toTitleCase ( self . options . style ) )
2010-09-03 08:47:40 +00:00
. attr ( {
2010-09-03 20:54:40 +00:00
disabled : self . options . disabled ? 'disabled' : '' ,
type : self . options . type == 'password' ? 'password' : 'text'
2010-09-03 08:47:40 +00:00
} )
2011-02-01 09:56:16 +00:00
. css ( $ . extend ( {
2010-09-03 20:54:40 +00:00
width : self . inputWidth + 'px' ,
2010-09-03 08:47:40 +00:00
textAlign : self . options . textAlign
2011-02-01 09:56:16 +00:00
} , self . options . type == 'textarea' ? {
2011-02-01 13:45:48 +00:00
height : self . options . height + 'px' ,
2011-02-01 09:56:16 +00:00
} : { } ) )
2010-09-03 08:47:40 +00:00
. val ( self . options . value )
. blur ( blur )
. change ( change )
. focus ( focus )
. appendTo ( that . $element ) ;
2011-02-01 13:45:48 +00:00
// fixme: is there a better way than this one?
2011-02-03 21:39:22 +00:00
// should at least go into ox.ui.theme.foo.js
2011-02-09 17:56:35 +00:00
// probably better: divs in the background
2011-02-01 13:45:48 +00:00
if ( self . options . type == 'textarea' ) {
$ . extend ( self , {
colors : Ox . theme ( ) == 'classic' ?
[ 208 , 232 , 244 ] :
2011-02-09 17:56:35 +00:00
//[0, 16, 32],
[ 32 , 48 , 64 ] ,
2011-02-01 13:45:48 +00:00
colorstops : [ 8 / self . options . height , self . options . height - 8 / self . options . height ]
} ) ;
self . $input . css ( {
background : '-moz-linear-gradient(top, rgb(' +
[ self . colors [ 0 ] , self . colors [ 0 ] , self . colors [ 0 ] ] . join ( ', ' ) + '), rgb(' +
[ self . colors [ 1 ] , self . colors [ 1 ] , self . colors [ 1 ] ] . join ( ', ' ) + ') ' +
Math . round ( self . colorstops [ 0 ] * 100 ) + '%, rgb(' +
[ self . colors [ 1 ] , self . colors [ 1 ] , self . colors [ 1 ] ] . join ( ', ' ) + ') ' +
Math . round ( self . colorstops [ 1 ] * 100 ) + '%, rgb(' +
[ self . colors [ 2 ] , self . colors [ 2 ] , self . colors [ 2 ] ] . join ( ', ' ) + '))'
} ) ;
self . $input . css ( {
background : '-webkit-gradient(linear, left top, left bottom, from(rgb(' +
[ self . colors [ 0 ] , self . colors [ 0 ] , self . colors [ 0 ] ] . join ( ', ' ) + ')), color-stop(' +
self . colorstops [ 0 ] + ', ' + 'rgb(' +
[ self . colors [ 1 ] , self . colors [ 1 ] , self . colors [ 1 ] ] . join ( ', ' ) + ')), color-stop( ' +
self . colorstops [ 1 ] + ', ' + 'rgb(' +
[ self . colors [ 1 ] , self . colors [ 1 ] , self . colors [ 1 ] ] . join ( ', ' ) + ')), to(rgb(' +
[ self . colors [ 2 ] , self . colors [ 2 ] , self . colors [ 2 ] ] . join ( ', ' ) + ')))'
} ) ;
}
2010-09-03 08:47:40 +00:00
if ( self . hasPasswordPlaceholder ) {
self . $input . hide ( ) ;
2010-09-03 20:54:40 +00:00
self . $placeholder = $ ( '<input>' )
2011-01-11 06:17:45 +00:00
. addClass ( 'OxInput OxMedium Ox' +
Ox . toTitleCase ( self . options . style ) +
' OxPlaceholder' )
2010-09-03 08:47:40 +00:00
. attr ( {
2010-09-03 20:54:40 +00:00
type : 'text'
2010-09-03 08:47:40 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
//float: 'left',
width : self . inputWidth + 'px'
2010-09-03 08:47:40 +00:00
} )
. val ( self . options . placeholder )
. focus ( focus )
. appendTo ( that . $element ) ;
}
if ( self . options . autocomplete && self . options . autocompleteSelect ) {
2011-01-03 12:01:38 +00:00
self . $autocompleteMenu = constructAutocompleteMenu ( ) ;
2010-09-03 08:47:40 +00:00
}
self . options . placeholder && setPlaceholder ( ) ;
function autocomplete ( oldValue , oldCursor ) {
2011-01-23 04:59:16 +00:00
oldValue = Ox . isUndefined ( oldValue ) ? self . options . value : oldValue ;
oldCursor = Ox . isUndefined ( oldCursor ) ? cursor : oldCursor ;
2011-01-15 14:22:05 +00:00
Ox . print ( 'autocomplete' , oldValue , oldCursor )
2010-09-03 08:47:40 +00:00
if ( self . options . value || self . options . autocompleteReplaceCorrect ) {
2011-02-11 13:54:54 +00:00
if ( Ox . isFunction ( self . options . autocomplete ) ) {
if ( self . options . key ) {
self . options . autocomplete ( self . options . key ,
self . options . value ,
autocompleteCallback )
} else {
self . options . autocomplete ( self . options . value ,
autocompleteCallback )
}
} else {
autocompleteCallback ( autocompleteFunction ( self . options . value ) ) ;
}
2010-09-03 08:47:40 +00:00
}
if ( ! self . options . value ) {
self . options . autocompleteSelect && self . $autocompleteMenu . hideMenu ( ) ;
}
function autocompleteFunction ( ) {
var values = Ox . find ( self . options . autocomplete , self . options . value ) ;
return self . options . autocompleteReplace ? values [ 0 ] :
$ . merge ( values [ 0 ] , values [ 1 ] ) ;
}
function autocompleteCallback ( values ) {
2011-01-13 12:43:20 +00:00
//Ox.print('autocompleteCallback', values[0], self.options.value, self.options.value.length, oldValue, oldCursor)
2010-09-03 08:47:40 +00:00
var length = self . options . value . length ,
deleted = length <= oldValue . length - ( oldCursor [ 1 ] - oldCursor [ 0 ] ) ,
newValue = values [ 0 ] ?
( ( self . options . autocompleteReplaceCorrect || ! deleted ) ?
values [ 0 ] : self . options . value ) :
( self . options . autocompleteReplaceCorrect ? oldValue : self . options . value ) ,
newLength = newValue . length ,
pos = cursor ( ) ,
selected = - 1 ,
selectEnd = length == 0 || ( values [ 0 ] && values [ 0 ] . length ) ,
value ;
2011-01-13 12:43:20 +00:00
//Ox.print('selectEnd', selectEnd)
2010-09-03 08:47:40 +00:00
if ( self . options . autocompleteReplace ) {
self . options . value = newValue ;
self . $input . val ( self . options . value ) ;
if ( selectEnd ) {
cursor ( length , newLength ) ;
} else if ( self . options . autocompleteReplaceCorrect ) {
cursor ( oldCursor ) ;
} else {
cursor ( pos ) ;
}
selected = 0 ;
}
if ( self . options . autocompleteSelect ) {
value = self . options . value . toLowerCase ( ) ;
if ( values . length ) {
self . oldCursor = cursor ( ) ;
self . oldValue = self . options . value ;
self . $autocompleteMenu . options ( {
items : $ . map ( values , function ( v , i ) {
if ( value == v . toLowerCase ( ) ) {
selected = i ;
}
return {
2010-09-03 20:54:40 +00:00
id : v . toLowerCase ( ) . replace ( / /g , '_' ) , // fixme: need function to do lowercase, underscores etc?
2010-09-03 08:47:40 +00:00
title : self . options . autocompleteSelectHighlight ? v . replace (
2010-09-03 20:54:40 +00:00
new RegExp ( '(' + value + ')' , 'ig' ) ,
'<span class="OxHighlight">$1</span>'
2010-09-03 08:47:40 +00:00
) : v
} ;
} ) ,
selected : selected
} ) . showMenu ( ) ;
} else {
self . $autocompleteMenu . hideMenu ( ) ;
}
}
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'autocomplete' , {
2010-09-03 08:47:40 +00:00
value : newValue
} ) ;
}
}
2011-01-03 12:01:38 +00:00
function constructAutocompleteMenu ( ) {
var menu = new Ox . Menu ( {
element : self . $input ,
id : self . options . id + 'Menu' , // fixme: we do this in other places ... are we doing it the same way? var name?,
offset : {
left : 4 ,
top : 0
} ,
size : self . options . size
} )
. bindEvent ( 'click' , clickMenu ) ;
if ( self . options . autocompleteReplace ) {
menu . bindEvent ( {
deselect : deselectMenu ,
select : selectMenu ,
} ) ;
}
return menu ;
}
2010-09-03 08:47:40 +00:00
function autovalidate ( ) {
var blur , oldCursor , oldValue ;
if ( arguments . length == 1 ) {
blur = arguments [ 0 ] ;
} else {
blur = false ;
oldValue = arguments [ 0 ] ;
oldCursor = arguments [ 1 ] ;
}
2011-02-11 13:54:54 +00:00
if ( Ox . isFunction ( self . options . autovalidate ) ) {
if ( self . options . key ) {
self . options . autovalidate ( self . options . key , self . options . value ,
blur , autovalidateCallback ) ;
} else {
self . options . autovalidate ( self . options . value , blur ,
autovalidateCallback ) ;
}
} else {
if ( Ox . isRegExp ( self . options . autovalidate ) ) {
autovalidateCallback ( autovalidateFunction ( self . options . value ) ) ;
} else {
autovalidateTypeFunction ( self . options . type , self . options . value ) ;
}
}
2010-09-03 08:47:40 +00:00
function autovalidateFunction ( value ) {
var regexp = new RegExp ( self . options . autovalidate ) ;
2010-12-26 20:16:35 +00:00
return $ . map ( value . split ( '' ) , function ( v ) {
return regexp ( v ) ? v : null ;
2010-09-03 20:54:40 +00:00
} ) . join ( '' ) ;
2010-09-03 08:47:40 +00:00
}
function autovalidateTypeFunction ( type , value ) {
2010-12-26 20:16:35 +00:00
// fixme: remove trailing zeroes on blur
2010-09-03 08:47:40 +00:00
var cursor ,
2010-09-03 20:54:40 +00:00
regexp = type == 'float' ? /[\d\.]/ : /\d/ ;
if ( type == 'float' ) {
if ( value . indexOf ( '.' ) != value . lastIndexOf ( '.' ) ) {
2010-09-03 08:47:40 +00:00
value = oldValue ;
} else {
if ( self . autovalidateFloatFlag ) {
2010-09-03 20:54:40 +00:00
if ( Ox . endsWith ( value , '.' ) ) {
2010-09-03 08:47:40 +00:00
value = value . substr ( 0 , value . length - 1 ) ;
}
self . autovalidateFloatFlag = false ;
}
2010-12-26 20:16:35 +00:00
while ( value [ 0 ] == '0' && value [ 1 ] != '.' ) {
value = value . substr ( 1 ) ;
}
2010-09-03 20:54:40 +00:00
while ( Ox . startsWith ( value , '.' ) ) {
if ( Ox . startsWith ( value , '..' ) ) {
2010-09-03 08:47:40 +00:00
value = value . substr ( 1 ) ;
} else {
2010-09-03 20:54:40 +00:00
value = '0' + value ;
2010-09-03 08:47:40 +00:00
}
}
2010-09-03 20:54:40 +00:00
if ( Ox . endsWith ( value , '.' ) ) {
value += '0' ;
2010-09-03 08:47:40 +00:00
cursor = [ value . length - 1 , value . length ] ;
self . autovalidateFloatFlag = true ;
}
}
}
2010-12-26 20:16:35 +00:00
value = $ . map ( value . split ( '' ) , function ( v ) {
return regexp ( v ) ? v : null ;
2010-09-03 20:54:40 +00:00
} ) . join ( '' ) ;
if ( type == 'integer' ) {
while ( value . length > 1 && Ox . startsWith ( value , '0' ) ) {
2010-09-03 08:47:40 +00:00
value = value . substr ( 1 ) ;
}
}
2010-09-03 20:54:40 +00:00
if ( value === '' ) {
value = type == 'float' ? '0.0' : '0' ;
2010-09-03 08:47:40 +00:00
cursor = [ 0 , value . length ] ;
} else if ( value > self . options . max ) {
value = oldValue ;
}
autovalidateCallback ( value , cursor ) ;
}
function autovalidateCallback ( newValue , newCursor ) {
2011-01-13 12:43:20 +00:00
//Ox.print('autovalidateCallback', newValue, oldCursor)
2010-09-03 08:47:40 +00:00
self . options . value = newValue ;
self . $input . val ( self . options . value ) ;
! blur && cursor (
newCursor || ( oldCursor [ 1 ] + newValue . length - oldValue . length )
) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'autovalidate' , {
2010-09-03 08:47:40 +00:00
value : self . options . value
} ) ;
}
}
/ *
function autovalidate ( blur ) {
2010-09-03 20:54:40 +00:00
Ox . print ( 'autovalidate' , self . options . value , blur || false )
2010-09-03 08:47:40 +00:00
self . autocorrectBlur = blur || false ;
self . autocorrectCursor = cursor ( ) ;
Ox . isFunction ( self . options . autocorrect ) ?
( self . options . key ? self . options . autocorrect (
self . options . key ,
self . options . value ,
self . autocorrectBlur ,
autocorrectCallback
) : self . options . autocorrect (
self . options . value ,
self . autocorrectBlur ,
autocorrectCallback
) ) : autocorrectCallback ( autocorrect ( self . options . value ) ) ;
}
function autovalidateFunction ( value ) {
var length = value . length ;
2010-09-03 20:54:40 +00:00
return $ . map ( value . toLowerCase ( ) . split ( '' ) , function ( v , i ) {
2010-09-03 08:47:40 +00:00
if ( new RegExp ( self . options . autocorrect ) ( v ) ) {
return v ;
} else {
return null ;
}
2010-09-03 20:54:40 +00:00
} ) . join ( '' ) ;
2010-09-03 08:47:40 +00:00
}
* /
function blur ( ) {
that . loseFocus ( ) ;
2010-09-03 20:54:40 +00:00
//that.removeClass('OxFocus');
2010-09-03 08:47:40 +00:00
self . options . value = self . $input . val ( ) ;
self . options . autovalidate && autovalidate ( true ) ;
self . options . placeholder && setPlaceholder ( ) ;
2010-12-24 17:13:18 +00:00
self . options . validate && validate ( ) ;
2010-09-03 08:47:40 +00:00
if ( self . bindKeyboard ) {
2010-09-03 20:54:40 +00:00
$document . unbind ( 'keydown' , keypress ) ;
$document . unbind ( 'keypress' , keypress ) ;
2010-09-03 08:47:40 +00:00
}
2011-01-11 10:29:26 +00:00
that . triggerEvent ( 'blur' , { } ) ;
2010-09-03 08:47:40 +00:00
}
function cancel ( ) {
self . $input . blur ( ) ;
}
function change ( ) {
self . options . value = self . $input . val ( ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' , {
2010-09-03 08:47:40 +00:00
value : self . options . value
} ) ;
}
function clear ( ) {
// fixme: set to min, not zero
// fixme: make this work for password
2010-09-03 20:54:40 +00:00
var value = '' ;
if ( self . options . type == 'float' ) {
value = '0.0' ;
} else if ( self . options . type == 'integer' ) {
value = '0'
2010-09-03 08:47:40 +00:00
}
self . $input . val ( value ) ;
cursor ( 0 , value . length ) ;
}
function clickArrow ( i ) {
self . options . value = Ox . limit (
parseFloat ( self . options . value ) + ( i == 0 ? - 1 : 1 ) * self . options . arrowStep ,
self . options . min ,
self . options . max
2010-12-26 20:16:35 +00:00
) . toString ( ) ;
2010-09-03 08:47:40 +00:00
self . $input . val ( self . options . value ) ; //.focus();
}
function clickMenu ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('clickMenu', data);
2010-09-03 08:47:40 +00:00
self . options . value = data . title ;
self . $input . val ( self . options . value ) . focus ( ) ;
that . gainFocus ( ) ;
self . options . autocompleteSelectSubmit && submit ( ) ;
}
function cursor ( start , end ) {
/ *
cursor ( ) returns [ start , end ]
cursor ( start ) sets start
cursor ( [ start , end ] ) sets start and end
cursor ( start , end ) sets start and end
* /
var isArray = Ox . isArray ( start ) ;
if ( arguments . length == 0 ) {
return [ self . $input [ 0 ] . selectionStart , self . $input [ 0 ] . selectionEnd ] ;
} else {
end = isArray ? start [ 1 ] : ( end ? end : start ) ;
start = isArray ? start [ 0 ] : start ;
self . $input [ 0 ] . setSelectionRange ( start , end ) ;
}
}
function deselectMenu ( ) {
self . options . value = self . oldValue ;
self . $input . val ( self . options . value ) ;
cursor ( self . oldCursor ) ;
}
function focus ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('focus()')
2010-09-03 08:47:40 +00:00
if (
2010-09-03 20:54:40 +00:00
that . hasClass ( 'OxFocus' ) || // fixme: this is just a workaround, since for some reason, focus() gets called twice on focus
( self . $autocompleteMenu && self . $autocompleteMenu . is ( ':visible' ) ) ||
( self . hasPasswordPlaceholder && self . $input . is ( ':visible' ) )
2010-09-03 08:47:40 +00:00
) {
return ;
}
that . gainFocus ( ) ;
self . options . placeholder && setPlaceholder ( ) ;
if ( self . bindKeyboard ) {
2011-01-13 12:43:20 +00:00
//Ox.print('binding...')
2010-09-03 08:47:40 +00:00
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function
$document . keydown ( keypress ) ;
$document . keypress ( keypress ) ;
self . options . autocompleteSelect && setTimeout ( autocomplete , 0 ) ; // fixme: why is the timeout needed?
}
}
function getInputWidth ( ) {
2011-01-11 06:17:45 +00:00
return self . options . width -
2010-09-03 08:47:40 +00:00
( self . options . arrows ? 32 : 0 ) -
( self . options . clear ? 16 : 0 ) -
2011-01-11 06:17:45 +00:00
( self . options . label ? self . options . labelWidth : 0 ) -
( self . options . style == 'rounded' ? 14 : 6 ) ;
2010-09-03 08:47:40 +00:00
}
function keypress ( event ) {
var oldCursor = cursor ( ) ,
oldValue = self . options . value ,
newValue = oldValue . substr ( 0 , oldCursor [ 0 ] - 1 ) ,
hasDeletedSelectedEnd = ( event . keyCode == 8 || event . keyCode == 46 ) &&
oldCursor [ 0 ] < oldCursor [ 1 ] && oldCursor [ 1 ] == oldValue . length ;
2011-01-13 12:43:20 +00:00
//Ox.print('keypress', event.keyCode)
2010-09-03 08:47:40 +00:00
if ( event . keyCode != 9 && event . keyCode != 13 && event . keyCode != 27 ) { // fixme: can't 13 and 27 return false?
setTimeout ( function ( ) { // wait for val to be set
var value = self . $input . val ( ) ;
if ( self . options . autocompleteReplaceCorrect && hasDeletedSelectedEnd ) {
2011-01-13 12:43:20 +00:00
//Ox.print(value, '->', newValue);
2010-09-03 08:47:40 +00:00
value = newValue ; // value.substr(0, value.length - 1);
self . $input . val ( value ) ;
}
if ( value != self . options . value ) {
self . options . value = value ;
self . options . autocomplete && autocomplete ( oldValue , oldCursor ) ;
self . options . autovalidate && autovalidate ( oldValue , oldCursor ) ;
}
} , 0 ) ;
}
2010-09-03 20:54:40 +00:00
if ( ( event . keyCode == 38 || event . keyCode == 40 ) && self . options . autocompleteSelect && self . $autocompleteMenu . is ( ':visible' ) ) {
2010-09-03 08:47:40 +00:00
return false ;
}
}
2011-01-15 06:09:22 +00:00
function paste ( ) {
var data = Ox . Clipboard . paste ( ) ;
data . text && self . $input . val ( data . text ) ;
}
2010-09-03 08:47:40 +00:00
function selectMenu ( event , data ) {
var pos = cursor ( ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('selectMenu', pos)
2010-09-03 08:47:40 +00:00
self . options . value = data . title
self . $input . val ( self . options . value ) ;
cursor ( pos [ 0 ] , self . options . value . length )
}
function setPlaceholder ( ) {
if ( self . options . placeholder ) {
2010-09-03 20:54:40 +00:00
if ( that . hasClass ( 'OxFocus' ) ) {
if ( self . options . value === '' ) {
if ( self . options . type == 'password' ) {
2010-09-03 08:47:40 +00:00
self . $placeholder . hide ( ) ;
2011-02-25 10:23:33 +00:00
self . $input . show ( ) . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
} else {
self . $input
2010-09-03 20:54:40 +00:00
. removeClass ( 'OxPlaceholder' )
. val ( '' ) ;
2010-09-03 08:47:40 +00:00
}
}
} else {
2010-09-03 20:54:40 +00:00
if ( self . options . value === '' ) {
if ( self . options . type == 'password' ) {
2010-09-03 08:47:40 +00:00
self . $input . hide ( ) ;
self . $placeholder . show ( ) ;
} else {
self . $input
2010-09-03 20:54:40 +00:00
. addClass ( 'OxPlaceholder' )
2010-09-03 08:47:40 +00:00
. val ( self . options . placeholder )
}
} else {
self . $input
2010-09-03 20:54:40 +00:00
. removeClass ( 'OxPlaceholder' )
2010-09-03 08:47:40 +00:00
. val ( self . options . value )
}
}
}
}
function setWidth ( ) {
}
function submit ( ) {
self . $input . blur ( ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'submit' , {
2010-09-03 08:47:40 +00:00
value : self . options . value
} ) ;
}
2010-12-24 17:13:18 +00:00
function validate ( ) {
self . options . validate ( self . options . value , function ( data ) {
that . triggerEvent ( 'validate' , data ) ;
} ) ;
}
2010-09-03 08:47:40 +00:00
self . onChange = function ( key , value ) {
var inputWidth , val ;
2011-01-03 12:01:38 +00:00
if ( [ 'autocomplete' , 'autocompleteReplace' , 'autocompleteSelect' , 'autovalidate' ] . indexOf ( key ) > - 1 ) {
if ( self . options . autocomplete && self . options . autocompleteSelect ) {
self . $autocompleteMenu = constructAutocompleteMenu ( ) ;
}
self . bindKeyboard = self . options . autocomplete || self . options . autovalidate ;
} else if ( key == 'disabled' ) {
2010-11-28 15:06:47 +00:00
self . $input . attr ( {
disabled : value ? 'disabled' : ''
} ) ;
} else if ( key == 'placeholder' ) {
2010-09-04 14:28:40 +00:00
setPlaceholder ( ) ;
} else if ( key == 'value' ) {
2011-01-15 06:09:22 +00:00
val = self . $input . val ( ) ; // fixme: ??
2010-09-03 08:47:40 +00:00
self . $input . val ( value ) ;
setPlaceholder ( ) ;
2010-09-03 20:54:40 +00:00
} else if ( key == 'width' ) {
2010-09-03 08:47:40 +00:00
inputWidth = getInputWidth ( ) ;
self . $input . css ( {
2010-09-03 20:54:40 +00:00
width : inputWidth + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
self . hasPasswordPlaceholder && self . $placeholder . css ( {
2010-09-03 20:54:40 +00:00
width : inputWidth + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
}
} ;
2011-02-25 10:23:33 +00:00
that . focusInput = function ( ) {
2010-09-03 08:47:40 +00:00
self . $input . focus ( ) ;
cursor ( 0 , self . $input . val ( ) . length ) ;
2011-01-11 06:17:45 +00:00
return that ;
2010-09-03 08:47:40 +00:00
} ;
2010-12-24 17:13:18 +00:00
that . value = function ( ) {
2011-01-03 23:38:43 +00:00
return self . $input . hasClass ( 'OxPlaceholder' ) ? '' : self . $input . val ( ) ;
2010-12-24 17:13:18 +00:00
} ;
2010-09-03 08:47:40 +00:00
return that ;
} ;
Ox . AutocorrectIntFunction = function ( min , max , pad , year ) {
var pad = pad || false ,
year = year || false ,
maxLength = max . toString ( ) . length ,
ret = null ,
values = [ ] ;
$ . each ( Ox . range ( min , max + 1 ) , function ( i , v ) {
2010-09-03 20:54:40 +00:00
values . push ( v + '' ) ;
2010-09-03 08:47:40 +00:00
pad && v . toString ( ) . length < maxLength && values . push ( Ox . pad ( v , maxLength ) ) ;
} ) ;
return function ( value , blur , callback ) {
var results ;
2010-09-03 20:54:40 +00:00
if ( year && value == '1' ) {
value = '1900' ;
2010-09-03 08:47:40 +00:00
} else {
results = Ox . find ( values , value ) ;
value = results [ 0 ] . length == 1 && results [ 0 ] [ 0 ] . length < maxLength ?
( pad ? Ox . pad ( results [ 0 ] [ 0 ] , maxLength ) : results [ 0 ] [ 0 ] ) :
( results [ 0 ] . length ? results [ 0 ] [ 0 ] : null ) ;
}
callback ( value ) ;
} ;
} ;
Ox . InputGroup = function ( options , self ) {
/ * * *
Ox . InputGroup
Options :
Methods :
Events :
* * * /
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
inputs : [ ] ,
separators : [ ] ,
width : 0
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxInputGroup' )
2010-09-03 08:47:40 +00:00
. click ( click ) ;
if ( self . options . width ) {
setWidths ( ) ;
} else {
self . options . width = getWidth ( ) ;
}
that . css ( {
2010-09-03 20:54:40 +00:00
width : self . options . width + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
$ . extend ( self , {
//$input: [],
$separator : [ ]
} ) ;
$ . each ( self . options . separators , function ( i , v ) {
2011-01-23 04:59:16 +00:00
self . options . id == 'debug' && Ox . print ( 'separator #' + i + ' ' + self . options . inputs [ i ] . options ( 'id' ) + ' ' + self . options . inputs [ i ] . options ( 'width' ) )
2010-09-03 08:47:40 +00:00
self . $separator [ i ] = new Ox . Label ( {
2010-09-03 20:54:40 +00:00
textAlign : 'center' ,
2010-09-03 08:47:40 +00:00
title : v . title ,
width : v . width + 32
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxSeparator' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
marginLeft : ( self . options . inputs [ i ] . options ( 'width' ) - ( i == 0 ? 16 : 32 ) ) + 'px'
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
} ) ;
$ . each ( self . options . inputs , function ( i , $input ) {
$input . options ( {
2010-09-03 20:54:40 +00:00
id : self . options . id + Ox . toTitleCase ( $input . options ( 'id' ) ) ,
2010-09-03 08:47:40 +00:00
parent : that
} )
. css ( {
marginLeft : - Ox . sum ( $ . map ( self . options . inputs , function ( v _ , i _ ) {
2010-09-03 20:54:40 +00:00
return i _ > i ? self . options . inputs [ i _ - 1 ] . options ( 'width' ) +
2010-09-03 08:47:40 +00:00
self . options . separators [ i _ - 1 ] . width : ( i _ == i ? 16 : 0 ) ;
2010-09-03 20:54:40 +00:00
} ) ) + 'px'
2010-09-03 08:47:40 +00:00
} )
. bindEvent ( {
change : change ,
2010-12-26 20:16:35 +00:00
submit : change ,
validate : validate
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
} ) ;
function change ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('InputGroup change')
2010-09-03 08:47:40 +00:00
// fixme: would be good to pass a value here
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' ) ;
2010-09-03 08:47:40 +00:00
}
function click ( event ) {
2010-09-03 20:54:40 +00:00
if ( $ ( event . target ) . hasClass ( 'OxSeparator' ) ) {
2011-02-25 10:23:33 +00:00
self . options . inputs [ 0 ] . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
}
}
function getWidth ( ) {
return Ox . sum ( $ . map ( self . options . inputs , function ( v , i ) {
2010-09-03 20:54:40 +00:00
return v . options ( 'width' ) ;
2010-09-03 08:47:40 +00:00
} ) ) + Ox . sum ( $ . map ( self . options . separators , function ( v , i ) {
return v . width ;
2011-01-23 04:59:16 +00:00
} ) ) + 2 ; // fixme: why + 2?
2010-09-03 08:47:40 +00:00
}
function setWidths ( ) {
var length = self . options . inputs . length ,
inputWidths = Ox . divideInt (
self . options . width - Ox . sum ( $ . map ( self . options . separators , function ( v , i ) {
return v . width ;
} ) ) , length
) ;
$ . each ( self . options . inputs , function ( i , v ) {
v . options ( {
width : inputWidths [ 1 ]
} ) ;
} ) ;
}
2010-12-26 20:16:35 +00:00
function validate ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('INPUTGROUP TRIGGER VALIDATE')
2010-12-26 20:16:35 +00:00
that . triggerEvent ( 'validate' , data ) ;
}
2010-09-03 08:47:40 +00:00
// fixme: is this used?
that . getInputById = function ( id ) {
var input = null ;
$ . each ( self . options . inputs , function ( i , v ) {
2011-01-13 12:43:20 +00:00
//Ox.print(v, v.options('id'), id)
2010-09-03 20:54:40 +00:00
if ( v . options ( 'id' ) == self . options . id + Ox . toTitleCase ( id ) ) {
2010-09-03 08:47:40 +00:00
input = v ;
return false ;
}
} ) ;
return input ;
} ;
2010-12-26 20:16:35 +00:00
that . value = function ( ) {
return $ . map ( self . options . inputs , function ( input ) {
var ret = null ;
[ 'checked' , 'selected' , 'value' ] . forEach ( function ( v ) {
input [ v ] && ( ret = input [ v ] ( ) ) ;
} ) ;
return ret ;
} ) ;
} ;
2010-09-03 08:47:40 +00:00
return that ;
} ;
Ox . ColorInput = function ( options , self ) {
var self = $ . extend ( self || { } , {
options : $ . extend ( {
2010-09-03 20:54:40 +00:00
id : '' ,
value : '0, 0, 0'
2010-09-03 08:47:40 +00:00
} , options )
} ) ,
that ;
2010-09-03 20:54:40 +00:00
self . values = self . options . value . split ( ', ' ) ;
2010-09-03 08:47:40 +00:00
self . $inputs = [ ] ;
2010-09-03 20:54:40 +00:00
$ . each ( [ 'red' , 'green' , 'blue' ] , function ( i , v ) {
2010-09-03 08:47:40 +00:00
self . $inputs [ i ] = new Ox . Input ( {
id : v ,
max : 255 ,
2010-09-03 20:54:40 +00:00
type : 'integer' ,
2010-09-03 08:47:40 +00:00
value : self . values [ i ] ,
width : 36
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'autovalidate' , change ) ;
2010-09-03 08:47:40 +00:00
} ) ;
self . $inputs [ 3 ] = new Ox . Label ( {
2010-09-03 20:54:40 +00:00
id : 'color' ,
2010-09-03 08:47:40 +00:00
width : 36
} )
. css ( {
2010-09-03 20:54:40 +00:00
background : 'rgb(' + self . options . value + ')'
2010-09-03 08:47:40 +00:00
} ) ;
self . $inputs [ 4 ] = new Ox . ColorPicker ( {
2010-09-03 20:54:40 +00:00
id : 'picker'
2010-09-03 08:47:40 +00:00
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , function ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('change function called');
2010-09-03 08:47:40 +00:00
self . options . value = data . value ;
2010-09-03 20:54:40 +00:00
self . values = data . value . split ( ', ' ) ;
2010-09-03 08:47:40 +00:00
$ . each ( Ox . range ( 3 ) , function ( i ) {
self . $inputs [ i ] . options ( {
value : self . values [ i ]
} ) ;
} ) ;
} )
. options ( {
width : 16 // this is just a hack to make the InputGroup layout work
} ) ;
that = new Ox . InputGroup ( {
id : self . options . id ,
inputs : self . $inputs ,
separators : [
2010-09-03 20:54:40 +00:00
{ title : ',' , width : 8 } ,
{ title : ',' , width : 8 } ,
{ title : '' , width : 8 } ,
{ title : '' , width : 8 }
2010-09-03 08:47:40 +00:00
] ,
value : self . options . value // fixme: it'd be nicer if this would be taken care of by passing self
} , self )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , change ) ;
2010-09-03 08:47:40 +00:00
function change ( ) {
self . options . value = $ . map ( self . $inputs , function ( v , i ) {
2010-09-03 20:54:40 +00:00
return v . options ( 'value' ) ;
} ) . join ( ', ' ) ;
2010-09-03 08:47:40 +00:00
self . $inputs [ 3 ] . css ( {
2010-09-03 20:54:40 +00:00
background : 'rgb(' + self . options . value + ')'
2010-09-03 08:47:40 +00:00
} ) ;
}
return that ;
} ;
Ox . DateInput = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
options :
format : 'short'
value : date value
weekday : false
width : {
day : 32 ,
month : options . format == 'long' ? 80 : ( options . format == 'medium' ? 40 : 32 ) ,
weekday : options . format == 'long' ? 80 : 40 ,
year : 48
}
* /
2010-09-03 08:47:40 +00:00
var self = $ . extend ( self || { } , {
options : $ . extend ( {
2010-09-03 20:54:40 +00:00
format : 'short' ,
value : Ox . formatDate ( new Date ( ) , '%F' ) ,
2010-09-03 08:47:40 +00:00
weekday : false ,
width : {
day : 32 ,
2010-09-03 20:54:40 +00:00
month : options . format == 'long' ? 80 : ( options . format == 'medium' ? 40 : 32 ) ,
weekday : options . format == 'long' ? 80 : 40 ,
2010-09-03 08:47:40 +00:00
year : 48
}
} , options )
} ) ,
that ;
$ . extend ( self , {
2010-09-03 20:54:40 +00:00
date : new Date ( self . options . value . replace ( /-/g , '/' ) ) ,
2010-09-03 08:47:40 +00:00
formats : {
2010-09-03 20:54:40 +00:00
day : '%d' ,
month : self . options . format == 'short' ? '%m' :
( self . options . format == 'medium' ? '%b' : '%B' ) ,
weekday : self . options . format == 'long' ? '%A' : '%a' ,
year : '%Y'
2010-09-03 08:47:40 +00:00
} ,
2010-09-03 20:54:40 +00:00
months : self . options . format == 'long' ? Ox . MONTHS : $ . map ( Ox . MONTHS , function ( v , i ) {
2010-09-03 08:47:40 +00:00
return v . substr ( 0 , 3 ) ;
} ) ,
2010-09-03 20:54:40 +00:00
weekdays : self . options . format == 'long' ? Ox . WEEKDAYS : $ . map ( Ox . WEEKDAYS , function ( v , i ) {
2010-09-03 08:47:40 +00:00
return v . substr ( 0 , 3 ) ;
} )
} ) ;
self . $input = $ . extend ( self . options . weekday ? {
weekday : new Ox . Input ( {
autocomplete : self . weekdays ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'weekday' ,
2010-09-03 08:47:40 +00:00
value : Ox . formatDate ( self . date , self . formats . weekday ) ,
width : self . options . width . weekday
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'autocomplete' , changeWeekday ) ,
2010-09-03 08:47:40 +00:00
} : { } , {
day : new Ox . Input ( {
autocomplete : $ . map ( Ox . range ( 1 , Ox . getDaysInMonth (
2010-09-03 20:54:40 +00:00
parseInt ( Ox . formatDate ( self . date , '%Y' ) , 10 ) ,
parseInt ( Ox . formatDate ( self . date , '%m' ) , 10 )
2010-09-03 08:47:40 +00:00
) + 1 ) , function ( v , i ) {
2010-09-03 20:54:40 +00:00
return self . options . format == 'short' ? Ox . pad ( v , 2 ) : v . toString ( ) ;
2010-09-03 08:47:40 +00:00
} ) ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'day' ,
2010-09-03 08:47:40 +00:00
value : Ox . formatDate ( self . date , self . formats . day ) ,
2010-09-03 20:54:40 +00:00
textAlign : 'right' ,
2010-09-03 08:47:40 +00:00
width : self . options . width . day
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'autocomplete' , changeDay ) ,
2010-09-03 08:47:40 +00:00
month : new Ox . Input ( {
2010-09-03 20:54:40 +00:00
autocomplete : self . options . format == 'short' ? $ . map ( Ox . range ( 1 , 13 ) , function ( v , i ) {
2010-09-03 08:47:40 +00:00
return Ox . pad ( v , 2 ) ;
} ) : self . months ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'month' ,
2010-09-03 08:47:40 +00:00
value : Ox . formatDate ( self . date , self . formats . month ) ,
2010-09-03 20:54:40 +00:00
textAlign : self . options . format == 'short' ? 'right' : 'left' ,
2010-09-03 08:47:40 +00:00
width : self . options . width . month
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'autocomplete' , changeMonthOrYear ) ,
2010-09-03 08:47:40 +00:00
year : new Ox . Input ( {
autocomplete : $ . map ( $ . merge ( Ox . range ( 1900 , 3000 ) , Ox . range ( 1000 , 1900 ) ) , function ( v , i ) {
return v . toString ( ) ;
} ) ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'year' ,
2010-09-03 08:47:40 +00:00
value : Ox . formatDate ( self . date , self . formats . year ) ,
2010-09-03 20:54:40 +00:00
textAlign : 'right' ,
2010-09-03 08:47:40 +00:00
width : self . options . width . year
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'autocomplete' , changeMonthOrYear )
2010-09-03 08:47:40 +00:00
} ) ;
that = new Ox . InputGroup ( $ . extend ( self . options , {
id : self . options . id ,
inputs : $ . merge ( self . options . weekday ? [
self . $input . weekday
2010-09-03 20:54:40 +00:00
] : [ ] , self . options . format == 'short' ? [
2010-09-03 08:47:40 +00:00
self . $input . year , self . $input . month , self . $input . day
] : [
self . $input . month , self . $input . day , self . $input . year
] ) ,
separators : $ . merge ( self . options . weekday ? [
2010-09-03 20:54:40 +00:00
{ title : self . options . format == 'short' ? '' : ',' , width : 8 } ,
] : [ ] , self . options . format == 'short' ? [
{ title : '-' , width : 8 } , { title : '-' , width : 8 }
2010-09-03 08:47:40 +00:00
] : [
2010-09-03 20:54:40 +00:00
{ title : '' , width : 8 } , { title : ',' , width : 8 }
2010-09-03 08:47:40 +00:00
] ) ,
width : 0
} ) , self ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('SELF', self)
2010-09-03 08:47:40 +00:00
function changeDay ( ) {
self . options . weekday && self . $input . weekday . options ( {
value : Ox . formatDate ( new Date ( [
2010-09-03 20:54:40 +00:00
self . $input . month . options ( 'value' ) ,
self . $input . day . options ( 'value' ) ,
self . $input . year . options ( 'value' )
] . join ( ' ' ) ) , self . formats . weekday )
2010-09-03 08:47:40 +00:00
} ) ;
setValue ( ) ;
}
function changeMonthOrYear ( ) {
2010-09-03 20:54:40 +00:00
var day = self . $input . day . options ( 'value' ) ,
month = self . $input . month . options ( 'value' ) ,
year = self . $input . year . options ( 'value' ) ,
days = Ox . getDaysInMonth ( year , self . options . format == 'short' ? parseInt ( month , 10 ) : month ) ;
2010-09-03 08:47:40 +00:00
day = day <= days ? day : days ;
2011-01-13 12:43:20 +00:00
//Ox.print(year, month, 'day days', day, days)
2010-09-03 08:47:40 +00:00
self . options . weekday && self . $input . weekday . options ( {
2010-09-03 20:54:40 +00:00
value : Ox . formatDate ( new Date ( [ month , day , year ] . join ( ' ' ) ) , self . formats . weekday )
2010-09-03 08:47:40 +00:00
} ) ;
self . $input . day . options ( {
autocomplete : $ . map ( Ox . range ( 1 , days + 1 ) , function ( v , i ) {
2010-09-03 20:54:40 +00:00
return self . options . format == 'short' ? Ox . pad ( v , 2 ) : v . toString ( ) ;
2010-09-03 08:47:40 +00:00
} ) ,
2010-09-03 20:54:40 +00:00
value : self . options . format == 'short' ? Ox . pad ( day , 2 ) : day . toString ( )
2010-09-03 08:47:40 +00:00
} ) ;
setValue ( ) ;
}
function changeWeekday ( ) {
var date = getDateInWeek (
2010-09-03 20:54:40 +00:00
self . $input . weekday . options ( 'value' ) ,
self . $input . month . options ( 'value' ) ,
self . $input . day . options ( 'value' ) ,
self . $input . year . options ( 'value' )
2010-09-03 08:47:40 +00:00
) ;
self . $input . month . options ( { value : date . month } ) ;
self . $input . day . options ( {
autocomplete : $ . map ( Ox . range ( 1 , Ox . getDaysInMonth ( date . year , date . month ) + 1 ) , function ( v , i ) {
2010-09-03 20:54:40 +00:00
return self . options . format == 'short' ? Ox . pad ( v , 2 ) : v . toString ( ) ;
2010-09-03 08:47:40 +00:00
} ) ,
value : date . day
} ) ;
self . $input . year . options ( { value : date . year } ) ;
setValue ( ) ;
}
function getDateInWeek ( weekday , month , day , year ) {
2011-01-13 12:43:20 +00:00
//Ox.print([month, day, year].join(' '))
2010-09-03 20:54:40 +00:00
var date = new Date ( [ month , day , year ] . join ( ' ' ) ) ;
2010-09-03 08:47:40 +00:00
date = Ox . getDateInWeek ( date , weekday ) ;
return {
day : Ox . formatDate ( date , self . formats . day ) ,
month : Ox . formatDate ( date , self . formats . month ) ,
year : Ox . formatDate ( date , self . formats . year )
} ;
}
function setValue ( ) {
2010-09-03 20:54:40 +00:00
self . options . value = Ox . formatDate ( new Date ( self . options . format == 'short' ? [
self . $input . year . options ( 'value' ) ,
self . $input . month . options ( 'value' ) ,
self . $input . day . options ( 'value' )
] . join ( '/' ) : [
self . $input . month . options ( 'value' ) ,
self . $input . day . options ( 'value' ) ,
self . $input . year . options ( 'value' )
] . join ( ' ' ) ) , '%F' ) ;
2010-09-03 08:47:40 +00:00
}
/ *
function normalize ( ) {
2010-09-03 20:54:40 +00:00
var year = that . getInputById ( 'year' ) . options ( 'value' ) ,
month = that . getInputById ( 'month' ) . options ( 'value' ) ,
day = that . getInputById ( 'day' ) . options ( 'value' )
2010-09-03 08:47:40 +00:00
return {
year : year ,
2010-09-03 20:54:40 +00:00
month : self . options . format == 'short' ? month :
Ox . pad ( ( format == 'medium' ? Ox . WEEKDAYS . map ( function ( v , i ) {
2010-09-03 08:47:40 +00:00
return v . substr ( 0 , 3 ) ;
} ) : Ox . WEEKDAYS ) . indexOf ( month ) , 2 ) ,
day : Ox . pad ( day , 2 )
}
}
* /
/ *
that . serialize = function ( ) {
var normal = normalize ( ) ;
2010-09-03 20:54:40 +00:00
return [ normal . year , normal . month , normal . day ] . join ( '-' ) ;
2010-09-03 08:47:40 +00:00
}
* /
return that ;
} ;
Ox . DateTimeInput = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
ampm : false ,
2010-09-03 20:54:40 +00:00
format : 'short' ,
2010-09-03 08:47:40 +00:00
seconds : false ,
2010-09-03 20:54:40 +00:00
value : Ox . formatDate ( new Date ( ) , '%F %T' ) ,
2010-09-03 08:47:40 +00:00
weekday : false
} )
. options ( options || { } ) ;
2010-09-03 20:54:40 +00:00
self . values = self . options . value . split ( ' ' ) ;
2011-01-13 12:43:20 +00:00
//Ox.print(self.values)
2010-09-03 08:47:40 +00:00
that = new Ox . InputGroup ( {
inputs : [
new Ox . DateInput ( {
format : self . options . format ,
2010-09-03 20:54:40 +00:00
id : 'date' ,
2010-09-03 08:47:40 +00:00
value : self . values [ 0 ] ,
weekday : self . options . weekday
} ) ,
new Ox . TimeInput ( {
ampm : self . options . ampm ,
2010-09-03 20:54:40 +00:00
id : 'time' ,
2010-09-03 08:47:40 +00:00
value : self . values [ 1 ] ,
seconds : self . options . seconds
} )
] ,
separators : [
2010-09-03 20:54:40 +00:00
{ title : '' , width : 8 }
2010-09-03 08:47:40 +00:00
] ,
value : self . options . value
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , setValue ) ;
2010-09-03 08:47:40 +00:00
function setValue ( ) {
self . options . value = [
2010-09-03 20:54:40 +00:00
self . options ( 'inputs' ) [ 0 ] . options ( 'value' ) ,
self . options ( 'inputs' ) [ 1 ] . options ( 'value' )
] . join ( ' ' ) ;
2010-09-03 08:47:40 +00:00
}
return that ;
} ;
Ox . PlaceInput = function ( options , self ) {
var self = $ . extend ( self || { } , {
options : $ . extend ( {
2010-09-03 20:54:40 +00:00
id : '' ,
value : 'United States'
2010-09-03 08:47:40 +00:00
} , options )
} ) ,
that ;
that = new Ox . FormElementGroup ( {
id : self . options . id ,
elements : [
new Ox . Input ( {
2010-09-03 20:54:40 +00:00
id : 'input' ,
2010-09-03 08:47:40 +00:00
value : self . options . value
} ) ,
new Ox . PlacePicker ( {
2010-09-03 20:54:40 +00:00
id : 'picker' ,
overlap : 'left' ,
2010-09-03 08:47:40 +00:00
value : self . options . value
} )
] ,
2010-09-03 20:54:40 +00:00
float : 'right'
2010-09-03 08:47:40 +00:00
} , self )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , change ) ;
2010-09-03 08:47:40 +00:00
function change ( ) {
}
return that ;
} ;
Ox . TimeInput = function ( options , self ) {
// fixme: seconds get set even if options.seconds is false
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
ampm : false ,
seconds : false ,
milliseconds : false ,
2010-09-03 20:54:40 +00:00
value : Ox . formatDate ( new Date ( ) , '%T' ) ,
2010-09-03 08:47:40 +00:00
} )
. options ( options || { } ) ;
if ( self . options . milliseconds ) {
self . options . seconds = true ;
2010-09-03 20:54:40 +00:00
if ( self . options . value . indexOf ( '.' ) == - 1 ) {
self . options . value += '.000' ;
2010-09-03 08:47:40 +00:00
}
}
self . date = getDate ( ) ;
self . values = getValues ( ) ;
self . $input = {
2011-02-11 13:54:54 +00:00
hours : new Ox . Input ( {
2010-09-03 08:47:40 +00:00
autocomplete : $ . map ( self . options . ampm ? Ox . range ( 1 , 13 ) : Ox . range ( 0 , 24 ) , function ( v ) {
return Ox . pad ( v , 2 ) ;
} ) ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'hours' ,
textAlign : 'right' ,
2010-09-03 08:47:40 +00:00
value : self . values . hours ,
width : 32
} ) ,
2011-02-11 13:54:54 +00:00
minutes : new Ox . Input ( {
2010-09-03 08:47:40 +00:00
autocomplete : $ . map ( Ox . range ( 0 , 60 ) , function ( v ) {
return Ox . pad ( v , 2 ) ;
} ) ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'minutes' ,
textAlign : 'right' ,
2010-09-03 08:47:40 +00:00
value : self . values . minutes ,
width : 32
} ) ,
2011-02-11 13:54:54 +00:00
seconds : new Ox . Input ( {
2010-09-03 08:47:40 +00:00
autocomplete : $ . map ( Ox . range ( 0 , 60 ) , function ( v ) {
return Ox . pad ( v , 2 ) ;
} ) ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'seconds' ,
textAlign : 'right' ,
2010-09-03 08:47:40 +00:00
value : self . values . seconds ,
width : 32
} ) ,
2011-02-11 13:54:54 +00:00
milliseconds : new Ox . Input ( {
2010-09-03 08:47:40 +00:00
autocomplete : $ . map ( Ox . range ( 0 , 1000 ) , function ( v ) {
return Ox . pad ( v , 3 ) ;
} ) ,
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'milliseconds' ,
textAlign : 'right' ,
2010-09-03 08:47:40 +00:00
value : self . values . milliseconds ,
width : 40
} ) ,
2011-02-11 13:54:54 +00:00
ampm : new Ox . Input ( {
2010-09-03 20:54:40 +00:00
autocomplete : [ 'AM' , 'PM' ] ,
2010-09-03 08:47:40 +00:00
autocompleteReplace : true ,
autocompleteReplaceCorrect : true ,
2010-09-03 20:54:40 +00:00
id : 'ampm' ,
2010-09-03 08:47:40 +00:00
value : self . values . ampm ,
width : 32
} )
} ;
that = new Ox . InputGroup ( $ . extend ( self . options , {
inputs : $ . merge ( $ . merge ( $ . merge ( [
self . $input . hours ,
self . $input . minutes ,
] , self . options . seconds ? [
self . $input . seconds
] : [ ] ) , self . options . milliseconds ? [
self . $input . milliseconds
] : [ ] ) , self . options . ampm ? [
self . $input . ampm
] : [ ] ) ,
separators : $ . merge ( $ . merge ( $ . merge ( [
2010-09-03 20:54:40 +00:00
{ title : ':' , width : 8 } ,
2010-09-03 08:47:40 +00:00
] , self . options . seconds ? [
2010-09-03 20:54:40 +00:00
{ title : ':' , width : 8 }
2010-09-03 08:47:40 +00:00
] : [ ] ) , self . options . milliseconds ? [
2010-09-03 20:54:40 +00:00
{ title : '.' , width : 8 }
2010-09-03 08:47:40 +00:00
] : [ ] ) , self . options . ampm ? [
2010-09-03 20:54:40 +00:00
{ title : '' , width : 8 }
2010-09-03 08:47:40 +00:00
] : [ ] ) ,
//width: self.options.width || 128
} ) , self )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , setValue ) ;
2010-09-03 08:47:40 +00:00
setValue ( ) ;
function getDate ( ) {
2010-09-03 20:54:40 +00:00
return new Date ( '1970/01/01 ' + (
2010-09-03 08:47:40 +00:00
self . options . milliseconds ?
self . options . value . substr ( 0 , self . options . value . length - 4 ) :
self . options . value
) ) ;
}
function getValues ( ) {
self . date = getDate ( ) ;
return {
2010-09-03 20:54:40 +00:00
ampm : Ox . formatDate ( self . date , '%p' ) ,
hours : Ox . formatDate ( self . date , self . options . ampm ? '%I' : '%H' ) ,
milliseconds : self . options . milliseconds ? self . options . value . substr ( - 3 ) : '000' ,
minutes : Ox . formatDate ( self . date , '%M' ) ,
seconds : Ox . formatDate ( self . date , '%S' )
2010-09-03 08:47:40 +00:00
} ;
}
function setValue ( ) {
2010-09-03 20:54:40 +00:00
self . options . value = Ox . formatDate ( new Date ( '1970/01/01 ' + [
self . $input . hours . options ( 'value' ) ,
self . $input . minutes . options ( 'value' ) ,
self . options . seconds ? self . $input . seconds . options ( 'value' ) : '00'
] . join ( ':' ) + ( self . options . ampm ? ' ' + self . $input . ampm . options ( 'value' ) : '' ) ) ,
( self . options . seconds ? '%T' : '%H:%M' ) ) +
( self . options . milliseconds ? '.' + self . $input . milliseconds . options ( 'value' ) : '' ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('SETVALUE', self.options.value);
2010-09-03 08:47:40 +00:00
}
function setValues ( ) {
self . values = getValues ( ) ;
$ . each ( self . $input , function ( k , v ) {
self . $input [ k ] . options ( {
value : self . values [ k ]
} ) ;
} ) ;
}
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'value' ) {
2010-09-03 08:47:40 +00:00
setValues ( ) ;
}
}
return that ;
} ;
Ox . Label = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
disabled : false ,
2010-09-03 20:54:40 +00:00
id : '' ,
overlap : 'none' ,
textAlign : 'left' ,
title : '' ,
width : 'auto'
2010-09-03 08:47:40 +00:00
} )
. options ( options )
. addClass (
2010-09-03 20:54:40 +00:00
'OxLabel' + ( self . options . disabled ? ' OxDisabled' : '' ) +
( self . options . overlap != 'none' ?
' OxOverlap' + Ox . toTitleCase ( self . options . overlap ) : '' )
2010-09-03 08:47:40 +00:00
)
2010-09-03 20:54:40 +00:00
. css ( $ . extend ( self . options . width == 'auto' ? { } : {
width : ( self . options . width - 14 ) + 'px'
2010-09-03 08:47:40 +00:00
} , {
textAlign : self . options . textAlign
} ) )
. html ( self . options . title ) ;
2010-11-28 15:06:47 +00:00
self . onChange = function ( key , value ) {
if ( key == 'title' ) {
that . html ( value ) ;
}
}
2010-09-03 08:47:40 +00:00
return that ;
} ;
Ox . OptionGroup = function ( items , min , max , property ) {
/ *
to be used by ButtonGroup , CheckboxGroup , Select and Menu
* /
2010-09-03 20:54:40 +00:00
var property = property || 'checked'
2010-09-03 08:47:40 +00:00
length = items . length ,
max = max == - 1 ? length : max ;
function getLastBefore ( pos ) {
// returns the position of the last checked item before position pos
var last = - 1 ;
2011-01-13 12:43:20 +00:00
/ * O x . p r i n t ( i t e m s , i t e m s . l e n g t h , l e n g t h , $ . m e r g e (
2010-09-03 08:47:40 +00:00
pos > 0 ? Ox . range ( pos - 1 , - 1 , - 1 ) : [ ] ,
2010-09-03 20:54:40 +00:00
pos < items . length - 1 ? Ox . range ( items . length - 1 , pos , - 1 ) : [ ]
2011-01-13 12:43:20 +00:00
) ) * /
2010-09-03 20:54:40 +00:00
// fixme: why is length not == items.length here?
2010-09-03 08:47:40 +00:00
$ . each ( $ . merge (
pos > 0 ? Ox . range ( pos - 1 , - 1 , - 1 ) : [ ] ,
2010-09-03 20:54:40 +00:00
pos < items . length - 1 ? Ox . range ( items . length - 1 , pos , - 1 ) : [ ]
2010-09-03 08:47:40 +00:00
) , function ( i , v ) {
2011-01-13 12:43:20 +00:00
//Ox.print(pos, v)
2010-09-03 08:47:40 +00:00
if ( items [ v ] [ property ] ) {
last = v ;
return false ;
}
} ) ;
return last ;
}
function getNumber ( ) {
// returns the number of checked items
var num = 0 ;
$ . each ( items , function ( i , item ) {
if ( item [ property ] ) {
num ++ ;
}
} )
return num ;
}
this [ property ] = function ( ) {
// returns an array with the positions of all checked item
var checked = [ ] ;
$ . each ( items , function ( i , item ) {
if ( item [ property ] ) {
checked . push ( i ) ;
}
} )
return checked ;
} ;
this . init = function ( ) {
var num = getNumber ( ) ,
count = 0 ;
//if (num < min || num > max) {
$ . each ( items , function ( i , item ) {
if ( Ox . isUndefined ( item [ property ] ) ) {
item [ property ] = false ;
}
if ( item [ property ] ) {
count ++ ;
if ( count > max ) {
item [ property ] = false ;
}
} else {
if ( num < min ) {
item [ property ] = true ;
num ++ ;
}
}
} ) ;
//}
return items ;
} ;
this . toggle = function ( pos ) {
var last ,
num = getNumber ( ) ,
toggled = [ ] ;
if ( ! items [ pos ] [ property ] ) { // check
if ( num >= max ) {
last = getLastBefore ( pos ) ;
items [ last ] [ property ] = false ;
toggled . push ( last ) ;
}
if ( ! items [ pos ] [ property ] ) {
items [ pos ] [ property ] = true ;
toggled . push ( pos ) ;
}
} else { // uncheck
if ( num > min ) {
items [ pos ] [ property ] = false ;
toggled . push ( pos ) ;
}
}
return toggled ;
}
return this ;
}
2010-12-06 17:42:45 +00:00
Ox . Range = function ( options , self ) {
2011-01-24 04:08:19 +00:00
/ * *
options
arrows boolean if true , show arrows
arrowStep number step when clicking arrows
arrowSymbols array arrow symbols , like [ 'minus' , 'plus' ]
max number maximum value
min number minimum value
orientation string 'horizontal' or 'vertical'
step number step between values
size number width or height , in px
thumbSize number minimum width or height of thumb , in px
thumbValue boolean if true , display value on thumb
trackGradient array colors
trackImages string or array one or multiple track background image URLs
trackStep number 0 ( scroll here ) or step when clicking track
value number initial value
valueNames array value names to display on thumb
* /
2010-09-03 08:47:40 +00:00
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
arrows : false ,
arrowStep : 1 ,
2010-09-03 20:54:40 +00:00
arrowSymbols : [ 'previous' , 'next' ] ,
2010-09-03 08:47:40 +00:00
max : 100 ,
min : 0 ,
2010-09-03 20:54:40 +00:00
orientation : 'horizontal' ,
2010-09-03 08:47:40 +00:00
step : 1 ,
size : 128 ,
thumbSize : 16 ,
thumbValue : false ,
trackColors : [ ] ,
trackImages : [ ] ,
trackStep : 0 ,
value : 0 ,
valueNames : null ,
} )
. options ( $ . extend ( options , {
arrowStep : options . arrowStep ?
options . arrowStep : options . step ,
trackImages : $ . makeArray ( options . trackImages || [ ] )
} ) )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxRange' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : self . options . size + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
$ . extend ( self , {
trackColors : self . options . trackColors . length ,
trackImages : self . options . trackImages . length ,
values : ( self . options . max - self . options . min + self . options . step ) /
self . options . step
} ) ;
2011-02-25 10:23:33 +00:00
setSizes ( ) ;
2010-09-03 08:47:40 +00:00
if ( self . options . arrows ) {
self . $arrows = [ ] ;
$ . each ( Ox . range ( 0 , 2 ) , function ( i ) {
2011-01-16 22:23:01 +00:00
self . $arrows [ i ] = new Ox . Button ( {
2010-09-03 20:54:40 +00:00
overlap : i == 0 ? 'right' : 'left' ,
2010-09-03 08:47:40 +00:00
title : self . options . arrowSymbols [ i ] ,
2010-09-03 20:54:40 +00:00
type : 'image'
2010-09-03 08:47:40 +00:00
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxArrow' )
2011-01-16 22:23:01 +00:00
. bindEvent ( {
mousedown : function ( event , e ) {
clickArrow ( e , i , true ) ;
} ,
mouserepeat : function ( event , e ) {
clickArrow ( e , i , false ) ;
}
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that . $element ) ;
} ) ;
}
2011-01-16 22:23:01 +00:00
self . $track = new Ox . Element ( )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTrack' )
2010-09-03 08:47:40 +00:00
. css ( $ . extend ( {
2010-09-03 20:54:40 +00:00
width : ( self . trackSize - 2 ) + 'px'
2010-09-03 08:47:40 +00:00
} , self . trackImages == 1 ? {
2010-09-03 20:54:40 +00:00
background : 'rgb(0, 0, 0)'
2010-09-03 08:47:40 +00:00
} : { } ) )
2011-01-16 22:23:01 +00:00
. bindEvent ( {
mousedown : clickTrack ,
drag : dragTrack
} )
2010-09-03 08:47:40 +00:00
. appendTo ( that . $element ) ;
self . trackColors && setTrackColors ( ) ;
if ( self . trackImages ) {
2010-09-03 20:54:40 +00:00
self . $trackImages = $ ( '<div>' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : self . trackSize + 'px' ,
marginRight : ( - self . trackSize - 1 ) + 'px'
2010-09-03 08:47:40 +00:00
} )
2011-01-16 22:23:01 +00:00
. appendTo ( self . $track . $element ) ;
2010-09-03 08:47:40 +00:00
$ . each ( self . options . trackImages , function ( i , v ) {
2011-01-13 12:43:20 +00:00
//Ox.print(self.trackImageWidths[i])
2010-09-03 20:54:40 +00:00
$ ( '<img>' )
2010-09-03 08:47:40 +00:00
. attr ( {
src : v
} )
2010-09-03 20:54:40 +00:00
. addClass ( i == 0 ? 'OxFirstChild' : '' )
. addClass ( i == self . trackImages - 1 ? 'OxLastChild' : '' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : self . trackImageWidths [ i ] + 'px'
2010-09-03 08:47:40 +00:00
} )
. mousedown ( function ( e ) {
e . preventDefault ( ) ; // prevent drag
} )
. appendTo ( self . $trackImages ) ;
//left += self.trackImageWidths[i];
} ) ;
}
self . $thumb = Ox . Button ( {
2010-09-03 20:54:40 +00:00
id : self . options . id + 'Thumb' ,
2010-09-03 08:47:40 +00:00
title : self . options . thumbValue ? ( self . options . valueNames ?
self . options . valueNames [ self . options . value ] :
2010-09-03 20:54:40 +00:00
self . options . value ) : '' ,
2010-09-03 08:47:40 +00:00
width : self . thumbSize
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxThumb' )
2010-09-03 08:47:40 +00:00
/ *
. css ( {
2010-09-03 20:54:40 +00:00
border : '1px solid rgb(255, 255, 255)' ,
background : 'rgba(0, 0, 0, 0)'
2010-09-03 08:47:40 +00:00
} )
* /
. appendTo ( self . $track ) ;
setThumb ( ) ;
2011-01-16 22:23:01 +00:00
function clickArrow ( e , i , animate ) {
2010-09-03 08:47:40 +00:00
// fixme: shift doesn't work, see menu scrolling
2011-01-16 22:23:01 +00:00
setValue ( self . options . value + self . options . arrowStep * ( i == 0 ? - 1 : 1 ) * ( e . shiftKey ? 2 : 1 ) , animate ) ;
2010-09-03 08:47:40 +00:00
}
2011-01-16 22:23:01 +00:00
function clickTrack ( event , e ) {
// fixme: thumb ends up a bit too far on the right
var isThumb = $ ( e . target ) . hasClass ( 'OxThumb' ) ;
self . drag = {
left : self . $track . offset ( ) . left ,
offset : isThumb ? e . clientX - self . $thumb . offset ( ) . left - 8 /*self.thumbSize / 2*/ : 0
} ;
setValue ( getVal ( e . clientX - self . drag . left - self . drag . offset ) , ! isThumb ) ;
}
function dragTrack ( event , e ) {
setValue ( getVal ( e . clientX - self . drag . left - self . drag . offset ) )
2010-09-03 08:47:40 +00:00
}
function getPx ( val ) {
var pxPerVal = ( self . trackSize - self . thumbSize ) /
( self . options . max - self . options . min ) ;
return Math . ceil ( ( val - self . options . min ) * pxPerVal ) ;
}
/ *
function getTime ( oldValue , newValue ) {
return self . animationTime * Math . abs ( oldValue - newValue ) / ( self . options . max - self . options . min ) ;
}
* /
function getVal ( px ) {
var px = self . trackSize / self . values >= 16 ? px : px - 8 ,
valPerPx = ( self . options . max - self . options . min ) /
2010-09-07 15:58:15 +00:00
( self . trackSize - self . thumbSize ) ;
2010-09-03 08:47:40 +00:00
return Ox . limit ( self . options . min +
Math . floor ( px * valPerPx / self . options . step ) * self . options . step ,
self . options . min , self . options . max ) ;
}
2011-02-25 10:23:33 +00:00
function setSizes ( ) {
self . trackSize = self . options . size - self . options . arrows * 32 ;
self . thumbSize = Math . max ( self . trackSize / self . values , self . options . thumbSize ) ;
self . trackImageWidths = self . trackImages == 1 ? [ self . trackSize - 16 ] :
Ox . divideInt ( self . trackSize - 2 , self . trackImages ) ;
self . trackColorsStart = self . thumbSize / 2 / self . options . size ;
self . trackColorsStep = ( self . options . size - self . thumbSize ) /
( self . trackColors - 1 ) / self . options . size ;
self . $track && self . $track . css ( {
width : ( self . trackSize - 2 ) + 'px'
} ) ;
self . $thumb && self . $thumb . options ( {
width : self . thumbSize
} ) ;
}
2010-09-03 08:47:40 +00:00
function setThumb ( animate ) {
self . $thumb . stop ( ) . animate ( {
2010-09-03 20:54:40 +00:00
marginLeft : ( getPx ( self . options . value ) - 1 ) + 'px' ,
//width: self.thumbSize + 'px'
2010-09-03 08:47:40 +00:00
} , animate ? 200 : 0 , function ( ) {
if ( self . options . thumbValue ) {
self . $thumb . options ( {
title : self . options . valueNames ?
self . options . valueNames [ self . options . value ] :
self . options . value
} ) ;
}
} ) ;
}
function setTrackColors ( ) {
self . $track . css ( {
backgroundImage : $ . browser . mozilla ?
2010-09-03 20:54:40 +00:00
( '-moz-linear-gradient(left, ' +
self . options . trackColors [ 0 ] + ' 0%, ' + $ . map ( self . options . trackColors , function ( v , i ) {
return v + ' ' + ( ( self . trackColorsStart + self . trackColorsStep * i ) * 100 ) + '%' ;
} ) . join ( ', ' ) + ', ' + self . options . trackColors [ self . trackColors - 1 ] + ' 100%)' ) :
( '-webkit-gradient(linear, left top, right top, color-stop(0, ' +
self . options . trackColors [ 0 ] + '), ' + $ . map ( self . options . trackColors , function ( v , i ) {
return 'color-stop(' + ( self . trackColorsStart + self . trackColorsStep * i ) + ', ' + v + ')' ;
} ) . join ( ', ' ) + ', color-stop(1, ' + self . options . trackColors [ self . trackColors - 1 ] + '))' )
2010-09-03 08:47:40 +00:00
} ) ;
}
function setValue ( value , animate ) {
var value = Ox . limit ( value , self . options . min , self . options . max ) ;
if ( value != self . options . value ) {
//time = getTime(self.options.value, value);
self . options . value = value ;
setThumb ( animate ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' , {
2010-09-03 08:47:40 +00:00
value : value
} ) ;
}
}
self . onChange = function ( key , value ) {
2011-02-25 10:23:33 +00:00
if ( key == 'size' ) {
setSizes ( ) ;
} else if ( key == 'trackColors' ) {
2010-09-03 08:47:40 +00:00
setTrackColors ( ) ;
2010-09-03 20:54:40 +00:00
} else if ( key == 'value' ) {
2010-09-03 08:47:40 +00:00
setThumb ( ) ;
}
}
return that ;
} ;
Ox . Select = function ( options , self ) {
2011-01-16 04:55:08 +00:00
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
2010-09-03 08:47:40 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self ) // fixme: do we use 'div', or {}, or '', by default?
2010-09-03 08:47:40 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
items : [ ] ,
max : 1 ,
min : 1 ,
2010-09-03 20:54:40 +00:00
overlap : 'none' , // can be none, left or right
2010-09-03 08:47:40 +00:00
selectable : true ,
2010-09-03 20:54:40 +00:00
size : 'medium' ,
title : '' ,
type : 'text' , // can be 'text' or 'image'
width : 'auto'
2010-09-03 08:47:40 +00:00
} )
2011-01-15 16:27:10 +00:00
// fixme: make default selection restorable
// or allow for extra action items below options
2010-09-03 08:47:40 +00:00
. options ( options )
. addClass (
2010-09-03 20:54:40 +00:00
'OxSelect Ox' + Ox . toTitleCase ( self . options . size ) +
( self . options . overlap == 'none' ? '' : ' OxOverlap' +
2010-09-03 08:47:40 +00:00
Ox . toTitleCase ( self . options . overlap ) )
)
2010-09-03 20:54:40 +00:00
. css ( self . options . width == 'auto' ? { } : {
width : self . options . width + 'px'
2010-09-04 14:28:40 +00:00
} )
2010-12-26 20:16:35 +00:00
. bindEvent ( {
2010-09-04 14:28:40 +00:00
key _escape : loseFocus ,
key _down : showMenu
2010-09-03 08:47:40 +00:00
} ) ;
2011-01-23 04:59:16 +00:00
Ox . print ( 'Ox.Select' , self . options )
2010-09-03 08:47:40 +00:00
$ . extend ( self , {
2010-09-03 20:54:40 +00:00
buttonId : self . options . id + 'Button' ,
groupId : self . options . id + 'Group' ,
menuId : self . options . id + 'Menu'
2010-09-03 08:47:40 +00:00
} ) ;
if ( self . options . selectable ) {
self . optionGroup = new Ox . OptionGroup (
self . options . items ,
self . options . min ,
self . options . max
) ;
self . options . items = self . optionGroup . init ( ) ;
self . checked = self . optionGroup . checked ( ) ;
}
2010-09-03 20:54:40 +00:00
if ( self . options . type == 'text' ) {
self . $title = $ ( '<div>' )
. addClass ( 'OxTitle' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : ( self . options . width - 22 ) + 'px'
2010-09-03 08:47:40 +00:00
} )
. html (
self . options . title ? self . options . title :
self . options . items [ self . checked [ 0 ] ] . title
)
2010-09-04 14:28:40 +00:00
. click ( showMenu )
2010-09-03 08:47:40 +00:00
. appendTo ( that . $element ) ;
}
self . $button = new Ox . Button ( {
id : self . buttonId ,
2010-09-03 20:54:40 +00:00
style : 'symbol' ,
title : 'select' ,
type : 'image'
2010-09-03 08:47:40 +00:00
} )
2010-09-04 14:28:40 +00:00
. bindEvent ( 'click' , showMenu )
2010-09-03 08:47:40 +00:00
. appendTo ( that ) ;
self . $menu = new Ox . Menu ( {
element : self . $title || self . $button ,
id : self . menuId ,
items : [ self . options . selectable ? {
group : self . groupId ,
items : self . options . items ,
max : self . options . max ,
min : self . options . min
} : self . options . items ] ,
2010-09-03 20:54:40 +00:00
side : 'bottom' ,
2010-09-03 08:47:40 +00:00
size : self . options . size
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( {
change : changeMenu ,
click : clickMenu ,
hide : hideMenu
} ) ;
2010-09-03 08:47:40 +00:00
2010-12-27 05:01:24 +00:00
self . options . type == 'image' && self . $menu . addClass ( 'OxRight' ) ;
2010-09-03 08:47:40 +00:00
function clickMenu ( event , data ) {
2011-01-13 19:41:10 +00:00
that . triggerEvent ( 'click' , data ) ;
2010-09-03 20:54:40 +00:00
}
function changeMenu ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('clickMenu: ', self.options.id, data)
2010-09-03 20:54:40 +00:00
self . checked = self . optionGroup . checked ( ) ;
2010-09-03 08:47:40 +00:00
self . $title && self . $title . html (
self . options . title ? self . options . title :
2010-09-03 20:54:40 +00:00
data . checked [ 0 ] . title
2010-09-03 08:47:40 +00:00
) ;
2010-09-04 14:28:40 +00:00
that . triggerEvent ( 'change' , {
selected : data . checked
} ) ;
2010-09-03 08:47:40 +00:00
}
function hideMenu ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('%% hideMenu that', that, 'self', self)
2010-09-03 20:54:40 +00:00
that . removeClass ( 'OxSelected' ) ;
2010-12-26 20:16:35 +00:00
// self.$button.removeClass('OxSelected');
2011-01-13 12:43:20 +00:00
//Ox.print('%% hideMenu end')
2010-09-03 08:47:40 +00:00
}
2010-09-04 14:28:40 +00:00
function loseFocus ( ) {
that . loseFocus ( ) ;
}
function showMenu ( ) {
that . gainFocus ( ) ;
that . addClass ( 'OxSelected' ) ;
self . $menu . showMenu ( ) ;
}
2010-09-03 08:47:40 +00:00
self . onChange = function ( key , value ) {
} ;
2010-09-03 20:54:40 +00:00
that . selected = function ( ) {
2011-01-15 06:47:22 +00:00
return $ . map ( /*self.checked*/ self . optionGroup . checked ( ) , function ( v ) {
2010-09-03 20:54:40 +00:00
return {
2011-01-15 06:47:22 +00:00
id : self . options . items [ v ] . id ,
title : self . options . items [ v ] . title
2010-09-03 20:54:40 +00:00
} ;
} ) ;
} ;
2010-09-03 08:47:40 +00:00
that . selectItem = function ( id ) {
2011-01-13 12:43:20 +00:00
//Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
2010-09-03 20:54:40 +00:00
self . options . type == 'text' && self . $title . html (
Ox . getObjectById ( self . options . items , id ) . title [ 0 ] // fixme: title should not have become an array
2010-09-03 08:47:40 +00:00
) ;
self . $menu . checkItem ( id ) ;
2010-09-03 20:54:40 +00:00
self . checked = self . optionGroup . checked ( ) ;
2010-09-03 08:47:40 +00:00
} ;
/ *
that . width = function ( val ) {
// fixme: silly hack, and won't work for css() ... remove!
that . $element . width ( val + 16 ) ;
that . $button . width ( val ) ;
//that.$symbol.width(val);
return that ;
} ;
* /
return that ;
2010-12-23 17:05:46 +00:00
} ;
2010-09-03 08:47:40 +00:00
Ox . FormElementGroup = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
elements : [ ] ,
2010-09-03 20:54:40 +00:00
float : 'left' ,
2010-09-03 08:47:40 +00:00
separators : [ ] ,
width : 0
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxInputGroup' ) ;
2010-09-03 08:47:40 +00:00
2010-09-03 20:54:40 +00:00
$ . each ( self . options . float == 'left' ? self . options . elements : self . options . elements . reverse ( ) , function ( i , $element ) {
2010-12-26 20:16:35 +00:00
$element . css ( {
2010-09-03 08:47:40 +00:00
float : self . options . float // fixme: make this a class
} )
2010-12-26 20:16:35 +00:00
. bindEvent ( {
validate : function ( event , data ) {
that . triggerEvent ( {
validate : data
} ) ;
}
} )
2010-09-03 08:47:40 +00:00
. appendTo ( that ) ;
} ) ;
/ *
if ( self . options . width ) {
setWidths ( ) ;
} else {
self . options . width = getWidth ( ) ;
}
that . css ( {
2010-09-03 20:54:40 +00:00
width : self . options . width + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
* /
function getWidth ( ) {
}
function setWidth ( ) {
}
self . onChange = function ( key , value ) {
2011-01-24 04:08:19 +00:00
} ;
that . replaceElement = function ( pos , element ) {
Ox . print ( 'Ox.FormElementGroup replaceElement' , pos , element )
self . options . elements [ pos ] . replaceWith ( element . $element ) ;
self . options . elements [ pos ] = element ;
} ;
2010-09-03 08:47:40 +00:00
2010-12-26 20:16:35 +00:00
that . value = function ( ) {
2011-01-15 06:47:22 +00:00
return $ . map ( self . options . elements , function ( element ) {
2010-12-26 20:16:35 +00:00
var ret = null ;
[ 'checked' , 'selected' , 'value' ] . forEach ( function ( v ) {
2011-01-15 06:47:22 +00:00
element [ v ] && ( ret = element [ v ] ( ) ) ;
2010-12-26 20:16:35 +00:00
} ) ;
return ret ;
} ) ;
} ;
2010-09-03 08:47:40 +00:00
return that ;
2010-12-23 17:05:46 +00:00
} ;
2010-09-03 08:47:40 +00:00
Ox . Picker = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
element : null ,
elementHeight : 128 ,
elementWidth : 256 ,
2010-09-03 20:54:40 +00:00
id : '' ,
overlap : 'none'
2010-09-03 08:47:40 +00:00
} )
. options ( options || { } ) ;
self . $selectButton = new Ox . Button ( {
overlap : self . options . overlap ,
2010-09-03 20:54:40 +00:00
title : 'select' ,
type : 'image'
2010-09-03 08:47:40 +00:00
} )
. click ( showMenu )
. appendTo ( that ) ;
2010-09-03 20:54:40 +00:00
self . $menu = new Ox . Element ( 'div' )
. addClass ( 'OxPicker' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : self . options . elementWidth + 'px' ,
height : ( self . options . elementHeight + 24 ) + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
self . options . element
. css ( {
2010-09-03 20:54:40 +00:00
width : self . options . elementWidth + 'px' ,
height : self . options . elementHeight + 'px'
2010-09-03 08:47:40 +00:00
} )
. appendTo ( self . $menu ) ;
self . $bar = new Ox . Bar ( {
2010-09-03 20:54:40 +00:00
orientation : 'horizontal' ,
2010-09-03 08:47:40 +00:00
size : 24
} )
. appendTo ( self . $menu ) ;
that . $label = new Ox . Label ( {
width : self . options . elementWidth - 60
} )
. appendTo ( self . $bar ) ;
self . $doneButton = new Ox . Button ( {
2010-09-03 20:54:40 +00:00
title : 'Done' ,
2010-09-03 08:47:40 +00:00
width : 48
} )
. click ( hideMenu )
. appendTo ( self . $bar ) ;
2010-09-03 20:54:40 +00:00
self . $layer = $ ( '<div>' )
. addClass ( 'OxLayer' )
2010-09-03 08:47:40 +00:00
. click ( hideMenu ) ;
function hideMenu ( ) {
self . $menu . detach ( ) ;
self . $layer . detach ( ) ;
self . $selectButton
2010-09-03 20:54:40 +00:00
. removeClass ( 'OxSelected' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
MozBorderRadius : '8px' ,
WebkitBorderRadius : '8px'
2010-09-03 08:47:40 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'hide' ) ;
2010-09-03 08:47:40 +00:00
} ;
function showMenu ( ) {
var offset = that . offset ( ) ,
left = offset . left ,
top = offset . top + 15 ;
self . $selectButton
2010-09-03 20:54:40 +00:00
. addClass ( 'OxSelected' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
MozBorderRadius : '8px 8px 0 0' ,
WebkitBorderRadius : '8px 8px 0 0'
2010-09-03 08:47:40 +00:00
} ) ;
self . $layer . appendTo ( $body ) ;
self . $menu
. css ( {
2010-09-03 20:54:40 +00:00
left : left + 'px' ,
top : top + 'px'
2010-09-03 08:47:40 +00:00
} )
. appendTo ( $body ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'show' ) ;
2010-09-03 08:47:40 +00:00
} ;
return that ;
} ;
Ox . ColorPicker = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
id : '' ,
value : '0, 0, 0'
2010-09-03 08:47:40 +00:00
} )
. options ( options || { } ) ;
2011-01-13 12:43:20 +00:00
//Ox.print(self)
2010-09-03 08:47:40 +00:00
self . $ranges = [ ] ;
2010-09-03 20:54:40 +00:00
self . rgb = [ 'red' , 'green' , 'blue' ] ;
self . values = self . options . value . split ( ', ' ) ;
2010-09-03 08:47:40 +00:00
$ . each ( Ox . range ( 3 ) , function ( i ) {
self . $ranges [ i ] = new Ox . Range ( {
arrows : true ,
id : self . options . id + Ox . toTitleCase ( self . rgb [ i ] ) ,
max : 255 ,
size : 328 , // 256 + 16 + 40 + 16
thumbSize : 40 ,
thumbValue : true ,
trackColors : getColors ( i ) ,
value : self . values [ i ]
} )
. css ( {
2010-09-03 20:54:40 +00:00
position : 'absolute' ,
top : ( i * 15 ) + 'px'
2010-09-03 08:47:40 +00:00
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , function ( event , data ) {
2010-09-03 08:47:40 +00:00
change ( i , data . value ) ;
} )
. appendTo ( that ) ;
// fixme: make self.$ranges[i].children() work
if ( i == 0 ) {
2010-09-03 20:54:40 +00:00
self . $ranges [ i ] . $element . children ( 'input.OxOverlapRight' ) . css ( {
2010-09-03 08:47:40 +00:00
MozBorderRadius : 0 ,
WebkitBorderRadius : 0
} ) ;
2010-09-03 20:54:40 +00:00
self . $ranges [ i ] . $element . children ( 'input.OxOverlapLeft' ) . css ( {
MozBorderRadius : '0 8px 0 0' ,
WebkitBorderRadius : '0 8px 0 0'
2010-09-03 08:47:40 +00:00
} ) ;
} else {
2010-09-03 20:54:40 +00:00
self . $ranges [ i ] . $element . children ( 'input' ) . css ( {
2010-09-03 08:47:40 +00:00
MozBorderRadius : 0 ,
WebkitBorderRadius : 0
} ) ;
}
} ) ;
that = new Ox . Picker ( {
element : that ,
elementHeight : 46 ,
elementWidth : 328 ,
id : self . options . id
} ) ;
function change ( index , value ) {
self . values [ index ] = value ;
2010-09-03 20:54:40 +00:00
self . options . value = self . values . join ( ', ' ) ;
2010-09-03 08:47:40 +00:00
that . $label . css ( {
2010-09-03 20:54:40 +00:00
background : 'rgb(' + self . options . value + ')'
2010-09-03 08:47:40 +00:00
} ) ;
$ . each ( Ox . range ( 3 ) , function ( i ) {
if ( i != index ) {
self . $ranges [ i ] . options ( {
trackColors : getColors ( i )
} ) ;
}
} ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' , {
2010-09-03 08:47:40 +00:00
value : self . options . value
} ) ;
}
function getColors ( index ) {
return [
2010-09-03 20:54:40 +00:00
'rgb(' + $ . map ( Ox . range ( 3 ) , function ( v ) {
2010-09-03 08:47:40 +00:00
return v == index ? 0 : self . values [ v ] ;
2010-09-03 20:54:40 +00:00
} ) . join ( ', ' ) + ')' ,
'rgb(' + $ . map ( Ox . range ( 3 ) , function ( v ) {
2010-09-03 08:47:40 +00:00
return v == index ? 255 : self . values [ v ] ;
2010-09-03 20:54:40 +00:00
} ) . join ( ', ' ) + ')'
2010-09-03 08:47:40 +00:00
]
}
return that ;
} ;
Ox . PlacePicker = function ( options , self ) {
var self = $ . extend ( self || { } , {
options : $ . extend ( {
2010-09-03 20:54:40 +00:00
id : '' ,
value : 'United States'
2010-09-03 08:47:40 +00:00
} , options )
} ) ,
that ;
2010-09-03 20:54:40 +00:00
self . $element = new Ox . Element ( 'div' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : '256px' ,
height : '192px'
2010-09-03 08:47:40 +00:00
} )
. append (
self . $topBar = new Ox . Bar ( {
size : 16
} )
. css ( {
2010-09-03 20:54:40 +00:00
MozBorderRadius : '0 8px 0 0' ,
WebkitBorderRadius : '0 8px 0 0'
2010-09-03 08:47:40 +00:00
} )
. append (
self . $input = new Ox . Input ( {
clear : true ,
2010-09-03 20:54:40 +00:00
id : self . options . id + 'Input' ,
placeholder : 'Find' ,
2010-09-03 08:47:40 +00:00
width : 256
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'submit' , findPlace )
2010-09-03 08:47:40 +00:00
)
)
. append (
2010-09-03 20:54:40 +00:00
self . $container = new Ox . Element ( 'div' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : '256px' ,
height : '160px'
2010-09-03 08:47:40 +00:00
} )
)
. append (
self . $bottomBar = new Ox . Bar ( {
size : 16
} )
. append (
self . $range = new Ox . Range ( {
arrows : true ,
2010-09-03 20:54:40 +00:00
id : self . options . id + 'Range' ,
2010-09-03 08:47:40 +00:00
max : 22 ,
size : 256 ,
thumbSize : 32 ,
thumbValue : true
} )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'change' , changeZoom )
2010-09-03 08:47:40 +00:00
)
) ;
2010-09-03 20:54:40 +00:00
self . $input . $element . children ( 'input[type=text]' ) . css ( {
width : '230px' ,
paddingLeft : '2px' ,
MozBorderRadius : '0 8px 8px 0' ,
WebkitBorderRadius : '0 8px 8px 0'
2010-09-03 08:47:40 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
self . $input . $element . children ( 'input[type=image]' ) . css ( {
MozBorderRadius : '0 8px 0 0' ,
WebkitBorderRadius : '0 8px 0 0'
2010-09-03 08:47:40 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
self . $range . $element . children ( 'input' ) . css ( {
2010-09-03 08:47:40 +00:00
MozBorderRadius : 0 ,
WebkitBorderRadius : 0
} ) ;
that = new Ox . Picker ( {
element : self . $element ,
elementHeight : 192 ,
elementWidth : 256 ,
id : self . options . id ,
overlap : self . options . overlap ,
value : self . options . value
} , self )
2010-09-03 20:54:40 +00:00
. bindEvent ( 'show' , showPicker ) ;
2010-09-03 08:47:40 +00:00
2010-09-03 20:54:40 +00:00
that . $label . bind ( 'click' , clickLabel )
2010-09-03 08:47:40 +00:00
self . map = false ;
function changeZoom ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('changeZoom')
2010-09-03 08:47:40 +00:00
self . $map . zoom ( data . value ) ;
}
function clickLabel ( ) {
var name = that . $label . html ( ) ;
if ( name ) {
self . $input . options ( {
value : name
} )
2010-09-03 20:54:40 +00:00
. triggerEvent ( 'submit' , {
2010-09-03 08:47:40 +00:00
value : name
} ) ;
}
}
function findPlace ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('findPlace', data);
2010-12-06 17:42:05 +00:00
self . $map . find ( data . value , function ( place ) {
place && that . $label . html ( place . geoname ) ;
2010-09-03 08:47:40 +00:00
} )
}
function onSelect ( event , data ) {
2010-12-06 17:42:05 +00:00
that . $label . html ( data . geoname ) ;
2010-09-03 08:47:40 +00:00
}
function onZoom ( event , data ) {
self . $range . options ( {
value : data . value
} ) ;
}
function showPicker ( ) {
if ( ! self . map ) {
self . $map = new Ox . Map ( {
2010-09-03 20:54:40 +00:00
id : self . options . id + 'Map' ,
2010-09-03 08:47:40 +00:00
places : [ self . options . value ]
} )
. css ( {
2010-09-03 20:54:40 +00:00
width : '256px' ,
height : '160px'
2010-09-03 08:47:40 +00:00
} )
. bindEvent ( {
select : onSelect ,
zoom : onZoom
} )
. appendTo ( self . $container ) ;
self . map = true ;
}
}
return that ;
} ;
2010-12-06 17:42:45 +00:00
/ * *
2010-09-03 08:47:40 +00:00
delete below
* /
Ox . Input _ = function ( options , self ) {
/ *
options :
clear boolean , clear button , or not
disabled boolean , disabled , or not
2010-09-03 20:54:40 +00:00
height height ( px ) , if type is 'textarea'
2010-09-03 08:47:40 +00:00
id
label string , or
array [ { id , title , checked } ] ( selectable label ) or
array [ { id , label : [ { id , title , checked } ] , width } ] ( multiple selectable labels )
label and placeholder are mutually exclusive
labelWidth integer ( px )
placeholder string , or
array [ { id , title , checked } ] ( selectable placeholder )
label and placeholder are mutually exclusive
separator string , or
array of strings
to separate multiple values
separatorWidth integer ( px ) , or
array of integers
serialize function
2010-09-03 20:54:40 +00:00
size 'large' , 'medium' or 'small'
type 'password' , 'select' or 'text'
2010-09-07 15:58:15 +00:00
unit string , or
2010-09-03 08:47:40 +00:00
array [ { id , title , checked } ] ( selectable unit )
unitWidth integer ( px )
value string , or
array [ { id , value , width } ] ( multiple values )
width integer ( px )
methods :
events :
* /
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-09-03 08:47:40 +00:00
. defaults ( {
autocomplete : null ,
autocorrect : null ,
autosuggest : null ,
autosuggestHighlight : false ,
autosuggestSubmit : false ,
autovalidate : null ,
2010-09-03 20:54:40 +00:00
autovalidateName : 'Value' ,
2010-09-03 08:47:40 +00:00
clear : false ,
disabled : false ,
height : 128 ,
2010-09-03 20:54:40 +00:00
id : '' ,
key : '' ,
label : '' ,
2010-09-03 08:47:40 +00:00
labelWidth : 64 ,
2010-09-03 20:54:40 +00:00
placeholder : '' ,
separator : '' ,
2010-09-03 08:47:40 +00:00
separatorWidth : 16 ,
serialize : null ,
2010-09-03 20:54:40 +00:00
size : 'medium' ,
type : 'text' ,
unit : '' ,
2010-09-03 08:47:40 +00:00
unitWidth : 64 ,
2010-09-03 20:54:40 +00:00
value : '' ,
2010-09-03 08:47:40 +00:00
width : 128
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxInput Ox' + Ox . toTitleCase ( self . options . size ) )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : self . options . width + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
$ . extend ( self , {
clearWidth : 16 ,
2010-09-03 20:54:40 +00:00
hasMultipleKeys : Ox . isArray ( self . options . label ) && 'label' in self . options . label [ 0 ] ,
2010-09-03 08:47:40 +00:00
hasMultipleValues : Ox . isArray ( self . options . value ) &&
2010-09-03 20:54:40 +00:00
( self . options . type != 'select' || 'items' in self . options . value [ 0 ] ) ,
2010-09-03 08:47:40 +00:00
hasSelectableKeys : Ox . isArray ( self . options . label ) || Ox . isArray ( self . options . placeholder ) ,
hasSelectableUnits : Ox . isArray ( self . options . unit ) ,
2010-09-03 20:54:40 +00:00
keyName : self . options . label ? 'label' : ( self . options . placeholder ? 'placeholder' : '' ) ,
2010-09-03 08:47:40 +00:00
placeholderWidth : 16 ,
selectedKey : [ 0 ] , // fixme: only set on demand?
selectedValue : 0 ,
selectedUnit : 0 ,
/* valid: autovalidateCall(true) */
} ) ;
2010-09-03 20:54:40 +00:00
$ . each ( [ 'autocomplete' , 'autocorrect' , 'autosuggest' , 'autovalidate' ] , function ( i , v ) {
2010-09-03 08:47:40 +00:00
//if (!Ox.isFunction(self.options[v])) {
self . options [ v ] = {
2010-09-03 20:54:40 +00:00
'' : self . options [ v ]
2010-09-03 08:47:40 +00:00
} ;
//}
} ) ;
if ( self . keyName && ! self . hasMultipleKeys ) {
self . options [ self . keyName ] = [ $ . extend ( {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
label : self . options [ self . keyName ] ,
2010-09-03 20:54:40 +00:00
} , self . keyName == 'label' ? {
id : '' ,
2010-09-03 08:47:40 +00:00
width : self . options . labelWidth
} : { } ) ] ;
if ( ! self . hasSelectableKeys ) {
self . options [ self . keyName ] [ 0 ] . label = [ {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
title : self . options [ self . keyName ] [ 0 ] . label
} ] ;
}
}
if ( self . hasSelectableKeys ) {
$ . each ( self . options [ self . keyName ] , function ( keyPos , key ) {
if ( key . width ) {
self . options . labelWidth = ( keyPos == 0 ? 0 : self . options . labelWidth ) + key . width ;
}
self . selectedKey [ keyPos ] = 0 ;
$ . each ( key , function ( valuePos , value ) {
if ( value . checked ) {
self . selectedKey [ keyPos ] = valuePos ;
return false ;
}
} ) ;
} ) ;
}
self . valueWidth = self . options . width -
( self . options . label ? self . options . labelWidth : 0 ) -
( ( self . options . placeholder && self . options . placeholder [ 0 ] . label . length > 1 ) ? self . placeholderWidth : 0 ) -
( self . options . unit ? self . options . unitWidth : 0 ) -
( self . options . clear ? self . clearWidth : 0 ) ;
/ *
if ( self . hasMultipleValues ) {
self . valueWidth -= Ox . isArray ( self . options . separatorWidth ) ?
Ox . sum ( self . options . separatorWidth ) :
( self . options . value . length - 1 ) * self . options . separatorWidth ;
}
* /
2011-01-13 12:43:20 +00:00
//Ox.print('self.hasMulVal', self.hasMultipleValues);
//Ox.print('self.options.value', self.options.value)
2010-09-03 08:47:40 +00:00
if ( ! self . hasMultipleValues ) {
2010-09-03 20:54:40 +00:00
if ( self . options . type == 'select' ) {
2010-09-03 08:47:40 +00:00
self . options . value = [ {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
items : self . options . value ,
width : self . valueWidth
} ] ;
2010-09-03 20:54:40 +00:00
} else if ( self . options . type == 'range' ) {
2010-09-03 08:47:40 +00:00
self . options . value = [ $ . extend ( {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
size : self . valueWidth
} , self . options . value ) ] ;
2010-02-19 10:24:02 +00:00
} else {
2010-09-03 08:47:40 +00:00
self . options . value = [ {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
value : self . options . value ,
width : self . valueWidth
} ]
}
}
2011-01-13 12:43:20 +00:00
//Ox.print('self.options.value', self.options.value)
2010-09-03 08:47:40 +00:00
self . values = self . options . value . length ;
2011-01-13 12:43:20 +00:00
//Ox.print(self.options.id, 'self.values', self.values)
2010-09-03 08:47:40 +00:00
if ( Ox . isString ( self . options . separator ) ) {
self . options . separator = $ . map ( new Array ( self . values - 1 ) , function ( v , i ) {
return self . options . separator ;
} ) ;
}
if ( Ox . isNumber ( self . options . separatorWidth ) ) {
self . options . separatorWidth = $ . map ( new Array ( self . values - 1 ) , function ( v , i ) {
return self . options . separatorWidth ;
} ) ;
}
if ( self . options . unit ) {
if ( self . hasSelectableUnits ) {
$ . each ( self . options . unit , function ( pos , unit ) {
if ( unit . checked ) {
self . selectedUnit = pos ;
return false ;
2010-02-19 10:24:02 +00:00
}
} ) ;
2010-09-03 08:47:40 +00:00
} else {
self . options . unit = [ {
2010-09-03 20:54:40 +00:00
id : '' ,
2010-09-03 08:47:40 +00:00
title : self . options . unit
} ] ;
2010-02-19 10:24:02 +00:00
}
2010-02-20 11:05:58 +00:00
}
2011-01-13 12:43:20 +00:00
//Ox.print('self', self);
2010-09-03 08:47:40 +00:00
if ( self . keyName ) {
that . $key = [ ] ;
$ . each ( self . options [ self . keyName ] , function ( keyPos , key ) {
2011-01-13 12:43:20 +00:00
//Ox.print('keyPos key', keyPos, key)
2010-09-03 20:54:40 +00:00
if ( self . keyName == 'label' && key . label . length == 1 ) {
2010-09-03 08:47:40 +00:00
that . $key [ keyPos ] = new Ox . Label ( {
2010-09-03 20:54:40 +00:00
overlap : 'right' ,
2010-09-03 08:47:40 +00:00
title : key . label [ 0 ] . title ,
width : self . options . labelWidth
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'left'
2010-09-03 08:47:40 +00:00
} )
. click ( function ( ) {
2011-02-25 10:23:33 +00:00
that . $input [ 0 ] . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
} else if ( key . label . length > 1 ) {
2011-01-13 12:43:20 +00:00
//Ox.print('key.length > 1')
2010-09-03 08:47:40 +00:00
self . selectKeyId = self . options . id + Ox . toTitleCase ( self . keyName ) +
2010-09-03 20:54:40 +00:00
( self . options [ self . keyName ] . length == 1 ? '' : keyPos ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
2010-09-03 08:47:40 +00:00
that . $key [ keyPos ] = new Ox . Select ( {
id : self . selectKeyId ,
items : $ . map ( key . label , function ( value , valuePos ) {
return {
checked : valuePos == self . selectedKey [ keyPos ] ,
id : value . id ,
group : self . selectKeyId , // fixme: same id, works here, but should be different
title : value . title
} ;
} ) ,
2010-09-03 20:54:40 +00:00
overlap : 'right' ,
type : self . options . label ? 'text' : 'image' ,
2010-09-03 08:47:40 +00:00
width : self . options . label ? ( self . options . label . length == 1 ? self . options . labelWidth : key . width ) : self . placeholderWidth
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'left'
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
2010-09-03 20:54:40 +00:00
that . bindEvent ( 'change_' + self . selectKeyId , changeKey ) ;
2010-09-03 08:47:40 +00:00
}
} ) ;
}
if ( self . options . clear ) {
that . $clear = new Ox . Button ( {
2010-09-03 20:54:40 +00:00
overlap : 'left' ,
type : 'image' ,
value : 'clear'
2010-09-03 08:47:40 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'right'
2010-09-03 08:47:40 +00:00
} )
. click ( clear )
. appendTo ( that ) ;
}
if ( self . options . unit . length == 1 ) {
that . $unit = new Ox . Label ( {
2010-09-03 20:54:40 +00:00
overlap : 'left' ,
2010-09-03 08:47:40 +00:00
title : self . options . unit [ 0 ] . title ,
width : self . options . unitWidth
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'right'
2010-09-03 08:47:40 +00:00
} )
. click ( function ( ) {
2011-02-25 10:23:33 +00:00
that . $input [ 0 ] . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
} else if ( self . options . unit . length > 1 ) {
2010-09-03 20:54:40 +00:00
self . selectUnitId = self . options . id + 'Unit' ;
2010-09-03 08:47:40 +00:00
that . $unit = new Ox . Select ( {
id : self . selectUnitId ,
items : $ . map ( self . options . unit , function ( unit , i ) {
2011-01-13 12:43:20 +00:00
//Ox.print('unit', unit)
2010-09-03 08:47:40 +00:00
return {
checked : i == 0 ,
id : unit . id ,
group : self . selectUnitId , // fixme: same id, works here, but should be different
title : unit . title
} ;
} ) ,
2010-09-03 20:54:40 +00:00
overlap : 'left' ,
2010-09-03 08:47:40 +00:00
size : self . options . size ,
width : self . options . unitWidth
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'right'
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
}
if ( self . values ) {
that . $separator = [ ] ;
$ . each ( self . options . value , function ( i , v ) {
if ( i < self . values - 1 ) {
that . $separator [ i ] = new Ox . Label ( {
2010-09-03 20:54:40 +00:00
textAlign : 'center' ,
2010-09-03 08:47:40 +00:00
title : self . options . separator [ i ] ,
width : self . options . separatorWidth [ i ] + 32
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'left' ,
marginLeft : ( v . width - ( i == 0 ? 16 : 32 ) ) + 'px'
2010-09-03 08:47:40 +00:00
} )
. click ( function ( ) {
2011-02-25 10:23:33 +00:00
that . $input [ 0 ] . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
} )
. appendTo ( that ) ;
}
} ) ;
}
that . $input = [ ] ;
//self.margin = 0;
$ . each ( self . options . value , function ( i , v ) {
2011-01-13 12:43:20 +00:00
//Ox.print('o k i', self.options, self.keyName, i);
2010-09-03 08:47:40 +00:00
var id = self . keyName ? $ . map ( self . selectedKey , function ( v , i ) {
return self . options [ self . keyName ] [ i ] . id ;
2010-09-03 20:54:40 +00:00
} ) . join ( '.' ) : '' ;
2010-09-03 08:47:40 +00:00
//self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width)
2011-01-13 12:43:20 +00:00
//Ox.print('v:', v, 'id:', id)
2010-09-03 20:54:40 +00:00
if ( self . options . type == 'select' ) {
2010-09-03 08:47:40 +00:00
that . $input [ i ] = new Ox . Select ( {
id : v . id ,
items : v . items ,
width : v . width
} ) .
css ( {
2010-09-03 20:54:40 +00:00
float : 'left'
2010-09-03 08:47:40 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
} else if ( self . options . type == 'range' ) {
2010-09-03 08:47:40 +00:00
that . $input [ i ] = new Ox . Range ( v )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'left'
2010-09-03 08:47:40 +00:00
} ) ;
} else {
that . $input [ i ] = new Ox . InputElement ( {
autocomplete : self . options . autocomplete [ id ] ,
autocorrect : self . options . autocorrect [ id ] ,
autosuggest : self . options . autosuggest [ id ] ,
autosuggestHighlight : self . options . autosuggestHighlight ,
autosuggestSubmit : self . options . autosuggestSubmit ,
autovalidate : self . options . autovalidate [ id ] ,
autovalidateName : self . options . autovalidateName ,
disabled : self . options . disabled ,
height : self . options . height ,
2010-09-03 20:54:40 +00:00
id : self . options . id + 'Input' + Ox . toTitleCase ( v . id ) ,
key : self . hasSelectableKeys ? self . options [ self . keyName ] [ 0 ] . label [ self . selectedKey [ 0 ] ] . id : '' ,
2010-09-03 08:47:40 +00:00
parent : that ,
2010-09-03 20:54:40 +00:00
placeholder : self . options . placeholder ? self . options . placeholder [ 0 ] . label [ 0 ] . title : '' ,
2010-09-03 08:47:40 +00:00
size : self . options . size ,
type : self . options . type ,
value : v . value ,
width : v . width
} ) ;
}
that . $input [ i ]
. css ( $ . extend ( { } , self . options . value . length > 1 ? {
2010-09-03 20:54:40 +00:00
float : 'left' ,
2010-09-03 08:47:40 +00:00
marginLeft : - Ox . sum ( $ . map ( self . options . value , function ( v _ , i _ ) {
return i _ > i ? self . options . value [ i _ - 1 ] . width + self . options . separatorWidth [ i _ - 1 ] : ( i _ == i ? 16 : 0 ) ;
} ) )
} : { } ) )
. appendTo ( that ) ;
} ) ;
//width(self.options.width);
function changeKey ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('changeKey', data);
2010-09-03 08:47:40 +00:00
if ( data ) { // fixme: necessary?
2010-09-07 15:58:15 +00:00
self . key = {
2010-09-03 08:47:40 +00:00
id : data . id ,
title : data . value // fixme: should be data.title
} ;
that . $input [ 0 ] . options ( {
key : data . id
} ) ;
}
if ( self . options . label ) {
//that.$label.html(self.option.title);
2011-02-25 10:23:33 +00:00
that . $input [ 0 ] . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
//autocompleteCall();
} else {
that . $input [ 0 ] . options ( {
placeholder : data . value // fixme: should be data.title
} ) ;
/ *
2010-09-03 20:54:40 +00:00
if ( that . $input . hasClass ( 'OxPlaceholder' ) ) {
2010-09-03 08:47:40 +00:00
that . $input . val ( self . key . title ) ;
//that.$input.focus();
2010-07-02 12:33:45 +00:00
} else {
2010-09-03 08:47:40 +00:00
that . $input . focus ( ) ;
self . options . autosuggest && autosuggestCall ( ) ;
2010-07-02 12:33:45 +00:00
}
2010-09-03 08:47:40 +00:00
* /
}
}
function changeUnit ( ) {
2011-02-25 10:23:33 +00:00
that . $input [ 0 ] . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
}
function clear ( ) {
$ . each ( that . $input , function ( i , v ) {
2010-09-03 20:54:40 +00:00
v . val ( '' ) ;
2010-09-03 08:47:40 +00:00
} ) ;
2011-02-25 10:23:33 +00:00
that . $input [ 0 ] . focusInput ( ) ;
2010-09-03 08:47:40 +00:00
}
function height ( value ) {
var stop = 8 / value ;
2010-09-03 20:54:40 +00:00
if ( self . options . type == 'textarea' ) {
2010-09-03 08:47:40 +00:00
that . $element
. height ( value )
. css ( {
2010-09-03 20:54:40 +00:00
background : '-moz-linear-gradient(top, rgb(224, 224, 224), rgb(208, 208, 208) ' + ( stop * 100 ) + '%, rgb(208, 208, 208) ' + ( 100 - stop * 100 ) + '%, rgb(192, 192, 192))'
2010-09-03 08:47:40 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
background : '-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(' + stop + ', rgb(208, 208, 208)), color-stop(' + ( 1 - stop ) + ', rgb(208, 208, 208)), to(rgb(192, 192, 192)))'
2010-09-03 08:47:40 +00:00
} ) ;
that . $input
. height ( value )
. css ( {
2010-09-03 20:54:40 +00:00
background : '-moz-linear-gradient(top, rgb(224, 224, 224), rgb(240, 240, 240) ' + ( stop * 100 ) + '%, rgb(240, 240, 240) ' + ( 100 - stop * 100 ) + '%, rgb(255, 255, 255))'
2010-09-03 08:47:40 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
background : '-webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), color-stop(' + stop + ', rgb(240, 240, 240)), color-stop(' + ( 1 - stop ) + ', rgb(240, 240, 240)), to(rgb(255, 255, 255)))'
2010-09-03 08:47:40 +00:00
} ) ;
}
}
function selectUnit ( ) {
self . $selectUnitMenu . show ( ) ;
}
function submit ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('submit')
2010-09-03 08:47:40 +00:00
var value = that . $input . val ( ) ;
that . $input . blur ( ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'submit' , self . options . key ? {
2010-09-03 08:47:40 +00:00
key : self . options . key ,
value : value
} : value ) ;
}
function width ( value ) {
that . $element . width ( value ) ;
that . $input . width (
2010-09-03 20:54:40 +00:00
value - ( self . options . type == 'textarea' ? 0 : 12 ) -
2010-09-03 08:47:40 +00:00
( self . options . label ? self . options . labelWidth : 0 ) -
( self . options . placeholder . length > 1 ? 16 : 0 ) -
( self . options . unit ? self . options . unitWidth : 0 ) -
( self . options . clear ? 16 : 0 )
) ;
}
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'height' ) {
2010-09-03 08:47:40 +00:00
height ( value ) ;
2010-09-03 20:54:40 +00:00
} else if ( key == 'width' ) {
2010-09-03 08:47:40 +00:00
width ( value ) ;
}
} ;
that . changeLabel = function ( id ) {
that . $key . html ( Ox . getObjectById ( self . options . label , id ) . title ) ;
self . selectMenu . checkItem ( id ) ;
} ;
return that ;
}
Ox . InputElement _ = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element (
2010-09-03 20:54:40 +00:00
options . type == 'textarea' ? 'textarea' : 'input' , self
2010-09-03 08:47:40 +00:00
)
. defaults ( {
autocomplete : null ,
autocorrect : null ,
autosuggest : null ,
autosuggestHighlight : false ,
autosuggestSubmit : false ,
autovalidate : null ,
disabled : false ,
height : 128 ,
2010-09-03 20:54:40 +00:00
id : '' ,
key : '' ,
2010-09-03 08:47:40 +00:00
parent : null ,
2010-09-03 20:54:40 +00:00
placeholder : '' ,
size : 'medium' ,
type : 'text' ,
value : '' ,
2010-09-07 15:58:15 +00:00
width : 128
2010-09-03 08:47:40 +00:00
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxInput Ox' + Ox . toTitleCase ( self . options . size ) + (
( self . options . placeholder && self . options . value === '' ) ?
' OxPlaceholder' : ''
2010-09-03 08:47:40 +00:00
) )
2010-09-03 20:54:40 +00:00
. attr ( self . options . type == 'textarea' ? { } : {
2010-09-03 08:47:40 +00:00
type : self . options . type
} )
. css ( {
2010-09-03 20:54:40 +00:00
float : 'left' ,
width : ( self . options . width - 14 ) + 'px'
2010-09-03 08:47:40 +00:00
} )
. val (
2010-09-03 20:54:40 +00:00
( self . options . placeholder && self . options . value === '' ) ?
2010-09-03 08:47:40 +00:00
self . options . placeholder : self . options . value
)
. blur ( blur )
. change ( change )
. focus ( focus ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('InputElement self.options', self.options)
2010-09-03 08:47:40 +00:00
self . bindKeyboard = self . options . autocomplete || self . options . autocorrect ||
self . options . autosuggest || self . options . autovalidate ;
if ( self . options . autosuggest ) {
2010-09-03 20:54:40 +00:00
self . autosuggestId = self . options . id + 'Menu' ; // fixme: we do this in other places ... are we doing it the same way? var name?
2010-09-03 08:47:40 +00:00
self . $autosuggestMenu = new Ox . Menu ( {
element : that . $element ,
id : self . autosuggestId ,
offset : {
left : 4 ,
top : 0
} ,
size : self . options . size
} ) ;
2010-09-03 20:54:40 +00:00
that . bindEvent ( 'click_' + self . autosuggestId , clickMenu ) ;
2010-09-03 08:47:40 +00:00
}
2010-09-03 20:54:40 +00:00
that . bindEvent ( $ . extend ( self . options . type == 'textarea' ? { } : {
2010-09-03 08:47:40 +00:00
key _enter : submit
} , {
key _escape : cancel
} ) ) ;
function autocomplete ( value ) {
var value = value . toLowerCase ( ) ,
2010-09-03 20:54:40 +00:00
ret = '' ;
if ( value !== '' ) {
2010-09-03 08:47:40 +00:00
$ . each ( self . options . autocomplete , function ( i , v ) {
if ( v . toLowerCase ( ) . indexOf ( value ) == 0 ) {
ret = v ;
return false ;
}
} ) ;
}
return ret ;
}
function autocompleteCall ( ) {
var value = that . $element . val ( ) ;
Ox . isFunction ( self . options . autocomplete ) ?
self . options . autocomplete ( self . options . key ? {
key : self . options . key ,
value : value
} : value , autocompleteCallback ) :
autocompleteCallback ( autocomplete ( value ) ) ;
}
function autocompleteCallback ( value ) {
var pos = cursor ( ) [ 0 ] ;
if ( value ) {
that . $element . val ( value ) ;
cursor ( pos , value . length ) ;
2010-02-19 10:24:02 +00:00
}
2010-02-18 07:27:32 +00:00
}
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
function autocorrect ( value ) {
var length = value . length ;
2010-09-03 20:54:40 +00:00
return $ . map ( value . toLowerCase ( ) . split ( '' ) , function ( v , i ) {
2010-09-03 08:47:40 +00:00
if ( new RegExp ( self . options . autocorrect ) ( v ) ) {
return v
} else {
return null ;
}
2010-09-03 20:54:40 +00:00
} ) . join ( '' ) ;
2010-09-03 08:47:40 +00:00
}
function autocorrectCall ( blur ) {
var blur = blur || false ,
value = that . $element . val ( ) ,
pos = cursor ( ) [ 0 ] ;
Ox . isFunction ( self . options . autocorrect ) ?
self . options . autocorrect ( value , blur , autocorrectCallback ) :
autocorrectCallback ( autocorrect ( value ) , blue ) ;
}
function autocorrectCallback ( value , blur ) {
var length = that . $element . val ( ) . length ;
that . $element . val ( self . options . value ) ;
! blur && cursor ( pos + value . length - length ) ;
}
function autosuggest ( value ) {
var value = value . toLowerCase ( ) ,
values = [ [ ] , [ ] ] ;
2010-09-03 20:54:40 +00:00
if ( value !== '' ) {
2010-09-03 08:47:40 +00:00
$ . each ( self . options . key ? self . options . autosuggest [ self . options . key ] : self . options . autosuggest , function ( i , v ) {
2010-09-03 20:54:40 +00:00
//Ox.print('v...', v)
2010-09-03 08:47:40 +00:00
var index = v . toLowerCase ( ) . indexOf ( value ) ;
index > - 1 && values [ index == 0 ? 0 : 1 ] . push ( v ) ;
} ) ;
}
return $ . merge ( values [ 0 ] , values [ 1 ] ) ;
}
function autosuggestCall ( ) {
var value = that . $element . val ( ) ;
Ox . isFunction ( self . options . autosuggest ) ?
self . options . autosuggest ( self . options . key ? {
key : self . options . key ,
value : value
} : value , autosuggestCallback ) :
autosuggestCallback ( autosuggest ( value ) ) ;
}
function autosuggestCallback ( values ) {
var values = values || [ ] ,
selected = values . length == 1 ? 0 : - 1 ,
value = that . $element . val ( ) . toLowerCase ( ) ;
2010-09-03 20:54:40 +00:00
//Ox.print('values', values);
2010-09-03 08:47:40 +00:00
if ( values . length ) {
values = $ . map ( values , function ( v , i ) {
if ( value == v . toLowerCase ( ) ) {
selected = i ;
2010-02-18 15:11:14 +00:00
}
2010-02-18 07:56:37 +00:00
return {
2010-09-03 20:54:40 +00:00
id : v . toLowerCase ( ) . replace ( / /g , '_' ) , // fixme: need function to do lowercase, underscores etc?
2010-09-03 08:47:40 +00:00
title : self . options . autosuggestHighlight ? v . replace (
2010-09-03 20:54:40 +00:00
new RegExp ( '(' + value + ')' , 'ig' ) ,
'<span class="OxHighlight">$1</span>'
2010-09-03 08:47:40 +00:00
) : v
2010-02-18 09:11:47 +00:00
} ;
2010-02-18 07:56:37 +00:00
} ) ;
2010-09-03 08:47:40 +00:00
// self.selectMenu && self.selectMenu.hideMenu(); // fixme: need event
self . $autosuggestMenu . options ( {
items : values ,
2010-02-18 15:11:14 +00:00
selected : selected
2010-02-18 07:56:37 +00:00
} ) . showMenu ( ) ;
} else {
2010-09-03 08:47:40 +00:00
self . $autosuggestMenu . hideMenu ( ) ;
2010-02-18 07:56:37 +00:00
}
2010-02-10 15:49:33 +00:00
}
2010-02-19 10:24:02 +00:00
2010-09-03 08:47:40 +00:00
function autovalidate ( value ) {
return {
valid : self . options . autovalidate ( value ) != null ,
2010-09-03 20:54:40 +00:00
message : 'Invalid ' + self . options . name
2010-09-03 08:47:40 +00:00
} ;
}
function autovalidateCall ( blur ) {
2010-07-24 01:32:08 +00:00
var blur = blur || false ,
2010-09-03 08:47:40 +00:00
value = that . $element . val ( ) ;
2010-09-03 20:54:40 +00:00
if ( value !== '' ) {
2010-09-03 08:47:40 +00:00
Ox . isFunction ( self . options . autovalidate ) ?
self . options . autovalidate ( value , autovalidateCallback ) :
autovalidateCallback ( autovalidate ( value ) , blur ) ;
} else {
autovalidateCallback ( {
blur : blur ,
valid : false ,
2010-09-03 20:54:40 +00:00
message : 'Empty ' + self . options . name
2010-09-03 08:47:40 +00:00
} ) ;
}
}
function autovalidateCallback ( data , blur ) {
if ( data . valid != self . valid ) {
self . valid = data . valid ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'validate' , $ . extend ( data , {
2010-09-03 08:47:40 +00:00
blur : blur
} ) ) ;
2010-07-24 01:32:08 +00:00
}
}
function blur ( ) {
2010-09-03 20:54:40 +00:00
if ( ! self . options . autosuggest || self . $autosuggestMenu . is ( ':hidden' ) ) {
2011-01-13 12:43:20 +00:00
//Ox.print('losing focus...')
2010-09-03 08:47:40 +00:00
that . loseFocus ( ) ;
2010-09-03 20:54:40 +00:00
self . options . parent . removeClass ( 'OxFocus' ) ;
2010-09-03 08:47:40 +00:00
self . options . autocorrect && autocorrectCall ( true ) ;
// self.options.autosuggest && self.$autosuggestMenu.hideMenu();
self . options . autovalidate && autovalidateCall ( true ) ;
2010-09-03 20:54:40 +00:00
if ( self . options . placeholder && that . $element . val ( ) === '' ) {
that . $element . addClass ( 'OxPlaceholder' ) . val ( self . options . placeholder ) ;
2010-09-03 08:47:40 +00:00
}
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
if ( self . bindKeyboard ) {
2010-09-03 20:54:40 +00:00
$document . unbind ( 'keydown' , keypress ) ;
$document . unbind ( 'keypress' , keypress ) ;
2010-07-24 01:32:08 +00:00
}
}
2010-02-19 10:24:02 +00:00
function cancel ( ) {
2010-09-03 08:47:40 +00:00
that . $element . blur ( ) ;
2010-02-19 10:24:02 +00:00
}
2010-09-03 08:47:40 +00:00
function change ( ) {
2010-02-19 10:24:02 +00:00
}
2010-02-20 11:05:58 +00:00
function clear ( ) {
2010-09-03 20:54:40 +00:00
that . $element . val ( '' ) . focus ( ) ;
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
function clickMenu ( event , data ) {
2011-01-13 12:43:20 +00:00
//Ox.print('clickMenu', data);
2010-09-03 08:47:40 +00:00
that . $element . val ( data . title ) ;
//self.$autosuggestMenu.hideMenu();
self . options . autosuggestSubmit && submit ( ) ;
}
function cursor ( start , end ) {
/ *
cursor ( ) returns [ start , end ]
cursor ( start ) sets start
cursor ( [ start , end ] ) sets start and end
cursor ( start , end ) sets start and end
* /
var isArray = Ox . isArray ( start ) ;
2010-07-24 01:32:08 +00:00
if ( arguments . length == 0 ) {
2010-09-03 08:47:40 +00:00
return [ that . $element [ 0 ] . selectionStart , that . $element [ 0 ] . selectionEnd ] ;
2010-07-24 01:32:08 +00:00
} else {
2010-09-03 08:47:40 +00:00
start = isArray ? start [ 0 ] : start ;
end = isArray ? start [ 1 ] : ( end ? end : start ) ;
that . $element [ 0 ] . setSelectionRange ( start , end ) ;
2010-07-24 01:32:08 +00:00
}
2010-01-07 20:21:07 +00:00
}
2010-02-19 10:24:02 +00:00
2010-01-07 20:21:07 +00:00
function focus ( ) {
2010-09-03 08:47:40 +00:00
var val = that . $element . val ( ) ;
2010-02-19 10:24:02 +00:00
that . gainFocus ( ) ;
2010-09-03 20:54:40 +00:00
self . options . parent . addClass ( 'OxFocus' ) ;
if ( that . $element . hasClass ( 'OxPlaceholder' ) ) {
that . $element . val ( '' ) . removeClass ( 'OxPlaceholder' ) ;
2010-01-07 20:21:07 +00:00
}
2010-09-03 08:47:40 +00:00
if ( self . bindKeyboard ) {
2010-02-18 07:27:32 +00:00
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function
2010-09-03 08:47:40 +00:00
$document . keydown ( keypress ) ;
$document . keypress ( keypress ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('calling autosuggest...')
2010-09-03 08:47:40 +00:00
self . options . autosuggest && setTimeout ( autosuggestCall , 0 ) ; // fixme: why is the timeout needed?
2010-02-18 07:27:32 +00:00
}
2010-01-07 20:21:07 +00:00
}
2010-02-19 10:24:02 +00:00
2010-02-18 14:24:17 +00:00
function keypress ( event ) {
2011-01-13 12:43:20 +00:00
//Ox.print('keyCode', event.keyCode)
2010-09-03 08:47:40 +00:00
if ( event . keyCode != 9 && event . keyCode != 13 && event . keyCode != 27 ) { // fixme: can't 13 and 27 return false?
setTimeout ( function ( ) { // fixme: document what this timeout is for
var value = that . $element . val ( ) ;
if ( value != self . options . value ) {
self . options . value = value ;
2010-07-24 01:32:08 +00:00
self . options . autocomplete && autocompleteCall ( ) ;
2010-09-03 08:47:40 +00:00
self . options . autocorrect && autocorrectCall ( ) ;
self . options . autosuggest && autosuggestCall ( ) ;
self . options . autovalidate && autovalidateCall ( ) ;
2010-02-18 15:15:23 +00:00
}
2010-02-18 15:19:36 +00:00
} , 25 ) ;
2010-02-18 15:15:23 +00:00
}
2010-02-18 07:56:37 +00:00
}
2010-02-19 10:24:02 +00:00
function submit ( ) {
2010-09-03 08:47:40 +00:00
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'placeholder' ) {
that . $element . hasClass ( 'OxPlaceholder' ) && that . $element . val ( value ) ;
} else if ( key == 'value' ) {
2010-09-03 08:47:40 +00:00
if ( self . options . placeholder ) {
2010-09-03 20:54:40 +00:00
if ( value === '' ) {
that . $element . addClass ( 'OxPlaceholder' ) . val ( self . options . placeholder ) ;
2010-09-03 08:47:40 +00:00
} else {
2010-09-03 20:54:40 +00:00
that . $element . removeClass ( 'OxPlaceholder' ) ;
2010-09-03 08:47:40 +00:00
}
2010-07-24 01:32:08 +00:00
}
2010-09-03 08:47:40 +00:00
change ( ) ; // fixme: keypress too
2010-07-24 01:32:08 +00:00
}
}
2010-02-27 08:46:49 +00:00
return that ;
2010-09-03 08:47:40 +00:00
}
2010-01-07 20:21:07 +00:00
2010-09-03 08:47:40 +00:00
Ox . Range _ = function ( options , self ) {
2010-01-07 20:21:07 +00:00
/ *
init
* /
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
animate : false ,
arrows : false ,
arrowStep : 1 ,
2010-09-03 20:54:40 +00:00
arrowSymbols : [ 'previous' , 'next' ] ,
2010-01-07 20:21:07 +00:00
max : 100 ,
min : 0 ,
2010-09-03 20:54:40 +00:00
orientation : 'horizontal' ,
2010-01-07 20:21:07 +00:00
step : 1 ,
size : 128 ,
thumbSize : 16 ,
thumbValue : false ,
trackImages : [ ] ,
trackStep : 0 ,
2010-09-03 08:47:40 +00:00
value : 0 ,
valueNames : null
2010-01-07 20:21:07 +00:00
} )
. options ( $ . extend ( options , {
arrowStep : options . arrowStep ?
options . arrowStep : options . step ,
trackImages : $ . makeArray ( options . trackImages || [ ] )
} ) )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxRange' )
2010-09-03 08:47:40 +00:00
. css ( {
2010-09-03 20:54:40 +00:00
width : self . options . size + 'px'
2010-09-03 08:47:40 +00:00
} ) ;
2010-01-07 20:21:07 +00:00
// fixme: self. ... ?
var trackImages = self . options . trackImages . length ,
values = ( self . options . max - self . options . min + self . options . step ) /
self . options . step ;
/ *
construct
* /
that . $element
. css ( {
2010-09-03 20:54:40 +00:00
width : self . options . size + 'px'
2010-01-07 20:21:07 +00:00
} ) ;
if ( self . options . arrows ) {
var $arrowDec = Ox . Button ( {
2010-09-03 20:54:40 +00:00
style : 'symbol' ,
type : 'image' ,
2010-03-06 09:54:30 +00:00
value : self . options . arrowSymbols [ 0 ]
2010-01-07 20:21:07 +00:00
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxArrow' )
2010-01-07 20:21:07 +00:00
. mousedown ( mousedownArrow )
. click ( clickArrowDec )
. appendTo ( that . $element ) ;
}
var $track = new Ox . Element ( )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTrack' )
2010-01-07 20:21:07 +00:00
. mousedown ( clickTrack )
2010-09-03 08:47:40 +00:00
. appendTo ( that . $element ) ;
2010-01-07 20:21:07 +00:00
if ( trackImages ) {
var width = parseFloat ( screen . width / trackImages ) ,
2010-09-03 20:54:40 +00:00
$image = $ ( '<canvas>' )
2010-01-07 20:21:07 +00:00
. attr ( {
width : width * trackImages ,
height : 14
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxImage' )
2010-09-03 08:47:40 +00:00
. appendTo ( $track . $element ) ,
2010-01-07 20:21:07 +00:00
c = $image [ 0 ] . getContext ( '2d' ) ;
2010-01-25 15:10:44 +00:00
c . mozImageSmoothingEnabled = false ; // we may want to remove this later
2010-01-07 20:21:07 +00:00
$ . each ( self . options . trackImages , function ( i , v ) {
2010-09-03 08:47:40 +00:00
var left = 0 ;
2010-09-03 20:54:40 +00:00
$ ( '<img/>' )
2010-01-07 20:21:07 +00:00
. attr ( {
src : v
} )
. load ( function ( ) {
2010-09-03 08:47:40 +00:00
c . drawImage ( this , left , 0 , self . trackImageWidth [ i ] , 14 ) ;
2010-01-07 20:21:07 +00:00
} ) ;
2010-09-03 08:47:40 +00:00
left += self . trackImageWidth [ i ] ;
2010-01-07 20:21:07 +00:00
} ) ;
}
var $thumb = Ox . Button ( { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxThumb' )
2010-01-07 20:21:07 +00:00
. appendTo ( $track ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('----')
2010-01-07 20:21:07 +00:00
if ( self . options . arrows ) {
var $arrowInc = Ox . Button ( {
2010-09-03 20:54:40 +00:00
style : 'symbol' ,
type : 'image' ,
2010-03-06 09:54:30 +00:00
value : self . options . arrowSymbols [ 1 ]
2010-01-07 20:21:07 +00:00
} )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxArrow' )
2010-01-07 20:21:07 +00:00
. mousedown ( mousedownArrow )
. click ( clickArrowInc )
. appendTo ( that . $element ) ;
}
var rangeWidth , trackWidth , imageWidth , thumbWidth ;
setWidth ( self . options . size ) ;
/ *
private functions
* /
function clickArrowDec ( ) {
2010-09-03 20:54:40 +00:00
that . removeClass ( 'OxActive' ) ;
2010-01-07 20:21:07 +00:00
setValue ( self . options . value - self . options . arrowStep , 200 )
}
function clickArrowInc ( ) {
2010-09-03 20:54:40 +00:00
that . removeClass ( 'OxActive' ) ;
2010-01-07 20:21:07 +00:00
setValue ( self . options . value + self . options . arrowStep , 200 ) ;
}
function clickTrack ( e ) {
2010-09-03 08:47:40 +00:00
//Ox.Focus.focus();
2010-01-07 20:21:07 +00:00
var left = $track . offset ( ) . left ,
2010-09-03 20:54:40 +00:00
offset = $ ( e . target ) . hasClass ( 'OxThumb' ) ?
2010-01-07 20:21:07 +00:00
e . clientX - $thumb . offset ( ) . left - thumbWidth / 2 - 2 : 0 ;
function val ( e ) {
return getVal ( e . clientX - left - offset ) ;
}
setValue ( val ( e ) , 200 ) ;
$window . mousemove ( function ( e ) {
setValue ( val ( e ) ) ;
} ) ;
2010-09-03 20:54:40 +00:00
$window . one ( 'mouseup' , function ( ) {
$window . unbind ( 'mousemove' ) ;
2010-01-07 20:21:07 +00:00
} ) ;
}
function getPx ( val ) {
var pxPerVal = ( trackWidth - thumbWidth - 2 ) /
2010-09-03 08:47:40 +00:00
( self . options . max - self . options . min ) ;
2010-01-07 20:21:07 +00:00
return Math . ceil ( ( val - self . options . min ) * pxPerVal + 1 ) ;
}
function getVal ( px ) {
var px = trackWidth / values >= 16 ? px : px - 8 ,
valPerPx = ( self . options . max - self . options . min ) /
2010-09-07 15:58:15 +00:00
( trackWidth - thumbWidth ) ;
2010-01-07 20:21:07 +00:00
return Ox . limit ( self . options . min +
2010-09-03 08:47:40 +00:00
Math . floor ( px * valPerPx / self . options . step ) * self . options . step ,
self . options . min , self . options . max ) ;
2010-01-07 20:21:07 +00:00
}
function mousedownArrow ( ) {
2010-09-03 20:54:40 +00:00
that . addClass ( 'OxActive' ) ;
2010-01-07 20:21:07 +00:00
}
function setThumb ( animate ) {
2010-09-03 20:54:40 +00:00
var animate = typeof animate != 'undefined' ? animate : 0 ;
2010-01-07 20:21:07 +00:00
$thumb . animate ( {
2010-09-03 20:54:40 +00:00
marginLeft : ( getPx ( self . options . value ) - 2 ) + 'px' ,
width : thumbWidth + 'px'
2010-01-07 20:21:07 +00:00
} , self . options . animate ? animate : 0 , function ( ) {
if ( self . options . thumbValue ) {
$thumb . options ( {
2010-09-03 08:47:40 +00:00
value : self . options . valueNames ?
self . options . valueNames [ self . options . value ] :
self . options . value
2010-01-07 20:21:07 +00:00
} ) ;
}
} ) ;
}
function setValue ( val , animate ) {
val = Ox . limit ( val , self . options . min , self . options . max ) ;
if ( val != self . options . value ) {
that . options ( {
value : val
} ) ;
setThumb ( animate ) ;
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'change' , { value : val } ) ;
2010-01-07 20:21:07 +00:00
}
}
function setWidth ( width ) {
trackWidth = width - self . options . arrows * 32 ;
thumbWidth = Math . max ( trackWidth / values - 2 , self . options . thumbSize - 2 ) ;
that . $element . css ( {
2010-09-03 20:54:40 +00:00
width : ( width - 2 ) + 'px'
2010-01-07 20:21:07 +00:00
} ) ;
$track . css ( {
2010-09-03 20:54:40 +00:00
width : ( trackWidth - 2 ) + 'px'
2010-01-07 20:21:07 +00:00
} ) ;
if ( trackImages ) {
$image . css ( {
2010-09-03 20:54:40 +00:00
width : ( trackWidth - 2 ) + 'px'
2010-01-07 20:21:07 +00:00
} ) ;
}
$thumb . css ( {
2010-09-03 20:54:40 +00:00
width : ( thumbWidth - 2 ) + 'px' ,
2010-01-07 20:21:07 +00:00
padding : 0
} ) ;
setThumb ( ) ;
}
/ *
shared functions
* /
2010-09-03 08:47:40 +00:00
self . onChange = function ( key , value ) {
2010-01-07 20:21:07 +00:00
}
return that ;
} ;
2010-02-10 09:59:59 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Lists
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2010-07-05 07:09:34 +00:00
Ox . IconList = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
2011-01-03 12:01:38 +00:00
centerSelection : false ,
2011-01-11 06:17:45 +00:00
draggable : true ,
2010-09-03 20:54:40 +00:00
id : '' ,
2011-02-25 10:23:33 +00:00
item : null ,
items : null ,
2010-07-05 07:09:34 +00:00
keys : [ ] ,
2011-01-02 10:01:55 +00:00
max : - 1 ,
min : 0 ,
2010-09-03 20:54:40 +00:00
orientation : 'both' ,
2011-01-02 10:01:55 +00:00
selected : [ ] ,
2010-07-05 07:09:34 +00:00
size : 128 ,
sort : [ ] ,
} )
. options ( options || { } ) ;
$ . extend ( self , {
itemHeight : self . options . size * 1.5 ,
itemWidth : self . options . size
} ) ;
that . $element = new Ox . List ( {
2011-01-03 12:01:38 +00:00
centered : self . options . centered ,
2010-07-05 07:09:34 +00:00
construct : constructItem ,
2011-01-11 06:17:45 +00:00
draggable : self . options . draggable ,
2010-09-08 16:35:34 +00:00
id : self . options . id ,
2010-07-05 07:09:34 +00:00
itemHeight : self . itemHeight ,
2011-02-25 10:23:33 +00:00
items : self . options . items ,
2010-07-05 07:09:34 +00:00
itemWidth : self . itemWidth ,
2010-09-08 16:35:34 +00:00
keys : self . options . keys ,
2010-09-06 23:44:37 +00:00
orientation : self . options . orientation ,
2010-09-05 14:24:22 +00:00
keys : self . options . keys ,
2011-01-02 10:01:55 +00:00
max : self . options . max ,
min : self . options . min ,
selected : self . options . selected ,
2010-09-08 16:35:34 +00:00
size : self . options . size ,
sort : self . options . sort ,
2010-09-07 15:58:15 +00:00
type : 'icon' ,
2010-09-08 16:35:34 +00:00
unique : self . options . unique
2011-01-02 10:01:55 +00:00
} , $ . extend ( { } , self ) ) // pass event handler
2010-09-07 15:58:15 +00:00
. addClass ( 'OxIconList Ox' + Ox . toTitleCase ( self . options . orientation ) )
2010-07-05 07:09:34 +00:00
. click ( click )
. dblclick ( dblclick )
. scroll ( scroll ) ;
2010-09-08 16:35:34 +00:00
updateKeys ( ) ;
2010-07-05 07:09:34 +00:00
function click ( ) {
}
function constructItem ( data ) {
2011-01-05 16:56:53 +00:00
var data = ! $ . isEmptyObject ( data ) ?
self . options . item ( data , self . options . sort , self . options . size ) :
{ height : 8 , width : 5 } ,
2010-09-08 16:35:34 +00:00
ratio = data . width / data . height ;
2010-07-05 07:09:34 +00:00
return new Ox . IconItem ( $ . extend ( data , {
2011-01-11 06:17:45 +00:00
height : Math . round ( self . options . size / ( ratio <= 1 ? 1 : ratio ) ) ,
2010-09-08 16:35:34 +00:00
size : self . options . size ,
2011-01-11 06:17:45 +00:00
width : Math . round ( self . options . size * ( ratio >= 1 ? 1 : ratio ) )
2010-07-05 07:09:34 +00:00
} ) ) ;
}
function dblclick ( ) {
}
function scroll ( ) {
}
2010-09-08 16:35:34 +00:00
function updateKeys ( ) {
self . options . keys = Ox . unique ( $ . merge ( self . options . keys , [ self . options . sort [ 0 ] . key ] ) ) ;
that . $element . options ( {
keys : self . options . keys
} ) ;
}
self . onChange = function ( key , value ) {
2011-02-25 10:23:33 +00:00
if ( key == 'items' ) {
2010-09-08 16:35:34 +00:00
that . $element . options ( key , value ) ;
2011-01-15 06:09:22 +00:00
} else if ( key == 'paste' ) {
that . $element . options ( key , value ) ;
2011-01-10 00:07:48 +00:00
} else if ( key == 'selected' ) {
that . $element . options ( key , value ) ;
2010-09-08 16:35:34 +00:00
}
}
2010-09-13 11:53:31 +00:00
that . closePreview = function ( ) {
that . $element . closePreview ( ) ;
} ;
2011-01-15 06:09:22 +00:00
that . paste = function ( data ) {
that . $element . paste ( data ) ;
return that ;
} ;
that . reloadList = function ( ) {
that . $element . reloadList ( ) ;
return that ;
} ;
2011-01-03 12:01:38 +00:00
that . scrollToSelection = function ( ) {
that . $element . scrollToSelection ( ) ;
} ;
2010-11-25 10:05:50 +00:00
that . size = function ( ) {
that . $element . size ( ) ;
2011-01-15 06:09:22 +00:00
} ;
2010-09-18 10:48:20 +00:00
2010-09-08 16:35:34 +00:00
that . sortList = function ( key , operator ) {
self . options . sort = [ {
key : key ,
operator : operator
} ] ;
updateKeys ( ) ;
that . $element . sortList ( key , operator ) ;
2011-01-15 06:09:22 +00:00
} ;
that . value = function ( id , key , value ) {
// fixme: make this accept id, {k: v, ...}
if ( arguments . length == 1 ) {
return that . $element . value ( id ) ;
} else if ( arguments . length == 2 ) {
return that . $element . value ( id , key ) ;
} else {
that . $element . value ( id , key , value ) ;
return that ;
}
2010-09-08 16:35:34 +00:00
}
2010-09-03 20:54:40 +00:00
2010-07-05 07:09:34 +00:00
return that ;
} ;
Ox . IconItem = function ( options , self ) {
2011-01-11 06:17:45 +00:00
//Ox.print('IconItem', options, self)
2011-01-05 16:56:53 +00:00
2010-09-07 15:58:15 +00:00
var self = self || { } ,
2010-07-05 07:09:34 +00:00
that = new Ox . Element ( { } , self )
. defaults ( {
2010-09-08 16:35:34 +00:00
height : 128 ,
2010-09-03 20:54:40 +00:00
id : '' ,
info : '' ,
2010-07-05 07:09:34 +00:00
size : 128 ,
2010-09-03 20:54:40 +00:00
title : '' ,
2010-09-08 16:35:34 +00:00
width : 128 ,
2010-09-03 20:54:40 +00:00
url : ''
2010-07-05 07:09:34 +00:00
} )
2010-09-06 23:44:37 +00:00
. options ( options || { } )
2010-07-05 07:09:34 +00:00
$ . extend ( self , {
2011-01-02 10:01:55 +00:00
fontSize : self . options . size == 64 ? 6 : 9 ,
2010-09-07 15:58:15 +00:00
height : self . options . size * 1.5 ,
2011-01-02 10:01:55 +00:00
lineLength : self . options . size == 64 ? 15 : 23 ,
2010-09-08 16:35:34 +00:00
lines : self . options . size == 64 ? 4 : 5 ,
2010-09-11 08:59:40 +00:00
url : oxui . path + '/png/ox.ui/transparent.png' ,
2010-09-07 15:58:15 +00:00
width : self . options . size
2010-07-05 07:09:34 +00:00
} ) ;
2010-09-08 16:35:34 +00:00
self . title = formatText ( self . options . title , self . lines - 1 , self . lineLength ) ;
self . info = formatText ( self . options . info , 5 - self . title . split ( '<br/>' ) . length , self . lineLength ) ;
2010-07-05 07:09:34 +00:00
that . css ( {
2010-09-03 20:54:40 +00:00
width : self . width + 'px' ,
height : self . height + 'px'
2010-07-05 07:09:34 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
that . $icon = $ ( '<div>' )
. addClass ( 'OxIcon' )
2010-07-05 07:09:34 +00:00
. css ( {
2011-01-02 10:01:55 +00:00
top : self . options . size == 64 ? - 64 : - 124 ,
2010-09-07 15:58:15 +00:00
width : ( self . options . size + 4 ) + 'px' ,
2010-09-11 08:59:40 +00:00
height : ( self . options . size + 4 ) + 'px'
2010-07-05 07:09:34 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
that . $iconImage = $ ( '<img>' )
2010-09-07 15:58:15 +00:00
. addClass ( 'OxLoading OxTarget' )
2010-07-05 07:09:34 +00:00
. attr ( {
2010-09-11 08:59:40 +00:00
src : self . url
2010-07-05 07:09:34 +00:00
} )
. css ( {
2010-09-06 23:44:37 +00:00
width : self . options . width + 'px' ,
height : self . options . height + 'px'
2010-07-05 07:09:34 +00:00
} )
2010-09-07 15:58:15 +00:00
. mousedown ( mousedown )
2010-07-05 07:09:34 +00:00
. mouseenter ( mouseenter )
2011-01-05 16:56:53 +00:00
. mouseleave ( mouseleave ) ;
self . options . url && that . $iconImage . one ( 'load' , load ) ;
2010-09-03 20:54:40 +00:00
that . $textBox = $ ( '<div>' )
. addClass ( 'OxText' )
2010-07-05 07:09:34 +00:00
. css ( {
2010-09-06 23:44:37 +00:00
top : ( self . options . size / 2 ) + 'px' ,
2010-09-07 15:58:15 +00:00
width : ( self . options . size + 4 ) + 'px' ,
2011-01-02 10:01:55 +00:00
height : ( self . options . size == 64 ? 30 : 58 ) + 'px'
2010-07-05 07:09:34 +00:00
} )
2010-09-03 20:54:40 +00:00
that . $text = $ ( '<div>' )
2010-09-07 15:58:15 +00:00
. addClass ( 'OxTarget' )
2010-09-08 16:35:34 +00:00
. css ( {
fontSize : self . fontSize + 'px'
} )
2010-09-06 23:44:37 +00:00
. html (
2010-09-08 16:35:34 +00:00
self . title + '<br/><span class="OxInfo">' + self . info + '</span>'
2010-09-06 23:44:37 +00:00
)
2010-07-05 07:09:34 +00:00
. mouseenter ( mouseenter )
2010-09-07 15:58:15 +00:00
. mouseleave ( mouseleave ) ;
2010-09-03 20:54:40 +00:00
that . $reflection = $ ( '<div>' )
. addClass ( 'OxReflection' )
2010-07-05 07:09:34 +00:00
. css ( {
2010-09-06 23:44:37 +00:00
top : self . options . size + 'px' ,
2010-09-11 08:59:40 +00:00
width : ( self . options . size + 4 ) + 'px' ,
2010-09-03 20:54:40 +00:00
height : ( self . options . size / 2 ) + 'px'
2010-07-05 07:09:34 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
that . $reflectionImage = $ ( '<img>' )
2010-09-07 15:58:15 +00:00
. addClass ( 'OxLoading' )
2010-07-05 07:09:34 +00:00
. attr ( {
2010-09-11 08:59:40 +00:00
src : self . url
2010-07-05 07:09:34 +00:00
} )
. css ( {
2010-09-03 20:54:40 +00:00
width : self . options . width + 'px' ,
2010-09-11 08:59:40 +00:00
height : self . options . height + 'px' ,
// firefox is 1px off when centering images with odd width and scaleY(-1)
paddingLeft : ( $ . browser . mozilla && self . options . width % 2 ? 1 : 0 ) + 'px'
2010-09-07 15:58:15 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
that . $gradient = $ ( '<div>' )
2010-07-05 07:09:34 +00:00
. css ( {
2010-09-06 23:44:37 +00:00
//top: (-self.options.size / 2) + 'px',
width : self . options . width + 'px' ,
height : ( self . options . size / 2 ) + 'px'
2010-07-05 07:09:34 +00:00
} ) ;
that . append (
that . $reflection . append (
that . $reflectionImage
) . append (
2010-09-06 23:44:37 +00:00
that . $gradient
2010-07-05 07:09:34 +00:00
)
) . append (
that . $textBox . append (
that . $text
)
) . append (
that . $icon . append (
that . $iconImage
)
) ;
2010-09-08 16:35:34 +00:00
function formatText ( text , maxLines , maxLength ) {
var lines = Ox . wordwrap ( text , maxLength , '<br/>' , true , false ) . split ( '<br/>' ) ;
2010-09-06 23:44:37 +00:00
return $ . map ( lines , function ( line , i ) {
2010-09-08 16:35:34 +00:00
if ( i < maxLines - 1 ) {
2010-09-06 23:44:37 +00:00
return line ;
2010-09-08 16:35:34 +00:00
} else if ( i == maxLines - 1 ) {
return lines . length == maxLines ? line : Ox . truncate ( $ . map ( lines , function ( line , i ) {
return i < maxLines - 1 ? null : line ;
} ) . join ( ' ' ) , maxLength , '...' , 'center' ) ;
2010-09-06 23:44:37 +00:00
} else {
return null ;
}
} ) . join ( '<br/>' ) ;
}
2010-09-07 15:58:15 +00:00
function load ( ) {
2010-09-11 08:59:40 +00:00
that . $iconImage . attr ( {
src : self . options . url
} )
. one ( 'load' , function ( ) {
that . $iconImage . removeClass ( 'OxLoading' ) ;
2011-01-05 14:53:06 +00:00
that . $reflectionImage
. attr ( {
src : self . options . url
} )
. removeClass ( 'OxLoading' ) ;
2010-09-11 08:59:40 +00:00
} ) ;
2010-09-07 15:58:15 +00:00
}
function mousedown ( e ) {
2010-09-14 13:50:51 +00:00
// fixme: preventDefault keeps image from being draggable in safari - but also keeps the list from getting focus
// e.preventDefault();
2010-09-07 15:58:15 +00:00
}
2010-07-05 07:09:34 +00:00
function mouseenter ( ) {
2010-09-03 20:54:40 +00:00
that . addClass ( 'OxHover' ) ;
2010-07-05 07:09:34 +00:00
}
function mouseleave ( ) {
2010-09-07 15:58:15 +00:00
that . removeClass ( 'OxHover' ) ;
2010-07-05 07:09:34 +00:00
}
return that ;
} ;
2010-02-10 09:59:59 +00:00
Ox . List = function ( options , self ) {
2011-02-07 05:34:18 +00:00
/ * * *
basic list object
Options
centered boolean if true , and orientation is 'horizontal' ,
then keep the selected item centered
construct function function ( data ) , returns the list item HTML
2011-02-25 10:23:33 +00:00
items function function ( callback ) returns { items , size , ... }
2011-02-07 05:34:18 +00:00
function ( data , callback ) returns [ items ]
2011-02-25 10:23:33 +00:00
or array of items
2011-02-07 05:34:18 +00:00
Methods
Events
* * * /
2010-02-10 09:59:59 +00:00
var self = self || { } ,
2010-06-25 15:55:25 +00:00
that = new Ox . Container ( { } , self )
. defaults ( {
2011-01-03 12:01:38 +00:00
centered : false ,
2011-02-07 05:34:18 +00:00
construct : null ,
2011-01-11 06:17:45 +00:00
draggable : false ,
2011-01-06 06:10:46 +00:00
format : [ ] ,
2010-06-25 15:55:25 +00:00
itemHeight : 16 ,
2011-02-07 05:34:18 +00:00
items : null ,
2010-06-25 15:55:25 +00:00
itemWidth : 16 ,
2010-06-28 09:16:36 +00:00
keys : [ ] ,
2011-01-02 10:01:55 +00:00
max : - 1 ,
min : 0 ,
2010-09-03 20:54:40 +00:00
orientation : 'vertical' ,
2010-09-05 20:18:00 +00:00
pageLength : 100 ,
2011-01-02 10:01:55 +00:00
selected : [ ] ,
2010-06-25 15:55:25 +00:00
sort : [ ] ,
2011-01-11 06:17:45 +00:00
sortable : false ,
2010-09-03 20:54:40 +00:00
type : 'text' ,
unique : ''
2010-06-25 15:55:25 +00:00
} )
2010-06-28 09:16:36 +00:00
. options ( options || { } )
. scroll ( scroll ) ;
2010-06-25 15:55:25 +00:00
2011-01-16 22:23:01 +00:00
that . $content . mousedown ( _mousedown ) ;
//that.bindEvent('doubleclick', function() {alert('d')})
/ *
that . $content . bindEvent ( { // fixme: port to new Ox mouse events
mousedown : mousedown ,
singleclick : singleclick ,
doubleclick : doubleclick ,
dragstart : dragstart ,
drag : drag ,
dragend : dragend
} ) ;
* /
2010-12-22 14:16:15 +00:00
2010-06-25 15:55:25 +00:00
$ . extend ( self , {
$items : [ ] ,
$pages : [ ] ,
2010-09-05 20:18:00 +00:00
clickTimeout : 0 ,
2011-01-11 06:17:45 +00:00
dragTimeout : 0 ,
2011-01-05 14:53:06 +00:00
format : { } ,
2010-09-07 15:58:15 +00:00
itemMargin : self . options . type == 'text' ? 0 : 8 , // 2 x 4 px margin ... fixme: the 2x should be computed later
2010-06-30 14:21:06 +00:00
keyboardEvents : {
2011-01-15 06:09:22 +00:00
key _control _c : copyItems ,
key _control _n : addItem ,
key _control _v : pasteItems ,
key _control _x : cutItems ,
2011-01-13 19:41:10 +00:00
key _delete : deleteItems ,
2010-06-30 14:21:06 +00:00
key _end : scrollToFirst ,
2010-07-20 20:04:13 +00:00
key _enter : open ,
2010-06-30 14:21:06 +00:00
key _home : scrollToLast ,
key _pagedown : scrollPageDown ,
2010-07-20 20:04:13 +00:00
key _pageup : scrollPageUp ,
2010-09-07 17:36:21 +00:00
key _section : preview , // fixme: firefox gets keyCode 0 when pressing space
2010-07-20 20:04:13 +00:00
key _space : preview
2010-06-30 14:21:06 +00:00
} ,
2010-09-07 15:58:15 +00:00
listMargin : self . options . type == 'text' ? 0 : 8 , // 2 x 4 px padding
2010-06-25 15:55:25 +00:00
page : 0 ,
2010-07-20 20:04:13 +00:00
preview : false ,
2010-06-28 09:16:36 +00:00
requests : [ ] ,
2010-09-07 15:58:15 +00:00
scrollTimeout : 0 ,
2010-06-25 15:55:25 +00:00
selected : [ ]
} ) ;
2011-02-07 05:34:18 +00:00
self . options . max == - 1 && $ . extend ( self . keyboardEvents , {
key _alt _control _a : invertSelection ,
key _control _a : selectAll
} ) ;
self . options . min == 0 && $ . extend ( self . keyboardEvents , {
key _control _shift _a : selectNone
} ) ;
2011-01-11 06:17:45 +00:00
self . keyboardEvents [
'key_' + ( self . options . orientation == 'vertical' ? 'up' : 'left' )
] = selectPrevious ;
self . keyboardEvents [
'key_' + ( self . options . orientation == 'vertical' ? 'down' : 'right' )
] = selectNext ;
2011-01-02 10:01:55 +00:00
if ( self . options . max == - 1 ) {
2011-01-11 06:17:45 +00:00
self . keyboardEvents [
'key_' + ( self . options . orientation == 'vertical' ? 'shift_up' : 'shift_left' )
] = addPreviousToSelection ;
self . keyboardEvents [
'key_' + ( self . options . orientation == 'vertical' ? 'shift_down' : 'shift_right' )
] = addNextToSelection ;
2011-01-02 10:01:55 +00:00
}
2011-02-07 18:57:05 +00:00
if ( self . options . orientation == 'vertical' ) {
$ . extend ( self . keyboardEvents , {
key _left : function ( ) {
triggerToggleEvent ( false ) ;
} ,
key _right : function ( ) {
triggerToggleEvent ( true ) ;
}
} ) ;
} else if ( self . options . orientation == 'both' ) {
2010-09-07 15:58:15 +00:00
$ . extend ( self . keyboardEvents , {
key _down : selectBelow ,
2011-01-02 10:01:55 +00:00
key _up : selectAbove
2010-09-07 15:58:15 +00:00
} ) ;
2011-01-02 10:01:55 +00:00
if ( self . options . max == - 1 ) {
$ . extend ( self . keyboardEvents , {
key _shift _down : addBelowToSelection ,
key _shift _up : addAboveToSelection
} ) ;
}
2010-09-07 15:58:15 +00:00
self . pageLengthByRowLength = [
2010-09-08 16:35:34 +00:00
0 , 60 , 60 , 60 , 60 , 60 , 60 , 63 , 64 , 63 , 60 , 66 , 60 , 65 , 70 , 60 , 64 , 68 , 72 , 76 , 60
2010-09-07 15:58:15 +00:00
] ;
2010-09-06 23:44:37 +00:00
}
2011-01-11 06:17:45 +00:00
if ( self . options . draggable ) {
that . bind ( {
dragstart : function ( e ) {
2011-01-17 21:12:17 +00:00
//alert('DRAGSTART')
Ox . print ( 'DRAGSTART' , e ) ;
2011-01-11 06:17:45 +00:00
}
} ) ;
}
2010-06-28 09:16:36 +00:00
2011-02-07 05:34:18 +00:00
if ( Ox . isArray ( self . options . items ) ) {
2011-02-25 10:23:33 +00:00
self . listLength = self . options . items . length ;
2011-02-07 05:34:18 +00:00
loadItems ( ) ;
} else {
updateQuery ( self . options . selected ) ;
}
2010-12-26 20:16:35 +00:00
that . bindEvent ( self . keyboardEvents ) ;
2011-02-07 05:34:18 +00:00
$window . resize ( that . size ) ; // fixme: this is not the widget's job
2010-06-25 15:55:25 +00:00
2010-09-06 23:44:37 +00:00
function addAboveToSelection ( ) {
var pos = getAbove ( ) ;
if ( pos > - 1 ) {
addToSelection ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-09-06 23:44:37 +00:00
}
}
2010-06-25 15:55:25 +00:00
function addAllToSelection ( pos ) {
var arr ,
len = self . $items . length ;
if ( ! isSelected ( pos ) ) {
2010-06-30 09:02:13 +00:00
if ( self . selected . length == 0 ) {
2010-06-25 15:55:25 +00:00
addToSelection ( pos ) ;
} else {
2010-06-30 09:02:13 +00:00
if ( Ox . min ( self . selected ) < pos ) {
2010-06-25 15:55:25 +00:00
var arr = [ pos ] ;
for ( var i = pos - 1 ; i >= 0 ; i -- ) {
if ( isSelected ( i ) ) {
$ . each ( arr , function ( i , v ) {
addToSelection ( v ) ;
} ) ;
break ;
}
arr . push ( i ) ;
}
}
2010-06-30 09:02:13 +00:00
if ( Ox . max ( self . selected ) > pos ) {
2010-06-25 15:55:25 +00:00
var arr = [ pos ] ;
for ( var i = pos + 1 ; i < len ; i ++ ) {
if ( isSelected ( i ) ) {
$ . each ( arr , function ( i , v ) {
addToSelection ( v ) ;
} ) ;
break ;
}
arr . push ( i ) ;
}
}
}
}
}
2010-09-06 23:44:37 +00:00
function addBelowToSelection ( ) {
var pos = getBelow ( ) ;
if ( pos > - 1 ) {
addToSelection ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-09-06 23:44:37 +00:00
}
}
2011-01-15 06:09:22 +00:00
function addItem ( ) {
that . triggerEvent ( 'add' , { } ) ;
}
2010-06-30 14:21:06 +00:00
function addNextToSelection ( ) {
var pos = getNext ( ) ;
if ( pos > - 1 ) {
addToSelection ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-06-30 14:21:06 +00:00
}
}
function addPreviousToSelection ( ) {
var pos = getPrevious ( ) ;
if ( pos > - 1 ) {
addToSelection ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-06-30 14:21:06 +00:00
}
}
2010-06-25 15:55:25 +00:00
function addToSelection ( pos ) {
if ( ! isSelected ( pos ) ) {
2010-06-30 09:02:13 +00:00
self . selected . push ( pos ) ;
2011-01-05 17:17:11 +00:00
! Ox . isUndefined ( self . $items [ pos ] ) &&
2010-09-03 20:54:40 +00:00
self . $items [ pos ] . addClass ( 'OxSelected' ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('addToSelection')
2010-07-17 08:46:27 +00:00
triggerSelectEvent ( ) ;
2010-09-06 23:44:37 +00:00
} else {
// allow for 'cursor navigation' if orientation == 'both'
self . selected . splice ( self . selected . indexOf ( pos ) , 1 ) ;
self . selected . push ( pos ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('self.selected', self.selected)
2010-06-25 15:55:25 +00:00
}
}
2010-06-30 18:47:10 +00:00
function clear ( ) {
$ . each ( self . requests , function ( i , v ) {
2011-01-13 12:43:20 +00:00
//Ox.print('Ox.Request.cancel', v);
2010-06-30 18:47:10 +00:00
Ox . Request . cancel ( v ) ;
} ) ;
$ . extend ( self , {
2011-02-25 10:23:33 +00:00
//$items: [],
2010-06-30 18:47:10 +00:00
$pages : [ ] ,
page : 0 ,
requests : [ ]
} ) ;
}
2011-01-05 16:56:53 +00:00
function constructEmptyPage ( page ) {
2011-01-13 12:43:20 +00:00
//Ox.print('cEP', page)
2011-01-05 16:56:53 +00:00
var i , $page = new Ox . ListPage ( ) . css ( getPageCSS ( page ) ) ;
2011-02-25 10:23:33 +00:00
for ( i = 0 ; i < getPageLength ( page ) ; i ++
2011-01-05 16:56:53 +00:00
) {
// fixme: why does chainging fail here?
2011-01-05 17:17:11 +00:00
new Ox . ListItem ( {
construct : self . options . construct
} ) . appendTo ( $page ) ;
2011-01-05 16:56:53 +00:00
}
2011-01-13 12:43:20 +00:00
//Ox.print('cEP done')
2011-01-05 16:56:53 +00:00
return $page ;
}
2011-01-15 06:09:22 +00:00
function copyItems ( ) {
var ids = getSelectedIds ( ) ;
ids . length && that . triggerEvent ( 'copy' , {
ids : ids
} ) ;
/ *
ids . length && self . options . copy && Ox . Clipboard . copy (
self . options . copy (
$ . map ( ids , function ( id ) {
return that . value ( id ) ;
} )
)
) ;
* /
}
function cutItems ( ) {
copyItems ( ) ;
deleteItems ( ) ;
}
2011-01-13 19:41:10 +00:00
function deleteItems ( ) {
var ids = getSelectedIds ( ) ;
ids . length && that . triggerEvent ( 'delete' , {
ids : ids
} ) ;
}
2010-06-25 15:55:25 +00:00
function deselect ( pos ) {
if ( isSelected ( pos ) ) {
2010-06-30 09:02:13 +00:00
self . selected . splice ( self . selected . indexOf ( pos ) , 1 ) ;
2011-01-10 00:07:48 +00:00
! Ox . isUndefined ( self . $items [ pos ] ) &&
2010-09-03 20:54:40 +00:00
self . $items [ pos ] . removeClass ( 'OxSelected' ) ;
2010-07-17 08:46:27 +00:00
triggerSelectEvent ( ) ;
2010-06-25 15:55:25 +00:00
}
}
2011-01-16 22:23:01 +00:00
function dragstart ( event , e ) { // fixme: doesn't work yet
self . drag = {
pos : findItemPosition ( e )
} ;
$ . extend ( self . drag , {
2011-02-07 18:57:05 +00:00
id : self . $items [ self . drag . pos ] . options ( 'data' ) [ self . options . unique ] ,
2011-01-16 22:23:01 +00:00
startPos : self . drag . pos ,
startY : e . clientY ,
stopPos : self . drag . pos
} ) ;
self . $items [ pos ] . addClass ( 'OxDrag' ) // fixme: why does the class not work?
. css ( {
cursor : 'move' ,
} ) ;
}
function drag ( event , e ) { // fixme: doesn't work yet
var clientY = e . clientY - that . offset ( ) [ 'top' ] ,
offset = clientY % 16 ,
position = Ox . limit ( parseInt ( clientY / 16 ) , 0 , self . $items . length - 1 ) ;
if ( position < self . drag . pos ) {
self . drag . stopPos = position + ( offset > 8 ? 1 : 0 ) ;
} else if ( position > self . drag . pos ) {
self . drag . stopPos = position - ( offset <= 8 ? 1 : 0 ) ;
}
if ( self . drag . stopPos != self . drag . pos ) {
moveItem ( self . drag . pos , self . drag . stopPos ) ;
self . drag . pos = self . drag . stopPos ;
}
}
function dragend ( event , e ) { // fixme: doesn't work yet
var $item = self . $items [ self . drag . pos ] ;
$item . removeClass ( 'OxDrag' )
. css ( {
cursor : 'default' ,
} ) ;
that . triggerEvent ( 'move' , {
//id: id,
2011-02-07 18:57:05 +00:00
ids : $ . map ( self . $items , function ( $item ) {
return $item . options ( 'data' ) [ self . options . unique ] ;
} )
2011-01-16 22:23:01 +00:00
//position: pos
} ) ;
}
2011-01-11 06:17:45 +00:00
function dragItem ( pos , e ) {
var $item = self . $items [ pos ] ,
2011-02-07 18:57:05 +00:00
id = self . $items [ pos ] . options ( 'data' ) [ self . options . unique ] ,
2011-01-11 06:17:45 +00:00
startPos = pos ,
startY = e . clientY ,
stopPos = startPos ,
offsets = $ . map ( self . $items , function ( $item , pos ) {
return ( pos - startPos ) * 16 - e . offsetY + 8 ;
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('dragItem', e);
//Ox.print(e.offsetY, offsets)
2011-01-16 22:33:48 +00:00
$item . addClass ( 'OxDrag' ) ;
2011-01-11 06:17:45 +00:00
$window . mousemove ( function ( e ) {
var clientY = e . clientY - that . offset ( ) [ 'top' ] ,
offset = clientY % 16 ,
position = Ox . limit ( parseInt ( clientY / 16 ) , 0 , self . $items . length - 1 ) ;
if ( position < pos ) {
stopPos = position + ( offset > 8 ? 1 : 0 ) ;
} else if ( position > pos ) {
stopPos = position - ( offset <= 8 ? 1 : 0 ) ;
}
if ( stopPos != pos ) {
moveItem ( pos , stopPos ) ;
pos = stopPos ;
}
} ) ;
$window . one ( 'mouseup' , function ( ) {
dropItem ( id , pos ) ;
$window . unbind ( 'mousemove' ) ;
} ) ;
}
function dropItem ( id , pos ) {
var $item = self . $items [ pos ] ;
$item . removeClass ( 'OxDrag' )
. css ( {
2011-01-13 01:58:38 +00:00
cursor : 'default' ,
2011-01-11 06:17:45 +00:00
} ) ;
2011-01-13 01:58:38 +00:00
that . triggerEvent ( 'move' , {
2011-01-13 11:54:31 +00:00
//id: id,
2011-02-07 18:57:05 +00:00
ids : $ . map ( self . $items , function ( $item ) {
return $item . options ( 'data' ) [ self . options . unique ] ;
} )
2011-01-13 11:54:31 +00:00
//position: pos
2011-01-11 06:17:45 +00:00
} ) ;
}
2010-09-18 10:48:20 +00:00
function emptyFirstPage ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('emptyFirstPage', self.$pages);
2010-09-18 12:15:09 +00:00
self . $pages [ 0 ] && self . $pages [ 0 ] . find ( '.OxEmpty' ) . remove ( ) ;
2010-09-18 10:48:20 +00:00
}
function fillFirstPage ( ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'fillFirstPage' )
2010-09-18 12:15:09 +00:00
if ( self . $pages [ 0 ] ) {
var height = getHeight ( ) ,
lastItemHeight = height % self . options . itemHeight || self . options . itemHeight ,
visibleItems = Math . ceil ( height / self . options . itemHeight ) ;
2011-01-05 16:56:53 +00:00
if ( self . listLength < visibleItems ) {
$ . each ( Ox . range ( self . listLength , visibleItems ) , function ( i , v ) {
2010-09-18 12:15:09 +00:00
var $item = new Ox . ListItem ( {
construct : self . options . construct ,
} ) ;
$item . addClass ( 'OxEmpty' ) . removeClass ( 'OxTarget' ) ;
if ( v == visibleItems - 1 ) {
$item . $element . css ( {
height : lastItemHeight + 'px' ,
overflowY : 'hidden'
} ) ;
}
$item . appendTo ( self . $pages [ 0 ] ) ;
} ) ;
}
2010-09-18 10:48:20 +00:00
}
}
2011-01-11 10:29:26 +00:00
function findCell ( e ) {
var $element = $ ( e . target ) ;
while ( ! $element . hasClass ( 'OxCell' ) && ! $element . hasClass ( 'OxPage' ) && ! $element . is ( 'body' ) ) {
$element = $element . parent ( ) ;
}
return $element . hasClass ( 'OxCell' ) ? $element : null ;
}
2011-01-16 22:23:01 +00:00
function findItemPosition ( e ) {
2011-01-13 12:43:20 +00:00
//Ox.print('---- findItem', e.target)
2010-09-05 20:18:00 +00:00
var $element = $ ( e . target ) ,
2011-01-16 22:23:01 +00:00
position = - 1 ;
2010-09-07 15:58:15 +00:00
while ( ! $element . hasClass ( 'OxTarget' ) && ! $element . hasClass ( 'OxPage' ) && ! $element . is ( 'body' ) ) {
2010-09-05 20:18:00 +00:00
$element = $element . parent ( ) ;
}
2010-09-07 15:58:15 +00:00
if ( $element . hasClass ( 'OxTarget' ) ) {
while ( ! $element . hasClass ( 'OxItem' ) && ! $element . hasClass ( 'OxPage' ) && ! $element . is ( 'body' ) ) {
$element = $element . parent ( ) ;
}
if ( $element . hasClass ( 'OxItem' ) ) {
2011-01-16 22:23:01 +00:00
position = $element . data ( 'position' ) ;
2010-09-07 15:58:15 +00:00
}
2010-09-05 20:18:00 +00:00
}
2011-01-16 22:23:01 +00:00
return position ;
2010-09-05 20:18:00 +00:00
}
2010-09-06 23:44:37 +00:00
function getAbove ( ) {
var pos = - 1 ;
if ( self . selected . length ) {
2010-09-07 15:58:15 +00:00
pos = self . selected [ self . selected . length - 1 ] - self . rowLength
2010-09-06 23:44:37 +00:00
if ( pos < 0 ) {
pos = - 1 ;
}
}
return pos ;
}
function getBelow ( ) {
var pos = - 1 ;
if ( self . selected . length ) {
2010-09-07 15:58:15 +00:00
pos = self . selected [ self . selected . length - 1 ] + self . rowLength ;
2010-09-06 23:44:37 +00:00
if ( pos >= self . $items . length ) {
pos = - 1 ;
}
}
return pos ;
}
2010-06-30 14:21:06 +00:00
function getHeight ( ) {
2010-06-30 18:47:10 +00:00
return that . height ( ) - ( that . $content . width ( ) > that . width ( ) ? oxui . scrollbarSize : 0 ) ;
2010-06-30 14:21:06 +00:00
}
2011-01-02 10:01:55 +00:00
function getListSize ( ) {
return Math . ceil ( self . listLength *
( self . options [ self . options . orientation == 'horizontal' ?
'itemWidth' : 'itemHeight' ] + self . itemMargin ) / self . rowLength ) ;
2010-12-23 04:32:29 +00:00
}
2010-06-25 15:55:25 +00:00
function getNext ( ) {
var pos = - 1 ;
2010-06-30 09:02:13 +00:00
if ( self . selected . length ) {
2010-09-06 23:44:37 +00:00
pos = ( self . options . orientation == 'both' ?
self . selected [ self . selected . length - 1 ] :
Ox . max ( self . selected ) ) + 1 ;
2010-06-25 15:55:25 +00:00
if ( pos == self . $items . length ) {
pos = - 1 ;
}
}
return pos ;
}
function getPage ( ) {
2010-09-11 08:59:40 +00:00
return Math . max (
Math . floor ( self . options . orientation == 'horizontal' ?
( that . scrollLeft ( ) - self . listMargin / 2 ) / self . pageWidth :
( that . scrollTop ( ) - self . listMargin / 2 ) / self . pageHeight
) , 0 ) ;
2010-06-25 15:55:25 +00:00
}
2010-11-25 10:05:50 +00:00
function getPageByPosition ( pos ) {
2010-12-22 14:16:15 +00:00
return parseInt ( pos / self . options . pageLength ) ;
2010-11-25 10:05:50 +00:00
}
2011-01-05 16:56:53 +00:00
function getPageCSS ( page ) {
return self . options . orientation == 'horizontal' ? {
left : ( page * self . pageWidth + self . listMargin / 2 ) + 'px' ,
top : ( self . listMargin / 2 ) + 'px' ,
width : ( page < self . pages - 1 ? self . pageWidth :
2011-02-25 10:23:33 +00:00
getPageLength ( page ) * ( self . options . itemWidth + self . itemMargin ) ) + 'px'
2011-01-05 16:56:53 +00:00
} : {
top : ( page * self . pageHeight + self . listMargin / 2 ) + 'px' ,
width : self . pageWidth + 'px'
}
}
2010-12-23 04:32:29 +00:00
function getPageHeight ( ) {
return Math . ceil ( self . pageLength * ( self . options . itemHeight + self . itemMargin ) / self . rowLength ) ;
}
2011-01-13 01:58:38 +00:00
function getPositionById ( id ) {
// fixme: is this really needed?
var pos = - 1 ;
2011-02-07 18:57:05 +00:00
$ . each ( self . $items , function ( i , $item ) {
if ( $item . options ( 'data' ) [ self . options . unique ] == id ) {
2011-01-13 01:58:38 +00:00
pos = i ;
return false ;
}
} ) ;
return pos ;
2010-12-23 04:32:29 +00:00
}
2011-01-02 10:01:55 +00:00
function getPositions ( ids ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'getPositions' , ids )
2011-01-02 10:01:55 +00:00
ids = ids || getSelectedIds ( ) ;
2011-02-25 10:23:33 +00:00
Ox . print ( 'getPositions' , ids )
2010-06-30 18:47:10 +00:00
// fixme: optimize: send non-selected ids if more than half of the items are selected
2011-01-02 10:01:55 +00:00
if ( ids . length /*&& ids.length < self.listLength*/ ) {
2011-01-13 12:43:20 +00:00
/ * O x . p r i n t ( ' - - - - - - - - r e q u e s t ' , {
2011-01-02 10:01:55 +00:00
ids : ids ,
2010-12-22 14:16:15 +00:00
sort : self . options . sort
2011-01-13 12:43:20 +00:00
} ) ; * /
2011-02-25 10:23:33 +00:00
self . requests . push ( self . options . items ( {
2011-01-02 10:01:55 +00:00
ids : ids ,
2010-06-30 18:47:10 +00:00
sort : self . options . sort
2010-09-13 13:54:22 +00:00
} , getPositionsCallback ) ) ;
2010-06-30 18:47:10 +00:00
} else {
getPositionsCallback ( ) ;
}
}
function getPositionsCallback ( result ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'getPositionsCallback' , result )
2010-11-25 10:05:50 +00:00
var pos = 0 ;
2010-06-30 18:47:10 +00:00
if ( result ) {
$ . extend ( self , {
ids : { } ,
selected : [ ]
} ) ;
$ . each ( result . data . positions , function ( id , pos ) {
2011-01-13 12:43:20 +00:00
//Ox.print('id', id, 'pos', pos)
2010-06-30 18:47:10 +00:00
self . selected . push ( pos ) ;
} ) ;
2010-11-25 10:05:50 +00:00
pos = Ox . min ( self . selected ) ;
self . page = getPageByPosition ( pos ) ;
2010-06-30 18:47:10 +00:00
}
2010-12-23 04:32:29 +00:00
// that.scrollTop(0);
2010-11-25 10:05:50 +00:00
that . $content . empty ( ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('self.selected', self.selected, 'self.page', self.page);
2010-11-25 10:05:50 +00:00
loadPages ( self . page , function ( ) {
2010-12-23 04:41:46 +00:00
scrollToPosition ( pos , true ) ;
2010-11-25 10:05:50 +00:00
} ) ;
2010-06-30 18:47:10 +00:00
}
2010-06-25 15:55:25 +00:00
function getPrevious ( ) {
var pos = - 1 ;
2010-06-30 09:02:13 +00:00
if ( self . selected . length ) {
2010-09-06 23:44:37 +00:00
pos = ( self . options . orientation == 'both' ?
self . selected [ self . selected . length - 1 ] :
2010-09-07 15:58:15 +00:00
Ox . min ( self . selected ) ) - 1 ;
2010-06-25 15:55:25 +00:00
}
return pos ;
}
2010-09-06 23:44:37 +00:00
function getRow ( pos ) {
2010-09-07 15:58:15 +00:00
return Math . floor ( pos / self . rowLength ) ;
2010-09-06 23:44:37 +00:00
}
function getRowLength ( ) {
2010-09-17 16:37:11 +00:00
return self . options . orientation == 'both' ?
Math . floor ( ( getWidth ( ) - self . listMargin ) /
( self . options . itemWidth + self . itemMargin ) ) : 1
2010-09-06 23:44:37 +00:00
}
2011-01-13 01:58:38 +00:00
function getScrollPosition ( ) {
// if orientation is both, this returns the
// element position at the current scroll position
return parseInt (
that . scrollTop ( ) / ( self . options . itemHeight + self . itemMargin )
) * self . rowLength ;
}
2010-07-20 20:04:13 +00:00
function getSelectedIds ( ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'gSI' , self . selected , self . $items )
2011-01-03 23:38:43 +00:00
return $ . map ( self . selected , function ( pos ) {
2011-02-25 10:23:33 +00:00
Ox . print ( '....' , pos , self . options . unique , self . $items [ pos ] . options ( 'data' ) [ self . options . unique ] )
2011-02-07 18:57:05 +00:00
return self . $items [ pos ] . options ( 'data' ) [ self . options . unique ] ;
2010-07-20 20:04:13 +00:00
} ) ;
}
2010-06-30 14:21:06 +00:00
function getWidth ( ) {
2010-06-30 18:47:10 +00:00
return that . width ( ) - ( that . $content . height ( ) > that . height ( ) ? oxui . scrollbarSize : 0 ) ;
2010-06-30 14:21:06 +00:00
}
2010-06-25 15:55:25 +00:00
function invertSelection ( ) {
2010-06-30 14:21:06 +00:00
$ . each ( Ox . range ( self . listLength ) , function ( i , v ) {
toggleSelection ( v ) ;
2010-06-25 15:55:25 +00:00
} ) ;
}
function isSelected ( pos ) {
2010-06-28 09:16:36 +00:00
return self . selected . indexOf ( pos ) > - 1 ;
2010-06-25 15:55:25 +00:00
}
2011-02-07 05:34:18 +00:00
function loadItems ( ) {
2011-02-25 10:23:33 +00:00
that . $content . empty ( ) ;
2011-02-07 05:34:18 +00:00
self . options . items . forEach ( function ( item , pos ) {
// fixme: duplicated
self . $items [ pos ] = new Ox . ListItem ( {
construct : self . options . construct ,
data : item ,
draggable : self . options . draggable ,
position : pos ,
unique : self . options . unique
} ) ;
isSelected ( pos ) && self . $items [ pos ] . addClass ( 'OxSelected' ) ;
self . $items [ pos ] . appendTo ( that . $content ) ;
} ) ;
}
2011-02-25 10:23:33 +00:00
function getPageLength ( page ) {
var mod = self . listLength % self . pageLength ;
return page < self . pages - 1 || mod == 0 ? self . pageLength : mod ;
}
2010-06-25 15:55:25 +00:00
function loadPage ( page , callback ) {
2010-06-30 18:47:10 +00:00
if ( page < 0 || page >= self . pages ) {
! Ox . isUndefined ( callback ) && callback ( ) ;
2010-06-25 15:55:25 +00:00
return ;
}
2011-01-13 12:43:20 +00:00
//Ox.print('loadPage', page);
2011-02-07 21:44:21 +00:00
var keys = $ . merge ( self . options . keys . indexOf ( self . options . unique ) == - 1 ? [ self . options . unique ] : [ ] , self . options . keys ) ,
2010-09-07 15:58:15 +00:00
offset = page * self . pageLength ,
2011-02-25 10:23:33 +00:00
range = [ offset , offset + getPageLength ( page ) ] ;
2010-09-18 11:24:29 +00:00
if ( Ox . isUndefined ( self . $pages [ page ] ) ) { // fixme: unload will have made this undefined already
2011-01-05 16:56:53 +00:00
self . $pages [ page ] = constructEmptyPage ( page ) ;
self . options . type == 'text' && page == 0 && fillFirstPage ( ) ;
self . $pages [ page ] . appendTo ( that . $content ) ;
2011-02-25 10:23:33 +00:00
self . requests . push ( self . options . items ( {
2010-09-13 13:54:22 +00:00
keys : keys ,
range : range ,
sort : self . options . sort
} , function ( result ) {
2011-02-25 10:23:33 +00:00
var $emptyPage = Ox . clone ( self . $pages [ page ] ) ;
2011-01-05 16:56:53 +00:00
self . $pages [ page ] = new Ox . ListPage ( ) . css ( getPageCSS ( page ) ) ;
2010-09-13 13:54:22 +00:00
$ . each ( result . data . items , function ( i , v ) {
var pos = offset + i ;
self . $items [ pos ] = new Ox . ListItem ( {
construct : self . options . construct ,
data : v ,
2011-01-11 06:17:45 +00:00
draggable : self . options . draggable ,
2011-01-13 11:54:31 +00:00
//format: self.options.format,
2011-01-13 01:58:38 +00:00
position : pos ,
unique : self . options . unique
2010-09-13 13:54:22 +00:00
} ) ;
2011-01-13 19:41:10 +00:00
isSelected ( pos ) && self . $items [ pos ] . addClass ( 'OxSelected' ) ;
2010-09-13 13:54:22 +00:00
self . $items [ pos ] . appendTo ( self . $pages [ page ] ) ;
} ) ;
2011-01-05 16:56:53 +00:00
self . options . type == 'text' && page == 0 && fillFirstPage ( ) ;
$emptyPage . remove ( ) ;
2010-09-13 13:54:22 +00:00
self . $pages [ page ] . appendTo ( that . $content ) ;
2011-01-13 19:41:10 +00:00
! Ox . isUndefined ( callback ) && callback ( ) ; // fixme: callback necessary? why not bind to event?
2010-06-28 09:16:36 +00:00
} ) ) ;
} else {
2011-01-13 12:43:20 +00:00
//Ox.print('loading a page from cache, this should probably not happen -----------')
2010-06-28 09:16:36 +00:00
self . $pages [ page ] . appendTo ( that . $content ) ;
2010-06-25 15:55:25 +00:00
}
}
function loadPages ( page , callback ) {
var counter = 0 ,
fn = function ( ) {
2011-01-15 14:22:05 +00:00
if ( ++ counter == 3 ) {
! Ox . isUndefined ( callback ) && callback ( ) ;
that . triggerEvent ( 'load' ) ;
}
2010-06-25 15:55:25 +00:00
} ;
2011-01-06 03:10:40 +00:00
// fixme: find out which option is better
2011-01-13 11:54:31 +00:00
/ *
2010-06-25 15:55:25 +00:00
loadPage ( page , function ( ) {
2011-01-13 11:54:31 +00:00
loadPage ( page - 1 , fn ) ;
loadPage ( page + 1 , fn ) ;
2010-06-25 15:55:25 +00:00
} ) ;
2011-01-13 11:54:31 +00:00
* /
loadPage ( page , fn ) ;
2011-01-06 03:10:40 +00:00
loadPage ( page - 1 , fn ) ;
loadPage ( page + 1 , fn ) ;
2010-06-25 15:55:25 +00:00
}
2011-01-16 22:23:01 +00:00
function mousedown ( event , e ) { // fixme: doesn't work yet
var pos = findItemPosition ( e ) ;
self . hadFocus = that . hasFocus ( ) ;
that . gainFocus ( ) ;
if ( pos > - 1 ) {
if ( e . metaKey ) {
if ( ! isSelected ( pos ) && ( self . options . max == - 1 || self . options . max > self . selected . length ) ) {
// meta-click on unselected item
addToSelection ( pos ) ;
} else if ( isSelected ( pos ) && self . options . min < self . selected . length ) {
// meta-click on selected item
deselect ( pos ) ;
}
} else if ( e . shiftKey ) {
if ( self . options . max == - 1 ) {
// shift-click on item
addAllToSelection ( pos ) ;
}
} else if ( ! isSelected ( pos ) ) {
// click on unselected item
select ( pos ) ;
}
} else if ( self . options . min == 0 ) {
// click on empty area
selectNone ( ) ;
}
}
function singleclick ( event , e ) { // fixme: doesn't work yet
// these can't trigger on mousedown,
// since it could be a doubleclick
var pos = findItemPosition ( e ) ,
clickable , editable ;
alert ( 'singleclick' )
if ( pos > - 1 ) {
if ( ! e . metaKey && ! e . shiftKey && isSelected ( pos ) ) {
alert ( '??' )
if ( self . selected . length > 1 ) {
// click on one of multiple selected items
alert ( '!!' )
select ( pos ) ;
} else if ( self . options . type == 'text' && self . hadFocus ) {
$cell = findCell ( e ) ;
if ( $cell ) {
clickable = $cell . hasClass ( 'OxClickable' ) ;
editable = $cell . hasClass ( 'OxEditable' ) && ! $cell . hasClass ( 'OxEdit' ) ;
if ( clickable || editable ) {
// click on a clickable or editable cell
2011-02-09 17:56:35 +00:00
triggerClickEvent ( clickable ? 'click' : 'edit' , self . $items [ pos ] , $cell ) ;
2011-01-16 22:23:01 +00:00
}
}
}
}
}
}
function doubleclick ( event , e ) { // fixme: doesn't work yet
alert ( 'doubleclick' )
open ( ) ;
}
function _mousedown ( e ) {
var pos = findItemPosition ( e ) ,
2011-01-11 15:00:32 +00:00
clickable , editable ,
2011-01-16 22:23:01 +00:00
clickTimeout = false ,
selectTimeout = false ,
2011-02-09 17:56:35 +00:00
$element ,
2011-01-16 22:23:01 +00:00
hadFocus = that . hasFocus ( ) ;
2011-02-09 17:56:35 +00:00
//Ox.print('mousedown', pos)
2010-09-07 15:58:15 +00:00
that . gainFocus ( ) ;
2011-01-16 22:23:01 +00:00
if ( pos > - 1 ) {
2010-09-07 15:58:15 +00:00
if ( ! self . clickTimeout ) {
// click
2011-01-06 03:10:40 +00:00
if ( e . metaKey ) {
2011-01-11 10:29:26 +00:00
if ( ! isSelected ( pos ) && ( self . options . max == - 1 || self . options . max > self . selected . length ) ) {
2010-09-07 15:58:15 +00:00
addToSelection ( pos ) ;
2011-01-11 10:29:26 +00:00
} else if ( isSelected ( pos ) && self . options . min < self . selected . length ) {
deselect ( pos ) ;
}
} else if ( e . shiftKey ) {
if ( self . options . max == - 1 ) {
addAllToSelection ( pos ) ;
2010-09-07 15:58:15 +00:00
}
} else if ( ! isSelected ( pos ) ) {
2011-02-07 18:57:05 +00:00
Ox . print ( 'select' , pos )
2010-09-07 15:58:15 +00:00
select ( pos ) ;
2011-01-11 10:29:26 +00:00
} else if ( self . selected . length > 1 ) {
// this could be the first click
// of a double click on multiple items
2010-09-07 15:58:15 +00:00
selectTimeout = true ;
2011-01-16 22:23:01 +00:00
} else if ( self . options . type == 'text' && hadFocus ) {
2011-02-09 17:56:35 +00:00
var $cell = findCell ( e ) ,
$element = $cell || self . $items [ pos ] ;
clickable = $element . hasClass ( 'OxClickable' ) ;
editable = $element . hasClass ( 'OxEditable' ) && ! $element . hasClass ( 'OxEdit' ) ;
if ( clickable || editable ) {
if ( self . options . sortable && self . listLength > 1 ) {
clickTimeout = true ;
} else {
! $cell && that . editItem ( pos ) ;
triggerClickEvent ( clickable ? 'click' : 'edit' , self . $items [ pos ] , $cell ) ;
2011-01-11 10:29:26 +00:00
}
}
2010-09-07 15:58:15 +00:00
}
self . clickTimeout = setTimeout ( function ( ) {
self . clickTimeout = 0 ;
2011-01-11 10:29:26 +00:00
if ( selectTimeout ) {
2010-09-07 15:58:15 +00:00
select ( pos ) ;
}
} , 250 ) ;
2011-01-13 11:54:31 +00:00
if ( self . options . sortable && self . listLength > 1 ) {
2011-01-11 06:17:45 +00:00
self . dragTimeout = setTimeout ( function ( ) {
if ( self . dragTimeout ) {
dragItem ( pos , e ) ;
self . dragTimeout = 0 ;
}
} , 250 ) ;
2011-01-11 10:29:26 +00:00
$window . one ( 'mouseup' , function ( e ) {
if ( self . dragTimeout ) {
clearTimeout ( self . dragTimeout ) ;
self . dragTimeout = 0 ;
2011-01-11 15:00:32 +00:00
if ( clickTimeout ) {
2011-02-09 17:56:35 +00:00
triggerClickEvent ( clickable ? 'click' : 'edit' , self . $items [ pos ] , $cell ) ;
2011-01-11 10:29:26 +00:00
}
}
} ) ;
2011-01-11 06:17:45 +00:00
}
2010-09-07 15:58:15 +00:00
} else {
// dblclick
clearTimeout ( self . clickTimeout ) ;
self . clickTimeout = 0 ;
open ( ) ;
}
2011-02-07 18:57:05 +00:00
} else if ( ! $ ( e . target ) . hasClass ( 'OxToggle' ) && self . options . min == 0 ) {
2010-09-07 15:58:15 +00:00
selectNone ( ) ;
}
}
2011-01-13 01:58:38 +00:00
function moveItem ( startPos , stopPos ) {
var $item = self . $items [ startPos ] ,
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore' ;
$item . detach ( ) [ insert ] ( self . $items [ stopPos ] . $element ) ; // fixme: why do we need .$element here?
2011-01-13 12:43:20 +00:00
//Ox.print('moveItem', startPos, stopPos, insert, self.ids);
2011-01-13 01:58:38 +00:00
var $item = self . $items . splice ( startPos , 1 ) [ 0 ] ;
self . $items . splice ( stopPos , 0 , $item ) ;
self . $items . forEach ( function ( $item , pos ) {
$item . data ( { position : pos } ) ;
} ) ;
self . selected = [ stopPos ] ;
2011-01-13 12:43:20 +00:00
//Ox.print('ids', self.ids, $.map(self.$items, function(v, i) { return v.data('id'); }));
2011-01-13 01:58:38 +00:00
}
2010-07-20 20:04:13 +00:00
function open ( ) {
2011-01-11 11:16:54 +00:00
var ids = getSelectedIds ( ) ;
ids . length && that . triggerEvent ( 'open' , {
ids : ids
2010-07-20 20:04:13 +00:00
} ) ;
}
2011-01-15 06:09:22 +00:00
function pasteItems ( ) {
that . triggerEvent ( 'paste' , Ox . Clipboard . paste ( ) ) ;
}
2010-07-20 20:04:13 +00:00
function preview ( ) {
2011-01-11 11:16:54 +00:00
var ids = getSelectedIds ( ) ;
if ( ids . length ) {
self . preview = ! self . preview ;
if ( self . preview ) {
that . triggerEvent ( 'openpreview' , {
ids : getSelectedIds ( )
} ) ;
} else {
that . triggerEvent ( 'closepreview' ) ;
}
2010-07-20 20:04:13 +00:00
}
}
2010-06-28 09:16:36 +00:00
function scroll ( ) {
var page = self . page ;
2010-09-07 15:58:15 +00:00
self . scrollTimeout && clearTimeout ( self . scrollTimeout ) ;
self . scrollTimeout = setTimeout ( function ( ) {
self . scrollTimeout = 0 ;
self . page = getPage ( ) ;
if ( self . page != page ) {
2011-01-13 12:43:20 +00:00
//Ox.print('page', page, '-->', self.page);
2010-07-16 06:50:30 +00:00
}
2010-09-07 15:58:15 +00:00
if ( self . page == page - 1 ) {
unloadPage ( self . page + 2 ) ;
loadPage ( self . page - 1 ) ;
} else if ( self . page == page + 1 ) {
unloadPage ( self . page - 2 ) ;
loadPage ( self . page + 1 ) ;
} else if ( self . page == page - 2 ) {
unloadPage ( self . page + 3 ) ;
unloadPage ( self . page + 2 ) ;
loadPage ( self . page ) ;
loadPage ( self . page - 1 ) ;
} else if ( self . page == page + 2 ) {
unloadPage ( self . page - 3 ) ;
unloadPage ( self . page - 2 ) ;
loadPage ( self . page ) ;
loadPage ( self . page + 1 ) ;
} else if ( self . page != page ) {
unloadPages ( page ) ;
loadPages ( self . page ) ;
}
} , 250 ) ;
2011-01-18 04:07:33 +00:00
that . gainFocus ( ) ;
2010-06-28 09:16:36 +00:00
}
2010-06-30 14:21:06 +00:00
function scrollPageDown ( ) {
that . scrollBy ( getHeight ( ) ) ;
}
function scrollPageUp ( ) {
that . scrollBy ( - getHeight ( ) ) ;
}
2010-12-23 04:32:29 +00:00
function scrollTo ( value ) {
2011-01-02 10:01:55 +00:00
that . animate ( self . options . orientation == 'horizontal' ? {
scrollLeft : ( self . listSize * value ) + 'px'
} : {
scrollTop : ( self . listSize * value ) + 'px'
} , 0 ) ;
2010-12-23 04:32:29 +00:00
}
2011-01-02 10:01:55 +00:00
function scrollToFirst ( ) {
that [ self . options . orientation == 'horizontal' ? 'scrollLeft' : 'scrollTop' ] ( 0 ) ;
}
function scrollToLast ( ) {
that [ self . options . orientation == 'horizontal' ? 'scrollLeft' : 'scrollTop' ] ( self . listSize ) ;
}
function scrollToPosition ( pos , leftOrTopAlign ) {
2010-09-06 23:44:37 +00:00
var itemHeight = self . options . itemHeight + self . itemMargin ,
itemWidth = self . options . itemWidth + self . itemMargin ,
positions = [ ] ,
scroll ,
size ;
2010-09-03 20:54:40 +00:00
if ( self . options . orientation == 'horizontal' ) {
2011-01-03 12:01:38 +00:00
if ( self . options . centered ) {
2011-01-02 10:01:55 +00:00
that . animate ( {
2011-01-03 12:01:38 +00:00
scrollLeft : ( self . listMargin / 2 + ( pos + 0.5 ) * itemWidth - that . width ( ) / 2 ) + 'px'
2011-01-02 10:01:55 +00:00
} , 0 ) ;
2011-01-03 12:01:38 +00:00
} else {
positions [ 0 ] = pos * itemWidth + self . listMargin / 2 ;
positions [ 1 ] = positions [ 0 ] + itemWidth + self . itemMargin / 2 ;
scroll = that . scrollLeft ( ) ;
size = getWidth ( ) ;
if ( positions [ 0 ] < scroll || leftOrTopAlign ) {
that . animate ( {
scrollLeft : positions [ 0 ] + 'px'
} , 0 ) ;
} else if ( positions [ 1 ] > scroll + size ) {
that . animate ( {
scrollLeft : ( positions [ 1 ] - size ) + 'px'
} , 0 ) ;
}
2011-01-02 10:01:55 +00:00
}
2010-09-06 23:44:37 +00:00
} else {
positions [ 0 ] = ( self . options . orientation == 'vertical' ? pos : getRow ( pos ) ) * itemHeight ;
2010-09-07 15:58:15 +00:00
positions [ 1 ] = positions [ 0 ] + itemHeight + ( self . options . orientation == 'vertical' ? 0 : self . itemMargin ) ;
2010-06-30 14:21:06 +00:00
scroll = that . scrollTop ( ) ;
size = getHeight ( ) ;
2011-01-02 10:01:55 +00:00
if ( positions [ 0 ] < scroll || leftOrTopAlign ) {
2010-06-30 14:21:06 +00:00
that . animate ( {
2010-09-03 20:54:40 +00:00
scrollTop : positions [ 0 ] + 'px'
2010-06-30 14:21:06 +00:00
} , 0 ) ;
} else if ( positions [ 1 ] > scroll + size ) {
that . animate ( {
2010-09-03 20:54:40 +00:00
scrollTop : ( positions [ 1 ] - size ) + 'px'
2010-06-30 14:21:06 +00:00
} , 0 ) ;
}
}
}
2010-06-25 15:55:25 +00:00
function select ( pos ) {
2010-06-30 09:02:13 +00:00
if ( ! isSelected ( pos ) || self . selected . length > 1 ) {
2010-06-25 15:55:25 +00:00
selectNone ( ) ;
addToSelection ( pos ) ;
2011-01-03 12:01:38 +00:00
self . options . centered && scrollToPosition ( pos ) ;
2010-06-25 15:55:25 +00:00
}
}
2010-09-06 23:44:37 +00:00
function selectAbove ( ) {
var pos = getAbove ( ) ;
if ( pos > - 1 ) {
select ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-09-06 23:44:37 +00:00
}
}
2010-06-25 15:55:25 +00:00
function selectAll ( ) {
2011-01-15 06:09:22 +00:00
Ox . range ( self . listLength ) . forEach ( function ( pos ) {
addToSelection ( pos ) ;
2010-06-25 15:55:25 +00:00
} ) ;
}
2010-09-06 23:44:37 +00:00
function selectBelow ( ) {
var pos = getBelow ( ) ;
if ( pos > - 1 ) {
select ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-09-06 23:44:37 +00:00
}
}
2010-06-25 15:55:25 +00:00
function selectNext ( ) {
var pos = getNext ( ) ;
if ( pos > - 1 ) {
select ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-06-25 15:55:25 +00:00
}
}
function selectNone ( ) {
$ . each ( self . $items , function ( i , v ) {
deselect ( i ) ;
} ) ;
}
function selectPrevious ( ) {
var pos = getPrevious ( ) ;
if ( pos > - 1 ) {
select ( pos ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( pos ) ;
2010-06-25 15:55:25 +00:00
}
}
function selectQuery ( str ) {
$ . each ( self . $items , function ( i , v ) {
if ( Ox . toLatin ( v . title ) . toUpperCase ( ) . indexOf ( str ) == 0 ) {
select ( i ) ;
2010-12-23 04:32:29 +00:00
scrollToPosition ( i ) ;
2010-06-25 15:55:25 +00:00
return false ;
}
} ) ;
}
2011-01-10 00:07:48 +00:00
function setSelected ( ids ) {
2011-01-13 21:48:39 +00:00
// fixme: can't use selectNone here,
// since it'd trigger a select event
$ . each ( self . $items , function ( pos ) {
if ( isSelected ( pos ) ) {
self . selected . splice ( self . selected . indexOf ( pos ) , 1 ) ;
! Ox . isUndefined ( self . $items [ pos ] ) &&
self . $items [ pos ] . removeClass ( 'OxSelected' ) ;
}
2011-01-10 00:07:48 +00:00
} ) ;
2011-01-13 21:48:39 +00:00
ids . forEach ( function ( id , i ) {
var pos = getPositionById ( id ) ;
self . selected . push ( pos ) ;
! Ox . isUndefined ( self . $items [ pos ] ) &&
self . $items [ pos ] . addClass ( 'OxSelected' ) ;
2011-01-10 00:07:48 +00:00
} ) ;
}
2010-06-25 15:55:25 +00:00
function toggleSelection ( pos ) {
if ( ! isSelected ( pos ) ) {
addToSelection ( pos ) ;
} else {
deselect ( pos ) ;
}
}
2011-02-09 17:56:35 +00:00
function triggerClickEvent ( event , $item , $cell ) {
2011-01-11 15:00:32 +00:00
// event can be 'click' or 'edit'
2011-02-09 17:56:35 +00:00
that . triggerEvent ( event , $ . extend ( {
id : $item . data ( 'id' )
} , $cell ? {
2011-01-11 12:27:01 +00:00
key : $cell . attr ( 'class' ) . split ( 'OxColumn' ) [ 1 ] . split ( ' ' ) [ 0 ] . toLowerCase ( )
2011-02-09 17:56:35 +00:00
} : { } ) ) ;
2011-01-11 10:29:26 +00:00
}
2010-07-17 08:46:27 +00:00
function triggerSelectEvent ( ) {
2011-01-03 23:38:43 +00:00
var ids = self . options . selected = getSelectedIds ( ) ;
2010-07-17 08:46:27 +00:00
setTimeout ( function ( ) {
2010-07-20 20:04:13 +00:00
var ids _ = getSelectedIds ( ) ;
2011-02-25 10:23:33 +00:00
Ox . print ( 'ids' , ids , 'ids after 100 msec' , ids _ , Ox . isEqual ( ids , ids _ ) )
if ( Ox . isEqual ( ids , ids _ ) ) {
2010-09-03 20:54:40 +00:00
that . triggerEvent ( 'select' , {
2010-07-17 08:46:27 +00:00
ids : ids
} ) ;
2010-09-03 20:54:40 +00:00
self . preview && that . triggerEvent ( 'openpreview' , {
2010-07-20 20:04:13 +00:00
ids : ids
} ) ;
2010-07-17 08:46:27 +00:00
} else {
2011-02-07 05:34:18 +00:00
Ox . print ( 'select event not triggered after timeout' ) ;
2010-07-17 08:46:27 +00:00
}
} , 100 ) ;
}
2011-02-07 18:57:05 +00:00
function triggerToggleEvent ( expanded ) {
that . triggerEvent ( 'toggle' , {
expanded : expanded ,
ids : getSelectedIds ( )
} ) ;
}
2010-06-25 15:55:25 +00:00
function unloadPage ( page ) {
2010-06-29 22:19:41 +00:00
if ( page < 0 || page >= self . pages ) {
return ;
}
2011-01-13 12:43:20 +00:00
//Ox.print('unloadPage', page)
//Ox.print('self.$pages', self.$pages)
//Ox.print('page not undefined', !Ox.isUndefined(self.$pages[page]))
2010-09-07 17:36:21 +00:00
if ( ! Ox . isUndefined ( self . $pages [ page ] ) ) {
self . $pages [ page ] . remove ( ) ;
delete self . $pages [ page ] ;
}
2010-06-25 15:55:25 +00:00
}
function unloadPages ( page ) {
unloadPage ( page ) ;
unloadPage ( page - 1 ) ;
unloadPage ( page + 1 )
}
2010-02-10 09:59:59 +00:00
2011-02-07 18:57:05 +00:00
function updatePages ( pos , scroll ) {
// only used if orientation is both
clear ( ) ;
self . pageLength = self . pageLengthByRowLength [ self . rowLength ]
$ . extend ( self , {
listSize : getListSize ( ) ,
pages : Math . ceil ( self . listLength / self . pageLength ) ,
pageWidth : ( self . options . itemWidth + self . itemMargin ) * self . rowLength ,
pageHeight : getPageHeight ( )
} ) ;
that . $content . css ( {
height : self . listSize + 'px'
} ) ;
self . page = getPageByPosition ( pos ) ;
//that.scrollTop(0);
that . $content . empty ( ) ;
loadPages ( self . page , function ( ) {
scrollTo ( scroll ) ;
} ) ;
}
function updatePositions ( ) {
self . $items . forEach ( function ( item , pos ) {
item . data ( 'position' , pos ) ;
} ) ;
}
2011-02-07 05:34:18 +00:00
function updateQuery ( ids ) { // fixme: shouldn't this be setQuery?
2011-01-02 10:22:46 +00:00
// ids are the selcected ids
// (in case list is loaded with selection)
2011-02-25 10:23:33 +00:00
Ox . print ( 'updateQuery' , self . options )
2010-06-30 18:47:10 +00:00
clear ( ) ;
2011-02-25 10:23:33 +00:00
self . requests . push ( self . options . items ( { } , function ( result ) {
2010-09-13 13:54:22 +00:00
var keys = { } ;
2011-01-13 19:41:10 +00:00
that . triggerEvent ( 'init' , result . data ) ;
2010-09-13 13:54:22 +00:00
self . rowLength = getRowLength ( ) ;
self . pageLength = self . options . orientation == 'both' ?
self . pageLengthByRowLength [ self . rowLength ] :
self . options . pageLength ;
$ . extend ( self , {
listLength : result . data . items ,
2011-01-13 11:54:31 +00:00
pages : Math . max ( Math . ceil ( result . data . items / self . pageLength ) , 1 ) ,
2010-09-18 10:48:20 +00:00
pageWidth : self . options . orientation == 'vertical' ? 0 :
2011-01-02 10:01:55 +00:00
( self . options . itemWidth + self . itemMargin ) *
( self . options . orientation == 'horizontal' ?
self . pageLength : self . rowLength ) ,
2010-09-13 13:54:22 +00:00
pageHeight : self . options . orientation == 'horizontal' ? 0 :
2011-01-02 10:01:55 +00:00
Math . ceil ( self . pageLength * ( self . options . itemHeight +
self . itemMargin ) / self . rowLength )
2010-09-13 13:54:22 +00:00
} ) ;
2011-01-02 10:01:55 +00:00
self . listSize = getListSize ( ) ;
that . $content . css (
self . options . orientation == 'horizontal' ? 'width' : 'height' ,
self . listSize + 'px'
) ;
2011-01-02 10:22:46 +00:00
getPositions ( ids ) ;
2010-06-30 18:47:10 +00:00
} ) ) ;
}
2010-06-30 11:09:45 +00:00
2010-06-30 18:47:10 +00:00
function updateSort ( ) {
2011-02-25 10:23:33 +00:00
var key = self . options . sort [ 0 ] . key ,
operator = self . options . sort [ 0 ] . operator ;
2010-07-03 08:35:28 +00:00
if ( self . listLength > 1 ) {
2011-02-25 10:23:33 +00:00
if ( Ox . isArray ( self . options . items ) ) {
self . options . items . sort ( function ( a , b ) {
var ret = 0
if ( a [ key ] < b [ key ] ) {
return operator == '+' ? - 1 : 1
} else if ( a [ key ] > b [ key ] ) {
return operator == '+' ? 1 : - 1 ;
}
return ret ;
} ) ;
loadItems ( ) ;
} else {
clear ( ) ; // fixme: bad function name
getPositions ( ) ;
}
2010-07-03 08:35:28 +00:00
}
2010-06-28 09:16:36 +00:00
}
2010-06-30 18:47:10 +00:00
self . onChange = function ( key , value ) {
2011-01-13 12:43:20 +00:00
//Ox.print('list onChange', key, value);
2011-02-25 10:23:33 +00:00
if ( key == 'items' ) {
2010-06-30 18:47:10 +00:00
updateQuery ( ) ;
2011-01-10 00:07:48 +00:00
} else if ( key == 'selected' ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'onChange selected' , value )
2011-01-10 00:07:48 +00:00
setSelected ( value ) ;
2010-06-30 18:47:10 +00:00
}
} ;
2011-02-07 18:57:05 +00:00
that . addItems = function ( pos , items ) {
var $items = [ ] ,
2011-02-25 15:04:26 +00:00
length = items . length
first = self . $items . length == 0 ;
2011-02-07 18:57:05 +00:00
self . selected . forEach ( function ( v , i ) {
if ( v >= pos ) {
self . selected [ i ] += length ;
}
} ) ;
items . forEach ( function ( item , i ) {
var $item ;
$items . push ( $item = new Ox . ListItem ( {
construct : self . options . construct ,
data : item ,
draggable : self . options . draggable ,
position : pos + i ,
unique : self . options . unique
} ) ) ;
if ( i == 0 ) {
if ( pos == 0 ) {
$item . insertBefore ( self . $items [ 0 ] ) ;
} else {
$item . insertAfter ( self . $items [ pos - 1 ] ) ;
}
} else {
$item . insertAfter ( $items [ i - 1 ] ) ;
}
} ) ;
2011-02-25 15:04:26 +00:00
2011-02-07 18:57:05 +00:00
self . options . items . splice . apply ( self . options . items , $ . merge ( [ pos , 0 ] , items ) ) ;
self . $items . splice . apply ( self . $items , $ . merge ( [ pos , 0 ] , $items ) ) ;
2011-02-25 15:04:26 +00:00
if ( first )
loadItems ( ) ;
2011-02-07 18:57:05 +00:00
updatePositions ( ) ;
2011-02-09 17:56:35 +00:00
}
that . editItem = function ( pos ) {
var $input ,
item = self . options . items [ pos ] ,
2011-02-25 10:23:33 +00:00
$item = self . $items [ pos ] ,
width = $item . width ( ) , // fixme: don't lookup in DOM
2011-02-09 17:56:35 +00:00
height = $item . height ( ) ;
$item
2011-02-21 17:31:02 +00:00
. height ( height + 8 + 16 )
2011-02-09 17:56:35 +00:00
. empty ( )
. addClass ( 'OxEdit' ) ;
2011-02-21 17:31:02 +00:00
2011-02-22 09:34:43 +00:00
$input = new Ox . ItemInput ( {
type : 'textarea' ,
value : item . value ,
height : height ,
width : width
} ) . bindEvent ( {
cancel : cancel ,
save : submit
} ) . appendTo ( $item . $element ) ;
/ *
2011-02-21 17:31:02 +00:00
setTimeout ( function ( ) {
$input . gainFocus ( ) ;
$input . focus ( ) ;
} ) ;
2011-02-22 09:34:43 +00:00
* /
2011-02-21 17:31:02 +00:00
function cancel ( ) {
$item . options ( 'data' , item ) ;
//fixme: trigger event to reset i/o points
}
2011-02-22 09:34:43 +00:00
function submit ( event , data ) {
item . value = data . value ;
2011-02-09 17:56:35 +00:00
//$input.loseFocus().remove();
// fixme: leaky, inputs remain in focus stack
$item . options ( 'data' , item ) ;
that . triggerEvent ( 'submit' , item ) ;
}
2011-02-07 18:57:05 +00:00
}
2011-01-10 00:07:48 +00:00
that . clearCache = function ( ) { // fixme: was used by TextList resizeColumn, now probably no longer necessary
2010-06-30 18:47:10 +00:00
self . $pages = [ ] ;
2010-09-04 14:28:40 +00:00
return that ;
} ;
2010-09-13 11:53:31 +00:00
that . closePreview = function ( ) {
self . preview = false ;
2011-01-11 15:00:32 +00:00
return that ;
2010-09-13 11:53:31 +00:00
} ;
2011-01-15 06:09:22 +00:00
that . paste = function ( data ) {
pasteItems ( data ) ;
return that ;
} ;
2011-01-13 19:41:10 +00:00
that . reloadList = function ( ) {
updateQuery ( ) ;
return that ;
2011-01-15 06:09:22 +00:00
} ;
2011-01-13 19:41:10 +00:00
that . reloadPages = function ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('---------------- list reload, page', self.page)
2010-09-18 11:24:29 +00:00
var page = self . page ;
2010-09-04 14:28:40 +00:00
clear ( ) ;
2010-09-18 11:24:29 +00:00
self . page = page
2010-09-04 14:28:40 +00:00
that . $content . empty ( ) ;
loadPages ( self . page ) ;
return that ;
2010-06-30 18:47:10 +00:00
} ;
2011-02-07 18:57:05 +00:00
that . removeItems = function ( pos , length ) {
2011-02-11 14:44:32 +00:00
/ *
removeItems ( ids )
or
removeItems ( pos , length )
* /
if ( ! length ) { //pos is list of ids
pos . forEach ( function ( id ) {
var p = getPositionById ( id ) ;
that . removeItems ( p , 1 ) ;
} ) ;
} else { //remove items from pos to pos+length
Ox . range ( pos , pos + length ) . forEach ( function ( i ) {
self . selected . indexOf ( i ) > - 1 && deselect ( i ) ;
self . $items [ i ] . remove ( ) ;
} ) ;
self . options . items . splice ( pos , length ) ;
self . $items . splice ( pos , length ) ;
self . selected . forEach ( function ( v , i ) {
if ( v >= pos + length ) {
self . selected [ i ] -= length ;
}
} ) ;
updatePositions ( ) ;
}
}
2011-02-07 18:57:05 +00:00
2011-01-03 12:01:38 +00:00
that . scrollToSelection = function ( ) {
self . selected . length && scrollToPosition ( self . selected [ 0 ] ) ;
2011-01-11 15:00:32 +00:00
return that ;
} ;
2011-01-03 12:01:38 +00:00
that . size = function ( ) { // fixme: not a good function name
2010-09-18 10:48:20 +00:00
if ( self . options . orientation == 'both' ) {
var rowLength = getRowLength ( ) ,
2010-12-23 04:32:29 +00:00
pageLength = self . pageLengthByRowLength [ rowLength ] ,
2011-01-13 01:58:38 +00:00
pos = getScrollPosition ( ) ,
2011-01-02 10:01:55 +00:00
scroll = that . scrollTop ( ) / self . listSize ;
2010-09-18 10:48:20 +00:00
if ( pageLength != self . pageLength ) {
2010-12-23 04:32:29 +00:00
self . pageLength = pageLength ;
self . rowLength = rowLength ;
updatePages ( pos , scroll ) ;
2010-09-18 10:48:20 +00:00
} else if ( rowLength != self . rowLength ) {
self . rowLength = rowLength ;
2010-12-23 04:32:29 +00:00
self . pageWidth = ( self . options . itemWidth + self . itemMargin ) * self . rowLength ; // fixme: make function
2011-01-02 10:01:55 +00:00
self . listSize = getListSize ( ) ;
2010-12-23 04:32:29 +00:00
self . pageHeight = getPageHeight ( ) ;
2010-09-18 10:48:20 +00:00
$ . each ( self . $pages , function ( i , $page ) {
2010-12-22 20:28:27 +00:00
! Ox . isUndefined ( $page ) && $page . css ( {
2010-12-23 04:32:29 +00:00
width : self . pageWidth + 'px' ,
top : ( i * self . pageHeight + self . listMargin / 2 ) + 'px'
2010-09-18 10:48:20 +00:00
} ) ;
} ) ;
2010-12-23 04:32:29 +00:00
that . $content . css ( {
2011-01-02 10:01:55 +00:00
height : self . listSize + 'px'
2010-12-23 04:32:29 +00:00
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('scrolling to', scroll)
2010-12-23 04:32:29 +00:00
scrollTo ( scroll ) ;
2010-09-18 10:48:20 +00:00
}
} else if ( self . options . type == 'text' ) {
2011-01-13 12:43:20 +00:00
//Ox.print('that.size, type==text')
2010-09-18 10:48:20 +00:00
emptyFirstPage ( ) ;
fillFirstPage ( ) ;
}
2011-01-11 15:00:32 +00:00
return that ;
2010-09-18 10:48:20 +00:00
}
2010-09-08 16:35:34 +00:00
that . sortList = function ( key , operator ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'sortList' , key , operator )
2010-06-28 09:16:36 +00:00
if ( key != self . options . sort [ 0 ] . key || operator != self . options . sort [ 0 ] . operator ) {
2011-02-25 10:23:33 +00:00
self . options . sort [ 0 ] = { key : key , operator : operator } ;
2010-06-30 18:47:10 +00:00
updateSort ( ) ;
2011-02-25 10:23:33 +00:00
that . triggerEvent ( 'sort' , self . options . sort [ 0 ] ) ;
2010-06-28 09:16:36 +00:00
}
2010-09-04 14:28:40 +00:00
return that ;
2010-06-28 09:16:36 +00:00
}
2011-01-11 15:00:32 +00:00
that . value = function ( id , key , value ) {
2011-01-13 01:58:38 +00:00
var pos = getPositionById ( id ) ,
$item = self . $items [ pos ] ,
data = $item . options ( 'data' ) ,
oldValue ;
2011-01-15 06:09:22 +00:00
if ( arguments . length == 1 ) {
return data ;
} else if ( arguments . length == 2 ) {
2011-01-13 01:58:38 +00:00
return data [ key ] ;
} else {
oldValue = data [ key ] ;
data [ key ] = value ;
$item . options ( { data : data } ) ;
return that ;
}
2011-01-11 15:00:32 +00:00
} ;
2010-02-10 09:59:59 +00:00
return that ;
} ;
2011-02-22 09:34:43 +00:00
Ox . ItemInput = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
type : 'textarea' ,
value : '' ,
height : 300 ,
width : 100
} )
. options ( options || { } ) ,
$input ;
2011-02-25 10:23:33 +00:00
that . append (
$input = new Ox . Input ( {
2011-02-22 09:34:43 +00:00
height : self . options . height ,
style : 'square' ,
type : self . options . type ,
value : self . options . value ,
width : self . options . width + 6
} )
. bind ( {
mousedown : function ( e ) {
// keep mousedown from reaching list
e . stopPropagation ( ) ;
}
2011-02-25 10:23:33 +00:00
} )
)
2011-02-22 09:34:43 +00:00
. append ( new Ox . Element ( )
. append ( new Ox . Button ( { type : 'text' , title : 'Cancel' } )
. css ( 'width' , '42%' )
. bindEvent ( {
'click' : function ( ) {
that . triggerEvent ( 'cancel' ) ;
}
} ) )
. append ( new Ox . Button ( { type : 'text' , title : 'Save' } )
. css ( 'width' , '42%' )
. bindEvent ( {
'click' : function ( ) {
that . triggerEvent ( 'save' , {
value : $input . value ( )
} ) ;
}
} ) )
. css ( {
'margin-top' : self . options . height - 8 ,
'height' : '16px' ,
'text-align' : 'right' ,
} )
) ;
Ox . print ( $input ) ;
return that ;
}
2010-02-10 09:59:59 +00:00
Ox . ListItem = function ( options , self ) {
2010-06-28 11:19:04 +00:00
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
construct : function ( ) { } ,
data : { } ,
2011-01-11 06:17:45 +00:00
draggable : false ,
2011-01-13 01:58:38 +00:00
position : 0 ,
unique : ''
2010-06-28 11:19:04 +00:00
} )
2010-06-29 14:00:18 +00:00
. options ( options || { } ) ;
2010-06-28 11:19:04 +00:00
2011-01-13 01:58:38 +00:00
constructItem ( ) ;
2010-06-28 11:19:04 +00:00
2011-01-13 01:58:38 +00:00
function constructItem ( update ) {
2011-01-13 11:54:31 +00:00
var $element = self . options . construct ( self . options . data )
2011-02-09 17:56:35 +00:00
. addClass ( 'OxItem' )
2011-01-13 01:58:38 +00:00
. attr ( {
draggable : self . options . draggable
} )
. data ( {
id : self . options . data [ self . options . unique ] ,
position : self . options . position
} ) ;
if ( update ) {
2011-01-30 03:54:06 +00:00
that . $element . hasClass ( 'OxSelected' ) && $element . addClass ( 'OxSelected' ) ;
2011-01-13 01:58:38 +00:00
that . $element . replaceWith ( $element ) ;
}
that . $element = $element ;
}
self . onChange = function ( key , value ) {
if ( key == 'data' ) {
constructItem ( true ) ;
}
}
2010-06-28 11:19:04 +00:00
return that ;
2010-02-10 09:59:59 +00:00
} ;
2010-06-25 15:55:25 +00:00
Ox . ListPage = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxPage' ) ;
2010-06-25 15:55:25 +00:00
return that ;
} ;
Ox . TextList = function ( options , self ) {
2011-02-25 10:23:33 +00:00
// fixme: rename to TableList
2010-06-25 15:55:25 +00:00
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
columns : [ ] ,
2010-09-04 14:28:40 +00:00
columnsMovable : false ,
columnsRemovable : false ,
2010-12-22 15:25:13 +00:00
columnsResizable : false ,
2011-01-06 03:10:40 +00:00
columnsVisible : false ,
2010-09-05 14:24:22 +00:00
columnWidth : [ 40 , 800 ] ,
2010-09-03 20:54:40 +00:00
id : '' ,
2011-02-25 10:23:33 +00:00
items : null , // function() {} {sort, range, keys, callback} or array
2011-01-02 10:01:55 +00:00
max : - 1 ,
min : 0 ,
2011-01-11 11:16:54 +00:00
pageLength : 100 ,
2011-01-14 06:25:16 +00:00
scrollbarVisible : false ,
2011-01-02 10:01:55 +00:00
selected : [ ] ,
2010-06-28 09:16:36 +00:00
sort : [ ]
2010-06-25 15:55:25 +00:00
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTextList' ) ;
2010-06-25 15:55:25 +00:00
2011-01-24 04:08:19 +00:00
Ox . print ( 'Ox.TextList self.options' , self . options )
2010-06-30 18:47:10 +00:00
$ . each ( self . options . columns , function ( i , v ) { // fixme: can this go into a generic ox.js function?
2011-01-11 12:27:01 +00:00
// fixme: and can't these just remain undefined?
2011-01-14 03:53:18 +00:00
if ( Ox . isUndefined ( v . align ) ) {
v . align = 'left' ;
}
2011-01-13 01:58:38 +00:00
if ( Ox . isUndefined ( v . clickable ) ) {
v . clickable = false ;
}
2011-01-11 12:27:01 +00:00
if ( Ox . isUndefined ( v . editable ) ) {
v . editable = false ;
}
2010-06-30 18:47:10 +00:00
if ( Ox . isUndefined ( v . unique ) ) {
v . unique = false ;
}
if ( Ox . isUndefined ( v . visible ) ) {
v . visible = false ;
}
if ( v . unique ) {
self . unique = v . id ;
}
} ) ;
2010-06-25 15:55:25 +00:00
$ . extend ( self , {
2010-07-03 11:31:25 +00:00
columnPositions : [ ] ,
2011-01-15 06:09:22 +00:00
defaultColumnWidths : $ . map ( self . options . columns , function ( v ) {
2011-01-15 23:26:20 +00:00
return v . defaultWidth || v . width ;
2011-01-15 06:09:22 +00:00
} ) ,
2010-06-25 15:55:25 +00:00
itemHeight : 16 ,
page : 0 ,
pageLength : 100 ,
scrollLeft : 0 ,
2010-06-29 21:24:07 +00:00
selectedColumn : getColumnIndexById ( self . options . sort [ 0 ] . key ) ,
2011-01-15 06:09:22 +00:00
visibleColumns : $ . map ( self . options . columns , function ( v ) {
2010-06-28 09:16:36 +00:00
return v . visible ? v : null ;
} )
2010-06-25 15:55:25 +00:00
} ) ;
2011-01-15 23:26:20 +00:00
// fixme: there might be a better way than passing both visible and position
self . options . columns . forEach ( function ( v ) {
if ( ! Ox . isUndefined ( v . position ) ) {
self . visibleColumns [ v . position ] = v ;
}
} )
2010-06-25 15:55:25 +00:00
$ . extend ( self , {
2010-09-05 21:36:51 +00:00
columnWidths : $ . map ( self . visibleColumns , function ( v , i ) {
return v . width ;
} ) ,
2010-09-05 20:18:00 +00:00
pageHeight : self . options . pageLength * self . itemHeight
2010-06-25 15:55:25 +00:00
} ) ;
2011-01-06 06:10:46 +00:00
self . format = { } ;
self . options . columns . forEach ( function ( v , i ) {
if ( v . format ) {
self . format [ v . id ] = v . format ;
}
} ) ;
2010-06-25 15:55:25 +00:00
// Head
2011-01-06 03:10:40 +00:00
if ( self . options . columnsVisible ) {
that . $bar = new Ox . Bar ( {
orientation : 'horizontal' ,
size : 16
} ) . appendTo ( that ) ;
that . $head = new Ox . Container ( )
. addClass ( 'OxHead' )
2011-01-14 09:54:28 +00:00
. css ( {
right : self . options . scrollbarVisible ? oxui . scrollbarSize + 'px' : 0
} )
2011-01-06 03:10:40 +00:00
. appendTo ( that . $bar ) ;
that . $head . $content . addClass ( 'OxTitles' ) ;
constructHead ( ) ;
if ( self . options . columnsRemovable ) {
that . $select = new Ox . Select ( {
id : self . options . id + 'SelectColumns' ,
items : $ . map ( self . options . columns , function ( v , i ) {
return {
checked : v . visible ,
disabled : v . removable === false ,
id : v . id ,
title : v . title
}
} ) ,
max : - 1 ,
min : 1 ,
type : 'image'
} )
. bindEvent ( 'change' , changeColumns )
. appendTo ( that . $bar . $element ) ;
}
2010-07-24 01:32:08 +00:00
}
2010-06-25 15:55:25 +00:00
// Body
2010-06-28 09:16:36 +00:00
that . $body = new Ox . List ( {
2010-06-28 11:19:04 +00:00
construct : constructItem ,
2010-06-30 09:27:02 +00:00
id : self . options . id ,
2011-02-22 18:52:26 +00:00
items : self . options . items ,
2010-06-28 09:16:36 +00:00
itemHeight : 16 ,
2011-02-25 10:23:33 +00:00
items : self . options . items ,
2010-06-30 09:02:13 +00:00
itemWidth : getItemWidth ( ) ,
2011-01-13 11:54:31 +00:00
format : self . format , // fixme: not needed, happens in TextList
2011-01-06 06:10:46 +00:00
keys : $ . map ( self . visibleColumns , function ( v ) {
2010-06-28 11:19:04 +00:00
return v . id ;
} ) ,
2011-01-02 10:01:55 +00:00
max : self . options . max ,
min : self . options . min ,
2011-01-11 11:16:54 +00:00
pageLength : self . options . pageLength ,
2011-01-15 06:09:22 +00:00
paste : self . options . paste ,
2010-09-03 20:54:40 +00:00
orientation : 'vertical' ,
2011-01-02 10:01:55 +00:00
selected : self . options . selected ,
2010-06-28 09:16:36 +00:00
sort : self . options . sort ,
2011-01-11 06:17:45 +00:00
sortable : self . options . sortable ,
2010-09-03 20:54:40 +00:00
type : 'text' ,
2010-06-30 18:47:10 +00:00
unique : self . unique
2011-01-02 10:01:55 +00:00
} , $ . extend ( { } , self ) ) // pass event handler
2010-09-03 20:54:40 +00:00
. addClass ( 'OxBody' )
2011-01-06 03:10:40 +00:00
. css ( {
top : ( self . options . columnsVisible ? 16 : 0 ) + 'px' ,
2011-01-14 06:25:16 +00:00
overflowY : ( self . options . scrollbarVisible ? 'scroll' : 'hidden' )
2011-01-06 03:10:40 +00:00
} )
2010-06-28 09:16:36 +00:00
. scroll ( function ( ) {
var scrollLeft = $ ( this ) . scrollLeft ( ) ;
if ( scrollLeft != self . scrollLeft ) {
self . scrollLeft = scrollLeft ;
2011-01-06 03:10:40 +00:00
that . $head && that . $head . scrollLeft ( scrollLeft ) ;
2010-06-28 09:16:36 +00:00
}
} )
2011-01-03 23:38:43 +00:00
. bindEvent ( {
2011-01-11 10:29:26 +00:00
edit : function ( event , data ) {
2011-01-13 19:41:10 +00:00
that . editCell ( data . id , data . key ) ;
2011-01-11 10:29:26 +00:00
} ,
2011-01-03 23:38:43 +00:00
select : function ( event , data ) {
self . options . selected = data . ids ;
}
} )
2010-06-28 09:16:36 +00:00
. appendTo ( that ) ;
that . $body . $content . css ( {
2010-09-03 20:54:40 +00:00
width : getItemWidth ( ) + 'px'
2010-06-25 15:55:25 +00:00
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('s.vC', self.visibleColumns)
2010-07-06 04:39:11 +00:00
2010-06-28 09:16:36 +00:00
function addColumn ( id ) {
2011-01-13 12:43:20 +00:00
//Ox.print('addColumn', id);
2011-01-15 23:26:20 +00:00
var column , ids ,
2010-09-04 14:28:40 +00:00
index = 0 ;
$ . each ( self . options . columns , function ( i , v ) {
if ( v . visible ) {
index ++ ;
} else if ( v . id == id ) {
column = v ;
return false ;
}
} ) ;
column . visible = true ;
self . visibleColumns . splice ( index , 0 , column ) ;
2010-09-05 21:17:16 +00:00
self . columnWidths . splice ( index , 0 , column . width ) ;
2010-09-04 14:28:40 +00:00
that . $head . $content . empty ( ) ;
constructHead ( ) ;
that . $body . options ( {
keys : $ . map ( self . visibleColumns , function ( v , i ) {
return v . id ;
} )
} ) ;
2011-01-13 19:41:10 +00:00
that . $body . reloadPages ( ) ;
2010-09-04 14:28:40 +00:00
}
function changeColumns ( event , data ) {
var add ,
ids = [ ] ;
$ . each ( data . selected , function ( i , column ) {
var index = getColumnIndexById ( column . id ) ;
if ( ! self . options . columns [ index ] . visible ) {
addColumn ( column . id ) ;
add = true ;
return false ;
}
ids . push ( column . id ) ;
} ) ;
if ( ! add ) {
$ . each ( self . visibleColumns , function ( i , column ) {
if ( ids . indexOf ( column . id ) == - 1 ) {
removeColumn ( column . id ) ;
2010-09-05 23:34:39 +00:00
return false ;
2010-09-04 14:28:40 +00:00
}
} ) ;
}
2011-01-15 23:26:20 +00:00
triggerColumnChangeEvent ( ) ;
2010-06-28 09:16:36 +00:00
}
2010-06-29 21:24:07 +00:00
function clickColumn ( id ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'clickColumn' , id ) ;
2010-06-29 21:24:07 +00:00
var i = getColumnIndexById ( id ) ,
isSelected = self . options . sort [ 0 ] . key == self . options . columns [ i ] . id ;
2010-09-08 16:35:34 +00:00
that . sortList (
2010-06-29 21:24:07 +00:00
self . options . columns [ i ] . id , isSelected ?
2011-01-24 04:08:19 +00:00
( self . options . sort [ 0 ] . operator == '+' ? '-' : '+' ) :
2010-06-29 21:24:07 +00:00
self . options . columns [ i ] . operator
2010-06-29 16:28:22 +00:00
) ;
}
2010-09-04 14:28:40 +00:00
function constructHead ( ) {
2010-09-05 22:26:30 +00:00
var offset = 0 ;
2010-09-04 14:28:40 +00:00
that . $titles = [ ] ;
2010-09-05 22:26:30 +00:00
self . columnOffsets = [ ] ;
2010-09-04 14:28:40 +00:00
$ . each ( self . visibleColumns , function ( i , v ) {
2011-01-16 19:02:29 +00:00
var $order , $resize , $left , $center , $right ;
2010-09-05 22:26:30 +00:00
offset += self . columnWidths [ i ] ;
self . columnOffsets [ i ] = offset - self . columnWidths [ i ] / 2 ;
2011-01-16 19:02:29 +00:00
that . $titles [ i ] = new Ox . Element ( )
2010-09-04 14:28:40 +00:00
. addClass ( 'OxTitle OxColumn' + Ox . toTitleCase ( v . id ) )
. css ( {
2010-09-05 21:36:51 +00:00
width : ( self . columnWidths [ i ] - 9 ) + 'px' ,
2010-09-04 14:28:40 +00:00
textAlign : v . align
} )
. html ( v . title )
2011-01-16 19:02:29 +00:00
. bindEvent ( {
anyclick : function ( event , e ) {
2010-09-04 14:28:40 +00:00
clickColumn ( v . id ) ;
2011-01-16 19:02:29 +00:00
} ,
dragstart : function ( event , e ) {
dragstartColumn ( v . id , e ) ;
} ,
drag : function ( event , e ) {
dragColumn ( v . id , e ) ;
} ,
dragend : function ( event , e ) {
dragendColumn ( v . id , e ) ;
2010-09-04 14:28:40 +00:00
}
} )
. appendTo ( that . $head . $content . $element ) ;
$order = $ ( '<div>' )
. addClass ( 'OxOrder' )
. html ( oxui . symbols [ 'triangle_' + (
2011-01-24 04:08:19 +00:00
v . operator == '+' ? 'up' : 'down'
2010-09-04 14:28:40 +00:00
) ] )
. click ( function ( ) {
$ ( this ) . prev ( ) . trigger ( 'click' )
} )
. appendTo ( that . $head . $content . $element ) ;
2011-01-16 19:02:29 +00:00
$resize = new Ox . Element ( )
2010-09-04 14:28:40 +00:00
. addClass ( 'OxResize' )
. appendTo ( that . $head . $content . $element ) ;
2010-12-22 15:25:13 +00:00
if ( self . options . columnsResizable ) {
$resize . addClass ( 'OxResizable' )
2011-01-16 19:02:29 +00:00
. bindEvent ( {
doubleclick : function ( event , e ) {
resetColumn ( v . id , e ) ;
} ,
dragstart : function ( event , e ) {
dragstartResize ( v . id , e ) ;
} ,
drag : function ( event , e ) {
dragResize ( v . id , e ) ;
} ,
dragend : function ( event , e ) {
dragendResize ( v . id , e ) ;
}
} ) ;
2010-12-22 15:25:13 +00:00
}
2011-01-16 19:02:29 +00:00
$left = $ ( '<div>' ) . addClass ( 'OxLeft' ) . appendTo ( $resize . $element ) ;
$center = $ ( '<div>' ) . addClass ( 'OxCenter' ) . appendTo ( $resize . $element ) ;
$right = $ ( '<div>' ) . addClass ( 'OxRight' ) . appendTo ( $resize . $element ) ;
2010-09-04 14:28:40 +00:00
} ) ;
that . $head . $content . css ( {
width : ( Ox . sum ( self . columnWidths ) + 2 ) + 'px'
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('s.sC', self.selectedColumn)
//Ox.print('s.cO', self.columnOffsets)
2010-09-04 14:28:40 +00:00
if ( getColumnPositionById ( self . options . columns [ self . selectedColumn ] . id ) > - 1 ) { // fixme: save in var
toggleSelected ( self . options . columns [ self . selectedColumn ] . id ) ;
that . $titles [ getColumnPositionById ( self . options . columns [ self . selectedColumn ] . id ) ] . css ( {
width : ( self . options . columns [ self . selectedColumn ] . width - 25 ) + 'px'
} ) ;
}
}
2010-06-30 09:02:13 +00:00
function constructItem ( data ) {
2010-09-03 20:54:40 +00:00
var $item = $ ( '<div>' )
2010-09-07 15:58:15 +00:00
. addClass ( 'OxTarget' )
2010-06-25 15:55:25 +00:00
. css ( {
2010-09-04 14:28:40 +00:00
width : getItemWidth ( ) + 'px'
2010-06-30 09:02:13 +00:00
} ) ;
2010-06-28 11:19:04 +00:00
$ . each ( self . visibleColumns , function ( i , v ) {
2011-01-13 01:58:38 +00:00
var clickable = Ox . isBoolean ( v . clickable ) ? v . clickable : v . clickable ( data ) ,
editable = Ox . isBoolean ( v . editable ) ? v . editable : v . editable ( data ) ,
$cell = $ ( '<div>' )
2011-01-11 10:29:26 +00:00
. addClass (
'OxCell OxColumn' + Ox . toTitleCase ( v . id ) +
2011-01-13 01:58:38 +00:00
( clickable ? ' OxClickable' : '' ) +
( editable ? ' OxEditable' : '' )
2011-01-11 10:29:26 +00:00
)
2010-06-25 15:55:25 +00:00
. css ( {
2011-01-06 03:10:40 +00:00
width : ( self . columnWidths [ i ] - ( self . options . columnsVisible ? 9 : 8 ) ) + 'px' ,
borderRightWidth : ( self . options . columnsVisible ? 1 : 0 ) + 'px' ,
2010-06-25 15:55:25 +00:00
textAlign : v . align
} )
2011-01-13 11:54:31 +00:00
. html ( v . id in data ? formatValue ( data [ v . id ] , v . format ) : '' )
2010-07-03 08:23:39 +00:00
. appendTo ( $item ) ;
2010-06-25 15:55:25 +00:00
} ) ;
2011-01-13 11:54:31 +00:00
function formatValue ( value , format ) {
2011-02-01 09:56:16 +00:00
if ( value === null ) {
value = '' ;
2011-01-13 11:54:31 +00:00
} else if ( format ) {
value = Ox . isObject ( format ) ?
Ox [ 'format' + Ox . toTitleCase ( format . type ) ]
. apply ( this , $ . merge ( [ value ] , format . args ) ) :
format ( value ) ;
2011-02-01 09:56:16 +00:00
} else if ( Ox . isArray ( value ) ) {
value = value . join ( ', ' ) ;
2011-01-13 11:54:31 +00:00
}
return value ;
}
2011-01-30 03:54:06 +00:00
//Math.random() < 0.01 && Ox.print('item', data, $item);
2010-06-25 15:55:25 +00:00
return $item ;
}
2011-01-16 19:02:29 +00:00
function dragstartColumn ( id , e ) {
self . drag = {
startX : e . clientX ,
startPos : getColumnPositionById ( id )
}
$ . extend ( self . drag , {
stopPos : self . drag . startPos ,
offsets : $ . map ( self . visibleColumns , function ( v , i ) {
return self . columnOffsets [ i ] - self . columnOffsets [ self . drag . startPos ]
} )
} ) ;
2010-09-03 20:54:40 +00:00
$ ( '.OxColumn' + Ox . toTitleCase ( id ) ) . css ( {
2010-09-05 23:34:39 +00:00
opacity : 0.25
2010-07-05 07:09:34 +00:00
} ) ;
2011-01-16 19:02:29 +00:00
that . $titles [ self . drag . startPos ] . addClass ( 'OxDrag' ) . css ( { // fixme: why does the class not work?
2010-09-03 20:54:40 +00:00
cursor : 'move'
2010-07-03 11:31:25 +00:00
} ) ;
2011-01-16 19:02:29 +00:00
}
function dragColumn ( id , e ) {
var d = e . clientX - self . drag . startX ,
pos = self . drag . stopPos ;
$ . each ( self . drag . offsets , function ( i , v ) {
if ( d < 0 && d < v ) {
self . drag . stopPos = i ;
return false ;
} else if ( d > 0 && d > v ) {
self . drag . stopPos = i ;
2010-07-03 11:31:25 +00:00
}
} ) ;
2011-01-16 19:02:29 +00:00
if ( self . drag . stopPos != pos ) {
moveColumn ( id , self . drag . stopPos ) ;
}
2010-07-03 11:31:25 +00:00
}
2011-01-16 19:02:29 +00:00
function dragendColumn ( id , e ) {
var column = self . visibleColumns . splice ( self . drag . stopPos , 1 ) [ 0 ] ,
width = self . columnWidths . splice ( self . drag . stopPos , 1 ) [ 0 ] ;
self . visibleColumns . splice ( self . drag . stopPos , 0 , column ) ;
self . columnWidths . splice ( self . drag . stopPos , 0 , width ) ;
2010-09-05 22:26:30 +00:00
that . $head . $content . empty ( ) ;
constructHead ( ) ;
2010-09-03 20:54:40 +00:00
$ ( '.OxColumn' + Ox . toTitleCase ( id ) ) . css ( {
2010-07-05 07:09:34 +00:00
opacity : 1
} ) ;
2011-01-16 19:02:29 +00:00
that . $titles [ self . drag . stopPos ] . removeClass ( 'OxDrag' ) . css ( {
2010-09-03 20:54:40 +00:00
cursor : 'pointer'
2010-07-03 11:31:25 +00:00
} ) ;
2010-09-05 23:34:39 +00:00
that . $body . clearCache ( ) ;
2011-01-15 23:26:20 +00:00
triggerColumnChangeEvent ( ) ;
2010-07-03 11:31:25 +00:00
}
2011-01-16 19:02:29 +00:00
function dragstartResize ( id , e ) {
var pos = getColumnPositionById ( id ) ;
self . drag = {
startX : e . clientX ,
startWidth : self . columnWidths [ pos ]
} ;
}
function dragResize ( id , e ) {
var width = Ox . limit (
self . drag . startWidth - self . drag . startX + e . clientX ,
self . options . columnWidth [ 0 ] ,
self . options . columnWidth [ 1 ]
) ;
resizeColumn ( id , width ) ;
}
function dragendResize ( id , e ) {
var pos = getColumnPositionById ( id ) ;
that . triggerEvent ( 'columnresize' , {
id : id ,
width : self . columnWidths [ pos ]
} ) ;
}
2011-01-11 12:27:01 +00:00
function getCell ( id , key ) {
2011-01-15 06:09:22 +00:00
Ox . print ( 'getCell' , id , key )
2011-01-11 12:27:01 +00:00
var $item = getItem ( id ) ;
return $ ( $item . find ( '.OxCell.OxColumn' + Ox . toTitleCase ( key ) ) [ 0 ] ) ;
}
2010-06-29 21:24:07 +00:00
function getColumnIndexById ( id ) {
2011-01-11 06:17:45 +00:00
return Ox . getPositionById ( self . options . columns , id ) ;
2010-06-25 15:55:25 +00:00
}
2010-06-29 21:24:07 +00:00
function getColumnPositionById ( id ) {
2011-01-11 06:17:45 +00:00
return Ox . getPositionById ( self . visibleColumns , id ) ;
2010-06-29 21:24:07 +00:00
}
2011-01-11 12:27:01 +00:00
function getItem ( id ) {
2011-01-13 12:43:20 +00:00
//Ox.print('getItem', id)
2011-01-11 12:27:01 +00:00
var $item = null ;
$ . each ( that . find ( '.OxItem' ) , function ( i , v ) {
$v = $ ( v ) ;
if ( $v . data ( 'id' ) == id ) {
$item = $v ;
return false ;
}
2011-01-11 15:00:32 +00:00
} ) ;
2011-01-11 12:27:01 +00:00
return $item ;
}
2010-06-30 09:02:13 +00:00
function getItemWidth ( ) {
2011-01-13 21:17:48 +00:00
return Math . max (
Ox . sum ( self . columnWidths ) ,
that . $element . width ( ) -
2011-01-14 06:25:16 +00:00
( self . options . scrollbarVisible ? oxui . scrollbarSize : 0 )
2011-01-13 21:17:48 +00:00
) ;
2010-09-04 14:28:40 +00:00
//return Ox.sum(self.columnWidths)
2010-06-30 09:02:13 +00:00
}
2010-07-03 11:31:25 +00:00
function moveColumn ( id , pos ) {
2010-09-05 22:26:30 +00:00
// fixme: column head should be one element, not three
2011-01-13 12:43:20 +00:00
//Ox.print('moveColumn', id, pos)
2010-07-03 11:31:25 +00:00
var startPos = getColumnPositionById ( id ) ,
stopPos = pos ,
2010-09-03 20:54:40 +00:00
startClassName = '.OxColumn' + Ox . toTitleCase ( id ) ,
stopClassName = '.OxColumn' + Ox . toTitleCase ( self . visibleColumns [ stopPos ] . id ) ,
2010-09-05 22:26:30 +00:00
insert = startPos < stopPos ? 'insertAfter' : 'insertBefore'
2010-09-03 20:54:40 +00:00
$column = $ ( '.OxTitle' + startClassName ) ,
2010-07-03 11:31:25 +00:00
$order = $column . next ( ) ,
$resize = $order . next ( ) ;
2011-01-13 12:43:20 +00:00
//Ox.print(startClassName, insert, stopClassName)
2010-09-05 22:26:30 +00:00
$column . detach ( ) [ insert ] ( insert == 'insertAfter' ? $ ( '.OxTitle' + stopClassName ) . next ( ) . next ( ) : $ ( '.OxTitle' + stopClassName ) ) ;
2010-07-03 11:31:25 +00:00
$order . detach ( ) . insertAfter ( $column ) ;
$resize . detach ( ) . insertAfter ( $order ) ;
2010-09-03 20:54:40 +00:00
$ . each ( that . $body . find ( '.OxItem' ) , function ( i , v ) {
2010-07-03 11:31:25 +00:00
var $v = $ ( v ) ;
2010-09-05 22:26:30 +00:00
$v . children ( startClassName ) . detach ( ) [ insert ] ( $v . children ( stopClassName ) ) ;
2010-07-03 11:31:25 +00:00
} ) ;
2011-01-11 06:17:45 +00:00
var column = self . visibleColumns . splice ( startPos , 1 ) [ 0 ] ,
width = self . columnWidths . splice ( startPos , 1 ) [ 0 ] ;
2010-09-05 23:11:53 +00:00
self . visibleColumns . splice ( stopPos , 0 , column ) ;
self . columnWidths . splice ( stopPos , 0 , width ) ;
2010-06-28 09:16:36 +00:00
}
function removeColumn ( id ) {
2011-01-13 12:43:20 +00:00
//Ox.print('removeColumn', id);
2010-09-04 14:28:40 +00:00
var className = '.OxColumn' + Ox . toTitleCase ( id ) ,
index = getColumnIndexById ( id ) ,
2010-09-05 21:17:16 +00:00
itemWidth ,
2010-09-04 14:28:40 +00:00
position = getColumnPositionById ( id ) ,
$column = $ ( '.OxTitle' + className ) ,
$order = $column . next ( ) ,
$resize = $order . next ( ) ;
self . options . columns [ index ] . visible = false ;
self . visibleColumns . splice ( position , 1 ) ;
self . columnWidths . splice ( position , 1 ) ;
2010-09-05 21:17:16 +00:00
that . $head . $content . empty ( ) ;
constructHead ( ) ;
2010-09-04 14:28:40 +00:00
itemWidth = getItemWidth ( ) ;
$ . each ( that . $body . find ( '.OxItem' ) , function ( i , v ) {
var $v = $ ( v ) ;
$v . children ( className ) . remove ( ) ;
$v . css ( {
width : itemWidth + 'px'
} ) ;
} ) ;
that . $body . $content . css ( {
width : itemWidth + 'px'
} ) ;
that . $body . options ( {
keys : $ . map ( self . visibleColumns , function ( v , i ) {
return v . id ;
} )
} ) ;
2010-09-18 11:24:29 +00:00
//that.$body.clearCache();
2010-06-28 09:16:36 +00:00
}
2011-01-16 19:02:29 +00:00
function resetColumn ( id ) {
var width = self . defaultColumnWidths [ getColumnIndexById ( id ) ] ;
resizeColumn ( id , width ) ;
that . triggerEvent ( 'columnresize' , {
id : id ,
width : width
} ) ;
2010-06-29 22:19:41 +00:00
}
2010-06-29 21:24:07 +00:00
function resizeColumn ( id , width ) {
var i = getColumnIndexById ( id ) ,
pos = getColumnPositionById ( id ) ;
2011-01-13 21:17:48 +00:00
self . options . columns [ i ] . width = width ;
2010-06-25 15:55:25 +00:00
self . columnWidths [ pos ] = width ;
2011-01-13 21:17:48 +00:00
if ( self . options . columnsVisible ) {
that . $head . $content . css ( {
width : ( Ox . sum ( self . columnWidths ) + 2 ) + 'px'
} ) ;
that . $titles [ pos ] . css ( {
width : ( width - 9 - ( i == self . selectedColumn ? 16 : 0 ) ) + 'px'
} ) ;
}
that . find ( '.OxCell.OxColumn' + Ox . toTitleCase ( self . options . columns [ i ] . id ) ) . css ( {
width : ( width - ( self . options . columnsVisible ? 9 : 8 ) ) + 'px'
2010-06-25 15:55:25 +00:00
} ) ;
2010-09-18 10:48:20 +00:00
setWidth ( ) ;
2010-06-25 15:55:25 +00:00
}
2010-09-18 10:48:20 +00:00
function setWidth ( ) {
var width = getItemWidth ( ) ;
that . $body . $content . find ( '.OxItem' ) . css ( { // fixme: can we avoid this lookup?
width : width + 'px'
} ) ;
that . $body . $content . css ( {
width : width + 'px' // fixme: check if scrollbar visible, and listen to resize/toggle event
} ) ;
}
2010-06-29 21:24:07 +00:00
function toggleSelected ( id ) {
var pos = getColumnPositionById ( id ) ;
2010-07-07 12:36:12 +00:00
if ( pos > - 1 ) {
updateOrder ( id ) ;
2010-09-03 20:54:40 +00:00
pos > 0 && that . $titles [ pos ] . prev ( ) . children ( ) . eq ( 2 ) . toggleClass ( 'OxSelected' ) ;
that . $titles [ pos ] . toggleClass ( 'OxSelected' ) ;
that . $titles [ pos ] . next ( ) . toggleClass ( 'OxSelected' ) ;
that . $titles [ pos ] . next ( ) . next ( ) . children ( ) . eq ( 0 ) . toggleClass ( 'OxSelected' ) ;
2010-07-07 12:36:12 +00:00
that . $titles [ pos ] . css ( {
width : (
2010-09-03 20:54:40 +00:00
that . $titles [ pos ] . width ( ) + ( that . $titles [ pos ] . hasClass ( 'OxSelected' ) ? - 16 : 16 )
) + 'px'
2010-07-07 12:36:12 +00:00
} ) ;
}
2010-06-25 15:55:25 +00:00
}
2011-01-15 23:26:20 +00:00
function triggerColumnChangeEvent ( ) {
that . triggerEvent ( 'columnchange' , {
ids : $ . map ( self . visibleColumns , function ( v , i ) {
return v . id ;
} )
} ) ;
}
2010-06-29 21:24:07 +00:00
function updateOrder ( id ) {
var pos = getColumnPositionById ( id ) ;
2011-01-13 12:43:20 +00:00
//Ox.print(id, pos)
2010-06-29 17:39:21 +00:00
that . $titles [ pos ] . next ( ) . html ( oxui . symbols [
2011-01-24 04:08:19 +00:00
'triangle_' + ( self . options . sort [ 0 ] . operator == '+' ? 'up' : 'down' )
2010-06-29 17:39:21 +00:00
] ) ;
}
2010-06-30 18:47:10 +00:00
self . onChange = function ( key , value ) {
2011-02-25 10:23:33 +00:00
if ( key == 'items' ) {
2011-01-03 23:38:43 +00:00
//alert('request set!!')
that . $body . options ( key , value ) ;
2011-01-15 06:09:22 +00:00
} else if ( key == 'paste' ) {
that . $body . options ( key , value ) ;
2011-01-03 23:38:43 +00:00
} else if ( key == 'selected' ) {
2010-06-30 18:47:10 +00:00
that . $body . options ( key , value ) ;
}
} ;
2011-01-13 19:41:10 +00:00
// fixme: doesn't work, doesn't return that
that . closePreview = that . $body . closePreview ;
that . editCell = function ( id , key ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'editCell' , id , key )
2011-01-13 19:41:10 +00:00
var $item = getItem ( id ) ,
$cell = getCell ( id , key ) ,
$input ,
html = $cell . html ( ) ,
index = getColumnIndexById ( key ) ,
column = self . options . columns [ index ] ,
2011-02-25 10:23:33 +00:00
width = column . width - self . options . columnsVisible ;
2011-01-13 19:41:10 +00:00
$cell . empty ( )
. addClass ( 'OxEdit' )
. css ( {
width : width + 'px'
} ) ;
2011-02-11 13:54:54 +00:00
$input = new Ox . Input ( {
2011-02-25 10:23:33 +00:00
autovalidate : column . input ? column . input . autovalidate : null ,
2011-01-13 19:41:10 +00:00
style : 'square' ,
value : html ,
width : width
} )
. bind ( {
mousedown : function ( e ) {
// keep mousedown from reaching list
e . stopPropagation ( ) ;
}
} )
. bindEvent ( {
blur : submit ,
} )
2011-02-25 10:23:33 +00:00
. appendTo ( $cell ) ;
//.focusInput();
setTimeout ( $input . focusInput , 0 ) ; // fixme: strange
2011-01-13 19:41:10 +00:00
function submit ( ) {
var value = $input . value ( ) ;
//$input.loseFocus().remove();
// fixme: leaky, inputs remain in focus stack
$cell . removeClass ( 'OxEdit' )
. css ( {
width : ( width - 8 ) + 'px'
} )
. html ( value )
that . triggerEvent ( 'submit' , {
id : id ,
key : key ,
value : value
} ) ;
}
}
2011-01-13 22:10:42 +00:00
that . gainFocus = function ( ) {
that . $body . gainFocus ( ) ;
return that ;
} ;
that . loseFocus = function ( ) {
that . $body . loseFocus ( ) ;
return that ;
}
2011-01-15 06:09:22 +00:00
that . paste = function ( data ) {
that . $body . paste ( ) ;
return that ;
} ;
2011-01-13 19:41:10 +00:00
that . reloadList = function ( ) {
that . $body . reloadList ( ) ;
return that ;
2010-07-20 20:04:13 +00:00
} ;
2010-07-07 07:41:04 +00:00
that . resizeColumn = function ( id , width ) {
resizeColumn ( id , width ) ;
return that ;
}
2011-01-11 12:27:01 +00:00
that . size = function ( ) {
setWidth ( ) ;
that . $body . size ( ) ;
}
2010-09-08 16:35:34 +00:00
that . sortList = function ( key , operator ) {
2010-06-29 16:28:22 +00:00
var isSelected = key == self . options . sort [ 0 ] . key ;
2011-02-25 10:23:33 +00:00
self . options . sort = [ { key : key , operator : operator } ] ;
2011-01-11 12:27:01 +00:00
if ( self . options . columnsVisible ) {
if ( isSelected ) {
updateOrder ( self . options . columns [ self . selectedColumn ] . id ) ;
} else {
toggleSelected ( self . options . columns [ self . selectedColumn ] . id ) ;
self . selectedColumn = getColumnIndexById ( key ) ;
toggleSelected ( self . options . columns [ self . selectedColumn ] . id ) ;
}
2010-06-25 15:55:25 +00:00
}
2010-09-08 16:35:34 +00:00
that . $body . sortList ( self . options . sort [ 0 ] . key , self . options . sort [ 0 ] . operator ) ;
2010-07-07 07:41:04 +00:00
return that ;
2010-06-25 15:55:25 +00:00
} ;
2011-01-11 12:27:01 +00:00
that . value = function ( id , key , value ) {
2011-01-11 15:00:32 +00:00
// fixme: make this accept id, {k: v, ...}
var $item = getItem ( id ) ,
2011-01-15 06:09:22 +00:00
//$cell = getCell(id, key),
2011-01-13 01:58:38 +00:00
column = self . options . columns [ getColumnIndexById ( key ) ] ;
2011-01-15 06:09:22 +00:00
if ( arguments . length == 1 ) {
return that . $body . value ( id ) ;
} else if ( arguments . length == 2 ) {
2011-01-13 01:58:38 +00:00
return that . $body . value ( id , key ) ;
2011-01-11 12:27:01 +00:00
} else {
2011-01-13 01:58:38 +00:00
that . $body . value ( id , key , value ) ;
/ *
$cell && $cell . html ( column . format ? column . format ( value ) : value ) ;
if ( column . unique ) {
2011-01-11 15:00:32 +00:00
that . $body . setId ( $item . data ( 'id' ) , value ) ;
$item . data ( { id : value } ) ;
}
2011-01-13 01:58:38 +00:00
* /
2011-01-11 12:27:01 +00:00
return that ;
}
}
2010-06-25 15:55:25 +00:00
return that ;
} ;
2011-02-07 18:57:05 +00:00
Ox . TreeList = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
2011-02-26 04:22:49 +00:00
data : null ,
2011-02-07 18:57:05 +00:00
items : [ ] ,
max : - 1 ,
min : 0 ,
selected : [ ] ,
width : 256
} )
. options ( options || { } ) ;
2011-02-26 04:22:49 +00:00
if ( self . options . data ) {
2011-02-28 10:03:01 +00:00
self . options . items = [ ] ;
Ox . print ( 'd' , self . options . data , 'i' , self . options . items )
Ox . forEach ( self . options . data , function ( value , key ) {
self . options . items . push ( parseData ( key , value ) ) ;
} ) ;
Ox . print ( 'd' , self . options . data , 'i' , self . options . items )
2011-02-26 04:22:49 +00:00
}
2011-02-07 18:57:05 +00:00
that . $element = new Ox . List ( {
construct : constructItem ,
itemHeight : 16 ,
items : parseItems ( ) ,
itemWidth : self . options . width ,
max : self . options . max ,
min : self . options . min ,
unique : 'id' ,
} , $ . extend ( { } , self ) )
. addClass ( 'OxTextList OxTreeList' )
. css ( {
width : self . options . width + 'px'
} )
. click ( clickItem )
. bindEvent ( {
toggle : toggleItems
} ) ;
function clickItem ( e ) {
var $target = $ ( e . target ) ,
$item , id , item ;
if ( $target . hasClass ( 'OxToggle' ) ) {
$item = $target . parent ( ) . parent ( ) ;
id = $item . data ( 'id' ) ;
item = getItemById ( id ) ;
toggleItem ( item , ! item . expanded )
}
}
function constructItem ( data ) {
var $item = $ ( '<div>' ) ,
padding = ( data . level + ! data . items ) * 16 - 8 ;
if ( data . level || ! data . items ) {
$ ( '<div>' )
. addClass ( 'OxCell OxTarget' )
. css ( {
width : padding + 'px' ,
} )
. appendTo ( $item ) ;
}
if ( data . items ) {
$ ( '<div>' )
. addClass ( 'OxCell' )
. css ( {
width : '8px' ,
} )
. append (
// fixme: need Ox.Icon()
$ ( '<img>' )
. addClass ( 'OxToggle' )
. attr ( {
src : oxui . path + '/png/ox.ui.' + Ox . theme ( ) + '/symbol' +
( data . expanded ? 'Collapse' : 'Expand' ) + '.png'
} )
)
. appendTo ( $item ) ;
}
$ ( '<div>' )
. addClass ( 'OxCell OxTarget' )
. css ( {
2011-02-07 21:44:21 +00:00
width : ( self . options . width - padding - 32 + ! data . items * 16 ) + 'px'
2011-02-07 18:57:05 +00:00
} )
. html ( data . title )
. appendTo ( $item ) ;
return $item ;
}
function getItemById ( id , items , level ) {
var items = items || self . options . items ,
level = level || 0 ,
ret = null ;
$ . each ( items , function ( i , item ) {
if ( item . id == id ) {
ret = $ . extend ( item , {
level : level
} ) ;
return false ;
}
if ( item . items ) {
ret = getItemById ( id , item . items , level + 1 ) ;
if ( ret ) {
return false ;
}
}
} ) ;
return ret ;
}
2011-02-26 04:22:49 +00:00
function parseData ( key , value ) {
2011-02-28 10:03:01 +00:00
Ox . print ( 'parseData' , key , value )
2011-02-26 04:22:49 +00:00
var ret = {
2011-02-28 10:03:01 +00:00
id : key ,
title : key . toString ( ) . split ( '.' ) . pop ( )
} ,
type = Ox . typeOf ( value ) ;
if ( type == 'array' || type == 'object' ) {
ret . title += ': ' + Ox . toTitleCase ( Ox . typeOf ( value ) ) ;
ret . items = Ox . map ( Ox . sort ( Ox . keys ( value ) ) , function ( k ) {
return parseData ( key + '.' + k , value [ k ] ) ;
2011-02-26 04:22:49 +00:00
} ) ;
} else {
2011-02-28 10:03:01 +00:00
ret . title += ': ' + (
type == 'function' ?
value . toString ( ) . split ( '{' ) [ 0 ] :
JSON . stringify ( value )
)
2011-02-26 04:22:49 +00:00
}
return ret ;
}
2011-02-07 18:57:05 +00:00
function parseItems ( items , level ) {
var items = items || self . options . items ,
level = level || 0 ,
ret = [ ] ;
items . forEach ( function ( item , i ) {
var item _ = $ . extend ( {
level : level
} , item , item . items ? {
items : ! ! item . expanded ?
parseItems ( item . items , level + 1 ) : [ ]
} : { } ) ;
ret . push ( item _ ) ;
item . items && $ . merge ( ret , item _ . items ) ;
} ) ;
return ret ;
}
function toggleItem ( item , expanded ) {
var $img , $item , pos ;
item . expanded = expanded ;
$ . each ( that . $element . find ( '.OxItem' ) , function ( i , v ) {
var $item = $ ( v ) ;
if ( $item . data ( 'id' ) == item . id ) {
$img = $item . find ( 'img' ) ;
pos = $item . data ( 'position' ) ;
return false ;
}
} )
$img . attr ( {
src : oxui . path + '/png/ox.ui.' + Ox . theme ( ) + '/symbol' +
( item . expanded ? 'Collapse' : 'Expand' ) + '.png'
} ) ;
item . expanded ?
that . $element . addItems ( pos + 1 , parseItems ( item . items , item . level + 1 ) ) :
that . $element . removeItems ( pos + 1 , parseItems ( item . items , item . level + 1 ) . length ) ;
}
function toggleItems ( event , data ) {
data . ids . forEach ( function ( id , i ) {
var item = getItemById ( id ) ;
if ( item . items && data . expanded != ! ! item . expanded ) {
toggleItem ( item , data . expanded ) ;
}
} ) ;
}
return that ;
} ;
2010-07-24 01:32:08 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Maps
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2011-02-25 10:23:33 +00:00
Ox . ListMap = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
addPlace : null ,
height : 256 ,
labels : false ,
places : null ,
selected : [ ] ,
width : 256
} )
. options ( options || { } )
. css ( {
width : self . options . width + 'px' ,
height : self . options . height + 'px'
} ) ;
self . columns = [
{
addable : false , // fixme: implement
id : 'id' ,
unique : true ,
visible : false
} ,
{
editable : true ,
id : 'name' ,
operator : '+' ,
removable : false ,
title : 'Name' ,
visible : true ,
width : 144
} ,
{
editable : true ,
id : 'geoname' ,
removable : false ,
operator : '+' ,
title : 'Geoname' ,
visible : true ,
width : 192
} ,
{
format : function ( value ) {
return $ ( '<img>' )
. attr ( {
// fixme: not the right place to do these
src : '/static/oxjs/build/svg/' + ( value || 'NTHH' ) + '.' + ( value == 'RE' ? 'png' : 'svg' )
} )
. load ( function ( ) {
$ ( this ) . css ( {
width : '21px' ,
height : '14px' ,
padding : '1px 0 0 1px'
} )
} ) ;
} ,
id : 'countryCode' ,
operator : '+' ,
title : 'Flag' ,
visible : true ,
width : 48
} ,
2011-02-26 04:22:49 +00:00
{
align : 'right' ,
format : { type : 'area' , args : [ 0 ] } ,
id : 'size' ,
operator : '-' ,
title : 'Size' ,
visible : true ,
width : 128
} ,
2011-02-25 10:23:33 +00:00
{
align : 'right' ,
format : toFixed ,
id : 'lat' ,
operator : '+' ,
title : 'Latitude' ,
visible : true ,
width : 96
} ,
{
align : 'right' ,
format : toFixed ,
id : 'lng' ,
operator : '+' ,
title : 'Longitude' ,
visible : true ,
width : 96
} ,
{
align : 'right' ,
format : toFixed ,
id : 'south' ,
operator : '+' ,
title : 'South' ,
2011-02-26 04:22:49 +00:00
visible : false ,
2011-02-25 10:23:33 +00:00
width : 96
} ,
{
align : 'right' ,
id : 'west' ,
operator : '+' ,
title : 'West' ,
2011-02-26 04:22:49 +00:00
visible : false ,
2011-02-25 10:23:33 +00:00
width : 96
} ,
{
align : 'right' ,
format : toFixed ,
id : 'north' ,
operator : '+' ,
title : 'North' ,
2011-02-26 04:22:49 +00:00
visible : false ,
2011-02-25 10:23:33 +00:00
width : 96
} ,
{
align : 'right' ,
format : toFixed ,
id : 'east' ,
operator : '+' ,
title : 'East' ,
2011-02-26 04:22:49 +00:00
visible : false ,
2011-02-25 10:23:33 +00:00
width : 96
} ,
{
id : 'user' ,
operator : '+' ,
title : 'User' ,
visible : false ,
width : 96
} ,
{
format : 'date' ,
id : 'created' ,
2011-02-26 04:22:49 +00:00
operator : '-' ,
2011-02-25 10:23:33 +00:00
title : 'Date Created' ,
visible : false ,
width : 96 ,
} ,
{
format : 'date' ,
id : 'modified' ,
2011-02-26 04:22:49 +00:00
operator : '-' ,
2011-02-25 10:23:33 +00:00
title : 'Date Modified' ,
visible : false ,
width : 96 ,
2011-02-26 04:22:49 +00:00
} ,
{
align : 'right' ,
id : 'matches' ,
operator : '-' ,
title : 'Matches' ,
visible : false ,
width : 96 ,
2011-02-25 10:23:33 +00:00
}
] ;
self . $toolbar = new Ox . Bar ( {
size : 24
} ) ;
self . $findElement = new Ox . FormElementGroup ( {
elements : [
self . $findSelect = new Ox . Select ( {
items : [
{ id : 'all' , title : 'Find: All' } ,
{ id : 'name' , title : 'Find: Name' } ,
{ id : 'geoname' , title : 'Find: Geoname' } ,
{ id : 'country' , title : 'Find: Country' }
] ,
overlap : 'right' ,
width : 128
} ) ,
self . $findInput = new Ox . Input ( {
clear : true ,
width : 192
} )
]
} )
. css ( { float : 'right' , margin : '4px' } )
. appendTo ( self . $toolbar )
self . $list = new Ox . TextList ( {
columns : self . columns ,
columnsRemovable : true ,
columnsVisible : true ,
items : self . options . places ,
pageLength : 100 ,
scrollbarVisible : true ,
sort : [
{ key : 'name' , operator : '+' }
]
} )
. bindEvent ( {
2011-02-26 04:22:49 +00:00
'delete' : removeItem ,
2011-02-25 10:23:33 +00:00
init : initList ,
load : function ( ) {
that . triggerEvent ( 'loadlist' ) ;
} ,
open : openItem ,
select : selectItem
} ) ;
self . $statusbar = new Ox . Bar ( {
size : 24
} ) ;
self . $status = new Ox . Element ( )
. css ( { paddingTop : '4px' , margin : 'auto' , textAlign : 'center' } )
. appendTo ( self . $statusbar ) ;
self . mapResize = [
Math . round ( self . options . width * 0.25 ) ,
Math . round ( self . options . width * 0.5 ) ,
Math . round ( self . options . width * 0.75 )
] ;
if ( Ox . isArray ( self . options . places ) ) {
init ( self . options . places )
} else {
self . options . places ( { } , function ( result ) {
Ox . print ( '$$$$' , result . data . items )
self . options . places ( {
keys : self . columns . map ( function ( column ) {
return column . id
} ) ,
range : [ 0 , result . data . items ]
} , function ( result ) {
Ox . print ( 'DATA' , result )
init ( result . data . items ) ;
} ) ;
} ) ;
}
function init ( places ) {
Ox . print ( 'PLACES' , places )
self . $map = new Ox . Map ( {
clickable : true ,
height : self . options . height ,
// fixme: place can still be string, and maybe shouldn't be array at all
places : places . map ( function ( place ) {
return Ox . extend ( { } , place , {
name : place . name . length == 0 ? '' : place . name [ 0 ]
} ) ;
} ) ,
statusbar : true ,
toolbar : true ,
width : self . mapResize [ 1 ] ,
zoombar : true
} )
. bindEvent ( {
addplace : function ( event , data ) {
that . triggerEvent ( 'addplace' , data ) ;
} ,
resize : function ( ) {
self . $map . resizeMap ( ) ;
} ,
select : selectPlace
} ) ;
that . $element . replaceWith (
that . $element = new Ox . SplitPanel ( {
elements : [
{
element : new Ox . SplitPanel ( {
elements : [
{
element : self . $toolbar ,
size : 24
} ,
{
element : self . $list
} ,
{
element : self . $statusbar ,
size : 24
}
] ,
orientation : 'vertical'
} )
} ,
{
element : self . $map ,
resizable : true ,
resize : self . mapResize ,
size : self . mapResize [ 1 ]
}
] ,
orientation : 'horizontal'
} ) . $element
) ;
}
function initList ( event , data ) {
self . $status . html ( data . items + ' place' + ( data . items == 1 ? '' : 's' ) )
}
function openItem ( event , data ) {
selectItem ( event , data ) ;
self . $map . zoomToPlace ( data . ids [ 0 ] ) ;
}
2011-02-26 04:22:49 +00:00
function removeItem ( event , data ) {
var id = data . ids [ 0 ] ;
that . triggerEvent ( 'removeplace' , { id : id } ) ;
self . $map . removePlace ( id ) ;
}
2011-02-25 10:23:33 +00:00
function selectItem ( event , data ) {
Ox . print ( 'selectItem' , data . ids [ 0 ] )
self . $map . options ( { selected : data . ids . length ? data . ids [ 0 ] : '' } ) ;
}
function selectPlace ( event , data ) {
Ox . print ( 'selectPlace' , data . id )
data . id [ 0 ] != '_' && self . $list . options ( {
selected : data . id ? [ data . id ] : [ ]
} ) ;
}
function toFixed ( val ) {
return val . toFixed ( 8 ) ;
}
self . onChange = function ( key , value ) {
if ( key == 'selected' ) {
self . $list . options ( { selected : value } ) ;
}
}
that . focusList = function ( ) {
self . $list . gainFocus ( ) ;
return that ;
}
that . reloadList = function ( ) {
self . $list . reloadList ( ) ;
return that ;
}
that . resizeMap = function ( ) {
Ox . print ( 'Ox.ListMap.resizeMap()' )
self . $map . resizeMap ( ) ;
return that ;
} ;
return that ;
} ;
2010-07-24 01:32:08 +00:00
Ox . Map = function ( options , self ) {
var self = self || { }
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-07-24 01:32:08 +00:00
. defaults ( {
2010-11-28 15:06:47 +00:00
clickable : false ,
2011-02-22 18:52:26 +00:00
height : 256 ,
labels : false ,
2010-07-24 01:32:08 +00:00
places : [ ] ,
2011-02-25 10:23:33 +00:00
selected : null ,
2011-02-22 18:52:26 +00:00
statusbar : false ,
toolbar : false ,
width : 256 ,
zoombar : false
2010-07-24 01:32:08 +00:00
} )
2010-11-28 15:06:47 +00:00
. options ( options || { } )
2011-02-22 18:52:26 +00:00
. css ( {
width : self . options . width + 'px' ,
height : self . options . height + 'px'
} )
2010-12-26 20:16:35 +00:00
. bindEvent ( {
2010-11-28 15:06:47 +00:00
key _up : function ( ) {
pan ( 0 , - 1 ) ;
} ,
key _down : function ( ) {
pan ( 0 , 1 ) ;
} ,
key _left : function ( ) {
pan ( - 1 , 0 ) ;
} ,
key _right : function ( ) {
pan ( 1 , 0 ) ;
} ,
key _0 : reset ,
key _minus : function ( ) {
zoom ( - 1 ) ;
} ,
key _equal : function ( ) {
zoom ( 1 ) ;
} ,
key _enter : focusOnPlace ,
key _shift _enter : zoomToPlace ,
2011-02-25 10:23:33 +00:00
key _escape : function ( ) {
selectPlace ( '' ) ;
}
2010-11-28 15:06:47 +00:00
} ) ;
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
self . resultPlace = null ;
2011-02-22 18:52:26 +00:00
if ( self . options . toolbar ) {
self . $toolbar = new Ox . Bar ( {
size : 24
} )
. appendTo ( that ) ;
self . $labelsButton = new Ox . Button ( {
title : 'Show Labels' ,
width : 80
} )
. css ( { float : 'left' , margin : '4px' } )
. bindEvent ( {
click : toggleLabels
} )
. appendTo ( self . $toolbar )
self . $findInput = new Ox . Input ( {
clear : true ,
placeholder : 'Find on Map' ,
width : 192
} )
. css ( { float : 'right' , margin : '4px' } )
. bindEvent ( {
submit : submitFind
} )
. appendTo ( self . $toolbar )
}
2011-02-25 10:23:33 +00:00
2011-02-22 18:52:26 +00:00
self . $map = new Ox . Element ( 'div' )
. css ( {
width : self . options . width + 'px' ,
2011-02-25 10:23:33 +00:00
height : getMapHeight ( )
2011-02-22 18:52:26 +00:00
} )
. appendTo ( that ) ;
2011-02-25 10:23:33 +00:00
2011-02-22 18:52:26 +00:00
if ( self . options . zoombar ) {
self . $zoombar = new Ox . Bar ( {
size : 16
} )
. appendTo ( that ) ;
self . $zoomInput = new Ox . Range ( {
arrows : true ,
max : 22 ,
size : self . options . width ,
thumbSize : 32 ,
thumbValue : true
} )
. bindEvent ( {
change : changeZoom
} )
. appendTo ( self . $zoombar )
}
2011-02-25 10:23:33 +00:00
2011-02-22 18:52:26 +00:00
if ( self . options . statusbar ) {
self . $statusbar = new Ox . Bar ( {
2011-02-25 10:23:33 +00:00
size : 24
2011-02-22 18:52:26 +00:00
} )
2011-02-25 10:23:33 +00:00
. css ( { padding : '2px' } )
2011-02-22 18:52:26 +00:00
. appendTo ( that ) ;
2011-02-25 10:23:33 +00:00
self . $placeNameInput = new Ox . Input ( {
placeholder : 'Name' ,
width : Math . floor ( ( self . options . width - 96 ) / 2 )
} )
. css ( { float : 'left' , margin : '2px' } )
. appendTo ( self . $statusbar ) ;
self . $placeGeonameInput = new Ox . Input ( {
placeholder : 'Geoname' ,
width : Math . ceil ( ( self . options . width - 96 ) / 2 )
} )
. css ( { float : 'left' , margin : '2px' } )
. appendTo ( self . $statusbar )
self . $placeButton = new Ox . Button ( {
title : 'New Place' ,
width : 80
} )
. css ( { float : 'left' , margin : '2px' } )
. bindEvent ( {
click : clickPlaceButton
} )
2011-02-22 18:52:26 +00:00
. appendTo ( self . $statusbar ) ;
}
2010-12-22 17:58:39 +00:00
if ( Ox . isUndefined ( window . google ) ) {
2011-02-22 18:52:26 +00:00
googleCallback = function ( ) {
Ox . print ( 'googleCallback' )
delete googleCallback ;
initMap ( ) ;
} ;
$ . getScript ( 'http://maps.google.com/maps/api/js?callback=googleCallback&sensor=false' ) ;
2010-12-22 17:58:39 +00:00
} else {
initMap ( ) ;
}
2011-02-25 10:23:33 +00:00
function addNewPlace ( ) {
var bounds = self . map . getBounds ( ) ,
center = self . map . getCenter ( ) ,
southwest = new google . maps . LatLngBounds (
bounds . getSouthWest ( ) , center
) . getCenter ( ) ,
northeast = new google . maps . LatLngBounds (
center , bounds . getNorthEast ( )
) . getCenter ( ) ,
place = new Place ( {
countryCode : '' ,
geoname : '' ,
id : '_' + Ox . uid ( ) , // fixme: stupid
name : '' ,
south : southwest . lat ( ) ,
west : southwest . lng ( ) ,
north : northeast . lat ( ) ,
east : northeast . lng ( )
} ) ;
addPlace ( place ) ;
selectPlace ( place . name ) ;
}
2011-02-22 18:52:26 +00:00
2011-02-25 10:23:33 +00:00
function addPlace ( place ) {
Ox . print ( 'addPlace' , place )
Ox . print ( 'self.resultPlace' , self . resultPlace )
self . resultPlace && self . resultPlace . remove ( ) ;
if ( place . id [ 0 ] == '_' ) {
self . resultPlace = place ;
}
place . add ( ) ;
2010-12-22 17:58:39 +00:00
}
2010-12-06 17:42:05 +00:00
2010-07-24 19:27:39 +00:00
function canContain ( outerBounds , innerBounds ) {
var outerSpan = outerBounds . toSpan ( ) ,
innerSpan = innerBounds . toSpan ( ) ;
return outerSpan . lat ( ) > innerSpan . lat ( ) &&
outerSpan . lng ( ) > innerSpan . lng ( ) ;
}
2011-02-22 18:52:26 +00:00
function changeZoom ( event , data ) {
self . map . setZoom ( data . value ) ;
}
2011-02-25 10:23:33 +00:00
function clickMap ( event ) {
Ox . print ( 'Ox.Map clickMap' )
2010-11-28 15:06:47 +00:00
that . gainFocus ( ) ;
if ( self . options . clickable ) {
2011-02-25 10:23:33 +00:00
getPlaceByLatLng ( event . latLng , self . map . getBounds ( ) , function ( place ) {
if ( place ) {
addPlace ( place ) ;
selectPlace ( place . id ) ;
2010-11-28 15:06:47 +00:00
}
} ) ;
}
2010-07-24 19:27:39 +00:00
}
2011-02-25 10:23:33 +00:00
function clickPlaceButton ( ) {
if ( self . $placeButton . options ( 'title' ) == 'New Place' ) {
addNewPlace ( ) ;
} else {
var place = getPlaceById ( self . selected ) ,
data = {
place : { }
} ;
data . place . name = self . $placeNameInput . value ( ) ;
data . place . geoname = self . $placeGeonameInput . value ( ) ;
data . place . countryCode = Ox . getCountryCode ( data . place . geoname ) ;
[
'lat' , 'lng' , 'south' , 'west' , 'north' , 'east' , 'size'
] . forEach ( function ( key ) {
data . place [ key ] = place [ key ] ;
} ) ;
that . triggerEvent ( 'addplace' , data )
}
2011-02-22 18:52:26 +00:00
}
2010-11-28 15:06:47 +00:00
function focusOnPlace ( ) {
2011-02-25 10:23:33 +00:00
if ( self . options . selected > - 1 ) {
self . map . panTo ( self . options . places [ self . options . selected ] . center ) ;
2010-11-28 15:06:47 +00:00
}
}
2011-02-25 10:23:33 +00:00
function getPlaceById ( id ) {
var place = Ox . getObjectById ( self . places , id ) ;
if ( ! place && self . resultPlace && self . resultPlace . id == id ) {
place = self . resultPlace ;
}
Ox . print ( 'getPlaceById' , id , place )
return place ;
}
function getPlaceByLatLng ( latlng , bounds , callback ) {
2011-02-28 10:03:01 +00:00
Ox . print ( 'll b' , latlng , bounds )
2010-07-24 19:27:39 +00:00
var callback = arguments . length == 3 ? callback : bounds ,
bounds = arguments . length == 3 ? bounds : null ;
2010-07-24 01:32:08 +00:00
self . geocoder . geocode ( {
2010-07-24 19:27:39 +00:00
latLng : latlng
2010-07-24 01:32:08 +00:00
} , function ( results , status ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'results' , results )
2010-07-24 19:27:39 +00:00
var length = results . length ;
2010-07-24 01:32:08 +00:00
if ( status == google . maps . GeocoderStatus . OK ) {
if ( status != google . maps . GeocoderStatus . ZERO _RESULTS ) {
2010-07-24 19:27:39 +00:00
if ( bounds ) {
$ . each ( results . reverse ( ) , function ( i , result ) {
if (
i == length - 1 ||
canContain ( bounds , result . geometry . bounds || result . geometry . viewport )
) {
2011-02-25 10:23:33 +00:00
callback ( Place ( results [ i ] ) ) ;
2010-07-24 19:27:39 +00:00
return false ;
}
} ) ;
} else {
2011-02-25 10:23:33 +00:00
callback ( Place ( results [ 0 ] ) ) ;
2010-07-24 19:27:39 +00:00
}
2010-07-24 01:32:08 +00:00
} else {
callback ( null ) ;
}
} else {
2011-01-13 12:43:20 +00:00
//Ox.print('geocode failed:', status);
2010-07-24 01:32:08 +00:00
callback ( null ) ;
}
} ) ;
}
2011-02-25 10:23:33 +00:00
function getPlaceByName ( name , callback ) {
2010-07-24 19:27:39 +00:00
self . geocoder . geocode ( {
address : name
} , function ( results , status ) {
2010-07-24 01:32:08 +00:00
if ( status == google . maps . GeocoderStatus . OK ) {
if ( status != google . maps . GeocoderStatus . ZERO _RESULTS ) {
2011-02-26 04:22:49 +00:00
Ox . print ( 'GEOCODER RESULT' , results [ 0 ] )
2011-02-25 10:23:33 +00:00
callback ( Place ( results [ 0 ] ) ) ;
2010-07-24 19:27:39 +00:00
} else {
callback ( null ) ;
2010-07-24 01:32:08 +00:00
}
2010-07-24 19:27:39 +00:00
} else {
2011-02-22 18:52:26 +00:00
Ox . print ( 'geocode failed:' , status ) ;
2010-07-24 19:27:39 +00:00
callback ( null ) ;
2010-07-24 01:32:08 +00:00
}
} ) ;
}
2011-02-25 10:23:33 +00:00
function getMapHeight ( ) {
return (
self . options . height -
self . options . statusbar * 24 -
self . options . toolbar * 24 -
self . options . zoombar * 16
) + 'px' ;
}
2011-02-22 18:52:26 +00:00
function getMapType ( ) {
return self . options . labels ? 'HYBRID' : 'SATELLITE'
}
2010-11-28 15:06:47 +00:00
function getPositionByName ( name ) {
var position = - 1 ;
$ . each ( self . options . places , function ( i , place ) {
if ( place . name == name ) {
position = i ;
return false ;
}
} ) ;
return position ;
}
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
function initMap ( ) {
self . geocoder = new google . maps . Geocoder ( ) ;
self . places = [ ] ;
self . options . places . forEach ( function ( place , i ) {
self . places [ i ] = Place ( Ox . clone ( place ) ) ;
self . bounds = i == 0 ?
Ox . clone ( self . places [ i ] . bounds ) :
self . bounds . union ( self . places [ i ] . bounds ) ;
} ) ;
self . center = self . bounds ? self . bounds . getCenter ( ) : new google . maps . LatLng ( 0 , 0 ) ;
self . zoom = 1 ; // fixme: should depend on height
self . map = new google . maps . Map ( self . $map . $element [ 0 ] , {
center : self . center ,
disableDefaultUI : true ,
mapTypeId : google . maps . MapTypeId [ getMapType ( ) ] ,
zoom : self . zoom
} ) ;
if ( self . bounds ) {
self . map . fitBounds ( self . bounds ) ;
self . zoom = self . map . getZoom ( ) ;
}
self . places . forEach ( function ( place ) {
place . add ( self . map ) ;
} ) ;
google . maps . event . addListener ( self . map , 'click' , clickMap ) ;
google . maps . event . addListener ( self . map , 'zoom_changed' , zoomChanged ) ;
google . maps . event . trigger ( self . map , 'resize' ) ;
that . gainFocus ( ) ;
that . triggerEvent ( 'load' ) ;
}
2010-11-28 15:06:47 +00:00
function pan ( x , y ) {
self . map . panBy ( x * 256 , y * 256 ) ;
} ;
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
function removePlace ( id ) {
2010-07-24 19:27:39 +00:00
}
2010-11-28 15:06:47 +00:00
function reset ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print(self.map.getZoom(), self.zoom);
2010-11-28 15:06:47 +00:00
self . map . getZoom ( ) == self . zoom ?
2011-02-25 10:23:33 +00:00
self . map . panTo ( self . center ) :
self . map . fitBounds ( self . bounds ) ;
2010-11-28 15:06:47 +00:00
}
2011-02-25 10:23:33 +00:00
function selectPlace ( id ) {
Ox . print ( 'Ox.Map selectPlace()' , id , self . selected )
var place ;
if ( id != self . selected ) {
place = getPlaceById ( self . selected ) ;
place && place . deselect ( ) ;
place = getPlaceById ( id ) ;
place && place . select ( ) ;
}
self . options . selected = id ;
self . selected = id ;
setStatus ( ) ;
2011-02-26 04:22:49 +00:00
that . triggerEvent ( 'select' , place ) ;
/ *
2011-02-25 10:23:33 +00:00
that . triggerEvent ( 'select' , {
id : self . options . selected
} ) ;
2011-02-26 04:22:49 +00:00
* /
2011-02-25 10:23:33 +00:00
} ;
function setStatus ( ) {
Ox . print ( 'setStatus()' , self . options . selected )
var place ;
if ( self . options . statusbar ) {
if ( self . options . selected ) {
place = getPlaceById ( self . options . selected ) ;
}
self . $placeNameInput . options ( {
value : self . options . selected ? place . name : ''
} ) ;
self . $placeGeonameInput . options ( {
value : self . options . selected ? place . geoname : ''
} ) ;
self . $placeButton . options ( {
title : self . options . selected ? 'Add Place' : 'New Place'
} ) ;
}
}
function submitFind ( event , data ) {
that . findPlace ( data . value , function ( place ) {
setStatus ( place ) ;
} ) ;
}
2011-02-22 18:52:26 +00:00
function toggleLabels ( ) {
self . options . labels = ! self . options . labels
self . map . setMapTypeId ( google . maps . MapTypeId [ getMapType ( ) ] ) ;
self . $labelsButton . options ( {
title : self . $labelsButton . options ( 'title' ) == 'Show Labels' ?
'Hide Labels' : 'Show Labels'
2010-09-03 08:47:40 +00:00
} ) ;
2010-07-24 01:32:08 +00:00
}
2010-11-28 15:06:47 +00:00
function zoom ( z ) {
self . map . setZoom ( self . map . getZoom ( ) + z ) ;
}
2011-02-22 18:52:26 +00:00
function zoomChanged ( ) {
var zoom = self . map . getZoom ( ) ;
self . options . zoombar && self . $zoomInput . options ( { value : zoom } ) ;
that . triggerEvent ( 'zoom' , {
value : zoom
} ) ;
}
2010-11-28 15:06:47 +00:00
function zoomToPlace ( ) {
2011-02-25 10:23:33 +00:00
if ( self . options . selected > - 1 ) {
self . map . fitBounds ( self . options . places [ self . options . selected ] . bounds ) ;
2010-11-28 15:06:47 +00:00
}
}
function Marker ( place ) {
2010-07-24 01:32:08 +00:00
var listeners = { } ,
marker = new google . maps . Marker ( {
2010-11-28 15:06:47 +00:00
position : place . center ,
title : place . name
2010-07-24 19:27:39 +00:00
} ) ,
selected = false ;
2011-02-25 10:23:33 +00:00
setOptions ( ) ;
function click ( event ) {
Ox . print ( 'click metaKey' , event . metaKey , selected )
if ( event . metaKey == selected ) {
selected = ! event . metaKey ;
selectPlace ( selected ? place . id : '' ) ;
}
2010-07-24 19:27:39 +00:00
}
function dblclick ( ) {
2011-02-25 10:23:33 +00:00
Ox . print ( '####' , place . bounds )
2010-11-28 15:06:47 +00:00
self . map . fitBounds ( place . bounds ) ;
2010-07-24 01:32:08 +00:00
}
2011-02-25 10:23:33 +00:00
function setOptions ( ) {
marker . setOptions ( {
icon : oxui . path + 'png/ox.ui/marker' +
( place . id [ 0 ] == '_' ? 'Result' : '' ) +
( selected ? 'Selected' : '' ) + '.png'
} ) ;
2010-07-24 01:32:08 +00:00
}
return {
add : function ( ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'Marker.add()' )
marker . setMap ( self . map ) ;
2010-07-24 19:27:39 +00:00
listeners = {
2010-09-03 20:54:40 +00:00
click : google . maps . event . addListener ( marker , 'click' , click ) ,
dblclick : google . maps . event . addListener ( marker , 'dblclick' , dblclick ) ,
2010-07-24 19:27:39 +00:00
} ;
} ,
deselect : function ( ) {
2011-02-25 10:23:33 +00:00
selected = false ;
setOptions ( ) ;
2010-07-24 01:32:08 +00:00
} ,
remove : function ( ) {
marker . setMap ( null ) ;
2010-07-24 19:27:39 +00:00
$ . each ( listeners , function ( i , listener ) {
google . maps . event . removeListener ( listener ) ;
} ) ;
} ,
select : function ( ) {
2011-02-25 10:23:33 +00:00
selected = true ;
setOptions ( ) ;
2010-07-24 01:32:08 +00:00
}
} ;
2011-02-25 10:23:33 +00:00
} ;
2010-07-24 01:32:08 +00:00
2011-02-25 10:23:33 +00:00
function Place ( place ) {
var marker , polygon , selected ;
if ( 'name' in place ) {
// place object
//Ox.extend(place, place);
place . bounds = new google . maps . LatLngBounds (
new google . maps . LatLng ( place . south , place . west ) ,
new google . maps . LatLng ( place . north , place . east )
) ;
} else {
// geodata object
if ( ! place . geometry . bounds ) {
Ox . print ( 'NO BOUNDS, ONLY VIEWPORT' )
}
Ox . extend ( place , {
bounds : place . geometry . bounds || place . geometry . viewport ,
countryCode : Ox . getCountryCode ( place . formatted _address ) ,
geoname : place . formatted _address ,
id : '_' + Ox . uid ( ) ,
name : place . formatted _address . split ( ', ' ) [ 0 ]
} ) ;
Ox . extend ( place , {
south : Ox . round ( place . bounds . getSouthWest ( ) . lat ( ) , 8 ) ,
west : Ox . round ( place . bounds . getSouthWest ( ) . lng ( ) , 8 ) ,
north : Ox . round ( place . bounds . getNorthEast ( ) . lat ( ) , 8 ) ,
east : Ox . round ( place . bounds . getNorthEast ( ) . lng ( ) , 8 )
} ) ;
}
place . center = place . bounds . getCenter ( ) ;
Ox . extend ( place , {
lat : Ox . round ( place . center . lat ( ) , 8 ) ,
lng : Ox . round ( place . center . lng ( ) , 8 ) ,
size : Ox . getArea (
{ lat : place . south , lng : place . west } ,
{ lat : place . north , lng : place . east }
)
} ) ;
Ox . print ( 'PLACE' , place )
marker = Marker ( place ) ;
polygon = Polygon ( place ) ;
selected = false ;
return Ox . extend ( place , {
add : function ( ) {
Ox . print ( 'Place.add()' , self . resultPlace )
marker . add ( ) ;
} ,
deselect : function ( ) {
selected = false ;
marker . deselect ( ) ;
polygon . remove ( ) ;
} ,
remove : function ( ) {
Ox . print ( 'REMOVE!!!' , selected )
if ( place . id [ 0 ] == '_' ) {
self . resultPlace = null ;
}
selected && polygon . remove ( ) ;
marker . remove ( ) ;
} ,
select : function ( ) {
Ox . print ( 'Place.select()' )
selected = true ;
marker . select ( ) ;
polygon . add ( ) ;
}
} ) ;
} ;
function Polygon ( place ) {
2010-07-24 01:32:08 +00:00
var listeners = { } ,
polygon = new google . maps . Polygon ( {
2011-02-25 10:23:33 +00:00
paths : [
new google . maps . LatLng ( place . south , place . west ) ,
new google . maps . LatLng ( place . north , place . west ) ,
new google . maps . LatLng ( place . north , place . east ) ,
new google . maps . LatLng ( place . south , place . east ) ,
new google . maps . LatLng ( place . south , place . west )
]
2010-07-24 01:32:08 +00:00
} ) ,
selected = false ;
2010-07-24 19:27:39 +00:00
setOptions ( ) ;
function click ( ) {
selected = ! selected ;
setOptions ( ) ;
}
2010-07-24 01:32:08 +00:00
function setOptions ( ) {
2010-09-03 20:54:40 +00:00
var color = selected ? '#8080FF' : '#FFFFFF' ;
2010-07-24 01:32:08 +00:00
polygon . setOptions ( {
clickable : true ,
fillColor : color ,
fillOpacity : selected ? 0.1 : 0 ,
strokeColor : color ,
strokeOpacity : 1 ,
strokeWeight : 2
} ) ;
}
return {
add : function ( ) {
2011-02-25 10:23:33 +00:00
Ox . print ( 'Polygon.add()' )
2010-07-24 01:32:08 +00:00
polygon . setMap ( self . map ) ;
2010-09-03 20:54:40 +00:00
listeners . click = google . maps . event . addListener ( polygon , 'click' , click ) ;
2010-07-24 01:32:08 +00:00
} ,
deselect : function ( ) {
selected = false ;
setOptions ( ) ;
} ,
remove : function ( ) {
polygon . setMap ( null ) ;
google . maps . event . removeListener ( listeners . click ) ;
} ,
select : function ( ) {
selected = true ;
setOptions ( ) ;
2011-02-25 10:23:33 +00:00
}
2010-07-24 01:32:08 +00:00
} ;
}
2010-12-06 17:42:05 +00:00
function Rectangle ( area ) { // fixme: not used
2010-07-24 01:32:08 +00:00
var latlng = {
sw : new google . maps . LatLng ( area [ 0 ] [ 0 ] , area [ 0 ] [ 1 ] ) ,
ne : new google . maps . LatLng ( area [ 1 ] [ 0 ] , area [ 1 ] [ 1 ] )
} ,
bounds = new google . maps . LatLngBounds ( latlng . sw , latlng . ne ) ,
lat = { } ,
lng = { } ;
latlng . mc = bounds . getCenter ( ) ;
$ . each ( latlng , function ( k , v ) {
lat [ k ] = v . lat ( ) ;
lng [ k ] = v . lng ( ) ;
} ) ;
$ . extend ( latlng , {
sc : new google . maps . LatLng ( lat . sw , lng . mc ) ,
2010-07-24 19:27:39 +00:00
se : new google . maps . LatLng ( lat . sw , lng . ne ) ,
mw : new google . maps . LatLng ( lat . mc , lng . sw ) ,
2010-11-28 15:06:47 +00:00
me : new google . maps . LatLng ( lat . mc , lng . ne ) ,
2010-07-24 19:27:39 +00:00
nw : new google . maps . LatLng ( lat . ne , lng . sw ) ,
nc : new google . maps . LatLng ( lat . ne , lng . mc ) ,
2010-07-24 01:32:08 +00:00
} ) ;
return {
area : area ,
bounds : bounds ,
canContain : function ( rectangle ) {
var outerSpan = this . bounds . toSpan ( ) ,
innerSpan = rectangle . bounds . toSpan ( ) ;
return outerSpan . lat ( ) > innerSpan . lat ( ) &&
outerSpan . lng ( ) > innerSpan . lng ( ) ;
} ,
center : latlng . mc ,
contains : function ( rectangle ) {
return this . bounds . contains ( rectangle . bounds . getSouthWest ( ) ) &&
this . bounds . contains ( rectangle . bounds . getNorthEast ( ) ) ;
} ,
latlng : latlng
} ;
}
self . onChange = function ( key , value ) {
2011-02-22 18:52:26 +00:00
if ( key == 'places' ) {
2011-02-25 10:23:33 +00:00
loadPlaces ( ) ;
} else if ( key == 'selected' ) {
selectPlace ( value ) ;
2011-02-22 18:52:26 +00:00
} else if ( key == 'type' ) {
2010-07-24 01:32:08 +00:00
}
} ;
2011-02-26 04:22:49 +00:00
that . removePlace = function ( id ) {
} ;
2011-02-25 10:23:33 +00:00
that . findPlace = function ( name , callback ) {
getPlaceByName ( name , function ( place ) {
2010-12-06 17:42:05 +00:00
if ( place ) {
2011-02-25 10:23:33 +00:00
/ *
self . marker = place . marker . add ( 'yellow' ) ;
2010-09-03 08:47:40 +00:00
self . polygon && self . polygon . remove ( ) ;
2010-12-06 17:42:05 +00:00
self . polygon = place . polygon . add ( ) ;
2011-02-25 10:23:33 +00:00
* /
addPlace ( place ) ;
self . resultPlace = place ;
selectPlace ( place . id ) ;
2010-12-06 17:42:05 +00:00
self . bounds = place . bounds ;
2010-09-03 08:47:40 +00:00
self . map . fitBounds ( self . bounds ) ;
}
2010-12-06 17:42:05 +00:00
callback ( place ) ;
2010-09-03 08:47:40 +00:00
} ) ;
} ;
2011-02-25 10:23:33 +00:00
that . resizeMap = function ( ) {
Ox . print ( 'Ox.Map.resizeMap()' ) ;
2010-12-22 18:19:47 +00:00
var center = self . map . getCenter ( ) ;
2011-02-25 10:23:33 +00:00
self . options . height = that . $element . height ( ) ;
self . options . width = that . $element . width ( ) ;
Ox . print ( self . options . width , self . options . height )
self . $map . css ( {
height : getMapHeight ( ) + 'px' ,
width : self . options . width + 'px'
} ) ;
2010-12-22 18:19:47 +00:00
google . maps . event . trigger ( self . map , 'resize' ) ;
self . map . setCenter ( center ) ;
2011-02-25 10:23:33 +00:00
self . options . zoombar && self . $zoomInput . options ( {
size : self . options . width
} ) ;
2010-12-22 18:19:47 +00:00
}
2011-02-25 10:23:33 +00:00
that . zoomToPlace = function ( id ) {
Ox . print ( 'zoomToPlace' , id )
var place = getPlaceById ( id ) ;
self . bounds = place . bounds ;
self . map . fitBounds ( self . bounds ) ;
} ;
2010-09-03 08:47:40 +00:00
that . zoom = function ( value ) {
self . map . setZoom ( value ) ;
} ;
2010-07-24 01:32:08 +00:00
return that ;
} ;
2010-12-06 17:42:45 +00:00
/ * *
options
2010-07-24 01:32:08 +00:00
height image height ( px )
2010-09-03 20:54:40 +00:00
places array of either names ( '' ) , points ( [ 0 , 0 ] ) ,
2010-07-24 01:32:08 +00:00
or objects ( { name , point , highlight } )
2010-09-03 20:54:40 +00:00
type map type ( 'hybrid' , 'roadmap' , 'satellite' , 'terrain' )
2010-07-24 01:32:08 +00:00
width image width ( px )
2010-12-06 17:42:45 +00:00
* /
Ox . MapImage = function ( options , self ) {
2010-07-24 01:32:08 +00:00
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'img' , self )
2010-07-24 01:32:08 +00:00
. defaults ( {
height : 360 ,
2010-09-03 20:54:40 +00:00
markerColorHighlight : 'yellow' ,
markerColorNormal : 'blue' ,
2010-07-24 01:32:08 +00:00
places : [ ] ,
2010-09-03 20:54:40 +00:00
type : 'satellite' ,
2010-07-24 01:32:08 +00:00
width : 640
} )
. options ( options || { } )
$ . extend ( self , {
markers : {
highlight : [ ] ,
normal : [ ]
} ,
2010-09-03 20:54:40 +00:00
src : 'http://maps.google.com/maps/api/staticmap?sensor=false' +
'&size=' + self . options . width + 'x' + self . options . height +
'&maptype=' + self . options . type
2010-07-24 01:32:08 +00:00
} ) ;
if ( self . options . places . length ) {
$ . each ( self . options . places , function ( i , place ) {
if ( Ox . isString ( place ) ) {
self . markers . normal . push ( place ) ;
} else if ( Ox . isArray ( place ) ) {
2010-09-03 20:54:40 +00:00
self . markers . normal . push ( place . join ( ',' ) ) ;
2010-07-24 01:32:08 +00:00
} else {
2010-09-03 20:54:40 +00:00
self . markers [ place . highlight ? 'highlight' : 'normal' ]
. push ( 'point' in place ? place . point . join ( ',' ) : place . name )
2010-07-24 01:32:08 +00:00
}
} ) ;
$ . each ( self . markers , function ( k , markers ) {
if ( markers . length ) {
2010-09-03 20:54:40 +00:00
self . src += '&markers=icon:' + 'http://dev.pan.do:8000' + oxui . path + 'png/ox.ui/marker' +
Ox . toTitleCase ( self . options [ 'markerColor' + Ox . toTitleCase ( k ) ] ) + '.png|' +
markers . join ( '|' )
2010-07-24 01:32:08 +00:00
}
} ) ;
} else {
2010-09-03 20:54:40 +00:00
self . src += '¢er=0,0&zoom=2'
2010-07-24 01:32:08 +00:00
}
that . attr ( {
src : self . src
} ) ;
self . onChange = function ( key , value ) {
} ;
return that ;
} ;
2010-01-07 20:21:07 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
2010-02-02 16:03:11 +00:00
Menus
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2010-12-06 17:42:45 +00:00
/ * *
* /
2010-02-02 16:03:11 +00:00
Ox . MainMenu = function ( options , self ) {
2010-02-07 15:01:22 +00:00
var self = self || { } ,
that = new Ox . Bar ( { } , self )
2010-02-08 09:35:24 +00:00
. defaults ( {
2010-02-19 10:24:02 +00:00
extras : [ ] ,
2010-02-08 09:35:24 +00:00
menus : [ ] ,
2010-09-03 20:54:40 +00:00
size : 'medium'
2010-02-08 09:35:24 +00:00
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxMainMenu Ox' + Ox . toTitleCase ( self . options . size ) ) // fixme: bar should accept small/medium/large ... like toolbar
2010-02-08 09:35:24 +00:00
. click ( click )
. mousemove ( mousemove ) ;
2010-02-07 15:01:22 +00:00
2010-02-08 09:35:24 +00:00
self . focused = false ;
self . selected = - 1 ;
that . menus = [ ] ;
2010-02-09 05:43:36 +00:00
that . titles = [ ] ;
2010-09-03 20:54:40 +00:00
that . layer = $ ( '<div>' ) . addClass ( 'OxLayer' ) ;
2010-02-08 09:35:24 +00:00
2010-02-19 10:57:19 +00:00
$ . each ( self . options . menus , function ( position , menu ) {
2010-09-03 20:54:40 +00:00
that . titles [ position ] = $ ( '<div>' )
. addClass ( 'OxTitle' )
2010-02-08 09:35:24 +00:00
. html ( menu . title )
2010-09-03 20:54:40 +00:00
. data ( 'position' , position )
2010-02-08 09:35:24 +00:00
. appendTo ( that . $element ) ;
that . menus [ position ] = new Ox . Menu ( $ . extend ( menu , {
2010-09-03 08:47:40 +00:00
element : that . titles [ position ] ,
mainmenu : that ,
size : self . options . size
} ) )
2010-09-03 20:54:40 +00:00
. bindEvent ( {
hide : onHideMenu
} ) ;
2010-02-08 09:35:24 +00:00
} ) ;
2010-02-19 10:57:19 +00:00
if ( self . options . extras . length ) {
2010-09-03 20:54:40 +00:00
that . extras = $ ( '<div>' )
. addClass ( 'OxExtras' )
2010-02-19 10:57:19 +00:00
. appendTo ( that . $element ) ;
$ . each ( self . options . extras , function ( position , extra ) {
2010-02-20 08:29:03 +00:00
extra . css ( {
2010-09-03 20:54:40 +00:00
float : 'left' // fixme: need class!
2010-02-20 08:29:03 +00:00
} ) . appendTo ( that . extras ) ;
2010-02-19 10:57:19 +00:00
} ) ;
}
2010-02-08 09:35:24 +00:00
function click ( event ) {
var $target = $ ( event . target ) ,
2010-09-03 20:54:40 +00:00
position = typeof $target . data ( 'position' ) != 'undefined' ?
$target . data ( 'position' ) : - 1 ;
2010-02-09 05:43:36 +00:00
clickTitle ( position ) ;
}
function clickTitle ( position ) {
var selected = self . selected ;
if ( self . selected > - 1 ) {
that . menus [ self . selected ] . hideMenu ( ) ;
}
if ( position > - 1 ) {
if ( position != selected ) {
self . focused = true ;
self . selected = position ;
2010-09-03 20:54:40 +00:00
that . titles [ self . selected ] . addClass ( 'OxSelected' ) ;
2010-02-09 05:43:36 +00:00
that . menus [ self . selected ] . showMenu ( ) ;
}
2010-02-08 09:35:24 +00:00
}
}
function mousemove ( event ) {
var $target = $ ( event . target ) ,
2010-02-09 05:43:36 +00:00
focused ,
2010-09-03 20:54:40 +00:00
position = typeof $target . data ( 'position' ) != 'undefined' ?
$target . data ( 'position' ) : - 1 ;
2010-02-09 05:43:36 +00:00
if ( self . focused && position != self . selected ) {
if ( position > - 1 ) {
2010-09-07 15:58:15 +00:00
clickTitle ( position ) ;
2010-02-09 05:43:36 +00:00
} else {
focused = self . focused ;
that . menus [ self . selected ] . hideMenu ( ) ;
self . focused = focused ;
2010-02-08 10:17:00 +00:00
}
2010-02-08 09:35:24 +00:00
}
}
2010-02-09 05:43:36 +00:00
function onHideMenu ( ) {
2010-02-09 12:20:23 +00:00
if ( self . selected > - 1 ) {
2010-09-03 20:54:40 +00:00
that . titles [ self . selected ] . removeClass ( 'OxSelected' ) ;
2010-02-09 12:20:23 +00:00
self . selected = - 1 ;
}
2010-02-08 09:35:24 +00:00
self . focused = false ;
}
self . onChange = function ( key , value ) {
} ;
2010-02-19 10:24:02 +00:00
that . addMenuAfter = function ( id ) {
2010-02-08 10:17:00 +00:00
} ;
2010-02-19 10:24:02 +00:00
that . addMenuBefore = function ( id ) {
2010-02-08 10:17:00 +00:00
} ;
2010-07-07 12:36:12 +00:00
that . checkItem = function ( id ) {
2010-09-03 20:54:40 +00:00
var ids = id . split ( '_' ) ,
itemId = ids . pop ( ) ,
menuId = ids . join ( '_' ) ;
that . getMenu ( menuId ) . checkItem ( itemId ) ;
2010-07-07 12:36:12 +00:00
} ;
2010-02-10 16:37:26 +00:00
that . disableItem = function ( id ) {
2010-07-13 22:38:53 +00:00
that . getItem ( id ) . options ( {
disabled : true
} ) ;
2010-02-10 16:37:26 +00:00
} ;
that . enableItem = function ( id ) {
2010-07-13 22:38:53 +00:00
that . getItem ( id ) . options ( {
disabled : false
} ) ;
2010-02-10 16:37:26 +00:00
} ;
2010-02-19 16:13:22 +00:00
that . getItem = function ( id ) {
2010-09-03 20:54:40 +00:00
var ids = id . split ( '_' ) ,
2010-07-07 12:36:12 +00:00
item ;
if ( ids . length == 1 ) {
$ . each ( that . menus , function ( i , menu ) {
item = menu . getItem ( id ) ;
return ! item ;
} ) ;
} else {
2010-09-03 20:54:40 +00:00
item = that . getMenu ( ids . shift ( ) ) . getItem ( ids . join ( '_' ) ) ;
2010-07-07 12:36:12 +00:00
}
2011-01-13 12:43:20 +00:00
//Ox.print('getItem', id, item);
2010-02-19 16:13:22 +00:00
return item ;
} ;
2010-09-03 20:54:40 +00:00
that . getMenu = function ( id ) {
var ids = id . split ( '_' ) ,
menu ;
if ( ids . length == 1 ) {
$ . each ( that . menus , function ( i , v ) {
if ( v . options ( 'id' ) == id ) {
menu = v ;
return false ;
}
} ) ;
} else {
menu = that . getMenu ( ids . shift ( ) ) . getSubmenu ( ids . join ( '_' ) ) ;
}
2011-01-13 12:43:20 +00:00
//Ox.print('getMenu', id, menu);
2010-09-03 20:54:40 +00:00
return menu ;
} ;
2010-02-08 10:17:00 +00:00
that . removeMenu = function ( ) {
} ;
2010-02-08 09:35:24 +00:00
that . selectNextMenu = function ( ) {
if ( self . selected < self . options . menus . length - 1 ) {
clickTitle ( self . selected + 1 ) ;
}
} ;
that . selectPreviousMenu = function ( ) {
if ( self . selected ) {
clickTitle ( self . selected - 1 ) ;
}
} ;
2010-07-07 12:36:12 +00:00
that . uncheckItem = function ( id ) {
2010-07-13 22:38:53 +00:00
that . getItem ( id ) . options ( {
checked : false
} ) ;
2010-07-07 12:36:12 +00:00
} ;
2010-02-08 09:35:24 +00:00
return that ;
} ;
2010-02-02 16:03:11 +00:00
2010-12-06 17:42:45 +00:00
/ * *
options
2010-09-03 08:47:40 +00:00
element the element the menu is attached to
id the menu id
items array of menu items
mainmenu the main menu this menu is part of , if any
offset offset of the menu , in px
parent the supermenu , if any
selected the position of the selected item
2010-09-03 20:54:40 +00:00
side open to 'bottom' or 'right'
size 'large' , 'medium' or 'small'
2010-02-10 15:49:57 +00:00
events :
2010-09-03 08:47:40 +00:00
change _groupId { id , value } checked item of a group has changed
click _itemId item not belonging to a group was clicked
click _menuId { id , value } item not belonging to a group was clicked
deselect _menuId { id , value } item was deselected not needed , not implemented
hide _menuId menu was hidden
select _menuId { id , value } item was selected
2010-12-06 17:42:45 +00:00
* /
Ox . Menu = function ( options , self ) {
2011-01-23 04:59:16 +00:00
2010-02-02 16:03:11 +00:00
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
2010-02-04 08:02:23 +00:00
element : null ,
2010-09-03 20:54:40 +00:00
id : '' ,
2010-02-02 16:03:11 +00:00
items : [ ] ,
2010-02-08 09:35:24 +00:00
mainmenu : null ,
2010-02-02 16:03:11 +00:00
offset : {
left : 0 ,
top : 0
} ,
2010-02-05 09:13:03 +00:00
parent : null ,
2010-02-04 09:50:45 +00:00
selected : - 1 ,
2010-09-03 20:54:40 +00:00
side : 'bottom' ,
size : 'medium' ,
2010-02-02 16:03:11 +00:00
} )
2010-09-03 08:47:40 +00:00
. options ( options || { } )
2010-02-03 12:12:21 +00:00
. addClass (
2010-09-03 20:54:40 +00:00
'OxMenu Ox' + Ox . toTitleCase ( self . options . side ) +
' Ox' + Ox . toTitleCase ( self . options . size )
2010-02-07 15:01:22 +00:00
)
. click ( click )
. mouseenter ( mouseenter )
. mouseleave ( mouseleave )
2010-09-03 08:47:40 +00:00
. mousemove ( mousemove )
2010-12-26 20:16:35 +00:00
. bindEvent ( {
2010-09-03 08:47:40 +00:00
key _up : selectPreviousItem ,
key _down : selectNextItem ,
key _left : selectSupermenu ,
key _right : selectSubmenu ,
key _escape : hideMenu ,
key _enter : clickSelectedItem
} ) ,
2010-09-03 20:54:40 +00:00
itemHeight = self . options . size == 'small' ? 12 : ( self . options . size == 'medium' ? 16 : 20 ) ,
2010-02-18 14:24:17 +00:00
// menuHeight,
2010-02-07 15:01:22 +00:00
scrollSpeed = 1 ,
2010-02-05 14:59:24 +00:00
$item ; // fixme: used?
2010-09-03 08:47:40 +00:00
// fixme: attach all private vars to self
2010-07-06 07:43:12 +00:00
2010-02-02 16:03:11 +00:00
// construct
2010-02-04 08:02:23 +00:00
that . items = [ ] ;
that . submenus = { } ;
2010-02-02 16:03:11 +00:00
that . $scrollbars = [ ] ;
2010-09-03 20:54:40 +00:00
that . $top = $ ( '<div>' )
. addClass ( 'OxTop' )
2010-02-02 16:03:11 +00:00
. appendTo ( that . $element ) ;
2010-09-03 20:54:40 +00:00
that . $scrollbars . up = constructScrollbar ( 'up' )
2010-02-02 16:03:11 +00:00
. appendTo ( that . $element ) ;
2010-09-03 20:54:40 +00:00
that . $container = $ ( '<div>' )
. addClass ( 'OxContainer' )
2010-02-02 16:03:11 +00:00
. appendTo ( that . $element ) ;
2010-09-03 20:54:40 +00:00
that . $content = $ ( '<table>' )
. addClass ( 'OxContent' )
2010-02-02 16:03:11 +00:00
. appendTo ( that . $container ) ;
2010-02-18 07:27:32 +00:00
constructItems ( self . options . items ) ;
2010-09-03 20:54:40 +00:00
that . $scrollbars . down = constructScrollbar ( 'down' )
2010-02-02 16:03:11 +00:00
. appendTo ( that . $element ) ;
2010-09-03 20:54:40 +00:00
that . $bottom = $ ( '<div>' )
. addClass ( 'OxBottom' )
2010-02-02 16:03:11 +00:00
. appendTo ( that . $element ) ;
2010-09-03 20:54:40 +00:00
that . $layer = $ ( '<div>' )
2010-12-26 20:16:35 +00:00
. addClass ( self . options . mainmenu ? 'OxMainMenuLayer' : 'OxMenuLayer' )
2010-09-03 08:47:40 +00:00
. click ( click ) ;
2010-02-02 16:03:11 +00:00
2010-02-05 09:13:03 +00:00
function click ( event ) {
2010-02-07 15:01:22 +00:00
var item ,
2010-02-07 15:12:14 +00:00
position ,
2010-09-03 08:47:40 +00:00
$target = $ ( event . target ) ,
$parent = $target . parent ( ) ;
// necessary for highlight
2010-09-03 20:54:40 +00:00
if ( $parent . is ( '.OxCell' ) ) {
2010-09-03 08:47:40 +00:00
$target = $parent ;
$parent = $target . parent ( ) ;
}
2010-09-03 20:54:40 +00:00
if ( $target . is ( '.OxCell' ) ) {
position = $parent . data ( 'position' ) ;
2010-02-07 15:12:14 +00:00
item = that . items [ position ] ;
2010-09-03 20:54:40 +00:00
if ( ! item . options ( 'disabled' ) ) {
2010-02-07 15:12:14 +00:00
clickItem ( position ) ;
2010-02-09 12:20:23 +00:00
} else {
that . hideMenu ( ) ;
2010-02-07 15:01:22 +00:00
}
2010-02-09 12:20:23 +00:00
} else {
that . hideMenu ( ) ;
2010-02-05 09:13:03 +00:00
}
}
2010-02-07 15:12:14 +00:00
function clickItem ( position ) {
2010-09-03 08:47:40 +00:00
var item = that . items [ position ] ,
2011-01-11 15:00:32 +00:00
menu = self . options . mainmenu || self . options . parent || that ,
2010-09-03 08:47:40 +00:00
toggled ;
2010-09-04 14:28:40 +00:00
that . hideMenu ( ) ;
2010-09-03 20:54:40 +00:00
if ( ! item . options ( 'items' ) . length ) {
if ( that . options ( 'parent' ) ) {
that . options ( 'parent' ) . hideMenu ( ) . triggerEvent ( 'click' ) ;
2010-02-08 09:35:24 +00:00
}
2010-09-03 20:54:40 +00:00
if ( item . options ( 'checked' ) !== null ) {
if ( item . options ( 'group' ) ) {
2011-01-13 12:43:20 +00:00
//Ox.print('has group', item.options('group'))
2010-09-03 20:54:40 +00:00
toggled = self . optionGroups [ item . options ( 'group' ) ] . toggle ( position ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('toggled', toggled)
2010-09-03 08:47:40 +00:00
if ( toggled . length ) {
$ . each ( toggled , function ( i , pos ) {
that . items [ pos ] . toggleChecked ( ) ;
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('--triggering change event--');
2011-01-11 15:00:32 +00:00
menu . triggerEvent ( 'change' , {
2010-09-03 20:54:40 +00:00
id : item . options ( 'group' ) ,
checked : $ . map ( self . optionGroups [ item . options ( 'group' ) ] . checked ( ) , function ( v , i ) {
2010-09-03 08:47:40 +00:00
return {
2010-09-03 20:54:40 +00:00
id : that . items [ v ] . options ( 'id' ) ,
title : Ox . stripTags ( that . items [ v ] . options ( 'title' ) [ 0 ] )
} ;
2010-09-03 08:47:40 +00:00
} )
} ) ;
}
} else {
item . toggleChecked ( ) ;
2011-01-11 15:00:32 +00:00
menu . triggerEvent ( 'change' , {
2010-09-03 20:54:40 +00:00
checked : item . options ( 'checked' ) ,
id : item . options ( 'id' ) ,
title : Ox . stripTags ( item . options ( 'title' ) [ 0 ] )
2010-09-03 08:47:40 +00:00
} ) ;
}
2010-02-09 12:20:23 +00:00
} else {
2011-01-11 15:00:32 +00:00
menu . triggerEvent ( 'click' , {
2010-09-03 20:54:40 +00:00
id : item . options ( 'id' ) ,
title : Ox . stripTags ( item . options ( 'title' ) [ 0 ] )
2010-02-18 14:24:17 +00:00
} ) ;
2010-02-07 15:12:14 +00:00
}
2010-09-03 20:54:40 +00:00
if ( item . options ( 'title' ) . length == 2 ) {
2010-02-07 15:12:14 +00:00
item . toggleTitle ( ) ;
}
}
}
function clickSelectedItem ( ) {
2010-02-09 05:43:36 +00:00
// called on key.enter
2010-02-04 09:50:45 +00:00
if ( self . options . selected > - 1 ) {
2010-02-07 15:12:14 +00:00
clickItem ( self . options . selected ) ;
2010-02-05 05:20:13 +00:00
} else {
that . hideMenu ( ) ;
2010-02-04 09:50:45 +00:00
}
}
2010-02-18 07:27:32 +00:00
function constructItems ( items ) {
2010-09-03 08:47:40 +00:00
2010-02-18 07:27:32 +00:00
that . $content . empty ( ) ;
2010-02-18 14:24:17 +00:00
scrollMenuUp ( ) ;
2010-09-03 08:47:40 +00:00
self . optionGroups = { } ;
$ . each ( items , function ( i , item ) {
if ( item . group ) {
items [ i ] = $ . map ( item . items , function ( v , i ) {
return $ . extend ( v , {
group : item . group
} ) ;
} ) ;
self . optionGroups [ item . group ] = new Ox . OptionGroup (
items [ i ] ,
2010-09-03 20:54:40 +00:00
'min' in item ? item . min : 1 ,
'max' in item ? item . max : 1
2010-09-03 08:47:40 +00:00
) ;
}
} ) ;
items = Ox . flatten ( items ) ;
that . items = [ ] ;
2010-02-18 07:27:32 +00:00
$ . each ( items , function ( i , item ) {
var position ;
2011-01-24 04:08:19 +00:00
if ( 'id' in item ) {
2010-02-18 07:27:32 +00:00
that . items . push ( new Ox . MenuItem ( $ . extend ( item , {
menu : that ,
position : position = that . items . length
2010-09-03 20:54:40 +00:00
} ) ) . data ( 'position' , position ) . appendTo ( that . $content ) ) ; // fixme: jquery bug when passing {position: position}? does not return the object?;
2010-02-18 07:27:32 +00:00
if ( item . items ) {
that . submenus [ item . id ] = new Ox . Menu ( {
element : that . items [ position ] ,
2010-09-03 20:54:40 +00:00
id : Ox . toCamelCase ( self . options . id + '/' + item . id ) ,
2010-02-18 07:27:32 +00:00
items : item . items ,
mainmenu : self . options . mainmenu ,
offset : {
left : 0 ,
top : - 4
} ,
parent : that ,
2010-09-03 20:54:40 +00:00
side : 'right' ,
2010-02-18 07:27:32 +00:00
size : self . options . size ,
} ) ;
}
} else {
that . $content . append ( constructSpace ( ) ) ;
that . $content . append ( constructLine ( ) ) ;
that . $content . append ( constructSpace ( ) ) ;
}
} ) ;
2010-09-03 08:47:40 +00:00
2010-09-03 20:54:40 +00:00
if ( ! that . is ( ':hidden' ) ) {
2010-02-18 14:24:17 +00:00
that . hideMenu ( ) ;
that . showMenu ( ) ;
}
2010-09-03 08:47:40 +00:00
2010-02-18 07:27:32 +00:00
}
2010-02-02 16:03:11 +00:00
function constructLine ( ) {
2010-09-03 20:54:40 +00:00
return $ ( '<tr>' ) . append (
$ ( '<td>' , {
'class' : 'OxLine' ,
2010-02-04 08:02:23 +00:00
colspan : 5
2010-02-03 12:12:21 +00:00
} )
) ;
2010-02-02 16:03:11 +00:00
}
function constructScrollbar ( direction ) {
2010-02-05 14:59:24 +00:00
var interval ,
2010-09-03 20:54:40 +00:00
speed = direction == 'up' ? - 1 : 1 ;
return $ ( '<div/>' , {
'class' : 'OxScrollbar Ox' + Ox . toTitleCase ( direction ) ,
html : oxui . symbols [ 'triangle_' + direction ] ,
2010-02-03 12:12:21 +00:00
click : function ( ) { // fixme: do we need to listen to click event?
return false ;
} ,
mousedown : function ( ) {
scrollSpeed = 2 ;
return false ;
} ,
mouseenter : function ( ) {
2010-09-03 20:54:40 +00:00
var $otherScrollbar = that . $scrollbars [ direction == 'up' ? 'down' : 'up' ] ;
$ ( this ) . addClass ( 'OxSelected' ) ;
if ( $otherScrollbar . is ( ':hidden' ) ) {
2010-02-03 12:12:21 +00:00
$otherScrollbar . show ( ) ;
that . $container . height ( that . $container . height ( ) - itemHeight ) ;
2010-09-03 20:54:40 +00:00
if ( direction == 'down' ) {
2010-02-03 12:12:21 +00:00
that . $content . css ( {
2010-09-03 20:54:40 +00:00
top : - itemHeight + 'px'
2010-02-03 12:12:21 +00:00
} ) ;
}
}
2010-02-05 14:59:24 +00:00
scrollMenu ( speed ) ;
2010-02-03 12:12:21 +00:00
interval = setInterval ( function ( ) {
2010-02-05 14:59:24 +00:00
scrollMenu ( speed ) ;
2010-02-03 12:12:21 +00:00
} , 100 ) ;
} ,
mouseleave : function ( ) {
2010-09-03 20:54:40 +00:00
$ ( this ) . removeClass ( 'OxSelected' ) ;
2010-02-03 12:12:21 +00:00
clearInterval ( interval ) ;
} ,
mouseup : function ( ) {
scrollSpeed = 1 ;
return false ;
}
} ) ;
2010-02-02 16:03:11 +00:00
}
function constructSpace ( ) {
2010-09-03 20:54:40 +00:00
return $ ( '<tr>' ) . append (
$ ( '<td>' , {
'class' : 'OxSpace' ,
2010-02-04 08:02:23 +00:00
colspan : 5
2010-02-03 12:12:21 +00:00
} )
) ;
2010-02-02 16:03:11 +00:00
}
function getElement ( id ) {
2010-02-05 09:13:03 +00:00
// fixme: needed?
2010-09-03 20:54:40 +00:00
return $ ( '#' + Ox . toCamelCase ( options . id + '/' + id ) ) ;
}
function getItemPositionById ( id ) {
var position ;
$ . each ( that . items , function ( i , v ) {
if ( v . options ( 'id' ) == id ) {
position = i ;
return false ;
}
} ) ;
return position ;
2010-02-02 16:03:11 +00:00
}
2010-07-06 07:43:12 +00:00
function hideMenu ( ) {
// called on key_escape
that . hideMenu ( ) ;
}
2010-02-05 05:20:13 +00:00
function isFirstEnabledItem ( ) {
var ret = true ;
$ . each ( that . items , function ( i , item ) {
2010-09-03 20:54:40 +00:00
if ( i < self . options . selected && ! item . options ( 'disabled' ) ) {
2010-02-05 05:20:13 +00:00
return ret = false ;
}
} ) ;
return ret ;
}
function isLastEnabledItem ( ) {
var ret = true ;
$ . each ( that . items , function ( i , item ) {
2010-09-03 20:54:40 +00:00
if ( i > self . options . selected && ! item . options ( 'disabled' ) ) {
2010-02-05 05:20:13 +00:00
return ret = false ;
}
} ) ;
return ret ;
}
2010-02-07 15:01:22 +00:00
function mouseenter ( ) {
that . gainFocus ( ) ;
}
function mouseleave ( ) {
2010-09-03 20:54:40 +00:00
if ( self . options . selected > - 1 && ! that . items [ self . options . selected ] . options ( 'items' ) . length ) {
2010-02-07 15:01:22 +00:00
selectItem ( - 1 ) ;
}
}
function mousemove ( event ) {
var item ,
position ,
$target = $ ( event . target ) ;
2010-09-03 08:47:40 +00:00
$parent = $target . parent ( ) ;
2010-09-03 20:54:40 +00:00
if ( $parent . is ( '.OxCell' ) ) {
2010-09-03 08:47:40 +00:00
$target = $parent ;
$parent = $target . parent ( ) ;
}
2010-09-03 20:54:40 +00:00
if ( $target . is ( '.OxCell' ) ) {
position = $parent . data ( 'position' ) ;
2010-02-07 15:01:22 +00:00
item = that . items [ position ] ;
2010-09-03 20:54:40 +00:00
if ( ! item . options ( 'disabled' ) && position != self . options . selected ) {
2010-02-07 15:01:22 +00:00
selectItem ( position ) ;
}
} else {
mouseleave ( ) ;
}
}
2010-02-03 12:12:21 +00:00
function scrollMenu ( speed ) {
var containerHeight = that . $container . height ( ) ,
contentHeight = that . $content . height ( ) ,
2010-09-03 20:54:40 +00:00
top = parseInt ( that . $content . css ( 'top' ) ) || 0 ,
2010-02-03 12:12:21 +00:00
min = containerHeight - contentHeight + itemHeight ,
max = 0 ;
top += speed * scrollSpeed * - itemHeight ;
if ( top <= min ) {
top = min ;
2010-09-03 20:54:40 +00:00
that . $scrollbars . down . hide ( ) . trigger ( 'mouseleave' ) ;
2010-02-05 14:59:24 +00:00
that . $container . height ( containerHeight + itemHeight ) ;
2010-09-03 20:54:40 +00:00
that . items [ that . items . length - 1 ] . trigger ( 'mouseover' ) ;
2010-02-03 12:12:21 +00:00
} else if ( top >= max - itemHeight ) {
top = max ;
2010-09-03 20:54:40 +00:00
that . $scrollbars . up . hide ( ) . trigger ( 'mouseleave' ) ;
2010-02-05 14:59:24 +00:00
that . $container . height ( containerHeight + itemHeight ) ;
2010-09-03 20:54:40 +00:00
that . items [ 0 ] . trigger ( 'mouseover' ) ;
2010-02-03 12:12:21 +00:00
}
that . $content . css ( {
2010-09-03 20:54:40 +00:00
top : top + 'px'
2010-02-03 12:12:21 +00:00
} ) ;
2010-02-02 16:03:11 +00:00
}
2010-02-05 17:37:15 +00:00
function scrollMenuUp ( ) {
2010-09-03 20:54:40 +00:00
if ( that . $scrollbars . up . is ( ':visible' ) ) {
2010-02-05 17:37:15 +00:00
that . $content . css ( {
2010-09-03 20:54:40 +00:00
top : '0px'
2010-02-05 17:37:15 +00:00
} ) ;
that . $scrollbars . up . hide ( ) ;
2010-09-03 20:54:40 +00:00
if ( that . $scrollbars . down . is ( ':hidden' ) ) {
2010-02-05 17:37:15 +00:00
that . $scrollbars . down . show ( ) ;
} else {
that . $container . height ( that . $container . height ( ) + itemHeight ) ;
}
}
}
2010-02-07 15:01:22 +00:00
function selectItem ( position ) {
var item ;
if ( self . options . selected > - 1 ) {
2010-09-03 20:54:40 +00:00
//Ox.print('s.o.s', self.options.selected, that.items)
2010-02-18 14:24:17 +00:00
item = that . items [ self . options . selected ]
2010-09-03 20:54:40 +00:00
item . removeClass ( 'OxSelected' ) ;
/ * d i s a b l e d
that . triggerEvent ( 'deselect' , {
id : item . options ( 'id' ) ,
title : Ox . stripTags ( item . options ( 'title' ) [ 0 ] )
2010-09-03 08:47:40 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
* /
2010-02-07 15:01:22 +00:00
}
if ( position > - 1 ) {
item = that . items [ position ] ;
$ . each ( that . submenus , function ( id , submenu ) {
2010-09-03 20:54:40 +00:00
if ( ! submenu . is ( ':hidden' ) ) {
2010-02-07 15:01:22 +00:00
submenu . hideMenu ( ) ;
return false ;
}
} ) ;
2010-09-03 20:54:40 +00:00
item . options ( 'items' ) . length && that . submenus [ item . options ( 'id' ) ] . showMenu ( ) ; // fixme: do we want to switch to this style?
item . addClass ( 'OxSelected' ) ;
/ * d i s a b l e d
that . triggerEvent ( 'select' , {
id : item . options ( 'id' ) ,
title : Ox . stripTags ( item . options ( 'title' ) [ 0 ] )
2010-09-03 08:47:40 +00:00
} ) ;
2010-09-03 20:54:40 +00:00
* /
2010-02-07 15:01:22 +00:00
}
2010-02-18 09:11:47 +00:00
self . options . selected = position ;
2010-02-07 15:01:22 +00:00
}
2010-02-02 16:03:11 +00:00
function selectNextItem ( ) {
2010-02-05 15:26:23 +00:00
var offset ,
selected = self . options . selected ;
2011-01-13 12:43:20 +00:00
//Ox.print('sNI', selected)
2010-02-05 05:20:13 +00:00
if ( ! isLastEnabledItem ( ) ) {
2010-02-05 17:37:15 +00:00
if ( selected == - 1 ) {
scrollMenuUp ( ) ;
} else {
2010-09-03 20:54:40 +00:00
that . items [ selected ] . removeClass ( 'OxSelected' ) ;
2010-02-04 09:50:45 +00:00
}
2010-02-05 05:20:13 +00:00
do {
2010-09-07 15:58:15 +00:00
selected ++ ;
2010-09-03 20:54:40 +00:00
} while ( that . items [ selected ] . options ( 'disabled' ) )
2010-02-07 15:01:22 +00:00
selectItem ( selected ) ;
2010-02-05 15:26:23 +00:00
offset = that . items [ selected ] . offset ( ) . top + itemHeight -
that . $container . offset ( ) . top - that . $container . height ( ) ;
if ( offset > 0 ) {
2010-09-03 20:54:40 +00:00
if ( that . $scrollbars . up . is ( ':hidden' ) ) {
2010-02-05 15:26:23 +00:00
that . $scrollbars . up . show ( ) ;
that . $container . height ( that . $container . height ( ) - itemHeight ) ;
offset += itemHeight ;
}
if ( selected == that . items . length - 1 ) {
that . $scrollbars . down . hide ( ) ;
that . $container . height ( that . $container . height ( ) + itemHeight ) ;
} else {
that . $content . css ( {
2010-09-03 20:54:40 +00:00
top : ( ( parseInt ( that . $content . css ( 'top' ) ) || 0 ) - offset ) + 'px'
2010-02-05 15:26:23 +00:00
} ) ;
}
}
2010-09-07 15:58:15 +00:00
}
2010-02-02 16:03:11 +00:00
}
function selectPreviousItem ( ) {
2010-02-05 15:26:23 +00:00
var offset ,
selected = self . options . selected ;
2011-01-13 12:43:20 +00:00
//Ox.print('sPI', selected)
2010-02-05 17:37:15 +00:00
if ( selected > - 1 ) {
if ( ! isFirstEnabledItem ( ) ) {
2010-09-03 20:54:40 +00:00
that . items [ selected ] . removeClass ( 'OxSelected' ) ;
2010-02-05 17:37:15 +00:00
do {
2010-09-07 15:58:15 +00:00
selected -- ;
2010-09-03 20:54:40 +00:00
} while ( that . items [ selected ] . options ( 'disabled' ) )
2010-02-07 15:01:22 +00:00
selectItem ( selected ) ;
2010-02-05 15:26:23 +00:00
}
2010-02-05 17:37:15 +00:00
offset = that . items [ selected ] . offset ( ) . top - that . $container . offset ( ) . top ;
if ( offset < 0 ) {
2010-09-03 20:54:40 +00:00
if ( that . $scrollbars . down . is ( ':hidden' ) ) {
2010-02-05 17:37:15 +00:00
that . $scrollbars . down . show ( ) ;
that . $container . height ( that . $container . height ( ) - itemHeight ) ;
}
if ( selected == 0 ) {
that . $scrollbars . up . hide ( ) ;
that . $container . height ( that . $container . height ( ) + itemHeight ) ;
}
that . $content . css ( {
2010-09-03 20:54:40 +00:00
top : ( ( parseInt ( that . $content . css ( 'top' ) ) || 0 ) - offset ) + 'px'
2010-02-05 17:37:15 +00:00
} ) ;
2010-02-05 15:26:23 +00:00
}
}
2010-02-02 16:03:11 +00:00
}
2010-02-05 09:13:03 +00:00
function selectSubmenu ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('selectSubmenu', self.options.selected)
2010-02-05 17:37:15 +00:00
if ( self . options . selected > - 1 ) {
2010-09-03 20:54:40 +00:00
var submenu = that . submenus [ that . items [ self . options . selected ] . options ( 'id' ) ] ;
2011-01-13 12:43:20 +00:00
//Ox.print('submenu', submenu, that.submenus);
2010-02-05 17:37:15 +00:00
if ( submenu && submenu . hasEnabledItems ( ) ) {
submenu . gainFocus ( ) ;
submenu . selectFirstItem ( ) ;
2010-02-08 09:35:24 +00:00
} else if ( self . options . mainmenu ) {
self . options . mainmenu . selectNextMenu ( ) ;
}
} else if ( self . options . mainmenu ) {
self . options . mainmenu . selectNextMenu ( ) ;
2010-02-05 09:13:03 +00:00
}
}
function selectSupermenu ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('selectSupermenu', self.options.selected)
2010-02-05 09:13:03 +00:00
if ( self . options . parent ) {
2010-09-03 20:54:40 +00:00
self . options . selected > - 1 && that . items [ self . options . selected ] . trigger ( 'mouseleave' ) ;
scrollMenuUp ( ) ;
2010-02-05 09:13:03 +00:00
self . options . parent . gainFocus ( ) ;
2010-02-08 09:35:24 +00:00
} else if ( self . options . mainmenu ) {
self . options . mainmenu . selectPreviousMenu ( ) ;
2010-02-05 09:13:03 +00:00
}
}
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'items' ) {
2010-02-18 07:27:32 +00:00
constructItems ( value ) ;
2010-09-03 20:54:40 +00:00
} else if ( key == 'selected' ) {
that . $content . find ( '.OxSelected' ) . removeClass ( 'OxSelected' ) ;
2010-02-18 09:11:47 +00:00
selectItem ( value ) ;
2010-02-18 07:27:32 +00:00
}
2010-02-05 09:13:03 +00:00
}
2010-02-20 03:42:03 +00:00
that . addItem = function ( item , position ) {
} ;
2010-02-19 16:13:22 +00:00
that . addItemAfter = function ( item , id ) {
2010-02-08 10:17:00 +00:00
} ;
2010-02-19 16:13:22 +00:00
that . addItemBefore = function ( item , id ) {
2010-02-08 10:17:00 +00:00
} ;
2010-07-07 12:36:12 +00:00
that . checkItem = function ( id ) {
2010-09-03 20:54:40 +00:00
var item = that . getItem ( id ) ;
if ( item . options ( 'group' ) ) {
var position = getItemPositionById ( id ) ,
toggled = self . optionGroups [ item . options ( 'group' ) ] . toggle ( position ) ;
if ( toggled . length ) {
$ . each ( toggled , function ( i , pos ) {
that . items [ pos ] . toggleChecked ( ) ;
} ) ;
}
} else {
item . options ( {
checked : true
} ) ;
}
2010-07-07 12:36:12 +00:00
} ;
2010-02-10 16:37:26 +00:00
that . getItem = function ( id ) {
2010-09-08 16:35:34 +00:00
//Ox.print('id', id)
2010-09-03 20:54:40 +00:00
var ids = id . split ( '_' ) ,
2010-07-07 12:36:12 +00:00
item ;
if ( ids . length == 1 ) {
$ . each ( that . items , function ( i , v ) {
2010-09-03 20:54:40 +00:00
if ( v . options ( 'id' ) == id ) {
2010-07-07 12:36:12 +00:00
item = v ;
return false ;
}
} ) ;
if ( ! item ) {
$ . each ( that . submenus , function ( k , submenu ) {
item = submenu . getItem ( id ) ;
return ! item ;
} ) ;
2010-02-10 20:02:58 +00:00
}
2010-07-07 12:36:12 +00:00
} else {
2010-09-03 20:54:40 +00:00
item = that . submenus [ ids . shift ( ) ] . getItem ( ids . join ( '_' ) ) ;
2010-07-07 12:36:12 +00:00
}
2010-02-19 16:13:22 +00:00
return item ;
2010-02-10 16:37:26 +00:00
} ;
2010-09-03 20:54:40 +00:00
that . getSubmenu = function ( id ) {
var ids = id . split ( '_' ) ,
submenu ;
if ( ids . length == 1 ) {
submenu = that . submenus [ id ] ;
} else {
submenu = that . submenus [ ids . shift ( ) ] . getSubmenu ( ids . join ( '_' ) ) ;
}
2011-01-13 12:43:20 +00:00
//Ox.print('getSubmenu', id, submenu);
2010-09-03 20:54:40 +00:00
return submenu ;
}
2010-02-05 09:13:03 +00:00
that . hasEnabledItems = function ( ) {
var ret = false ;
$ . each ( that . items , function ( i , item ) {
2010-09-03 20:54:40 +00:00
if ( ! item . options ( 'disabled' ) ) {
2010-02-05 09:13:03 +00:00
return ret = true ;
}
} ) ;
return ret ;
} ;
2010-02-02 16:03:11 +00:00
that . hideMenu = function ( ) {
2010-09-03 20:54:40 +00:00
if ( that . is ( ':hidden' ) ) {
2010-07-02 13:06:13 +00:00
return ;
}
2010-02-04 08:02:23 +00:00
$ . each ( that . submenus , function ( i , submenu ) {
2010-09-03 20:54:40 +00:00
if ( submenu . is ( ':visible' ) ) {
2010-02-04 08:02:23 +00:00
submenu . hideMenu ( ) ;
2010-02-03 12:12:21 +00:00
return false ;
}
} ) ;
2010-02-08 09:39:15 +00:00
selectItem ( - 1 ) ;
2010-02-05 17:37:15 +00:00
scrollMenuUp ( ) ;
2010-09-03 20:54:40 +00:00
that . $scrollbars . up . is ( ':visible' ) && that . $scrollbars . up . hide ( ) ;
that . $scrollbars . down . is ( ':visible' ) && that . $scrollbars . down . hide ( ) ;
2010-02-05 15:42:52 +00:00
if ( self . options . parent ) {
2010-09-03 20:54:40 +00:00
//self.options.element.removeClass('OxSelected');
self . options . parent . options ( {
selected : - 1
} ) ;
2010-02-05 15:42:52 +00:00
}
2010-02-09 05:43:36 +00:00
that . hide ( )
. loseFocus ( )
2010-09-03 20:54:40 +00:00
. triggerEvent ( 'hide' ) ;
2010-02-09 05:43:36 +00:00
that . $layer . hide ( ) ;
2010-02-08 09:35:24 +00:00
return that ;
2010-02-05 09:13:03 +00:00
} ;
2010-02-08 10:17:00 +00:00
that . removeItem = function ( ) {
} ;
2010-02-05 09:13:03 +00:00
that . selectFirstItem = function ( ) {
selectNextItem ( ) ;
2010-02-02 16:03:11 +00:00
} ;
that . showMenu = function ( ) {
2010-09-03 20:54:40 +00:00
if ( ! that . is ( ':hidden' ) ) {
2010-07-02 13:06:13 +00:00
return ;
}
2010-02-09 05:43:36 +00:00
if ( ! self . options . parent && ! that . $layer . parent ( ) . length ) {
that . $layer . appendTo ( $body ) ;
}
2010-09-03 08:47:40 +00:00
that . parent ( ) . length == 0 && that . appendTo ( $body ) ;
2010-02-18 14:42:53 +00:00
that . css ( {
2010-09-03 20:54:40 +00:00
left : '-1000px' ,
top : '-1000px' ,
2010-02-18 14:42:53 +00:00
} ) . show ( ) ;
2010-02-04 08:02:23 +00:00
var offset = self . options . element . offset ( ) ,
width = self . options . element . outerWidth ( ) ,
height = self . options . element . outerHeight ( ) ,
2010-09-03 20:54:40 +00:00
left = Ox . limit (
offset . left + self . options . offset . left + ( self . options . side == 'bottom' ? 0 : width ) ,
0 , $window . width ( ) - that . width ( )
) ,
top = offset . top + self . options . offset . top + ( self . options . side == 'bottom' ? height : 0 ) ,
2010-02-18 14:42:53 +00:00
menuHeight = that . $content . outerHeight ( ) ; // fixme: why is outerHeight 0 when hidden?
2010-06-29 13:10:13 +00:00
menuMaxHeight = Math . floor ( $window . height ( ) - top - 16 ) ;
2010-02-05 17:37:15 +00:00
if ( self . options . parent ) {
2010-02-18 14:24:17 +00:00
if ( menuHeight > menuMaxHeight ) {
2010-09-03 08:47:40 +00:00
top = Ox . limit ( top - menuHeight + menuMaxHeight , self . options . parent . offset ( ) . top , top ) ;
2010-02-18 14:24:17 +00:00
menuMaxHeight = Math . floor ( $window . height ( ) - top - 16 ) ;
2010-02-05 17:37:15 +00:00
}
}
2010-02-18 14:42:53 +00:00
that . css ( {
2010-09-03 20:54:40 +00:00
left : left + 'px' ,
top : top + 'px'
2010-02-18 14:42:53 +00:00
} ) ;
2010-02-18 14:24:17 +00:00
if ( menuHeight > menuMaxHeight ) {
that . $container . height ( menuMaxHeight - itemHeight - 8 ) ; // margin
2010-02-03 12:12:21 +00:00
that . $scrollbars . down . show ( ) ;
2010-02-18 14:24:17 +00:00
} else {
that . $container . height ( menuHeight ) ;
2010-02-03 12:12:21 +00:00
}
2010-09-03 20:54:40 +00:00
if ( ! self . options . parent ) {
2010-09-03 08:47:40 +00:00
that . gainFocus ( ) ;
}
that . $layer . show ( ) ;
2010-02-08 09:35:24 +00:00
return that ;
2010-09-03 20:54:40 +00:00
//that.triggerEvent('show');
2010-02-02 16:03:11 +00:00
} ;
2010-02-03 12:12:21 +00:00
that . toggleMenu = function ( ) {
2010-09-03 20:54:40 +00:00
that . is ( ':hidden' ) ? that . showMenu ( ) : that . hideMenu ( ) ;
2010-02-02 16:03:11 +00:00
} ;
return that ;
2010-02-03 12:12:21 +00:00
} ;
2010-02-02 16:03:11 +00:00
Ox . MenuItem = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'tr' , self )
2010-02-02 16:03:11 +00:00
. defaults ( {
2010-09-03 08:47:40 +00:00
bind : [ ] , // fixme: what's this?
2010-02-04 08:02:23 +00:00
checked : null ,
2010-02-02 16:03:11 +00:00
disabled : false ,
2010-09-03 20:54:40 +00:00
group : '' ,
icon : '' ,
id : '' ,
2010-02-05 05:20:13 +00:00
items : [ ] ,
2010-09-03 20:54:40 +00:00
keyboard : '' ,
2010-02-03 12:12:21 +00:00
menu : null , // fixme: is passing the menu to 100s of menu items really memory-neutral?
2010-02-04 09:50:45 +00:00
position : 0 ,
2010-02-03 12:12:21 +00:00
title : [ ] ,
} )
. options ( $ . extend ( options , {
keyboard : parseKeyboard ( options . keyboard || self . defaults . keyboard ) ,
2011-02-22 18:52:26 +00:00
title : Ox . toArray ( options . title || self . defaults . title )
2010-02-03 12:12:21 +00:00
} ) )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxItem' + ( self . options . disabled ? ' OxDisabled' : '' ) )
2011-01-24 04:08:19 +00:00
/ *
2010-02-03 12:12:21 +00:00
. attr ( {
2010-09-03 20:54:40 +00:00
id : Ox . toCamelCase ( self . options . menu . options ( 'id' ) + '/' + self . options . id )
2010-02-03 12:12:21 +00:00
} )
2011-01-24 04:08:19 +00:00
* /
2010-09-03 20:54:40 +00:00
. data ( 'group' , self . options . group ) ; // fixme: why?
2010-02-03 12:12:21 +00:00
2010-09-03 08:47:40 +00:00
if ( self . options . group && self . options . checked === null ) {
self . options . checked = false ;
}
2010-02-03 12:12:21 +00:00
// construct
that . append (
2010-09-03 20:54:40 +00:00
that . $status = $ ( '<td>' , {
'class' : 'OxCell OxStatus' ,
html : self . options . checked ? oxui . symbols . check : ''
2010-02-03 12:12:21 +00:00
} )
)
. append (
2010-09-03 20:54:40 +00:00
that . $icon = $ ( '<td>' , {
'class' : 'OxCell OxIcon'
2010-02-02 16:03:11 +00:00
} )
2010-02-03 12:12:21 +00:00
. append ( self . options . icon ?
2010-09-03 20:54:40 +00:00
$ ( '<img>' , {
2010-02-04 08:02:23 +00:00
src : self . options . icon
2010-02-03 12:12:21 +00:00
} ) : null
)
)
. append (
2010-09-03 20:54:40 +00:00
that . $title = $ ( '<td>' , {
'class' : 'OxCell OxTitle' ,
2010-02-03 12:12:21 +00:00
html : self . options . title [ 0 ]
} )
)
. append (
2010-09-03 20:54:40 +00:00
$ ( '<td>' , {
'class' : 'OxCell OxModifiers' ,
2010-02-03 12:12:21 +00:00
html : $ . map ( self . options . keyboard . modifiers , function ( modifier ) {
2010-02-08 09:45:48 +00:00
return oxui . symbols [ modifier ] ;
2010-09-03 20:54:40 +00:00
} ) . join ( '' )
2010-02-03 12:12:21 +00:00
} )
)
. append (
2010-09-03 20:54:40 +00:00
$ ( '<td>' , {
'class' : 'OxCell Ox' + ( self . options . items . length ? 'Submenu' : 'Key' ) ,
2010-02-05 05:20:13 +00:00
html : self . options . items . length ? oxui . symbols . triangle _right :
2010-02-08 09:45:48 +00:00
oxui . symbols [ self . options . keyboard . key ] ||
self . options . keyboard . key . toUpperCase ( )
2010-02-03 12:12:21 +00:00
} )
2010-09-07 15:58:15 +00:00
) ;
2010-02-03 12:12:21 +00:00
function parseKeyboard ( str ) {
2010-09-03 20:54:40 +00:00
var modifiers = str . split ( ' ' ) ,
2010-02-03 12:12:21 +00:00
key = modifiers . pop ( ) ;
return {
modifiers : modifiers ,
key : key
2010-07-05 17:01:42 +00:00
} ;
2010-02-03 12:12:21 +00:00
}
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'checked' ) {
that . $status . html ( value ? oxui . symbols . check : '' )
} else if ( key == 'disabled' ) {
that . toggleClass ( 'OxDisabled' ) ; // fixme: this will only work if onChange is only invoked on actual change
} else if ( key == 'title' ) {
2011-02-22 18:52:26 +00:00
self . options . title = Ox . toArray ( value ) ;
2010-07-24 01:32:08 +00:00
that . $title . html ( self . options . title [ 0 ] ) ;
2010-02-03 12:12:21 +00:00
}
}
2010-02-10 16:37:26 +00:00
that . toggle = function ( ) {
// toggle id and title
} ;
2010-02-03 12:12:21 +00:00
that . toggleChecked = function ( ) {
2010-09-03 08:47:40 +00:00
that . options ( {
checked : ! self . options . checked
} ) ;
2010-02-03 12:12:21 +00:00
} ;
that . toggleDisabled = function ( ) {
} ;
that . toggleTitle = function ( ) {
2011-01-13 12:43:20 +00:00
//Ox.print('s.o.t', self.options.title)
2010-02-03 12:12:21 +00:00
that . options ( {
2010-07-24 01:32:08 +00:00
title : self . options . title . reverse ( )
2010-02-10 16:37:26 +00:00
} ) ;
2010-02-03 12:12:21 +00:00
} ;
2010-02-02 16:03:11 +00:00
return that ;
2010-02-03 12:12:21 +00:00
} ;
2010-02-02 16:03:11 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
2010-01-07 20:21:07 +00:00
Panels
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2010-12-06 17:42:45 +00:00
/ * *
2010-01-07 20:21:07 +00:00
* /
Ox . CollapsePanel = function ( options , self ) {
var self = self || { } ,
that = new Ox . Panel ( { } , self )
. defaults ( {
collapsed : false ,
2011-01-14 09:54:28 +00:00
extras : [ ] ,
2010-11-28 15:06:47 +00:00
size : 16 ,
2010-09-03 20:54:40 +00:00
title : ''
2010-01-07 20:21:07 +00:00
} )
. options ( options )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxCollapsePanel' ) ,
2011-01-14 09:54:28 +00:00
// fixme: the following should all be self.foo
2010-09-03 20:54:40 +00:00
title = self . options . collapsed ?
[ { id : 'expand' , title : 'expand' } , { id : 'collapse' , title : 'collapse' } ] :
2010-12-23 14:51:35 +00:00
[ { id : 'collapse' , title : 'collapse' } , { id : 'expand' , title : 'expand' } ] ,
2010-01-07 20:21:07 +00:00
$titlebar = new Ox . Bar ( {
2010-09-03 20:54:40 +00:00
orientation : 'horizontal' ,
2010-01-07 20:21:07 +00:00
size : self . options . size ,
} )
. dblclick ( dblclickTitlebar )
. appendTo ( that ) ,
$switch = new Ox . Button ( {
2010-09-03 20:54:40 +00:00
style : 'symbol' ,
title : title ,
type : 'image' ,
2010-01-07 20:21:07 +00:00
} )
. click ( toggleCollapsed )
. appendTo ( $titlebar ) ,
$title = new Ox . Element ( )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTitle' )
2010-01-07 20:21:07 +00:00
. html ( self . options . title /*.toUpperCase()*/ )
2011-01-14 09:54:28 +00:00
. appendTo ( $titlebar ) ,
$extras ;
if ( self . options . extras . length ) {
$extras = new Ox . Element ( )
. addClass ( 'OxExtras' )
2010-01-07 20:21:07 +00:00
. appendTo ( $titlebar ) ;
2011-01-14 09:54:28 +00:00
self . options . extras . forEach ( function ( $extra ) {
$extra . appendTo ( $extras ) ;
} ) ;
2010-12-23 17:05:46 +00:00
}
2010-01-07 20:21:07 +00:00
that . $content = new Ox . Element ( )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxContent' )
2010-01-07 20:21:07 +00:00
. appendTo ( that ) ;
// fixme: doesn't work, content still empty
// need to hide it if collapsed
if ( self . options . collapsed ) {
that . $content . css ( {
2010-09-03 20:54:40 +00:00
marginTop : - that . $content . height ( ) + 'px'
2010-01-07 20:21:07 +00:00
} ) ;
2010-12-23 17:05:46 +00:00
}
2010-01-07 20:21:07 +00:00
function dblclickTitlebar ( e ) {
2010-09-03 20:54:40 +00:00
if ( ! $ ( e . target ) . hasClass ( 'OxButton' ) ) {
$switch . trigger ( 'click' ) ;
2010-01-07 20:21:07 +00:00
}
}
function toggleCollapsed ( ) {
2010-09-03 20:54:40 +00:00
var marginTop ;
self . options . collapsed = ! self . options . collapsed ;
marginTop = self . options . collapsed ? - that . $content . height ( ) : 0 ;
2010-01-07 20:21:07 +00:00
that . $content . animate ( {
2010-09-03 20:54:40 +00:00
marginTop : marginTop + 'px'
2010-01-07 20:21:07 +00:00
} , 200 ) ;
2011-01-13 22:10:42 +00:00
that . triggerEvent ( 'toggle' , {
collapsed : self . options . collapsed
} ) ;
2010-01-07 20:21:07 +00:00
}
2010-09-03 20:54:40 +00:00
self . onChange = function ( key , value ) {
if ( key == 'collapsed' ) {
} else if ( key == 'title' ) {
2010-01-07 20:21:07 +00:00
$title . html ( self . options . title ) ;
}
} ;
2011-01-15 06:09:22 +00:00
that . update = function ( ) { // fixme: used anywhere?
2011-01-14 14:10:19 +00:00
self . options . collapsed && that . $content . css ( {
marginTop : - that . $content . height ( )
} ) ;
} ;
2010-01-07 20:21:07 +00:00
return that ;
} ;
2010-12-06 17:42:45 +00:00
/ * *
2010-01-07 20:21:07 +00:00
* /
Ox . Panel = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxPanel' ) ;
2010-01-07 20:21:07 +00:00
return that ;
} ;
2011-03-03 23:16:49 +00:00
Ox . SplitPanel _ = function ( options , self ) {
2011-03-03 21:02:35 +00:00
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
elements : [ ] ,
orientation : 'horizontal'
} )
. options ( options )
. addClass (
2011-03-03 23:16:49 +00:00
'OxSplitPanel_ Ox' + Ox . toTitleCase ( self . options . orientation )
2011-03-03 21:02:35 +00:00
) ;
Ox . extend ( self , {
$separators : [ ] ,
clientXY : self . options . orientation == 'horizontal' ? 'clientX' : 'clientY' ,
dimensions : Ox . UI . DIMENSIONS [ self . options . orientation ] ,
edges : Ox . UI . EDGES [ self . options . orientation ]
} ) ;
self . options . elements . forEach ( function ( element , i ) {
self . options . elements [ i ] = Ox . extend ( {
collapsible : false ,
collapsed : false ,
resizable : false ,
resize : [ ] ,
size : 'auto'
} , element ) ;
} ) ;
self . autoPercent = ( 100 - self . options . elements . reduce ( function ( val , element ) {
return val + ( Ox . endsWith ( element . size , '%' ) ? parseFloat ( element . size ) : 0 ) ;
} , 0 ) ) / self . options . elements . filter ( function ( element ) {
return element . size == 'auto' ;
} ) . length + '%' ;
self . options . elements . forEach ( function ( element , i ) {
var flex , index = i == 0 ? 0 : 1 ;
if ( Ox . isNumber ( element . size ) ) {
element . element . css ( self . dimensions [ 0 ] , element . size + 'px' ) ;
} else {
flex = (
element . size == 'auto' ? self . autoPercent : element . size
) . replace ( '%' , '' ) ;
element . element . css ( {
boxFlex : flex ,
MozBoxFlex : flex ,
WebkitBoxFlex : flex
} ) ;
}
element . element . appendTo ( that ) ;
if ( element . collapsible || element . resizable ) {
self . $separators . push (
Ox . Element ( )
. addClass ( 'OxSeparator' )
. bindEvent ( {
anyclick : function ( ) {
that . toggle ( i ) ;
} ,
dragstart : function ( event , e ) {
dragstart ( i , e ) ;
} ,
drag : function ( event , e ) {
drag ( i , e ) ;
} ,
dragend : function ( event , e ) {
dragend ( i , e ) ;
} ,
} )
. append ( $ ( '<div>' ) . addClass ( 'OxSpace' ) )
. append ( $ ( '<div>' ) . addClass ( 'OxLine' ) )
. append ( $ ( '<div>' ) . addClass ( 'OxSpace' ) )
[ 'insert' + ( index ? 'Before' : 'After' ) ] ( element . element )
) ;
}
} ) ;
function dragstart ( pos , e ) {
var element = self . options . elements [ pos ] ,
size = element . element [ self . dimensions [ 0 ] ] ( ) ;
if ( element . resizable && ! element . collapsed ) {
Ox . isString ( element . size ) && setPixels ( pos ) ;
self . drag = {
resize : Ox . isNumber ( element . size ) ?
element . resize : element . resize . map ( function ( v ) {
return getPixelsByPercent ( v ) ;
} ) ,
size : size ,
startPos : e [ self . clientXY ] ,
startSize : size
} ;
Ox . print ( 'self.drag' , self . drag )
}
}
function drag ( pos , e ) {
var data = { } ,
element = self . options . elements [ pos ] ,
index = pos == 0 ? 0 : 1 ;
if ( element . resizable && ! element . collapsed ) {
var d = e [ self . clientXY ] - self . drag . startPos ,
size = Ox . limit (
self . drag . startSize + d * ( index ? - 1 : 1 ) ,
self . drag . resize [ 0 ] ,
self . drag . resize [ element . resize . length - 1 ]
) ;
self . drag . resize . forEach ( function ( v ) {
if ( size >= v - 8 && size <= v + 8 ) {
size = v ;
return false ;
}
} ) ;
if ( size != self . drag . size ) {
self . drag . size = size ;
data [ self . dimensions [ 0 ] ] = size ;
element . element
. css ( self . dimensions [ 0 ] , size + 'px' )
. triggerEvent ( 'resize' , data ) ;
triggerEvents ( 'resize' , pos ) ;
}
}
}
function dragend ( pos , e ) {
var data = { } ,
element = self . options . elements [ pos ] ;
if ( element . resizable && ! element . collapsed ) {
Ox . isString ( element . size ) && setPercent ( pos ) ;
data [ self . dimensions [ 0 ] ] = self . drag . size
element . element . triggerEvent ( 'resizeend' , data ) ;
triggerEvents ( 'resizeend' , pos ) ;
}
}
function getPixelsByPercent ( percent ) {
return Math . round ( (
that [ self . dimensions [ 0 ] ] ( ) -
self . options . elements . reduce ( function ( val , element ) {
return val + Ox . isNumber ( element . size ) ?
element . element [ self . dimensions [ 0 ] ] ( ) : 0 ;
} , 0 ) - self . $separators . length
) * parseFloat ( percent ) / 100 ) ;
}
function setPercent ( pos ) {
var element = self . options . elements [ pos ] ,
2011-03-03 21:26:17 +00:00
flex = (
element . size == 'auto' ? self . autoPercent : element . size
) . replace ( '%' , '' ) ,
2011-03-03 21:02:35 +00:00
css = {
boxFlex : flex ,
MozBoxFlex : flex ,
WebkitBoxFlex : flex
} ;
css [ self . dimensions [ 0 ] ] = '' ;
2011-03-03 21:26:17 +00:00
Ox . print ( 'setPercent' , css )
2011-03-03 21:02:35 +00:00
element . element . css ( css ) ;
}
function setPixels ( pos ) {
var css = {
boxFlex : '' ,
MozBoxFlex : '' ,
WebkitBoxFlex : ''
} ,
element = self . options . elements [ pos ] ;
css [ self . dimensions [ 0 ] ] = element . element [ self . dimensions [ 0 ] ] ( ) + 'px' ;
element . element . css ( css ) ;
}
function triggerEvents ( event , pos ) {
var data = { } ;
self . options . elements . forEach ( function ( element , i ) {
if ( i != pos && Ox . isString ( element . size ) ) {
data [ self . dimensions [ 0 ] ] = element . element [ self . dimensions [ 0 ] ] ( ) ;
element . element . triggerEvent ( event , data ) ;
}
} ) ;
}
2011-03-03 21:26:17 +00:00
that . replaceElement = function ( pos , element ) {
var $element = self . options . elements [ pos ] . element ;
$element . replaceWith ( self . options . elements [ pos ] . element = element ) ;
if ( Ox . isNumber ( self . options . elements [ pos ] . size ) ) {
setPixels ( pos ) ;
} else {
setPercent ( pos ) ;
}
return that ;
} ;
that . resizeElement = function ( pos , size ) {
var element = self . options . elements [ pos ] ;
element . size = size ;
if ( Ox . isNumber ( element . size ) ) {
setPixels ( pos ) ;
} else {
setPercent ( pos ) ;
}
}
2011-03-03 21:02:35 +00:00
that . toggle = function ( pos ) {
var css = { } ,
element = self . options . elements [ pos ] ,
flex ,
index = pos == 0 ? 0 : 1 ,
size = element . element [ self . dimensions [ 0 ] ] ( ) ;
if ( element . collapsible ) {
element . collapsed = ! element . collapsed ;
if ( Ox . isString ( element . size ) && element . collapsed ) {
setPixels ( pos ) ;
}
css [ 'margin' + Ox . toTitleCase ( self . edges [ 0 ] [ index ] ) ] =
element . collapsed ? - size : 0 ;
Ox . print ( 'css' , css ) ;
that . animate ( css , 250 , function ( ) {
if ( Ox . isString ( element . size ) && ! element . collapsed ) {
setPercent ( pos ) ;
}
element . element . triggerEvent ( 'toggle' , { collapsed : element . collapsed } ) ;
triggerEvents ( 'resize' , pos ) ;
} ) ;
}
}
return that ;
} ;
2010-12-06 17:42:45 +00:00
/ * *
options :
elements : [ { array of one , two or three elements
collapsible : false , collapsible or not ( only for outer elements )
collapsed : false , collapsed or not ( only for collapsible elements )
element : { } , OxElement ( if any element is resizable or
collapsible , all OxElements must have an id )
resizable : false , resizable or not ( only for outer elements )
resize : [ ] , array of sizes ( only for resizable elements ,
first value is min , last value is max ,
other values are 'snappy' points in between )
size : 0 size in px ( one element must have no size )
} ] ,
orientation : '' 'horizontal' or 'vertical'
events :
resize
toggle
2010-01-07 20:21:07 +00:00
* /
2011-03-03 23:16:49 +00:00
Ox . SplitPanel = function ( options , self ) {
2010-01-07 20:21:07 +00:00
var self = self || { } ,
2010-07-16 06:50:30 +00:00
that = new Ox . Element ( { } , self ) // fixme: Container
2010-01-07 20:21:07 +00:00
. defaults ( {
elements : [ ] ,
2010-09-03 20:54:40 +00:00
orientation : 'horizontal'
2010-01-07 20:21:07 +00:00
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxSplitPanel' ) ;
2010-07-17 08:46:27 +00:00
$ . extend ( self , {
dimensions : oxui . getDimensions ( self . options . orientation ) ,
edges : oxui . getEdges ( self . options . orientation ) ,
2010-09-17 16:37:11 +00:00
length : self . options . elements . length ,
2010-12-23 01:04:47 +00:00
resizebarElements : [ ] ,
2010-09-17 16:37:11 +00:00
$resizebars : [ ]
2010-07-17 08:46:27 +00:00
} ) ;
2010-07-06 18:28:58 +00:00
2011-01-03 18:52:18 +00:00
// create elements
2010-07-06 18:28:58 +00:00
that . $elements = [ ] ;
2011-01-03 18:52:18 +00:00
self . options . elements . forEach ( function ( v , i ) {
2010-07-17 08:46:27 +00:00
self . options . elements [ i ] = $ . extend ( {
collapsible : false ,
collapsed : false ,
resizable : false ,
resize : [ ] ,
2010-09-03 20:54:40 +00:00
size : 'auto'
2010-07-17 08:46:27 +00:00
} , v ) ;
2010-07-06 18:28:58 +00:00
that . $elements [ i ] = v . element
2011-01-03 18:52:18 +00:00
. css ( self . edges [ 2 ] , ( parseInt ( v . element . css ( self . edges [ 2 ] ) ) || 0 ) + 'px' )
. css ( self . edges [ 3 ] , ( parseInt ( v . element . css ( self . edges [ 3 ] ) ) || 0 ) + 'px' ) ;
2011-01-04 21:29:47 +00:00
//alert(v.element.css(self.edges[3]))
2010-07-06 18:28:58 +00:00
} ) ;
2011-01-03 18:52:18 +00:00
// create resizebars
self . options . elements . forEach ( function ( v , i ) {
2010-01-07 20:21:07 +00:00
//that.append(element)
2010-09-03 20:54:40 +00:00
//Ox.print('V: ', v, that.$elements[i])
2010-12-23 01:04:47 +00:00
var index = i == 0 ? 0 : 1 ;
2010-09-03 08:47:40 +00:00
that . $elements [ i ] . appendTo ( that . $element ) ; // fixme: that.$content
2010-07-06 18:28:58 +00:00
if ( v . collapsible || v . resizable ) {
2011-01-13 12:43:20 +00:00
//Ox.print('v.size', v.size)
2010-12-23 01:04:47 +00:00
self . resizebarElements [ index ] = i < 2 ? [ 0 , 1 ] : [ 1 , 2 ] ;
self . $resizebars [ index ] = new Ox . Resizebar ( {
2010-12-23 02:34:31 +00:00
collapsible : v . collapsible ,
edge : self . edges [ index ] ,
elements : [
that . $elements [ self . resizebarElements [ index ] [ 0 ] ] ,
that . $elements [ self . resizebarElements [ index ] [ 1 ] ]
] ,
id : v . element . options ( 'id' ) ,
orientation : self . options . orientation == 'horizontal' ? 'vertical' : 'horizontal' ,
parent : that , // fixme: that.$content
resizable : v . resizable ,
resize : v . resize ,
size : v . size
} ) ;
2010-12-23 01:04:47 +00:00
self . $resizebars [ index ] [ i == 0 ? 'insertAfter' : 'insertBefore' ] ( that . $elements [ i ] ) ;
2010-07-06 18:28:58 +00:00
}
2010-01-07 20:21:07 +00:00
} ) ;
2010-07-06 18:28:58 +00:00
2011-01-03 18:52:18 +00:00
self . options . elements . forEach ( function ( v , i ) {
v . collapsed && that . css (
self . edges [ i == 0 ? 0 : 1 ] , - self . options . elements [ i ] . size + 'px'
) ;
} ) ;
setSizes ( true ) ;
2010-09-17 16:37:11 +00:00
2010-07-07 07:18:38 +00:00
function getPositionById ( id ) {
var position = - 1 ;
$ . each ( self . options . elements , function ( i , element ) {
2010-09-03 20:54:40 +00:00
if ( element . element . options ( 'id' ) == id ) {
2010-07-17 08:46:27 +00:00
position = i ;
2010-07-07 07:18:38 +00:00
return false ;
}
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('getPositionById', id, position);
2010-07-07 07:18:38 +00:00
return position ;
}
2010-07-06 18:28:58 +00:00
function getSize ( element ) {
2011-01-03 18:52:18 +00:00
return element . size + ( element . collapsible || element . resizable ) ;
//return (element.size + (element.collapsible || element.resizable)) * !element.collapsed;
}
function getVisibleSize ( element ) {
return getSize ( element ) * ! element . collapsed ;
2010-07-06 18:28:58 +00:00
}
2011-01-03 18:52:18 +00:00
function setSizes ( init ) {
self . options . elements . forEach ( function ( v , i ) {
2011-01-18 04:07:33 +00:00
// fixme: maybe we can add a conditional here, since init
// is about elements that are collapsed splitpanels
2011-01-03 18:52:18 +00:00
var edges = [
( init && parseInt ( that . $elements [ i ] . css ( self . edges [ 0 ] ) ) ) || 0 ,
( init && parseInt ( that . $elements [ i ] . css ( self . edges [ 1 ] ) ) ) || 0
] ;
2010-09-03 20:54:40 +00:00
v . size != 'auto' && that . $elements [ i ] . css ( self . dimensions [ 0 ] , v . size + 'px' ) ;
2010-07-07 07:18:38 +00:00
if ( i == 0 ) {
2011-01-03 18:52:18 +00:00
that . $elements [ i ] . css (
self . edges [ 0 ] , edges [ 0 ] + 'px'
) ;
2010-11-28 15:06:47 +00:00
that . $elements [ i ] . css (
2010-09-03 20:54:40 +00:00
self . edges [ 1 ] , ( getSize ( self . options . elements [ 1 ] ) + ( length == 3 ? getSize ( self . options . elements [ 2 ] ) : 0 ) ) + 'px'
2010-07-07 07:18:38 +00:00
) ;
} else if ( i == 1 ) {
2010-11-28 15:06:47 +00:00
that . $elements [ i ] . css (
2011-01-03 18:52:18 +00:00
self . edges [ 0 ] , self . options . elements [ 0 ] . size == 'auto' ? 'auto' :
edges [ 0 ] + getSize ( self . options . elements [ 0 ] ) + 'px'
2010-07-07 07:18:38 +00:00
) ;
2010-09-03 20:54:40 +00:00
( self . options . elements [ 0 ] . size != 'auto' || v . size != 'auto' ) && that . $elements [ i ] . css (
self . edges [ 1 ] , ( self . length == 3 ? getSize ( self . options . elements [ 2 ] ) : 0 ) + 'px'
2010-07-07 07:18:38 +00:00
) ;
} else {
2011-01-03 18:52:18 +00:00
that . $elements [ i ] . css (
2011-01-04 02:18:19 +00:00
self . edges [ 0 ] , ( self . options . elements [ 1 ] . size == 'auto' || v . size == 'auto' ) ? 'auto' :
2011-01-03 18:52:18 +00:00
( getVisibleSize ( self . options . elements [ 0 ] ) + getVisibleSize ( self . options . elements [ 1 ] ) ) + 'px'
2010-11-28 15:06:47 +00:00
) ;
2011-01-03 18:52:18 +00:00
that . $elements [ i ] . css (
self . edges [ 1 ] , edges [ 1 ] + 'px'
2010-07-07 07:18:38 +00:00
) ;
}
2010-09-17 16:37:11 +00:00
if ( v . collapsible || v . resizable ) {
self . $resizebars [ i == 0 ? 0 : 1 ] . css ( self . edges [ i == 0 ? 0 : 1 ] , v . size ) ;
}
2010-07-07 07:18:38 +00:00
} ) ;
}
2010-07-17 08:46:27 +00:00
that . isCollapsed = function ( id ) {
2010-11-28 15:06:47 +00:00
var pos = Ox . isNumber ( id ) ? id : getPositionById ( id ) ;
return self . options . elements [ pos ] . collapsed ;
2010-07-17 08:46:27 +00:00
} ;
2011-01-03 12:01:38 +00:00
that . replace = function ( id , element ) { // fixme: should be replaceElement
2010-09-03 20:54:40 +00:00
// one can pass pos instead of id
var pos = Ox . isNumber ( id ) ? id : getPositionById ( id ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('replace', pos, element);
//Ox.print('element', self.options.elements[pos].element, element)
2010-09-03 20:54:40 +00:00
that . $elements [ pos ] = element
2011-01-03 18:52:18 +00:00
. css ( self . edges [ 2 ] , ( parseInt ( element . css ( self . edges [ 2 ] ) ) || 0 ) + 'px' )
. css ( self . edges [ 3 ] , ( parseInt ( element . css ( self . edges [ 3 ] ) ) || 0 ) + 'px' ) ;
2011-01-04 21:29:47 +00:00
//alert(element.css(self.edges[3]))
self . options . elements [ pos ] . element . replaceWith ( element . $element . $element || element . $element ) ;
self . options . elements [ pos ] . element = element ;
2010-09-03 20:54:40 +00:00
setSizes ( ) ;
2010-12-23 01:04:47 +00:00
self . $resizebars . forEach ( function ( $resizebar , i ) {
$resizebar . options ( {
elements : [
that . $elements [ self . resizebarElements [ i ] [ 0 ] ] ,
that . $elements [ self . resizebarElements [ i ] [ 1 ] ]
]
} ) ;
2011-01-02 10:52:59 +00:00
} ) ;
2011-01-13 12:43:20 +00:00
//Ox.print(self.options.elements[pos])
2010-12-29 06:50:40 +00:00
return that ;
2010-09-03 20:54:40 +00:00
} ;
2010-12-23 02:34:31 +00:00
that . replaceElements = function ( elements ) {
elements . forEach ( function ( element , i ) {
if ( Ox . isNumber ( element . size ) ) {
that . size ( i , element . size ) ;
if ( element . collapsible || element . resizable ) {
self . $resizebars [ i == 0 ? 0 : 1 ] . options ( {
collapsible : element . collapsible ,
resizable : element . resizable ,
size : element . size
} ) ;
}
}
that . replace ( i , element . element ) ;
} ) ;
self . options . elements = elements ;
2011-01-02 10:52:59 +00:00
self . $resizebars . forEach ( function ( $resizebar , i ) {
$resizebar . options ( {
elements : [
that . $elements [ self . resizebarElements [ i ] [ 0 ] ] ,
that . $elements [ self . resizebarElements [ i ] [ 1 ] ]
]
} ) ;
} ) ;
2010-12-29 06:50:40 +00:00
return that ;
2010-12-23 02:34:31 +00:00
}
2010-11-25 10:05:50 +00:00
that . size = function ( id , size ) {
2010-07-07 07:18:38 +00:00
// one can pass pos instead of id
2010-12-23 02:34:31 +00:00
var pos = Ox . isNumber ( id ) ? id : getPositionById ( id ) ,
element = self . options . elements [ pos ] ;
2010-11-28 15:06:47 +00:00
if ( arguments . length == 1 ) {
2010-12-23 02:34:31 +00:00
return element . element [ self . dimensions [ 0 ] ] ( ) * ! that . isCollapsed ( pos ) ;
2010-11-28 15:06:47 +00:00
} else {
2010-12-23 02:34:31 +00:00
element . size = size ;
2010-11-28 15:06:47 +00:00
setSizes ( ) ;
return that ;
}
2010-07-07 07:18:38 +00:00
} ;
2010-07-17 08:46:27 +00:00
that . toggle = function ( id ) {
2011-01-02 10:52:59 +00:00
// one can pass pos instead of id
var pos = Ox . isNumber ( id ) ? id : getPositionById ( id ) ,
2010-11-28 15:06:47 +00:00
element = self . options . elements [ pos ] ,
value = parseInt ( that . css ( self . edges [ pos == 0 ? 0 : 1 ] ) ) +
element . element [ self . dimensions [ 0 ] ] ( ) *
( element . collapsed ? 1 : - 1 ) ,
2010-07-17 08:46:27 +00:00
animate = { } ;
2010-11-28 15:06:47 +00:00
animate [ self . edges [ pos == 0 ? 0 : 1 ] ] = value ;
2011-01-18 04:07:33 +00:00
that . animate ( animate , 200 , function ( ) { // fixme: 250?
2011-01-03 14:00:28 +00:00
element . collapsed = ! element . collapsed ;
element . element . triggerEvent ( 'toggle' , {
'collapsed' : element . collapsed
} ) ;
element = self . options . elements [ pos == 0 ? 1 : pos - 1 ] ;
element . element . triggerEvent (
2010-11-28 15:06:47 +00:00
'resize' ,
2011-01-03 14:00:28 +00:00
element . element [ self . dimensions [ 0 ] ] ( )
2010-11-28 15:06:47 +00:00
) ;
2010-07-17 08:46:27 +00:00
} ) ;
} ;
2011-01-03 18:52:18 +00:00
that . updateSize = function ( pos , size ) {
2010-12-23 01:04:47 +00:00
// this is called from resizebar
2011-01-03 18:52:18 +00:00
var pos = pos == 0 ? 0 : self . options . elements . length - 1 ; // fixme: silly that 0 or 1 is passed, and not pos
2010-12-23 01:04:47 +00:00
self . options . elements [ pos ] . size = size ;
}
2010-01-07 20:21:07 +00:00
return that ;
2010-07-06 18:28:58 +00:00
2010-01-07 20:21:07 +00:00
} ;
2010-02-10 16:37:26 +00:00
Ox . TabPanel = function ( options , self ) {
} ;
2010-02-20 08:29:03 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Requests
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2010-01-27 12:30:00 +00:00
2010-12-06 17:42:45 +00:00
/ * *
2010-02-20 08:29:03 +00:00
* /
Ox . LoadingIcon = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'img' , self )
2010-02-20 08:29:03 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
size : 'medium'
2010-02-20 08:29:03 +00:00
} )
. options ( options || { } )
. attr ( {
2010-09-03 20:54:40 +00:00
src : oxui . path + '/png/ox.ui.' + Ox . theme ( ) + '/loading.png' // fixme: oxui.themePath needed?
2010-02-20 08:29:03 +00:00
} )
. addClass (
2010-09-03 20:54:40 +00:00
'OxLoadingIcon Ox' + Ox . toTitleCase ( self . options . size )
2010-02-20 08:29:03 +00:00
) ;
self . deg = 0 ;
2010-07-01 23:51:08 +00:00
self . interval = 0 ;
self . isRunning = false ;
function clear ( ) {
clearInterval ( self . interval ) ;
self . deg = 0 ;
self . interval = 0 ;
update ( ) ;
}
2010-02-20 08:29:03 +00:00
function update ( ) {
that . css ( {
2010-09-03 20:54:40 +00:00
MozTransform : 'rotate(' + self . deg + 'deg)' ,
WebkitTransform : 'rotate(' + self . deg + 'deg)'
2010-02-20 08:29:03 +00:00
} ) ;
}
that . start = function ( ) {
2010-07-01 23:51:08 +00:00
self . isRunning = true ;
clear ( ) ;
that . animate ( {
opacity : 1
} , 250 ) ;
self . interval = setInterval ( function ( ) {
self . deg = ( self . deg + 30 ) % 360 ;
update ( ) ;
} , 83 ) ;
2010-09-03 08:47:40 +00:00
return that ;
2010-02-20 08:29:03 +00:00
} ;
that . stop = function ( ) {
2010-07-01 23:51:08 +00:00
that . animate ( {
opacity : 0
} , 250 , function ( ) {
2011-01-03 18:52:18 +00:00
self . isRunning && clear ( ) ;
2010-07-01 23:51:08 +00:00
self . isRunning = false ;
} ) ;
2010-09-03 08:47:40 +00:00
return that ;
2010-02-20 08:29:03 +00:00
}
return that ;
}
2010-12-06 17:42:45 +00:00
/ * *
2010-02-20 08:29:03 +00:00
Ox . Progressbar
* /
2010-01-27 12:30:00 +00:00
2010-09-17 22:10:07 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Video
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2011-02-03 21:39:22 +00:00
Ox . AnnotationPanel = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
id : '' ,
2011-02-03 22:58:31 +00:00
items : [ ] ,
2011-02-03 21:39:22 +00:00
title : '' ,
2011-02-07 05:34:18 +00:00
type : 'text' ,
width : 0
2011-02-03 21:39:22 +00:00
} )
. options ( options || { } ) ;
2011-02-07 05:34:18 +00:00
self . selected = - 1 ;
2011-02-03 21:39:22 +00:00
that . $element = new Ox . CollapsePanel ( {
collapsed : false ,
2011-02-03 22:58:31 +00:00
extras : [
new Ox . Button ( {
id : 'add' ,
style : 'symbol' ,
title : 'Add' ,
type : 'image'
2011-02-11 14:44:32 +00:00
} ) . bindEvent ( {
click : function ( event , data ) {
that . triggerEvent ( 'add' , { value : '' } ) ;
}
2011-02-03 22:58:31 +00:00
} )
] ,
2011-02-03 21:39:22 +00:00
size : 16 ,
title : self . options . title
} )
2011-02-03 22:58:31 +00:00
. addClass ( 'OxAnnotationPanel' )
2011-02-03 21:39:22 +00:00
. bindEvent ( {
toggle : togglePanel
} ) ;
2011-02-03 22:58:31 +00:00
that . $content = that . $element . $content ;
2011-02-07 05:34:18 +00:00
self . $annotations = new Ox . List ( {
construct : function ( data ) {
return new Ox . Element ( 'div' )
2011-02-09 17:56:35 +00:00
. addClass ( 'OxAnnotation OxEditable OxTarget' )
. html ( Ox . parseHTML ( data . value ) ) ;
2011-02-07 05:34:18 +00:00
} ,
items : $ . map ( self . options . items , function ( v , i ) {
2011-02-07 21:44:21 +00:00
return {
2011-02-09 17:56:35 +00:00
id : v . id || i + '' ,
value : v . value
2011-02-07 21:44:21 +00:00
} ;
2011-02-07 05:34:18 +00:00
} ) ,
2011-02-07 21:44:21 +00:00
unique : 'id'
2011-02-07 05:34:18 +00:00
} )
. bindEvent ( {
2011-02-09 17:56:35 +00:00
open : function ( event , data ) {
2011-02-11 14:44:32 +00:00
if ( data . ids . length == 1 ) {
var pos = Ox . getPositionById ( self . $annotations . options ( 'items' ) , data . ids [ 0 ] ) ;
self . $annotations . editItem ( pos ) ;
}
} ,
'delete' : function ( event , data ) {
that . triggerEvent ( 'delete' , data ) ;
2011-02-09 17:56:35 +00:00
} ,
select : selectAnnotation ,
submit : updateAnnotation
2011-02-07 05:34:18 +00:00
} )
. appendTo ( that . $content ) ;
/ *
2011-02-03 22:58:31 +00:00
self . $annotations = new Ox . Element ( 'div' )
. appendTo ( that . $content ) ;
2011-02-07 05:34:18 +00:00
self . $annotation = [ ] ;
2011-02-03 22:58:31 +00:00
self . options . items . forEach ( function ( item , i ) {
2011-02-07 05:34:18 +00:00
self . $annotation [ i ] = new Ox . Element ( 'div' )
2011-02-03 22:58:31 +00:00
. addClass ( 'OxAnnotation' )
2011-02-07 05:34:18 +00:00
. html ( item . value . replace ( /\n/g , '<br/>' ) )
. click ( function ( ) {
clickAnnotation ( i ) ;
} )
2011-02-03 22:58:31 +00:00
. appendTo ( self . $annotations ) ;
} ) ;
2011-02-07 05:34:18 +00:00
* /
2011-02-09 17:56:35 +00:00
function selectAnnotation ( event , data ) {
var item = Ox . getObjectById ( self . options . items , data . ids [ 0 ] ) ;
that . triggerEvent ( 'select' , {
2011-02-22 10:02:28 +00:00
'in' : item [ 'in' ] ,
2011-02-22 09:34:43 +00:00
'out' : item . out ,
2011-02-22 13:08:47 +00:00
'layer' : self . options . id
2011-02-09 17:56:35 +00:00
} ) ;
}
function updateAnnotation ( event , data ) {
var item = Ox . getObjectById ( self . options . items , data . id ) ;
item . value = data . value ;
that . triggerEvent ( 'submit' , item ) ;
2011-02-07 05:34:18 +00:00
}
2011-02-03 21:39:22 +00:00
function togglePanel ( ) {
}
2011-02-11 14:44:32 +00:00
that . addItem = function ( item ) {
var pos = 0 ;
self . options . items . splice ( pos , 0 , item ) ;
self . $annotations . addItems ( pos , [ item ] ) ;
self . $annotations . editItem ( pos ) ;
}
that . removeItems = function ( ids ) {
self . $annotations . removeItems ( ids ) ;
}
2011-02-22 13:08:47 +00:00
that . deselectItems = function ( ) {
if ( self . $annotations . options ( 'selected' ) )
self . $annotations . options ( 'selected' , [ ] ) ;
}
2011-02-03 21:39:22 +00:00
return that ;
} ;
2011-01-17 21:12:17 +00:00
Ox . BlockTimeline = function ( options , self ) {
2010-09-17 22:10:07 +00:00
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
cuts : [ ] ,
duration : 0 ,
find : '' ,
matches : [ ] ,
points : [ 0 , 0 ] ,
position : 0 ,
subtitles : [ ] ,
videoId : '' ,
width : 0
} )
. options ( options || { } )
. addClass ( 'OxTimelineSmall' )
. mousedown ( mousedown )
. mouseleave ( mouseleave )
2011-01-16 19:02:29 +00:00
. mousemove ( mousemove )
. bindEvent ( {
drag : function ( event , e ) {
mousedown ( e ) ;
}
} ) ;
2010-09-17 22:10:07 +00:00
$ . extend ( self , {
$images : [ ] ,
$lines : [ ] ,
$markerPoint : [ ] ,
2011-02-09 17:56:35 +00:00
$selection : [ ] ,
2010-09-17 22:10:07 +00:00
$subtitles : [ ] ,
hasSubtitles : self . options . subtitles . length ,
height : 16 ,
lines : Math . ceil ( self . options . duration / self . options . width ) ,
margin : 8
} ) ;
2010-11-25 10:05:50 +00:00
that . css ( {
2010-11-28 15:06:47 +00:00
width : ( self . options . width + self . margin ) + 'px' ,
2010-11-25 10:05:50 +00:00
height : ( ( self . height + self . margin ) * self . lines + 4 ) + 'px'
} ) ;
2010-09-17 22:10:07 +00:00
getTimelineImageURL ( function ( url ) {
self . timelineImageURL = url ;
$ . each ( Ox . range ( 0 , self . lines ) , function ( i ) {
addLine ( i ) ;
} ) ;
self . $markerPosition = $ ( '<img>' )
. addClass ( 'OxMarkerPosition' )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
} )
. css ( {
position : 'absolute' ,
width : '9px' ,
height : '5px' ,
zIndex : 10
} )
. appendTo ( that . $element ) ;
setPosition ( ) ;
$ . each ( [ 'in' , 'out' ] , function ( i , v ) {
var titleCase = Ox . toTitleCase ( v ) ;
self . $markerPoint [ i ] = $ ( '<img>' )
. addClass ( 'OxMarkerPoint' + titleCase )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarker' + titleCase + '.png'
} )
. appendTo ( that . $element ) ;
setMarkerPoint ( i ) ;
} ) ;
} ) ;
function addLine ( i ) {
2011-02-09 17:56:35 +00:00
// fixme: get URLs once, not once for every line
2010-09-17 22:10:07 +00:00
self . $lines [ i ] = new Ox . Element ( 'div' )
. css ( {
top : i * ( self . height + self . margin ) + 'px' ,
width : self . options . width + 'px'
} )
. appendTo ( that ) ;
self . $images [ i ] = $ ( '<img>' )
. addClass ( 'OxTimelineSmallImage' )
. attr ( {
src : self . timelineImageURL
} )
. css ( {
marginLeft : ( - i * self . options . width ) + 'px'
} )
. appendTo ( self . $lines [ i ] . $element )
if ( self . hasSubtitles ) {
self . subtitlesImageURL = getSubtitlesImageURL ( ) ;
self . $subtitles [ i ] = $ ( '<img>' )
2011-01-16 19:02:29 +00:00
. addClass ( 'OxTimelineSmallSubtitles' )
2010-09-17 22:10:07 +00:00
. attr ( {
src : self . subtitlesImageURL
} )
. css ( {
marginLeft : ( - i * self . options . width ) + 'px'
} )
. appendTo ( self . $lines [ i ] . $element ) ;
}
2011-02-09 17:56:35 +00:00
if ( self . options . points [ 0 ] != self . options . points [ 1 ] ) {
addSelection [ i ] ;
}
}
function addSelection ( i ) {
self . selectionImageURL = getSelectionImageURL ( ) ;
self . $selection [ i ] && self . $selection [ i ] . remove ( ) ;
self . $selection [ i ] = $ ( '<img>' )
. addClass ( 'OxTimelineSmallSelection' )
. attr ( {
src : self . selectionImageURL
} )
. css ( {
marginLeft : ( - i * self . options . width ) + 'px'
} )
. appendTo ( self . $lines [ i ] . $element ) ;
2010-09-17 22:10:07 +00:00
}
function getPosition ( e ) {
//FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
2010-09-17 22:16:42 +00:00
return ( e . offsetX ? e . offsetX : e . clientX - $ ( e . target ) . offset ( ) . left ) ;
2010-09-17 22:10:07 +00:00
}
2011-02-09 17:56:35 +00:00
function getSelectionImageURL ( ) {
var height = 18 ,
width = Math . ceil ( self . options . duration ) ,
$canvas = $ ( '<canvas>' )
. attr ( {
height : height ,
width : width
} ) ,
canvas = $canvas [ 0 ] ,
context = canvas . getContext ( '2d' ) ,
imageData = context . createImageData ( width , height ) ,
data = imageData . data ,
points = $ . map ( self . options . points , function ( v , i ) {
return Math . round ( v ) + i ;
} ) ,
top = 0 ,
bottom = 18 ;
$ . each ( Ox . range ( points [ 0 ] , points [ 1 ] ) , function ( i , x ) {
$ . each ( Ox . range ( top , bottom ) , function ( i , y ) {
var color = ( y == top || y == bottom - 1 ) ? [ 255 , 255 , 255 , 255 ] : [ 255 , 255 , 255 , 64 ] ,
index = x * 4 + y * 4 * width ;
data [ index ] = color [ 0 ] ;
data [ index + 1 ] = color [ 1 ] ;
data [ index + 2 ] = color [ 2 ] ;
data [ index + 3 ] = color [ 3 ]
} ) ;
} ) ;
context . putImageData ( imageData , 0 , 0 ) ;
return canvas . toDataURL ( ) ;
}
2010-09-17 22:10:07 +00:00
function getSubtitle ( position ) {
var subtitle = null ;
$ . each ( self . options . subtitles , function ( i , v ) {
if ( v [ 'in' ] <= position && v [ 'out' ] >= position ) {
subtitle = v ;
return false ;
}
} ) ;
return subtitle ;
}
function getSubtitlesImageURL ( ) {
var height = 18 ,
width = Math . ceil ( self . options . duration ) ,
$canvas = $ ( '<canvas>' )
. attr ( {
height : height ,
width : width
} ) ,
canvas = $canvas [ 0 ] ,
context = canvas . getContext ( '2d' ) ,
imageData = context . createImageData ( width , height ) ,
data = imageData . data ;
$ . each ( self . options . subtitles , function ( i , v ) {
2011-02-09 17:56:35 +00:00
//var color = self.options.matches.indexOf(i) > -1 ? [255, 255, 0] : [255, 255, 255]
2011-02-22 10:02:28 +00:00
var inPoint = Math . round ( v [ 'in' ] ) ,
2011-02-09 17:56:35 +00:00
outPoint = Math . round ( v . out ) + 1 ,
lines = v . value . split ( '\n' ) . length ,
bottom = 15 ,
top = bottom - lines - 2 ;
$ . each ( Ox . range ( inPoint , outPoint ) , function ( i , x ) {
$ . each ( Ox . range ( top , bottom ) , function ( i , y ) {
var color = ( y == top || y == bottom - 1 ) ? [ 0 , 0 , 0 ] : [ 255 , 255 , 255 ] ,
index = x * 4 + y * 4 * width ;
2010-09-17 22:10:07 +00:00
data [ index ] = color [ 0 ] ;
data [ index + 1 ] = color [ 1 ] ;
data [ index + 2 ] = color [ 2 ] ;
2011-02-09 17:56:35 +00:00
data [ index + 3 ] = 128
2010-09-17 22:10:07 +00:00
} ) ;
} ) ;
} ) ;
context . putImageData ( imageData , 0 , 0 ) ;
return canvas . toDataURL ( ) ;
}
function getTimelineImageURL ( callback ) {
var height = 16 ,
images = Math . ceil ( self . options . duration / 3600 ) ,
loaded = 0 ,
width = Math . ceil ( self . options . duration ) ,
$canvas = $ ( '<canvas>' )
. attr ( {
height : height ,
width : width
} ) ,
canvas = $canvas [ 0 ] ,
context = canvas . getContext ( '2d' ) ;
Ox . range ( images ) . forEach ( function ( i ) {
var $img = $ ( '<img>' )
. attr ( {
src : '/' + self . options . videoId + '/timelines/timeline.16.' + i + '.png'
} )
. load ( function ( ) {
context . drawImage ( $img [ 0 ] , i * 3600 , 0 ) ;
2011-01-13 12:43:20 +00:00
//Ox.print('loaded, images', loaded, images, $img[0])
2010-09-17 22:10:07 +00:00
if ( ++ loaded == images ) {
2011-01-13 12:43:20 +00:00
//Ox.print('callback', canvas.toDataURL().length)
2010-09-17 22:10:07 +00:00
callback ( canvas . toDataURL ( ) ) ;
}
} ) ;
} ) ;
}
function mousedown ( e ) {
2011-01-16 19:02:29 +00:00
var $target = $ ( e . target ) ;
if (
$target . hasClass ( 'OxTimelineSmallImage' ) ||
2011-02-09 17:56:35 +00:00
$target . hasClass ( 'OxTimelineSmallSubtitles' ) ||
$target . hasClass ( 'OxTimelineSmallSelection' )
2011-01-16 19:02:29 +00:00
) {
2010-09-17 22:10:07 +00:00
self . options . position = getPosition ( e ) ;
setPosition ( ) ;
that . triggerEvent ( 'change' , {
position : self . options . position
} ) ;
}
e . preventDefault ( ) ;
}
function mouseleave ( e ) {
2011-01-16 19:02:29 +00:00
self . $tooltip && self . $tooltip . hide ( ) ;
2010-09-17 22:10:07 +00:00
}
function mousemove ( e ) {
var $target = $ ( e . target ) ,
position ,
subtitle ;
2011-01-16 19:02:29 +00:00
if (
$target . hasClass ( 'OxTimelineSmallImage' ) ||
2011-02-09 17:56:35 +00:00
$target . hasClass ( 'OxTimelineSmallSubtitles' ) ||
$target . hasClass ( 'OxTimelineSmallSelection' )
2011-01-16 19:02:29 +00:00
) {
2010-09-17 22:10:07 +00:00
position = getPosition ( e ) ,
subtitle = getSubtitle ( position ) ;
self . $tooltip = new Ox . Tooltip ( {
title : subtitle ?
'<span class=\'OxBright\'>' +
2011-01-28 09:31:12 +00:00
Ox . highlight ( subtitle . value , self . options . find ) . replace ( /\n/g , '<br/>' ) + '</span><br/>' +
2010-09-17 22:10:07 +00:00
Ox . formatDuration ( subtitle [ 'in' ] , 3 ) + ' - ' + Ox . formatDuration ( subtitle [ 'out' ] , 3 ) :
Ox . formatDuration ( position , 3 )
} )
. css ( {
textAlign : 'center'
} )
. show ( e . clientX , e . clientY ) ;
2011-01-16 19:02:29 +00:00
} else {
self . $tooltip && self . $tooltip . hide ( ) ;
2010-09-17 22:10:07 +00:00
}
}
function setMarker ( ) {
self . $markerPosition
. css ( {
left : ( self . options . position % self . options . width ) + 'px' ,
top : ( parseInt ( self . options . position / self . options . width ) * ( self . height + self . margin ) + 2 ) + 'px' ,
} ) ;
}
function setMarkerPoint ( i ) {
2011-02-09 17:56:35 +00:00
var position = Math . round ( self . options . points [ i ] ) ;
2010-09-17 22:10:07 +00:00
self . $markerPoint [ i ]
. css ( {
left : ( position % self . options . width ) + 'px' ,
top : ( parseInt ( position / self . options . width ) * ( self . height + self . margin ) + 16 ) + 'px' ,
} ) ;
}
function setPosition ( ) {
self . options . position = Ox . limit ( self . options . position , 0 , self . options . duration ) ;
setMarker ( ) ;
}
function setWidth ( ) {
self . lines = Math . ceil ( self . options . duration / self . options . width ) ;
2010-11-28 15:06:47 +00:00
that . css ( {
width : ( self . options . width + self . margin ) + 'px' ,
height : ( ( self . height + self . margin ) * self . lines + 4 ) + 'px'
} ) ;
2010-09-17 22:10:07 +00:00
$ . each ( Ox . range ( self . lines ) , function ( i ) {
if ( self . $lines [ i ] ) {
self . $lines [ i ] . css ( {
width : self . options . width + 'px'
} ) ;
self . $images [ i ] . css ( {
marginLeft : ( - i * self . options . width ) + 'px'
} ) ;
if ( self . hasSubtitles ) {
self . $subtitles [ i ] . css ( {
marginLeft : ( - i * self . options . width ) + 'px'
} ) ;
}
} else {
addLine ( i ) ;
}
} ) ;
while ( self . $lines . length > self . lines ) {
self . $lines [ self . $lines . length - 1 ] . remove ( ) ;
self . $lines . pop ( ) ;
}
setMarker ( ) ;
setMarkerPoint ( 0 ) ;
setMarkerPoint ( 1 ) ;
}
2011-02-09 17:56:35 +00:00
function updateSelection ( ) {
self . $lines . forEach ( function ( $line , i ) {
addSelection ( i ) ;
} ) ;
}
2010-09-17 22:10:07 +00:00
self . onChange = function ( key , value ) {
2011-01-13 12:43:20 +00:00
//Ox.print('onChange:', key, value)
2010-09-17 22:10:07 +00:00
if ( key == 'points' ) {
2011-01-13 12:43:20 +00:00
//Ox.print('key', key, 'value', value)
2010-09-17 22:10:07 +00:00
setMarkerPoint ( 0 ) ;
setMarkerPoint ( 1 ) ;
2011-02-09 17:56:35 +00:00
updateSelection ( )
2010-09-17 22:10:07 +00:00
} else if ( key == 'position' ) {
setPosition ( ) ;
} else if ( key == 'width' ) {
setWidth ( ) ;
}
} ;
return that ;
} ;
2011-02-02 12:01:22 +00:00
Ox . Flipbook = function ( options , self ) {
var self = self || { } ,
frame = $ ( '<img>' ) . css ( {
'position' : 'absolute' ,
'width' : '100%' ,
'height' : 'auto'
} )
. hide ( ) ,
icon = $ ( '<img>' ) . css ( {
'position' : 'absolute' ,
'width' : '100%' ,
'height' : 'auto'
} ) ,
frames = { } ,
timestamp = $ ( '<div>' ) . css ( {
'position' : 'absolute' ,
'text-align' : 'center' ,
'width' : '100%' ,
} )
. hide ( ) ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
frames : { } ,
duration : 0 ,
icon : '' ,
} )
. options ( options || { } )
. append ( icon )
. append ( frame )
. append ( timestamp )
. mouseover ( function ( ) {
frame . show ( ) ;
timestamp . show ( ) ;
icon . hide ( ) ;
} )
. mousemove ( function ( event ) {
var position = getPosition ( event ) ,
image = getFrame ( position ) ,
2011-02-25 20:13:31 +00:00
frameHeight = image ? image . height : that . height ( ) ;
2011-02-02 12:01:22 +00:00
frame . attr ( 'src' , image . src ) ;
timestamp . html ( Ox . formatDuration ( position , 'short' ) ) ;
var height = ( that . height ( ) - frameHeight ) / 2 ;
frame . css ( { 'top' : height + 'px' } ) ;
timestamp . css ( { 'top' : ( frameHeight + height ) + 'px' } ) ;
} )
. mouseout ( function ( ) {
frame . hide ( ) ;
timestamp . hide ( ) ;
icon . show ( ) ;
} )
. mousedown ( function ( event ) {
that . triggerEvent ( 'click' , {
'position' : getPosition ( event )
} ) ;
} ) ;
function getPosition ( event ) {
var position = Math . floor ( event . clientX - that . offset ( ) . left ) ;
position = ( position / that . width ( ) ) * self . options . duration ;
return position ;
}
function getFrame ( position ) {
var frame ;
$ . each ( frames , function ( i , img ) {
if ( ! frame || i <= position )
frame = img ;
} ) ;
return frame ;
}
function cacheFrames ( ) {
$ . each ( self . options . frames , function ( i , src ) {
frames [ i ] = new Image ( ) ;
frames [ i ] . onload = function ( ) {
frameHeight = frames [ i ] . height / frames [ i ] . width * that . width ( ) ;
}
frames [ i ] . src = src ;
} ) ;
}
self . onChange = function ( key , value ) {
if ( key == 'frames' ) {
cacheFrames ( ) ;
} else if ( key == 'icon' ) {
icon . attr ( 'src' , value ) ;
}
}
if ( options . icon )
icon . attr ( 'src' , options . icon ) ;
cacheFrames ( ) ;
return that ;
} ;
2011-01-17 21:12:17 +00:00
Ox . LargeTimeline = function ( options , self ) {
2010-09-17 22:10:07 +00:00
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
cuts : [ ] ,
duration : 0 ,
find : '' ,
matches : [ ] ,
points : [ 0 , 0 ] ,
position : 0 ,
2011-01-17 21:12:17 +00:00
style : 'default' ,
2010-09-17 22:10:07 +00:00
subtitles : [ ] ,
videoId : '' ,
width : 0
} )
. options ( options || { } )
2011-01-17 21:12:17 +00:00
. addClass ( 'OxTimelineLarge' )
. mouseleave ( mouseleave )
. mousemove ( mousemove )
. bindEvent ( {
anyclick : click ,
dragstart : dragstart ,
drag : drag
} ) ;
2011-01-03 12:01:38 +00:00
2010-09-17 22:10:07 +00:00
$ . extend ( self , {
2011-01-17 21:12:17 +00:00
$cuts : [ ] ,
$markerPoint : [ ] ,
$subtitles : [ ] ,
$tiles : { } ,
$tooltip : new Ox . Tooltip ( ) ,
center : parseInt ( self . options . width / 2 ) ,
element : that . $element [ 0 ] ,
fps : 25 ,
height : 64 ,
tileWidth : 1500
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
self . tiles = self . options . duration * self . fps / self . tileWidth ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self . $timeline = $ ( '<div>' )
. css ( {
left : self . center + 'px'
} )
. appendTo ( that . $element )
$ . each ( self . options . subtitles , function ( i , v ) {
self . $subtitles [ i ] = $ ( '<div>' )
. addClass ( 'OxSubtitle' + ( self . options . matches . indexOf ( i ) > - 1 ? ' OxHighlight' : '' ) )
2010-09-17 22:10:07 +00:00
. css ( {
2011-01-17 21:12:17 +00:00
left : ( v [ 'in' ] * self . fps ) + 'px' ,
2011-02-09 17:56:35 +00:00
width : ( ( ( v [ 'out' ] - v [ 'in' ] ) * self . fps ) - 2 ) + 'px'
2010-09-17 22:10:07 +00:00
} )
2011-01-28 09:31:12 +00:00
. html ( Ox . highlight ( v . value , self . options . find ) )
2011-01-17 21:12:17 +00:00
. appendTo ( self . $timeline )
2010-09-18 00:15:15 +00:00
} ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
$ . each ( self . options . cuts , function ( i , v ) {
self . $cuts [ i ] = $ ( '<img>' )
. addClass ( 'OxCut' )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarkerCut.png'
} )
. css ( {
left : ( v * self . fps ) + 'px'
} )
. appendTo ( self . $timeline )
} ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self . $markerPosition = $ ( '<img>' )
. addClass ( 'OxMarkerPosition' )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
2010-09-17 22:10:07 +00:00
} )
2011-01-17 21:12:17 +00:00
. appendTo ( that . $element ) ;
setMarker ( ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
$ . each ( [ 'In' , 'Out' ] , function ( i , v ) {
self . $markerPoint [ i ] = $ ( '<img>' )
. addClass ( 'OxMarkerPoint' + v )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarker' + v + '.png'
} )
. appendTo ( self . $timeline ) ;
setMarkerPoint ( i ) ;
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
setWidth ( ) ;
setPosition ( ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
function click ( event , e ) {
self . options . position = Ox . limit (
2011-02-09 17:56:35 +00:00
self . options . position + ( e . clientX - that . $element . offset ( ) . left - self . center - 1 ) / self . fps ,
2011-01-17 21:12:17 +00:00
0 , self . options . duration
) ;
setPosition ( ) ;
triggerChangeEvent ( ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function dragstart ( event , e ) {
self . drag = { x : e . clientX } ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function drag ( event , e ) {
self . options . position = Ox . limit (
self . options . position + ( self . drag . x - e . clientX ) / self . fps ,
0 , self . options . duration
) ;
self . drag . x = e . clientX ;
setPosition ( ) ;
triggerChangeEvent ( ) ;
}
function mouseleave ( e ) {
self . clientX = 0 ;
self . clientY = 0 ;
self . $tooltip . hide ( ) ;
}
function mousemove ( e ) {
self . clientX = e . clientX ;
self . clientY = e . clientY ;
updateTooltip ( ) ;
}
function setMarkerPoint ( i ) {
self . $markerPoint [ i ] . css ( {
left : ( self . options . points [ i ] * self . fps ) + 'px'
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
}
function setMarker ( ) {
self . $markerPosition . css ( {
left : ( self . center - 4 ) + 'px' ,
2010-09-17 22:10:07 +00:00
} ) ;
}
2011-01-17 21:12:17 +00:00
function setPosition ( ) {
self . tile = parseInt ( self . options . position * self . fps / self . tileWidth ) ;
self . $timeline . css ( {
marginLeft : ( - self . options . position * self . fps ) + 'px'
} ) ;
$ . each ( Ox . range ( Math . max ( self . tile - 1 , 0 ) , Math . min ( self . tile + 2 , self . tiles ) ) , function ( i , v ) {
if ( ! self . $tiles [ v ] ) {
self . $tiles [ v ] = $ ( '<img>' )
. attr ( {
src : '/' + self . options . videoId + '/timelines/' +
( self . options . style == 'default' ? 'timeline' : self . options . style ) + '.64.' + v + '.png'
} )
. css ( {
left : ( v * self . tileWidth ) + 'px'
} )
. appendTo ( self . $timeline ) ;
}
} ) ;
if ( self . clientX && self . clientY ) {
updateTooltip ( ) ;
}
}
function setWidth ( ) {
self . center = parseInt ( self . options . width / 2 ) ;
that . css ( {
width : self . options . width + 'px'
} ) ;
self . $timeline . css ( {
left : self . center + 'px'
} ) ;
setMarker ( ) ;
}
function triggerChangeEvent ( ) {
that . triggerEvent ( 'change' , {
position : self . options . position
} ) ;
}
function updateTooltip ( ) {
2011-02-09 17:56:35 +00:00
// fixme: duplicated, need getPosition(e)
var position = self . options . position + ( self . clientX - that . offset ( ) . left - self . center - 1 ) / self . fps ;
2011-01-17 21:12:17 +00:00
if ( position >= 0 && position <= self . options . duration ) {
self . $tooltip
. options ( {
title : Ox . formatDuration ( position , 3 )
} )
. show ( self . clientX , self . clientY ) ;
} else {
self . $tooltip . hide ( ) ;
}
}
self . onChange = function ( key , value ) {
if ( key == 'points' ) {
setMarkerPoint ( 0 ) ;
setMarkerPoint ( 1 ) ;
} else if ( key == 'position' ) {
setPosition ( ) ;
} else if ( key == 'width' ) {
setWidth ( ) ;
}
} ;
return that ;
} ;
Ox . SmallTimeline = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
duration : 0 ,
find : '' ,
matches : [ ] ,
points : [ 0 , 0 ] ,
position : 0 ,
subtitles : [ ] ,
videoId : '' ,
width : 0
} )
. options ( options || { } )
. addClass ( 'OxTimelineSmall' )
. mousedown ( mousedown )
. mouseleave ( mouseleave )
. mousemove ( mousemove )
. bindEvent ( {
drag : function ( event , e ) {
mousedown ( e ) ;
}
} ) ;
$ . extend ( self , {
$images : [ ] ,
$markerPoint : [ ] ,
$subtitles : [ ] ,
hasSubtitles : self . options . subtitles . length ,
height : 16 ,
margin : 8
} ) ;
that . css ( {
width : ( self . options . width + self . margin ) + 'px' ,
height : ( self . height + self . margin ) + 'px'
} ) ;
self . $line = $ ( '<img>' )
2011-01-18 04:07:33 +00:00
. addClass ( 'OxTimelineSmallImage' )
2011-01-17 21:12:17 +00:00
. attr ( {
src : '/' + self . options . videoId + '/timelines/timeline.16.0.png'
} )
. css ( {
position : 'absolute' ,
left : '4px' ,
2011-01-18 04:07:33 +00:00
top : '4px' ,
2011-01-17 21:12:17 +00:00
width : self . options . width ,
height : '16px'
} )
. appendTo ( that . $element ) ;
self . $markerPosition = $ ( '<img>' )
. addClass ( 'OxMarkerPosition' )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
} )
. css ( {
position : 'absolute' ,
width : '9px' ,
height : '5px' ,
zIndex : 10
} )
. appendTo ( that . $element ) ;
setPosition ( ) ;
$ . each ( [ 'in' , 'out' ] , function ( i , v ) {
var titleCase = Ox . toTitleCase ( v ) ;
self . $markerPoint [ i ] = $ ( '<img>' )
. addClass ( 'OxMarkerPoint' + titleCase )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarker' + titleCase + '.png'
} )
. appendTo ( that . $element ) ;
setMarkerPoint ( i ) ;
} ) ;
function getPosition ( e ) {
2011-01-18 04:07:33 +00:00
return e . offsetX / self . options . width * self . options . duration ;
2011-01-17 21:12:17 +00:00
}
function getSubtitle ( position ) {
var subtitle = null ;
$ . each ( self . options . subtitles , function ( i , v ) {
if ( v [ 'in' ] <= position && v [ 'out' ] >= position ) {
subtitle = v ;
return false ;
}
} ) ;
return subtitle ;
}
function mousedown ( e ) {
var $target = $ ( e . target ) ;
if (
$target . hasClass ( 'OxTimelineSmallImage' ) ||
$target . hasClass ( 'OxTimelineSmallSubtitles' )
) {
self . options . position = getPosition ( e ) ;
setPosition ( ) ;
that . triggerEvent ( 'change' , {
position : self . options . position
} ) ;
}
e . preventDefault ( ) ;
}
function mouseleave ( e ) {
self . $tooltip && self . $tooltip . hide ( ) ;
}
function mousemove ( e ) {
var $target = $ ( e . target ) ,
position ,
subtitle ;
if (
$target . hasClass ( 'OxTimelineSmallImage' ) ||
$target . hasClass ( 'OxTimelineSmallSubtitles' )
) {
position = getPosition ( e ) ,
subtitle = getSubtitle ( position ) ;
self . $tooltip = new Ox . Tooltip ( {
title : subtitle ?
'<span class=\'OxBright\'>' +
2011-01-28 09:31:12 +00:00
Ox . highlight ( subtitle . value , self . options . find ) . replace ( /\n/g , '<br/>' ) + '</span><br/>' +
2011-01-17 21:12:17 +00:00
Ox . formatDuration ( subtitle [ 'in' ] , 3 ) + ' - ' + Ox . formatDuration ( subtitle [ 'out' ] , 3 ) :
Ox . formatDuration ( position , 3 )
} )
. css ( {
textAlign : 'center'
} )
. show ( e . clientX , e . clientY ) ;
} else {
self . $tooltip && self . $tooltip . hide ( ) ;
}
}
function setMarker ( ) {
self . $markerPosition
. css ( {
2011-01-18 04:07:33 +00:00
left : parseInt (
self . options . position / self . options . duration * self . options . width
) + 'px' ,
top : '2px' ,
2011-01-17 21:12:17 +00:00
} ) ;
}
function setMarkerPoint ( i ) {
var position = self . options . points [ i ] ;
self . $markerPoint [ i ]
. css ( {
left : ( position % self . options . width ) + 'px' ,
top : ( parseInt ( position / self . options . width ) * ( self . height + self . margin ) + 16 ) + 'px' ,
} ) ;
}
function setPosition ( ) {
self . options . position = Ox . limit ( self . options . position , 0 , self . options . duration ) ;
setMarker ( ) ;
}
function setWidth ( ) {
2011-01-18 04:07:33 +00:00
self . $line . css ( {
width : self . options . width + 'px' ,
2011-01-17 21:12:17 +00:00
} ) ;
setMarker ( ) ;
setMarkerPoint ( 0 ) ;
setMarkerPoint ( 1 ) ;
}
self . onChange = function ( key , value ) {
//Ox.print('onChange:', key, value)
if ( key == 'points' ) {
//Ox.print('key', key, 'value', value)
setMarkerPoint ( 0 ) ;
setMarkerPoint ( 1 ) ;
} else if ( key == 'position' ) {
setPosition ( ) ;
} else if ( key == 'width' ) {
setWidth ( ) ;
}
} ;
return that ;
} ;
2011-01-18 16:26:16 +00:00
2011-01-17 21:12:17 +00:00
Ox . VideoEditor = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
2011-02-03 21:39:22 +00:00
annotationsSize : 0 ,
2011-01-17 21:12:17 +00:00
cuts : [ ] ,
duration : 0 ,
find : '' ,
frameURL : function ( ) { } ,
2011-02-08 00:00:01 +00:00
fps : 25 , // fixme: doesn't get handed through to player
2011-01-17 21:12:17 +00:00
height : 0 ,
largeTimeline : true ,
2011-02-03 21:39:22 +00:00
layers : [ ] ,
2011-01-17 21:12:17 +00:00
matches : [ ] ,
points : [ 0 , 0 ] ,
position : 0 ,
posterFrame : 0 ,
2011-02-03 21:39:22 +00:00
showAnnotations : false ,
2011-01-17 21:12:17 +00:00
subtitles : [ ] ,
videoHeight : 0 ,
videoId : '' ,
videoWidth : 0 ,
videoSize : 'small' ,
videoURL : '' ,
width : 0
} )
. options ( options || { } )
2011-01-18 18:52:55 +00:00
. mousedown ( function ( ) {
that . gainFocus ( ) ;
} )
. bindEvent ( {
key _shift _0 : function ( ) {
movePositionBy ( - self . options . position ) ;
} ,
key _alt _left : function ( ) {
} ,
key _alt _right : function ( ) {
} ,
key _alt _shift _left : function ( ) {
} ,
key _alt _shift _right : function ( ) {
} ,
key _backslash : function ( ) {
2011-02-07 21:44:21 +00:00
select ( 'subtitle' ) ;
2011-01-18 18:52:55 +00:00
} ,
key _closebracket : function ( ) {
2011-02-07 21:44:21 +00:00
movePositionTo ( 'subtitle' , 1 ) ;
2011-01-18 18:52:55 +00:00
} ,
key _comma : function ( ) {
2011-02-07 21:44:21 +00:00
movePositionTo ( 'cut' , - 1 ) ;
2011-01-18 18:52:55 +00:00
} ,
key _dot : function ( ) {
2011-02-07 21:44:21 +00:00
movePositionTo ( 'cut' , 1 ) ;
2011-01-18 18:52:55 +00:00
} ,
key _down : function ( ) {
movePositionBy ( self . sizes . timeline [ 0 ] . width ) ;
} ,
key _i : function ( ) {
setPoint ( 'in' ) ;
} ,
key _left : function ( ) {
movePositionBy ( - 1 ) ;
} ,
key _m : toggleMute ,
key _o : function ( ) {
setPoint ( 'out' ) ;
} ,
key _openbracket : function ( ) {
2011-02-07 21:44:21 +00:00
movePositionTo ( 'subtitle' , - 1 ) ;
2011-01-18 18:52:55 +00:00
} ,
key _p : playInToOut ,
key _right : function ( ) {
movePositionBy ( 1 ) ;
} ,
key _s : function ( ) {
// toggleSize
} ,
key _shift _comma : function ( ) {
movePositionTo ( 'match' , - 1 )
} ,
key _shift _dot : function ( ) {
movePositionTo ( 'match' , 1 )
} ,
key _shift _down : function ( ) {
movePositionBy ( self . options . duration ) ;
} ,
key _shift _left : function ( ) {
movePositionBy ( - 0.04 ) ;
//movePositionBy(-60);
} ,
key _shift _i : function ( ) {
goToPoint ( 'in' ) ;
} ,
key _shift _o : function ( ) {
goToPoint ( 'out' ) ;
} ,
key _shift _right : function ( ) {
movePositionBy ( 0.04 ) ;
//movePositionBy(60);
} ,
key _shift _up : function ( ) {
movePositionBy ( - self . options . duration ) ;
} ,
2011-02-07 21:44:21 +00:00
key _slash : function ( ) {
select ( 'cut' ) ;
} ,
2011-01-18 18:52:55 +00:00
key _space : togglePlay ,
key _up : function ( ) {
movePositionBy ( - self . sizes . timeline [ 0 ] . width ) ;
}
} ) ;
2011-01-17 21:12:17 +00:00
$ . extend ( self , {
$player : [ ] ,
$timeline : [ ] ,
controlsHeight : 16 ,
margin : 8 ,
videoRatio : self . options . videoWidth / self . options . videoHeight
} ) ;
2011-02-03 21:39:22 +00:00
2011-02-07 21:44:21 +00:00
self . $editor = new Ox . Element ( )
. addClass ( 'OxVideoEditor' )
. click ( function ( ) {
that . gainFocus ( )
} ) ;
2011-02-03 21:39:22 +00:00
2011-01-17 21:12:17 +00:00
self . sizes = getSizes ( ) ;
$ . each ( [ 'play' , 'in' , 'out' ] , function ( i , type ) {
self . $player [ i ] = new Ox . VideoEditorPlayer ( {
duration : self . options . duration ,
find : self . options . find ,
height : self . sizes . player [ i ] . height ,
id : 'player' + Ox . toTitleCase ( type ) ,
points : self . options . points ,
position : type == 'play' ? self . options . position : self . options . points [ type == 'in' ? 0 : 1 ] ,
posterFrame : self . options . posterFrame ,
subtitles : self . options . subtitles ,
type : type ,
url : type == 'play' ? self . options . videoURL : self . options . frameURL ,
width : self . sizes . player [ i ] . width
} )
. css ( {
left : self . sizes . player [ i ] . left + 'px' ,
top : self . sizes . player [ i ] . top + 'px'
} )
2011-01-18 16:26:16 +00:00
. bindEvent ( type == 'play' ? {
2011-01-18 18:52:55 +00:00
playing : changePlayer ,
togglesize : toggleSize
2011-01-18 16:26:16 +00:00
} : {
2011-01-17 21:12:17 +00:00
change : function ( ) {
goToPoint ( type ) ;
} ,
set : function ( ) {
setPoint ( type ) ;
}
} )
2011-02-07 21:44:21 +00:00
. appendTo ( self . $editor ) ;
2011-01-17 21:12:17 +00:00
} ) ;
self . $timeline [ 0 ] = new Ox . LargeTimeline ( {
cuts : self . options . cuts ,
duration : self . options . duration ,
find : self . options . find ,
id : 'timelineLarge' ,
matches : self . options . matches ,
points : self . options . points ,
position : self . options . position ,
subtitles : self . options . subtitles ,
videoId : self . options . videoId ,
width : self . sizes . timeline [ 0 ] . width
} )
. css ( {
left : self . sizes . timeline [ 0 ] . left + 'px' ,
top : self . sizes . timeline [ 0 ] . top + 'px'
} )
. bindEvent ( 'change' , changeTimelineLarge )
. bindEvent ( 'changeEnd' , changeTimelineLarge )
2011-02-07 21:44:21 +00:00
. appendTo ( self . $editor ) ;
2011-01-17 21:12:17 +00:00
self . $timeline [ 1 ] = new Ox . BlockTimeline ( {
cuts : self . options . cuts ,
duration : self . options . duration ,
find : self . options . find ,
id : 'timelineSmall' ,
matches : self . options . matches ,
points : self . options . points ,
position : self . options . position ,
subtitles : self . options . subtitles ,
videoId : self . options . videoId ,
width : self . sizes . timeline [ 1 ] . width
} )
. css ( {
left : self . sizes . timeline [ 1 ] . left + 'px' ,
top : self . sizes . timeline [ 1 ] . top + 'px'
} )
. bindEvent ( 'change' , changeTimelineSmall )
2011-02-07 21:44:21 +00:00
. appendTo ( self . $editor ) ;
2011-02-03 21:39:22 +00:00
self . $annotations = new Ox . Element ( )
2011-02-03 22:58:31 +00:00
. css ( {
overflowY : 'auto'
} )
2011-02-03 21:39:22 +00:00
. bindEvent ( {
resize : resizeAnnotations ,
toggle : toggleAnnotations
} ) ;
self . $annotationPanel = [ ] ;
2011-01-17 21:12:17 +00:00
2011-02-03 21:39:22 +00:00
self . options . layers . forEach ( function ( layer , i ) {
2011-02-03 22:58:31 +00:00
self . $annotationPanel [ i ] = new Ox . AnnotationPanel (
2011-02-07 05:34:18 +00:00
$ . extend ( {
width : self . options . annotationSize
2011-02-09 17:56:35 +00:00
} , layer )
2011-02-03 22:58:31 +00:00
)
2011-02-07 05:34:18 +00:00
. bindEvent ( {
2011-02-11 14:44:32 +00:00
add : function ( event , data ) {
data . layer = layer . id ;
2011-02-22 10:02:28 +00:00
data [ 'in' ] = self . options . points [ 0 ] ;
2011-02-11 14:44:32 +00:00
data . out = self . options . points [ 1 ] ;
that . triggerEvent ( 'addAnnotation' , data ) ;
} ,
'delete' : function ( event , data ) {
data . layer = layer . id ;
that . triggerEvent ( 'removeAnnotations' , data ) ;
} ,
2011-02-22 13:08:47 +00:00
select : function ( event , data ) {
self . options . layers . forEach ( function ( l , j ) {
if ( l . id != layer . id ) {
self . $annotationPanel [ j ] . deselectItems ( ) ;
}
} ) ;
selectAnnotation ( event , data ) ;
} ,
2011-02-09 17:56:35 +00:00
submit : updateAnnotation
2011-02-11 14:44:32 +00:00
} ) ;
self . $annotationPanel [ i ]
2011-02-03 21:39:22 +00:00
. appendTo ( self . $annotations ) ;
} ) ;
that . $element = new Ox . SplitPanel ( {
elements : [
{
2011-02-07 21:44:21 +00:00
element : self . $editor
2011-02-03 21:39:22 +00:00
} ,
{
collapsed : ! self . options . showAnnotations ,
collapsible : true ,
element : self . $annotations ,
resizable : true ,
resize : [ 192 , 256 , 320 , 384 ] ,
size : self . options . annotationsSize
}
] ,
orientation : 'horizontal'
} ) ;
2011-01-17 21:12:17 +00:00
function changePlayer ( event , data ) {
self . options . position = data . position ;
self . $timeline [ 0 ] . options ( {
position : data . position
} ) ;
self . $timeline [ 1 ] . options ( {
position : data . position
} ) ;
}
function changeTimelineLarge ( event , data ) {
self . options . position = data . position ;
self . $player [ 0 ] . options ( {
position : data . position
} ) ;
self . $timeline [ 1 ] . options ( {
position : data . position
} ) ;
}
function changeTimelineSmall ( event , data ) {
self . options . position = data . position ;
self . $player [ 0 ] . options ( {
position : data . position
} ) ;
self . $timeline [ 0 ] . options ( {
position : data . position
} ) ;
}
function getNextPosition ( type , direction ) {
var found = false ,
position = 0 ,
positions ;
if ( type == 'cut' ) {
positions = self . options . cuts ;
} else if ( type == 'match' ) {
positions = $ . map ( self . options . matches , function ( v , i ) {
return self . options . subtitles [ v ] [ 'in' ] ;
} ) ;
} else if ( type == 'subtitle' ) {
positions = $ . map ( self . options . subtitles , function ( v , i ) {
return v [ 'in' ] ;
} ) ;
}
direction == - 1 && positions . reverse ( ) ;
$ . each ( positions , function ( i , v ) {
if ( direction == 1 ? v > self . options . position : v < self . options . position ) {
position = v ;
found = true ;
return false ;
}
} ) ;
direction == - 1 && positions . reverse ( ) ;
if ( ! found ) {
position = positions [ direction == 1 ? 0 : positions . length - 1 ] ;
}
return position ;
}
2011-02-07 21:44:21 +00:00
function getPoints ( type ) {
var found = false ,
points ,
positions = [ ] ;
if ( type == 'cut' ) {
positions = self . options . cuts ;
} else if ( type == 'match' ) {
// ...
} else if ( type == 'subtitle' ) {
self . options . subtitles . forEach ( function ( v , i ) {
2011-02-22 10:02:28 +00:00
positions . push ( v [ 'in' ] ) ;
2011-02-07 21:44:21 +00:00
positions . push ( v . out ) ;
} ) ;
}
positions . indexOf ( 0 ) == - 1 && positions . unshift ( 0 ) ;
positions . indexOf ( self . options . duration ) == - 1 &&
positions . push ( self . options . duration ) ;
$ . each ( positions , function ( i , v ) {
if ( v > self . options . position ) {
points = [ positions [ i - 1 ] , positions [ i ] ] ;
found = true ;
return false ;
}
} ) ;
return points ;
}
2011-01-17 21:12:17 +00:00
function getSizes ( scrollbarIsVisible ) {
//Ox.print('getSizes', scrollbarIsVisible)
var scrollbarWidth = oxui . scrollbarSize ,
2011-02-03 21:39:22 +00:00
contentWidth = self . options . width -
( self . options . showAnnotations * self . options . annotationsSize ) - 1 -
( scrollbarIsVisible ? scrollbarWidth : 0 ) ,
2011-01-18 18:52:55 +00:00
height ,
2011-01-17 21:12:17 +00:00
lines ,
size = {
player : [ ] ,
timeline : [ ]
} ,
width , widths ;
if ( self . options . videoSize == 'small' ) {
width = 0 ;
widths = Ox . divideInt ( contentWidth - 4 * self . margin , 3 ) ;
[ 1 , 0 , 2 ] . forEach ( function ( v , i ) {
size . player [ v ] = {
left : ( i + 0.5 ) * self . margin + width ,
top : self . margin / 2 ,
width : widths [ i ] ,
height : Math . round ( widths [ 1 ] / self . videoRatio )
}
width += widths [ i ] ;
} ) ;
} else {
size . player [ 0 ] = {
left : self . margin / 2 ,
top : self . margin / 2 ,
width : Math . round ( ( contentWidth - 3 * self . margin + ( self . controlsHeight + self . margin ) / 2 * self . videoRatio ) * 2 / 3 ) ,
}
size . player [ 0 ] . height = Math . round ( size . player [ 0 ] . width / self . videoRatio ) ;
size . player [ 1 ] = {
left : size . player [ 0 ] . left + size . player [ 0 ] . width + self . margin ,
top : size . player [ 0 ] . top ,
width : contentWidth - 3 * self . margin - size . player [ 0 ] . width
}
size . player [ 1 ] . height = Math . ceil ( size . player [ 1 ] . width / self . videoRatio )
size . player [ 2 ] = {
left : size . player [ 1 ] . left ,
top : size . player [ 0 ] . top + size . player [ 1 ] . height + self . controlsHeight + self . margin ,
width : size . player [ 1 ] . width ,
height : size . player [ 0 ] . height - size . player [ 1 ] . height - self . controlsHeight - self . margin
}
}
size . timeline [ 0 ] = {
left : self . margin / 2 ,
top : size . player [ 0 ] . height + self . controlsHeight + 1.5 * self . margin ,
width : contentWidth - 2 * self . margin ,
height : 64
}
size . timeline [ 1 ] = {
left : size . timeline [ 0 ] . left ,
top : size . timeline [ 0 ] . top + size . timeline [ 0 ] . height + self . margin ,
width : size . timeline [ 0 ] . width
}
lines = Math . ceil ( self . options . duration / size . timeline [ 1 ] . width ) ;
2011-01-18 18:52:55 +00:00
height = getHeight ( ) ;
2011-01-17 21:12:17 +00:00
//Ox.print('lines', lines, getHeight(), self.options.height, (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto')
2011-02-07 21:44:21 +00:00
self . $editor . css ( {
2011-01-18 18:52:55 +00:00
overflowY : ( scrollbarIsVisible && height <= self . options . height ) ? 'scroll' : 'auto'
2011-01-17 21:12:17 +00:00
} ) ;
2011-01-18 18:52:55 +00:00
return ( ! scrollbarIsVisible && height > self . options . height ) ? getSizes ( true ) : size ;
2011-01-17 21:12:17 +00:00
function getHeight ( ) {
return size . player [ 0 ] . height + self . controlsHeight +
size . timeline [ 0 ] . height + lines * 16 +
( lines + 3 ) * self . margin ;
}
}
function goToPoint ( point ) {
self . options . position = self . options . points [ point == 'in' ? 0 : 1 ] ;
setPosition ( ) ;
that . triggerEvent ( 'change' , {
position : self . options . position
} ) ;
}
function movePositionBy ( sec ) {
self . options . position = Ox . limit ( self . options . position + sec , 0 , self . options . duration ) ;
setPosition ( ) ;
that . triggerEvent ( 'change' , {
position : self . options . position
} ) ;
}
function movePositionTo ( type , direction ) {
self . options . position = getNextPosition ( type , direction ) ;
setPosition ( ) ;
that . triggerEvent ( 'change' , {
position : self . options . position
} ) ;
}
function playInToOut ( ) {
self . $player [ 0 ] . playInToOut ( ) ;
}
2011-02-03 21:39:22 +00:00
function resizeAnnotations ( event , data ) {
self . options . annotationsSize = data ;
setSizes ( ) ;
}
2011-01-17 21:12:17 +00:00
function resizeEditor ( event , data ) {
var width = data - 2 * margin + 100 ;
resizeVideoPlayers ( width ) ;
$timelineLarge . options ( {
width : width
} ) ;
$timelineSmall . options ( {
width : width
} ) ;
}
function resizePlayers ( ) {
$ . each ( self . $player , function ( i , v ) {
v . options ( {
width : size [ i ] . width ,
height : size [ i ] . height
} )
. css ( {
left : size [ i ] . left + 'px' ,
top : size [ i ] . top + 'px' ,
} ) ;
} ) ;
}
2011-02-07 05:34:18 +00:00
function selectAnnotation ( event , data ) {
2011-02-22 10:02:28 +00:00
self . options . position = data [ 'in' ]
self . options . points = [ data [ 'in' ] , data . out ] ;
2011-02-07 05:34:18 +00:00
setPosition ( ) ;
setPoints ( ) ;
}
2011-02-09 17:56:35 +00:00
function updateAnnotation ( event , data ) {
2011-02-22 10:02:28 +00:00
data [ 'in' ] = self . options . points [ 0 ] ;
2011-02-21 17:31:02 +00:00
data . out = self . options . points [ 1 ] ;
2011-02-09 17:56:35 +00:00
that . triggerEvent ( 'updateAnnotation' , data ) ;
}
2011-02-07 05:34:18 +00:00
2011-02-07 21:44:21 +00:00
function select ( type ) {
self . options . points = getPoints ( type ) ;
setPoints ( ) ;
}
2011-01-17 21:12:17 +00:00
function setPoint ( point ) {
self . options . points [ point == 'in' ? 0 : 1 ] = self . options . position ;
if ( self . options . points [ 1 ] < self . options . points [ 0 ] ) {
self . options . points [ point == 'in' ? 1 : 0 ] = self . options . position ;
}
2011-02-07 05:34:18 +00:00
setPoints ( ) ;
}
function setPoints ( ) {
2011-01-17 21:12:17 +00:00
$ . each ( self . $player , function ( i , v ) {
2011-02-07 21:44:21 +00:00
v . options ( $ . extend ( {
2011-01-17 21:12:17 +00:00
points : self . options . points
2011-02-07 21:44:21 +00:00
} , i ? {
position : self . options . points [ i - 1 ]
} : { } ) ) ;
2011-01-17 21:12:17 +00:00
} ) ;
$ . each ( self . $timeline , function ( i , v ) {
v . options ( {
points : self . options . points
} ) ;
} ) ;
}
function setPosition ( ) {
self . $player [ 0 ] . options ( {
position : self . options . position
} ) ;
$ . each ( self . $timeline , function ( i , v ) {
v . options ( {
position : self . options . position
} ) ;
} ) ;
}
function setSizes ( ) {
self . sizes = getSizes ( ) ;
$ . each ( self . $player , function ( i , v ) {
v . options ( {
height : self . sizes . player [ i ] . height ,
width : self . sizes . player [ i ] . width
} )
. css ( {
left : self . sizes . player [ i ] . left + 'px' ,
top : self . sizes . player [ i ] . top + 'px'
} ) ;
} ) ;
$ . each ( self . $timeline , function ( i , v ) {
v . options ( {
width : self . sizes . timeline [ i ] . width
} )
. css ( {
left : self . sizes . timeline [ i ] . left + 'px' ,
top : self . sizes . timeline [ i ] . top + 'px'
} ) ;
} ) ;
}
2011-02-03 21:39:22 +00:00
function toggleAnnotations ( event , data ) {
self . options . showAnnotations = ! data . collapsed ;
setSizes ( ) ;
}
2011-01-17 21:12:17 +00:00
function toggleMute ( ) {
self . $player [ 0 ] . toggleMute ( ) ;
}
function togglePlay ( ) {
self . $player [ 0 ] . togglePlay ( ) ;
}
2011-01-18 18:52:55 +00:00
function toggleSize ( event , data ) {
self . options . videoSize = data . size
2011-01-17 21:12:17 +00:00
setSizes ( ) ;
2011-01-18 18:52:55 +00:00
that . triggerEvent ( 'togglesize' , {
size : self . options . videoSize
} ) ;
2011-01-17 21:12:17 +00:00
}
self . onChange = function ( key , value ) {
if ( key == 'width' || key == 'height' ) {
//Ox.print('XXXX setSizes', key, value, self.options.width, self.options.height)
setSizes ( ) ;
2011-01-18 16:26:16 +00:00
} else if ( key == 'position' ) {
self . $player [ 0 ] . position ( value ) ;
2011-01-17 21:12:17 +00:00
}
} ;
2011-02-11 14:44:32 +00:00
that . addAnnotation = function ( layer , item ) {
var i = Ox . getPositionById ( self . options . layers , layer ) ;
self . $annotationPanel [ i ] . addItem ( item ) ;
}
that . removeAnnotations = function ( layer , ids ) {
var i = Ox . getPositionById ( self . options . layers , layer ) ;
self . $annotationPanel [ i ] . removeItems ( ids ) ;
}
2011-01-17 21:12:17 +00:00
return that ;
} ;
Ox . VideoEditorPlayer = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
2011-02-08 00:00:01 +00:00
duration : 0 ,
2011-01-17 21:12:17 +00:00
find : '' ,
height : 0 ,
points : [ 0 , 0 ] ,
position : 0 ,
posterFrame : 0 ,
2011-01-18 18:52:55 +00:00
size : 'small' ,
2011-01-17 21:12:17 +00:00
subtitles : [ ] ,
type : 'play' ,
url : '' ,
width : 0
} )
. options ( options || { } )
. addClass ( 'OxVideoPlayer' )
. css ( {
height : ( self . options . height + 16 ) + 'px' ,
width : self . options . width + 'px'
} ) ;
self . controlsHeight = 16 ;
if ( self . options . type == 'play' ) {
self . $video = new Ox . VideoElement ( {
height : self . options . height ,
paused : true ,
points : self . options . points ,
position : self . options . position ,
url : self . options . url ,
width : self . options . width
} )
. bindEvent ( {
paused : paused ,
playing : playing
} )
. appendTo ( that ) ;
self . video = self . $video . $element [ 0 ] ;
} else {
self . $video = $ ( '<img>' )
. css ( {
height : self . options . height + 'px' ,
width : self . options . width + 'px'
} )
. appendTo ( that . $element )
}
self . $subtitle = $ ( '<div>' )
. addClass ( 'OxSubtitle' )
. appendTo ( that . $element ) ;
setSubtitleSize ( ) ;
self . $markerFrame = $ ( '<div>' )
. addClass ( 'OxMarkerFrame' )
. append (
$ ( '<div>' )
. addClass ( 'OxFrame' )
. css ( {
width : Math . floor ( ( self . options . width - self . options . height ) / 2 ) + 'px' ,
height : self . options . height + 'px'
} )
)
. append (
$ ( '<div>' )
. addClass ( 'OxPoster' )
. css ( {
width : ( self . options . height - 2 ) + 'px' ,
height : ( self . options . height - 2 ) + 'px'
} )
)
. append (
$ ( '<div>' )
. addClass ( 'OxFrame' )
. css ( {
width : Math . ceil ( ( self . options . width - self . options . height ) / 2 ) + 'px' ,
height : self . options . height + 'px'
} )
)
. hide ( )
. appendTo ( that . $element ) ;
self . $markerPoint = { }
$ . each ( [ 'in' , 'out' ] , function ( i , point ) {
self . $markerPoint [ point ] = { } ;
$ . each ( [ 'top' , 'bottom' ] , function ( i , edge ) {
var titleCase = Ox . toTitleCase ( point ) + Ox . toTitleCase ( edge ) ;
self . $markerPoint [ point ] [ edge ] = $ ( '<img>' )
. addClass ( 'OxMarkerPoint OxMarker' + titleCase )
. attr ( {
src : '/static/oxjs/build/png/ox.ui/videoMarker' + titleCase + '.png' // fixme: remove static path
} )
. hide ( )
. appendTo ( that . $element ) ;
if ( self . options . points [ point == 'in' ? 0 : 1 ] == self . options . position ) {
self . $markerPoint [ point ] [ edge ] . show ( ) ;
}
} ) ;
} ) ;
self . $controls = new Ox . Bar ( {
size : self . controlsHeight
} )
. css ( {
marginTop : '-2px'
} )
. appendTo ( that ) ;
if ( self . options . type == 'play' ) {
// fixme: $buttonPlay etc.
self . $playButton = new Ox . Button ( {
id : self . options . id + 'Play' ,
title : [
{ id : 'play' , title : 'play' } ,
{ id : 'pause' , title : 'pause' }
] ,
tooltip : [ 'Play' , 'Pause' ] ,
type : 'image'
} )
. bindEvent ( 'click' , togglePlay )
. appendTo ( self . $controls ) ;
self . $playInToOutButton = new Ox . Button ( {
id : self . options . id + 'PlayInToOut' ,
title : 'PlayInToOut' ,
tooltip : 'Play In to Out' ,
type : 'image'
} )
. bindEvent ( 'click' , function ( ) {
that . playInToOut ( ) ;
} )
. appendTo ( self . $controls ) ;
self . $muteButton = new Ox . Button ( {
id : self . options . id + 'Mute' ,
title : [
{ id : 'mute' , title : 'mute' } ,
{ id : 'unmute' , title : 'unmute' }
] ,
tooltip : [ 'Mute' , 'Unmute' ] ,
type : 'image'
} )
. bindEvent ( 'click' , toggleMute )
. appendTo ( self . $controls ) ;
self . $sizeButton = new Ox . Button ( {
id : self . options . id + 'Size' ,
2011-01-18 18:52:55 +00:00
title : self . options . size == 'small' ? [
2011-01-17 21:12:17 +00:00
{ id : 'large' , title : 'grow' } ,
{ id : 'small' , title : 'shrink' }
2011-01-18 18:52:55 +00:00
] : [
{ id : 'small' , title : 'shrink' } ,
{ id : 'large' , title : 'grow' }
2011-01-17 21:12:17 +00:00
] ,
tooltip : [ 'Larger' , 'Smaller' ] ,
type : 'image'
} )
. bindEvent ( 'click' , toggleSize )
. appendTo ( self . $controls ) ;
} else {
self . $goToPointButton = new Ox . Button ( {
id : self . options . id + 'GoTo' + Ox . toTitleCase ( self . options . type ) ,
title : 'GoTo' + Ox . toTitleCase ( self . options . type ) ,
tooltip : 'Go to ' + Ox . toTitleCase ( self . options . type ) + ' Point' ,
type : 'image'
} )
. bindEvent ( 'click' , goToPoint )
. appendTo ( self . $controls ) ;
self . $setPointButton = new Ox . Button ( {
id : self . options . id + 'Set' + Ox . toTitleCase ( self . options . type ) ,
title : 'Set' + Ox . toTitleCase ( self . options . type ) ,
tooltip : 'Set ' + Ox . toTitleCase ( self . options . type ) + ' Point' ,
type : 'image'
} )
. bindEvent ( 'click' , setPoint )
. appendTo ( self . $controls ) ;
}
self . $positionInput = new Ox . TimeInput ( {
milliseconds : true ,
seconds : true ,
value : Ox . formatDuration ( self . options . position , 3 )
} )
. css ( {
float : 'right' ,
} )
. appendTo ( self . $controls )
self . $positionInput . css ( {
width : '98px'
} ) ;
// fixme: children doesnt work w/o $element
self . $positionInput . $element . children ( '.OxLabel' ) . each ( function ( i , element ) {
$ ( this ) . css ( {
width : '22px' ,
marginLeft : ( i == 0 ? 8 : 0 ) + 'px' ,
background : 'rgb(32, 32, 32)'
} ) ;
} ) ;
self . $positionInput . $element . children ( 'div.OxInput' ) . each ( function ( i ) {
var marginLeft = [ - 82 , - 58 , - 34 , - 10 ] ;
$ ( this ) . css ( {
marginLeft : marginLeft [ i ] + 'px'
} ) . addClass ( 'foo' ) ;
} ) ;
if ( self . options . type == 'play' ) {
self . $loadingIcon = new Ox . LoadingIcon ( )
. appendTo ( that )
. start ( ) ;
self . loadingInterval = setInterval ( function ( ) {
if ( self . video . readyState ) {
clearInterval ( self . loadingInterval ) ;
self . $loadingIcon . stop ( ) ;
setPosition ( ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
} , 50 ) ;
} else {
setPosition ( ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function getSubtitle ( ) {
var subtitle = '' ;
$ . each ( self . options . subtitles , function ( i , v ) {
if ( v [ 'in' ] <= self . options . position && v [ 'out' ] > self . options . position ) {
2011-01-28 09:31:12 +00:00
subtitle = v . value ;
2011-01-17 21:12:17 +00:00
return false ;
2010-09-17 22:10:07 +00:00
}
2010-12-31 11:01:35 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
return subtitle ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function goToPoint ( ) {
2010-09-17 22:10:07 +00:00
that . triggerEvent ( 'change' , {
2011-01-17 21:12:17 +00:00
position : self . options . points [ self . options . type == 'in' ? 0 : 1 ]
2010-09-17 22:10:07 +00:00
} ) ;
}
2011-01-17 21:12:17 +00:00
function paused ( event , data ) {
self . $playButton . toggleTitle ( ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function playing ( event , data ) {
self . options . position = data . position ;
setMarkers ( ) ;
setSubtitle ( ) ;
self . $positionInput . options ( {
value : Ox . formatDuration ( self . options . position , 3 )
} ) ;
that . triggerEvent ( 'playing' , {
2010-09-17 22:10:07 +00:00
position : self . options . position
} ) ;
}
2011-01-17 21:12:17 +00:00
function setHeight ( ) {
that . css ( {
height : ( self . options . height + 16 ) + 'px'
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
self . options . type == 'play' ? self . $video . options ( {
height : self . options . height
} ) : self . $video . css ( {
height : self . options . height + 'px'
2010-09-17 22:10:07 +00:00
} ) ;
}
2011-01-17 21:12:17 +00:00
function setMarkers ( ) {
self . options . position == self . options . posterFrame ? self . $markerFrame . show ( ) : self . $markerFrame . hide ( ) ;
$ . each ( self . $markerPoint , function ( point , markers ) {
$ . each ( markers , function ( edge , marker ) {
self . options . position == self . options . points [ point == 'in' ? 0 : 1 ] ?
marker . show ( ) : marker . hide ( ) ;
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
} )
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function setPoint ( ) {
var data = { } ;
self . options . points [ self . options . type == 'in' ? 0 : 1 ] = self . options . position ;
setMarkers ( ) ;
data [ self . options . type ] = self . options . position ;
that . triggerEvent ( 'set' , data ) ;
2010-09-17 22:10:07 +00:00
}
function setPosition ( ) {
2011-02-08 00:00:01 +00:00
var position = Ox . limit (
self . options . position - ( self . options . type == 'out' ? 0.01 : 0 ) ,
0 , self . options . duration - 0.01
) ,
url ;
2011-01-17 21:12:17 +00:00
if ( self . options . type == 'play' ) {
self . $video . position ( self . options . position ) ;
} else {
self . $loadingIcon && self . $loadingIcon . stop ( ) ;
2011-02-08 00:00:01 +00:00
url = self . options . url ( position ) ;
if ( self . $video . attr ( 'src' ) != url ) {
2011-01-17 21:12:17 +00:00
self . $loadingIcon = new Ox . LoadingIcon ( )
. appendTo ( that )
. start ( ) ;
self . $video . attr ( {
2011-02-08 00:00:01 +00:00
src : url
2011-01-17 21:12:17 +00:00
} )
. load ( self . $loadingIcon . stop ) ;
}
}
setMarkers ( ) ;
setSubtitle ( ) ;
self . $positionInput . options ( {
value : Ox . formatDuration ( self . options . position , 3 )
2010-09-17 22:10:07 +00:00
} ) ;
}
2011-01-17 21:12:17 +00:00
function setSubtitle ( ) {
var subtitle = getSubtitle ( ) ;
if ( subtitle != self . subtitle ) {
self . subtitle = subtitle ;
self . $subtitle . html ( Ox . highlight ( self . subtitle , self . options . find ) . replace ( /\n/g , '<br/>' ) ) ;
}
}
function setSubtitleSize ( ) {
self . $subtitle . css ( {
bottom : parseInt ( self . controlsHeight + self . options . height / 16 ) + 'px' ,
width : self . options . width + 'px' ,
fontSize : parseInt ( self . options . height / 20 ) + 'px' ,
WebkitTextStroke : ( self . options . height / 1000 ) + 'px rgb(0, 0, 0)'
2010-09-18 00:15:15 +00:00
} ) ;
}
2011-01-17 21:12:17 +00:00
function setWidth ( ) {
that . css ( {
width : self . options . width + 'px'
} ) ;
self . options . type == 'play' ? self . $video . options ( {
width : self . options . width
} ) : self . $video . css ( {
width : self . options . width + 'px'
} ) ;
setSubtitleSize ( ) ;
}
2010-09-17 22:10:07 +00:00
function toggleMute ( ) {
2011-01-17 21:12:17 +00:00
self . $video . toggleMute ( ) ;
2010-09-17 22:10:07 +00:00
}
function togglePlay ( ) {
2011-01-17 21:12:17 +00:00
self . video . paused ? that . play ( ) : that . pause ( ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function toggleSize ( event , data ) {
2011-01-18 18:52:55 +00:00
self . options . size = data . id
2011-01-17 21:12:17 +00:00
that . triggerEvent ( 'togglesize' , {
2011-01-18 18:52:55 +00:00
size : self . options . size
2011-01-17 21:12:17 +00:00
} ) ;
2010-09-18 00:15:15 +00:00
}
2010-09-17 22:10:07 +00:00
self . onChange = function ( key , value ) {
2011-01-17 21:12:17 +00:00
if ( key == 'height' ) {
setHeight ( ) ;
} else if ( key == 'points' ) {
setMarkers ( ) ;
} else if ( key == 'position' ) {
setPosition ( ) ;
} else if ( key == 'posterFrame' ) {
setMarkers ( ) ;
} else if ( key == 'width' ) {
setWidth ( ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
}
that . mute = function ( ) {
self . $video . mute ( ) ;
return that ;
} ;
that . pause = function ( ) {
self . $video . pause ( ) ;
return that ;
} ;
that . play = function ( ) {
self . $video . play ( ) ;
return that ;
} ;
that . playInToOut = function ( ) {
self . $video . paused ( ) && self . $playButton . toggleTitle ( ) ;
self . $video . playInToOut ( ) ;
return that ;
} ;
that . toggleMute = function ( ) {
self . $muteButton . trigger ( 'click' ) ;
return that ;
}
that . togglePlay = function ( ) {
self . $playButton . trigger ( 'click' ) ;
return that ;
}
that . unmute = function ( ) {
self . $video . unmute ( ) ;
return that ;
2010-09-17 22:10:07 +00:00
} ;
return that ;
} ;
2011-01-17 21:12:17 +00:00
Ox . VideoElement = function ( options , self ) {
2010-09-17 22:10:07 +00:00
var self = self || { } ,
2011-01-17 21:12:17 +00:00
that = new Ox . Element ( 'video' , self )
2010-09-17 22:10:07 +00:00
. defaults ( {
2011-01-17 21:12:17 +00:00
fps : 25 ,
2010-09-17 22:10:07 +00:00
height : 0 ,
2011-01-17 21:12:17 +00:00
loop : false ,
muted : false ,
paused : false ,
playInToOut : false ,
2010-09-17 22:10:07 +00:00
points : [ 0 , 0 ] ,
position : 0 ,
2011-01-17 21:12:17 +00:00
poster : '' ,
2010-09-17 22:10:07 +00:00
url : '' ,
width : 0
} )
. options ( options || { } )
2010-09-18 12:50:08 +00:00
. attr ( {
2011-01-17 21:12:17 +00:00
poster : self . options . poster ,
2010-09-18 12:50:08 +00:00
preload : 'auto' ,
src : self . options . url
} )
. css ( {
height : self . options . height + 'px' ,
width : self . options . width + 'px'
} )
2011-01-17 21:12:17 +00:00
. bind ( {
2011-01-18 16:56:40 +00:00
ended : ended ,
loadedmetadata : function ( ) {
self . video . currentTime = self . options . position ;
}
2011-01-17 21:12:17 +00:00
} ) ;
$ . extend ( self , {
millisecondsPerFrame : 1000 / self . options . fps ,
video : that . $element [ 0 ]
} ) ;
function ended ( ) {
that . pause ( )
. triggerEvent ( 'paused' , {
position : self . options . position
} ) ;
}
function playing ( ) {
var event = 'playing' ;
self . options . position = Math . round ( self . video . currentTime * self . options . fps ) / self . options . fps ;
if ( self . options . playInToOut && self . options . position >= self . options . points [ 1 ] ) {
event = 'paused' ;
that . position ( self . options . points [ 1 ] ) . pause ( ) ;
}
that . triggerEvent ( event , {
position : self . options . position
} ) ;
}
self . onChange = function ( key , value ) {
if ( key == 'height' ) {
that . size ( self . options . width , value ) ;
} else if ( key == 'muted' ) {
that [ value ? 'mute' : 'unmute' ] ( ) ;
} else if ( key == 'paused' ) {
that [ value ? 'pause' : 'play' ] ( ) ;
} else if ( key == 'points' ) {
that . points ( value ) ;
} else if ( key == 'width' ) {
that . size ( value , self . options . height ) ;
}
} ;
that . mute = function ( ) {
self . options . muted = true ;
self . video . muted = true ;
return that ;
} ;
that . muted = function ( ) {
return self . options . muted ;
}
that . pause = function ( ) {
self . options . paused = true ;
self . options . playInToOut = false ;
self . video . pause ( ) ;
clearInterval ( self . playInterval ) ;
return that ;
} ;
that . paused = function ( ) {
return self . options . paused ;
}
that . play = function ( ) {
self . options . paused = false ;
self . video . play ( ) ;
self . playInterval = setInterval ( playing , self . millisecondsPerFrame ) ;
return that ;
} ;
that . playInToOut = function ( ) {
self . options . playInToOut = true ;
that . position ( self . options . points [ 0 ] ) ;
self . options . paused && that . play ( ) ;
return that ;
} ;
that . points = function ( points ) {
self . options . points = points ;
}
that . position = function ( pos ) {
if ( arguments . length == 0 ) {
return self . video . currentTime ;
} else {
self . options . position = pos ;
self . video . currentTime = self . options . position ;
return that ;
}
} ;
that . size = function ( width , height ) {
// fixme: why options? use css!
if ( arguments . length == 0 ) {
return {
width : self . options . width ,
height : self . options . height
} ;
} else {
self . options . width = width ;
self . options . height = height ;
that . css ( {
width : width + 'px' ,
height : height + 'px'
} ) ;
return that ;
}
} ;
that . toggleMute = function ( ) {
self . video . muted = ! self . video . muted ;
return that ;
}
that . togglePlay = function ( ) {
self . options . paused = ! self . options . paused ;
that [ self . options . paused ? 'pause' : 'play' ] ( ) ;
}
that . unmute = function ( ) {
self . video . muted = false ;
return that ;
} ;
return that ;
} ;
Ox . VideoPanelPlayer = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
annotationsSize : 256 ,
duration : 0 ,
height : 0 ,
loop : false ,
muted : false ,
paused : false ,
playInToOut : false ,
points : [ 0 , 0 ] ,
position : 0 ,
poster : '' ,
showAnnotations : true ,
showControls : true ,
2011-01-18 04:07:33 +00:00
subtitles : [ ] ,
2011-01-17 21:12:17 +00:00
videoHeight : 0 ,
videoSize : 'fit' ,
videoWidth : 0 ,
videoURL : '' ,
width : 0
} )
. options ( options || { } )
2010-09-18 12:50:08 +00:00
. css ( {
height : self . options . height + 'px' ,
width : self . options . width + 'px'
} )
2011-01-17 21:12:17 +00:00
. bindEvent ( {
2011-01-18 16:26:16 +00:00
resize : resizeElement ,
key _shift _a : function ( ) {
that . toggleAnnotations ( ) ;
} ,
key _shift _c : function ( ) {
that . toggleControls ( ) ;
} ,
key _shift _s : function ( ) {
that . toggleSize ( ) ;
} ,
key _space : function ( ) {
that . togglePlay ( ) ;
}
2011-01-17 21:12:17 +00:00
} ) ;
2010-09-17 22:10:07 +00:00
2011-01-18 04:07:33 +00:00
$ . extend ( self , {
fullscreen : false ,
videoCSS : getVideoCSS ( )
} ) ;
2011-01-17 21:12:17 +00:00
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self . $player = new Ox . Element ( )
. css ( {
overflowX : 'hidden' ,
overflowY : 'hidden'
} )
2011-01-18 16:26:16 +00:00
. bind ( {
mousedown : that . gainFocus
} )
2011-01-17 21:12:17 +00:00
. bindEvent ( {
resize : resizeVideo
} ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self . $video = new Ox . VideoElement ( {
height : self . videoCSS . height ,
paused : true ,
points : self . options . points ,
position : self . options . position ,
url : self . options . videoURL ,
width : self . videoCSS . width
} )
. css ( self . videoCSS )
. bindEvent ( {
paused : paused ,
playing : playing
} )
. appendTo ( self . $player ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self . $controls = new Ox . Element ( )
. bindEvent ( {
toggle : toggleControls
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
self . $buttons = new Ox . Element ( )
2010-09-17 22:10:07 +00:00
. css ( {
2011-01-17 21:12:17 +00:00
float : 'left' ,
width : '16px' ,
margin : '4px'
2010-09-17 22:10:07 +00:00
} )
2011-01-17 21:12:17 +00:00
. appendTo ( self . $controls ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self . $button = {
play : new Ox . Button ( {
id : 'play' ,
2010-09-17 22:10:07 +00:00
title : [
{ id : 'play' , title : 'play' } ,
{ id : 'pause' , title : 'pause' }
] ,
tooltip : [ 'Play' , 'Pause' ] ,
2011-01-17 21:12:17 +00:00
type : 'image'
2010-09-17 22:10:07 +00:00
} )
2011-01-17 21:12:17 +00:00
. bindEvent ( {
click : self . $video . togglePlay
} ) ,
mute : new Ox . Button ( {
id : 'mute' ,
2010-09-17 22:10:07 +00:00
title : [
{ id : 'mute' , title : 'mute' } ,
{ id : 'unmute' , title : 'unmute' }
] ,
tooltip : [ 'Mute' , 'Unmute' ] ,
2011-01-17 21:12:17 +00:00
type : 'image'
2010-09-17 22:10:07 +00:00
} )
2011-01-17 21:12:17 +00:00
. bindEvent ( {
2011-01-17 22:52:25 +00:00
click : self . $video . toggleMute
2011-01-17 21:12:17 +00:00
} ) ,
size : new Ox . Button ( {
id : 'size' ,
title : self . options . videoSize == 'fit' ? [
{ id : 'fill' , title : 'fill' } ,
{ id : 'fit' , title : 'fit' }
] : [
{ id : 'fit' , title : 'fit' } ,
{ id : 'fill' , title : 'fill' }
] ,
tooltip : self . options . videoSize == 'fit' ? [
'Fill Screen' , 'Fit to Screen'
] : [
'Fit to Screen' , 'Fill Screen'
2010-09-18 00:15:15 +00:00
] ,
2010-09-17 22:10:07 +00:00
type : 'image'
} )
2011-01-17 21:12:17 +00:00
. bindEvent ( {
click : toggleSize
2011-01-18 04:07:33 +00:00
} ) ,
fullscreen : new Ox . Button ( {
id : 'size' ,
title : [
{ id : 'grow' , title : 'grow' } ,
{ id : 'shrink' , title : 'shrink' }
] ,
tooltip : [
'Enter Fullscreen' , 'Exit Fullscreen'
] ,
type : 'image'
} )
. bindEvent ( {
click : toggleFullscreen
2010-09-17 22:10:07 +00:00
} )
}
2011-01-17 21:12:17 +00:00
var i = 0 ;
$ . each ( self . $button , function ( k , $button ) {
$button . css ( {
position : 'absolute' ,
left : '8px' ,
top : ( 8 + i ++ * 24 ) + 'px'
2010-09-17 22:10:07 +00:00
} )
2011-01-17 21:12:17 +00:00
. appendTo ( self . $buttons ) ;
} ) ;
self . $timelines = new Ox . Element ( )
2010-09-17 22:10:07 +00:00
. css ( {
2011-01-17 21:12:17 +00:00
float : 'left' ,
margin : '4px'
2010-09-17 22:10:07 +00:00
} )
2011-01-17 21:12:17 +00:00
. appendTo ( self . $controls ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
self . $timeline = {
large : new Ox . LargeTimeline ( {
duration : self . options . duration ,
2011-01-18 16:26:16 +00:00
position : self . options . position ,
2011-01-18 04:07:33 +00:00
subtitles : self . options . subtitles ,
2011-01-17 21:12:17 +00:00
videoId : self . options . videoId ,
2011-01-17 22:52:25 +00:00
width : getTimelineWidth ( )
2011-01-17 21:12:17 +00:00
} )
. css ( {
top : '4px'
2011-01-17 22:52:25 +00:00
} )
. bindEvent ( {
2011-01-18 04:07:33 +00:00
change : changeLargeTimeline
2011-01-17 21:12:17 +00:00
} ) ,
small : new Ox . SmallTimeline ( {
duration : self . options . duration ,
2011-01-18 16:26:16 +00:00
position : self . options . position ,
2011-01-18 04:07:33 +00:00
subtitles : self . options . subtitles ,
2011-01-17 21:12:17 +00:00
videoId : self . options . videoId ,
2011-01-17 22:52:25 +00:00
width : getTimelineWidth ( )
2011-01-17 21:12:17 +00:00
} )
. css ( {
2011-01-18 04:07:33 +00:00
top : '76px'
} )
. bindEvent ( {
change : changeSmallTimeline
2011-01-17 21:12:17 +00:00
} )
} ;
$ . each ( self . $timeline , function ( i , $timeline ) {
$timeline . appendTo ( self . $timelines ) ;
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
self . $panel = new Ox . SplitPanel ( {
elements : [
{
element : self . $player
} ,
{
collapsed : ! self . options . showControls ,
collapsible : true ,
element : self . $controls ,
size : 104
}
] ,
orientation : 'vertical'
} )
. bindEvent ( {
2011-01-17 22:52:25 +00:00
resize : resizePanel
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
self . $annotations = new Ox . Element ( )
. bindEvent ( {
resize : resizeAnnotations ,
resizeend : resizeendAnnotations ,
toggle : toggleAnnotations
} ) ;
2010-09-17 22:10:07 +00:00
2011-01-17 21:12:17 +00:00
that . $element = new Ox . SplitPanel ( {
elements : [
{
element : self . $panel
} ,
{
collapsed : ! self . options . showAnnotations ,
collapsible : true ,
element : self . $annotations ,
resizable : true ,
resize : [ 192 , 256 , 320 , 384 ] ,
size : self . options . annotationsSize
}
] ,
orientation : 'horizontal'
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
2011-01-18 04:07:33 +00:00
function changeLargeTimeline ( event , data ) {
2011-01-18 16:28:33 +00:00
self . options . position = data . position ;
self . $video . position ( self . options . position ) ;
2011-01-18 04:07:33 +00:00
self . $timeline . small . options ( {
2011-01-18 16:28:33 +00:00
position : self . options . position
2011-01-18 04:07:33 +00:00
} ) ;
}
function changeSmallTimeline ( event , data ) {
2011-01-18 16:28:33 +00:00
self . options . position = data . position ;
self . $video . position ( self . options . position ) ;
2011-01-18 04:07:33 +00:00
self . $timeline . large . options ( {
2011-01-18 16:28:33 +00:00
position : self . options . position
2011-01-18 04:07:33 +00:00
} ) ;
}
2011-01-17 21:12:17 +00:00
function getPlayerHeight ( ) {
2011-01-17 22:52:25 +00:00
return self . options . height -
self . options . showControls * 104 - 1 ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function getPlayerWidth ( ) {
2011-01-17 22:52:25 +00:00
return self . options . width -
2011-01-18 04:07:33 +00:00
( self . options . showAnnotations && ! self . fullscreen ) *
2011-01-17 22:52:25 +00:00
self . options . annotationsSize - 1 ;
}
function getTimelineWidth ( ) {
return self . options . width -
2011-01-18 04:07:33 +00:00
( self . options . showAnnotations && ! self . fullscreen ) *
2011-01-17 22:52:25 +00:00
self . options . annotationsSize - 40
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function getVideoCSS ( ) {
var width = getPlayerWidth ( ) ,
height = getPlayerHeight ( ) ,
ratio = width / height ,
videoRatio = self . options . videoWidth / self . options . videoHeight ,
isWide = ratio < videoRatio ;
return self . options . videoSize == 'fit' ? {
position : 'absolute' ,
left : 0 ,
right : 0 ,
top : 0 ,
bottom : 0 ,
width : ( isWide ? width : Math . round ( height * videoRatio ) ) + 'px' ,
height : ( isWide ? Math . round ( width / videoRatio ) : height ) + 'px' ,
margin : 'auto'
} : {
width : ( isWide ? Math . round ( height * videoRatio ) : width ) + 'px' ,
height : ( isWide ? height : Math . round ( width / videoRatio ) ) + 'px' ,
margin : [
isWide ? '0' : Math . floor ( ( height - width / videoRatio ) / 2 ) + 'px' ,
isWide ? Math . ceil ( ( width - height * videoRatio ) / 2 ) + 'px' : '0' ,
isWide ? '0' : Math . ceil ( ( height - width / videoRatio ) / 2 ) + 'px' ,
isWide ? Math . floor ( ( width - height * videoRatio ) / 2 ) + 'px' : '0'
] . join ( ' ' )
} ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function paused ( ) {
2010-09-17 22:10:07 +00:00
}
2011-01-17 22:52:25 +00:00
function playing ( event , data ) {
2011-01-18 16:26:16 +00:00
self . options . position = data . position ;
2011-01-17 22:52:25 +00:00
self . $timeline . large . options ( {
2011-01-18 16:26:16 +00:00
position : self . options . position
2011-01-17 22:52:25 +00:00
} ) ;
2011-01-18 04:07:33 +00:00
self . $timeline . small . options ( {
2011-01-18 16:26:16 +00:00
position : self . options . position
2011-01-18 04:07:33 +00:00
} ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function resizeAnnotations ( event , data ) {
self . options . annotationsSize = data ;
2011-01-17 22:52:25 +00:00
resizeVideoAndControls ( ) ;
2010-09-17 22:10:07 +00:00
}
2011-01-17 21:12:17 +00:00
function resizeendAnnotations ( event , data ) {
self . options . annotationsSize = data ;
that . triggerEvent ( 'change' , {
annotationsSize : self . options . annotationsSize
2010-09-17 22:10:07 +00:00
} ) ;
}
2011-01-17 22:52:25 +00:00
function resizeControls ( ) {
self . $timeline . large . options ( {
width : getTimelineWidth ( )
} ) ;
self . $timeline . small . options ( {
width : getTimelineWidth ( )
} ) ;
}
2011-01-17 21:12:17 +00:00
function resizeElement ( event , data ) {
// called on browser toggle
self . options . height = data ;
resizeVideo ( ) ;
}
2011-01-17 22:52:25 +00:00
function resizePanel ( event , data ) {
// called on annotations toggle
resizeVideoAndControls ( ) ;
}
function resizeVideoAndControls ( ) {
resizeVideo ( ) ;
resizeControls ( ) ;
}
2011-01-17 21:12:17 +00:00
function resizeVideo ( ) {
self . videoCSS = getVideoCSS ( ) ;
self . $video . css ( self . videoCSS ) ;
} ;
function toggleAnnotations ( event , data ) {
self . options . showAnnotations = ! data . collapsed ;
that . triggerEvent ( 'change' , {
showAnnotations : self . options . showAnnotations
2010-09-17 22:10:07 +00:00
} ) ;
2011-01-17 21:12:17 +00:00
}
function toggleControls ( event , data ) {
self . options . showControls = ! data . collapsed ;
that . triggerEvent ( 'change' , {
showControls : self . options . showControls
2010-09-17 22:10:07 +00:00
} ) ;
}
2011-01-18 04:07:33 +00:00
function toggleFullscreen ( ) {
self . fullscreen = ! self . fullscreen ;
self . options . showAnnotations && that . $element . toggle ( 1 ) ;
self . fullscreen && self . options . showControls && self . $panel . toggle ( 1 ) ;
that . triggerEvent ( ( self . fullscreen ? 'enter' : 'exit' ) + 'fullscreen' , { } ) ;
}
2011-01-17 21:12:17 +00:00
function toggleSize ( ) {
self . options . videoSize = self . options . videoSize == 'fit' ? 'fill' : 'fit' ;
2011-01-17 22:52:25 +00:00
resizeVideo ( ) ;
2011-01-17 21:12:17 +00:00
that . triggerEvent ( 'change' , {
videoSize : self . options . videoSize
2010-09-18 00:15:15 +00:00
} ) ;
}
2010-09-17 22:10:07 +00:00
self . onChange = function ( key , value ) {
if ( key == 'height' ) {
2011-01-17 21:12:17 +00:00
resizeVideo ( ) ;
2011-01-18 16:26:16 +00:00
} else if ( key == 'position' ) {
self . $video . position ( value ) ;
2010-09-17 22:10:07 +00:00
} else if ( key == 'width' ) {
2011-01-17 22:52:25 +00:00
resizeVideoAndControls ( ) ;
2010-09-17 22:10:07 +00:00
}
}
2011-01-17 21:12:17 +00:00
that . toggleAnnotations = function ( ) {
2011-01-18 16:26:16 +00:00
that . $element . toggle ( 1 ) ;
//that.toggleAnnotations(null, !self.options.showAnnotations);
2010-09-17 22:10:07 +00:00
} ;
2011-01-17 21:12:17 +00:00
that . toggleControls = function ( ) {
2011-01-18 16:26:16 +00:00
self . $panel . toggle ( 1 ) ;
//that.toggleControls(null, !self.options.showControls);
2010-09-17 22:10:07 +00:00
} ;
2011-01-18 16:26:16 +00:00
that . toggleMute = function ( ) {
self . $button . mute . trigger ( 'click' ) ;
} ;
that . togglePlay = function ( ) {
self . $button . play . trigger ( 'click' ) ;
} ;
that . toggleSize = function ( ) {
self . $button . size . trigger ( 'click' ) ;
}
2010-09-17 22:10:07 +00:00
return that ;
2011-01-17 21:12:17 +00:00
}
2010-09-17 22:10:07 +00:00
2010-07-24 01:32:08 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Miscellaneous
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
2010-12-06 17:42:45 +00:00
/ * *
2010-07-24 01:32:08 +00:00
* /
Ox . Tooltip = function ( options , self ) {
var self = self || { } ,
2010-09-03 20:54:40 +00:00
that = new Ox . Element ( 'div' , self )
2010-07-24 01:32:08 +00:00
. defaults ( {
2010-09-03 20:54:40 +00:00
title : ''
2010-07-24 01:32:08 +00:00
} )
. options ( options || { } )
2010-09-03 20:54:40 +00:00
. addClass ( 'OxTooltip' )
2010-09-03 08:47:40 +00:00
. html ( self . options . title ) ;
2010-07-24 01:32:08 +00:00
self . onChange = function ( key , value ) {
2010-09-03 20:54:40 +00:00
if ( key == 'title' ) {
2010-07-24 01:32:08 +00:00
that . html ( value ) ;
}
} ;
that . hide = function ( ) {
that . animate ( {
opacity : 0
2010-09-03 08:47:40 +00:00
} , 0 , function ( ) {
2010-07-24 01:32:08 +00:00
that . remove ( ) ;
} ) ;
return that ;
} ;
2010-09-03 08:47:40 +00:00
that . show = function ( x , y ) {
2010-07-24 01:32:08 +00:00
var left , top , width , height ;
2010-09-03 20:54:40 +00:00
$ ( '.OxTooltip' ) . remove ( ) ; // fixme: don't use dom
2010-07-24 01:32:08 +00:00
that . appendTo ( $body ) ;
width = that . width ( ) ;
height = that . height ( ) ;
2010-09-03 08:47:40 +00:00
left = Ox . limit ( x - width / 2 , 0 , $document . width ( ) - width ) ;
top = y > $document . height ( ) - height - 16 ? y - 32 : y + 16 ;
2010-07-24 01:32:08 +00:00
that . css ( {
2010-09-03 20:54:40 +00:00
left : left + 'px' ,
top : top + 'px'
2010-07-24 01:32:08 +00:00
} )
. animate ( {
opacity : 1
2010-09-03 08:47:40 +00:00
} , 0 ) ;
2010-07-24 01:32:08 +00:00
return that ;
} ;
return that ;
} ;
2010-01-27 12:30:00 +00:00
2011-02-01 09:56:16 +00:00
/ *
=== === === === === === === === === === === === === === === === === === === === === === === === === =
Pan . do / r a
=== === === === === === === === === === === === === === === === === === === === === === === === === =
* /
Ox . FilesView = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( 'div' , self )
. defaults ( {
id : ''
} )
. options ( options || { } ) ;
self . $toolbar = new Ox . Bar ( {
size : 24
} ) ;
self . $orderButton = new Ox . Button ( {
title : 'Change Order of Users...'
} )
. css ( {
float : 'left' ,
margin : '4px'
} )
. appendTo ( self . $toolbar ) ;
self . $moveButton = new Ox . Button ( {
disabled : 'true' ,
title : 'Move Selected Files...'
} )
. css ( {
float : 'right' ,
margin : '4px'
} )
. appendTo ( self . $toolbar ) ;
self . $filesList = new Ox . TextList ( {
columns : [
{
align : 'left' ,
id : 'users' ,
operator : '+' ,
title : 'Users' ,
visible : true ,
width : 120
} ,
{
align : 'left' ,
id : 'folder' ,
operator : '+' ,
title : 'Folder' ,
visible : true ,
width : 180
} ,
{
align : 'left' ,
id : 'name' ,
operator : '+' ,
title : 'Name' ,
visible : true ,
width : 360
} ,
{
align : 'left' ,
id : 'type' ,
operator : '+' ,
title : 'Type' ,
visible : true ,
width : 60
} ,
{
align : 'right' ,
id : 'part' ,
operator : '+' ,
title : 'Part' ,
visible : true ,
width : 60
} ,
{
align : 'right' ,
format : { type : 'value' , args : [ 'B' ] } ,
id : 'size' ,
operator : '-' ,
title : 'Size' ,
visible : true ,
width : 90
} ,
{
align : 'right' ,
format : { type : 'resolution' , args : [ 'px' ] } ,
id : 'resolution' ,
operator : '-' ,
title : 'Resolution' ,
visible : true ,
width : 90
} ,
{
align : 'right' ,
format : { type : 'duration' , args : [ 0 , 'short' ] } ,
id : 'duration' ,
operator : '-' ,
title : 'Duration' ,
visible : true ,
width : 90
} ,
{
align : 'left' ,
2011-02-07 21:44:21 +00:00
id : 'oshash' ,
2011-02-01 09:56:16 +00:00
operator : '+' ,
title : 'Hash' ,
unique : true ,
visible : false ,
width : 120
} ,
{
align : 'left' ,
id : 'instances' ,
operator : '+' ,
title : 'Instances' ,
visible : false ,
width : 120
}
] ,
columnsMovable : true ,
columnsRemovable : true ,
columnsResizable : true ,
columnsVisible : true ,
id : 'files' ,
2011-02-25 10:23:33 +00:00
items : function ( data , callback ) {
2011-02-01 09:56:16 +00:00
pandora . api . findFiles ( $ . extend ( data , {
query : {
conditions : [ {
key : 'id' ,
value : self . options . id ,
operator : '='
} ]
}
} ) , callback ) ;
} ,
scrollbarVisible : true ,
sort : [ { key : 'name' , operator : '+' } ]
} )
. bindEvent ( {
open : openFiles ,
select : selectFiles
} ) ;
self . $instancesList = new Ox . Element ( )
. html ( 'No files selected' ) ;
that . $element = new Ox . SplitPanel ( {
elements : [
{
element : self . $toolbar ,
size : 24
} ,
{
element : self . $filesList
} ,
{
element : self . $instancesList ,
size : 80
}
] ,
orientation : 'vertical'
} ) ;
function openFiles ( event , data ) {
//alert(JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
}
function selectFiles ( event , data ) {
//alert(JSON.stringify(self.$filesList.value(data.ids[0], 'instances')))
}
return that ;
} ;
2010-10-26 10:24:58 +00:00
} ) ( ) ;
