2010-07-05 16:14:12 +00:00
$ ( function ( ) {
2010-07-05 16:17:38 +00:00
//Ox.debug = Ox.print;
2010-07-05 12:35:51 +00:00
//Ox.print = function() {};
2010-07-01 08:49:53 +00:00
2010-09-03 20:54:02 +00:00
var $body = $ ( 'body' ) ,
2010-07-05 16:14:12 +00:00
$document = $ ( document ) ,
$window = $ ( window ) ,
config = {
2010-09-03 20:54:02 +00:00
appId : 'oxdb' ,
appName : '0xDB' ,
2010-07-05 16:14:12 +00:00
findKeys : [
2010-09-03 20:54:02 +00:00
{ id : 'all' , title : 'All' } ,
{ id : 'title' , title : 'Title' , autocomplete : true } ,
{ id : 'director' , title : 'Director' , autocomplete : true } ,
{ id : 'country' , title : 'Country' , autocomplete : true } ,
{ id : 'year' , title : 'Year' , autocomplete : true } ,
{ id : 'language' , title : 'Language' , autocomplete : true } ,
{ id : 'writer' , title : 'Writer' , autocomplete : true } ,
{ id : 'producer' , title : 'Producer' , autocomplete : true } ,
{ id : 'cinematographer' , title : 'Cinematographer' , autocomplete : true } ,
{ id : 'editor' , title : 'Editor' , autocomplete : true } ,
{ id : 'actor' , title : 'Actor' , autocomplete : true } ,
{ id : 'character' , title : 'Character' , autocomplete : true } ,
{ id : 'name' , title : 'Name' , autocomplete : true } ,
{ id : 'genre' , title : 'Genre' , autocomplete : true } ,
{ id : 'keyword' , title : 'Keyword' , autocomplete : true } ,
{ id : 'summary' , title : 'Summary' } ,
{ id : 'dialog' , title : 'Dialog' }
2010-07-05 16:14:12 +00:00
] ,
2010-09-03 20:54:02 +00:00
groups : [ 'director' , 'country' , 'year' , 'language' , 'genre' ] ,
2010-07-05 16:14:12 +00:00
itemViews : [
2010-09-03 20:54:02 +00:00
{ id : 'info' , title : 'Info' } ,
{ id : 'statistics' , title : 'Statistics' } ,
{ id : 'clips' , title : 'Clips' } ,
{ id : 'timeline' , title : 'Timeline' } ,
{ id : 'map' , title : 'Map' } ,
{ id : 'calendar' , title : 'Calendar' } ,
{ id : 'files' , title : 'Files' , admin : true }
2010-07-05 16:14:12 +00:00
] ,
listViews : [
2010-09-03 20:54:02 +00:00
{ id : 'list' , title : 'as List' } ,
{ id : 'icons' , title : 'as Icons' } ,
{ id : 'info' , title : 'with Info' } ,
{ id : 'clips' , title : 'with Clips' } ,
{ id : 'timelines' , title : 'with Timelines' } ,
{ id : 'maps' , title : 'with Maps' } ,
{ id : 'calendars' , title : 'with Calendars' } ,
{ id : 'clip' , title : 'as Clips' } ,
{ id : 'map' , title : 'on Map' } ,
{ id : 'calendar' , title : 'on Calendar' } ,
2010-07-05 16:14:12 +00:00
] ,
2010-07-11 08:01:15 +00:00
sections : [
2010-09-03 20:54:02 +00:00
{ id : 'history' , title : 'History' } ,
{ id : 'lists' , title : 'My Lists' } ,
{ id : 'public' , title : 'Public Lists' } ,
{ id : 'featured' , title : 'Featured Lists' }
2010-07-11 08:01:15 +00:00
] ,
2010-07-05 16:14:12 +00:00
sortKeys : [
2010-09-03 20:54:02 +00:00
{ id : 'title' , title : 'Title' , operator : '' , align : 'left' , width : 180 , removable : false } ,
{ id : 'director' , title : 'Director' , operator : '' , align : 'left' , width : 180 , removable : false } ,
{ id : 'country' , title : 'Country' , operator : '' , align : 'left' , width : 120 } ,
{ id : 'year' , title : 'Year' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'language' , title : 'Language' , operator : '' , align : 'left' , width : 120 } ,
{ id : 'runtime' , title : 'Runtime' , operator : '' , align : 'right' , width : 60 } ,
{ id : 'writer' , title : 'Writer' , operator : '' , align : 'left' , width : 180 } ,
{ id : 'producer' , title : 'Producer' , operator : '' , align : 'left' , width : 180 } ,
{ id : 'cinematographer' , title : 'Cinematographer' , operator : '' , align : 'left' , width : 180 } ,
{ id : 'editor' , title : 'Editor' , operator : '' , align : 'left' , width : 180 } ,
{ id : 'actors' , title : 'Number of Actors' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'genre' , title : 'Genre' , operator : '' , align : 'left' , width : 120 } ,
{ id : 'keywords' , title : 'Number of Keywords' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'summary' , title : 'Words in Summary' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'trivia' , title : 'Words in Trivia' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'releasedate' , title : 'Release Date' , operator : '-' , align : 'left' , width : 90 } ,
{ id : 'budget' , title : 'Budget' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'gross' , title : 'Gross' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'profit' , title : 'Profit' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'rating' , title : 'Rating' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'votes' , title : 'Votes' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'id' , title : 'ID' , operator : '' , align : 'left' , width : 90 } ,
{ id : 'aspectratio' , title : 'Aspect Ratio' , operator : '-' , align : 'left' , width : 90 } ,
{ id : 'duration' , title : 'Duration' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'color' , title : 'Color' , operator : '' , align : 'left' , width : 90 } ,
{ id : 'saturation' , title : 'Saturation' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'brightness' , title : 'Brightness' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'volume' , title : 'Volume' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'clips' , title : 'Clips' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'cuts' , title : 'Cuts' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'cutsperminute' , title : 'Cuts per Minute' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'words' , title : 'Words' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'wordsperminute' , title : 'Words per Minute' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'resolution' , title : 'Resolution' , operator : '-' , align : 'left' , width : 90 } ,
{ id : 'pixels' , title : 'Pixels' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'size' , title : 'Size' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'bitrate' , title : 'Bitrate' , operator : '-' , align : 'right' , width : 90 } ,
{ id : 'files' , title : 'Files' , operator : '-' , align : 'right' , width : 60 } ,
{ id : 'filename' , title : 'Filename' , operator : '' , align : 'left' , width : 180 } ,
{ id : 'published' , title : 'Date Published' , operator : '-' , align : 'left' , width : 90 } ,
{ id : 'modified' , title : 'Date Modified' , operator : '-' , align : 'left' , width : 90 }
2010-07-05 16:14:12 +00:00
] ,
2010-07-06 05:48:42 +00:00
totals : [
2010-09-03 20:54:02 +00:00
{ id : 'items' } ,
{ id : 'runtime' } ,
{ id : 'files' , admin : true } ,
{ id : 'duration' , admin : true } ,
{ id : 'size' , admin : true } ,
{ id : 'pixels' }
2010-07-06 05:48:42 +00:00
] ,
2010-07-24 01:30:08 +00:00
user : {
2010-09-03 20:54:02 +00:00
group : 'guest' ,
2010-07-05 16:14:12 +00:00
ui : {
2010-09-03 20:54:02 +00:00
columns : [ 'id' , 'title' , 'director' , 'country' , 'year' , 'language' , 'runtime' , 'genre' , 'releasedate' ] ,
// find: { conditions: [{ key: '', value: '', operator: '' }], operator: '' },
findQuery : { conditions : [ { key : '' , value : '' , operator : '' } ] , operator : '' } ,
groupsQuery : { conditions : [ ] , operator : '|' } ,
2010-07-15 19:04:19 +00:00
groupsSize : 128 ,
2010-09-03 20:54:02 +00:00
itemView : 'info' ,
listQuery : { conditions : [ ] , operator : '' } ,
2010-07-06 18:28:42 +00:00
listsSize : 192 ,
2010-09-03 20:54:02 +00:00
listView : 'list' ,
sections : [ 'history' , 'lists' , 'public' , 'featured' ] ,
2010-07-05 16:14:12 +00:00
showGroups : true ,
showInfo : true ,
2010-07-06 18:28:42 +00:00
showLists : true ,
2010-07-05 16:14:12 +00:00
showMovies : true ,
sort : [
2010-09-03 20:54:02 +00:00
{ key : 'director' , operator : '' }
2010-07-05 16:14:12 +00:00
] ,
2010-09-03 20:54:02 +00:00
theme : $ . browser . mozilla ? 'classic' : 'modern'
2010-07-05 16:14:12 +00:00
} ,
2010-09-03 20:54:02 +00:00
username : ''
2010-07-05 16:14:12 +00:00
}
} ,
2010-07-24 01:30:08 +00:00
user = config . user ,
2010-07-06 05:48:42 +00:00
$ui = {
groups : [ ]
2010-07-08 15:02:22 +00:00
} ,
ui = {
infoRatio : 4 / 3 ,
selectedMovies : [ ]
2010-07-14 15:25:20 +00:00
} ,
// Objects
Query = ( function ( ) {
function constructFind ( query ) {
2010-09-03 20:54:02 +00:00
Ox . print ( 'cF' , query )
2010-07-20 20:03:47 +00:00
return /*encodeURI(*/ $ . map ( query . conditions , function ( v , i ) {
2010-07-14 15:25:20 +00:00
if ( ! Ox . isUndefined ( v . conditions ) ) {
2010-09-03 20:54:02 +00:00
return '[' + constructFind ( v ) + ']' ;
2010-07-14 15:25:20 +00:00
} else {
2010-09-03 20:54:02 +00:00
return v . value !== '' ? v . key + ( v . key ? ':' : '' ) + constructValue ( v . value , v . operator ) : null ;
2010-07-14 15:25:20 +00:00
}
2010-07-20 20:03:47 +00:00
} ) . join ( query . operator ) /*)*/ ;
2010-07-14 15:25:20 +00:00
}
function constructValue ( value , operator ) {
2010-09-03 20:54:02 +00:00
operator = operator . replace ( '=' , '^$' ) ;
if ( operator . indexOf ( '$' ) > - 1 ) {
value = operator . substr ( 0 , operator . length - 1 ) + value + '$'
2010-07-14 15:25:20 +00:00
} else {
value = operator + value ;
}
return value ;
}
function mergeFind ( ) {
}
function parseFind ( str ) {
var find = {
conditions : [ ] ,
2010-09-03 20:54:02 +00:00
operator : ''
2010-07-14 15:25:20 +00:00
} ,
2010-07-14 15:46:57 +00:00
subconditions = str . match ( /\[.*?\]/g ) || [ ] ;
2010-07-14 15:25:20 +00:00
$ . each ( subconditions , function ( i , v ) {
2010-07-14 15:46:57 +00:00
subconditions [ i ] = v . substr ( 1 , v . length - 2 ) ;
2010-09-03 20:54:02 +00:00
str = str . replace ( v , '[' + i + ']' ) ;
2010-07-14 15:25:20 +00:00
} ) ;
2010-09-03 20:54:02 +00:00
if ( str . indexOf ( ',' ) > - 1 ) {
find . operator = '&' ;
} else if ( str . indexOf ( '|' ) > - 1 ) {
find . operator = '|' ;
2010-07-14 15:25:20 +00:00
}
2010-09-03 20:54:02 +00:00
Ox . print ( 'pF' , str , find . operator )
find . conditions = $ . map ( find . operator === '' ? [ str ] : str . split ( find . operator == '&' ? ',' : '|' ) , function ( v , i ) {
Ox . print ( 'v' , v )
2010-07-14 15:25:20 +00:00
var ret , kv ;
2010-09-03 20:54:02 +00:00
if ( v [ 0 ] == '[' ) {
Ox . print ( 'recursion' , subconditions )
2010-07-14 15:46:57 +00:00
ret = parseFind ( subconditions [ parseInt ( v . substr ( 1 , v . length - 2 ) ) ] ) ;
2010-07-14 15:25:20 +00:00
} else {
2010-09-03 20:54:02 +00:00
kv = ( ( v . indexOf ( ':' ) > - 1 ? '' : ':' ) + v ) . split ( ':' ) ;
2010-07-14 15:25:20 +00:00
ret = $ . extend ( {
key : kv [ 0 ]
} , parseValue ( kv [ 1 ] ) ) ;
}
return ret ;
} ) ;
return find ;
}
function parseValue ( str ) {
var value = {
2010-07-20 20:03:47 +00:00
value : decodeURI ( str ) ,
2010-09-03 20:54:02 +00:00
operator : ''
2010-07-14 15:25:20 +00:00
} ;
2010-09-03 20:54:02 +00:00
if ( value . value [ 0 ] == '!' ) {
value . operator = '!'
2010-07-14 15:25:20 +00:00
value . value = value . value . substr ( 1 ) ;
}
2010-09-03 20:54:02 +00:00
if ( '^<>' . indexOf ( value . value [ 0 ] ) > - 1 ) {
2010-07-14 15:25:20 +00:00
value . operator += value . value [ 0 ] ;
value . value = value . value . substr ( 1 ) ;
}
2010-09-03 20:54:02 +00:00
if ( value . value . substr ( - 1 ) == '$' ) {
value . operator += '$' ;
2010-07-14 15:46:57 +00:00
value . value = value . value . substr ( 0 , value . value . length - 1 ) ;
2010-07-14 15:25:20 +00:00
}
2010-09-03 20:54:02 +00:00
value . operator = value . operator . replace ( '^$' , '=' ) ;
2010-07-14 15:25:20 +00:00
return value ;
}
return {
fromString : function ( str ) {
var query = Ox . unserialize ( str ) ,
sort = [ ] ;
2010-09-03 20:54:02 +00:00
if ( 'find' in query ) {
2010-07-20 20:03:47 +00:00
user . ui . findQuery = parseFind ( query . find ) ;
2010-09-03 20:54:02 +00:00
Ox . print ( 'user.ui.findQuery' , user . ui . findQuery )
2010-07-14 15:25:20 +00:00
}
2010-09-03 20:54:02 +00:00
if ( 'sort' in query ) {
sort = query . sort . split ( ',' )
user . ui . sort = $ . map ( query . sort . split ( ',' ) , function ( v , i ) {
var hasOperator = '+-' . indexOf ( v [ 0 ] ) > - 1 ,
2010-07-14 15:25:20 +00:00
key = hasOperator ? query . sort . substr ( 1 ) : query . sort ,
2010-09-03 20:54:02 +00:00
operator = hasOperator ? v [ 0 ] . replace ( '+' , '' ) : Ox . getObjectById ( config . sortKeys , key ) . operator ;
2010-07-14 15:25:20 +00:00
return {
key : key ,
operator : operator
} ;
} ) ;
}
2010-09-03 20:54:02 +00:00
if ( 'view' in query ) {
2010-07-14 15:25:20 +00:00
user . ui . listView = query . view ;
}
} ,
toObject : function ( groupId ) {
2010-09-03 20:54:02 +00:00
Ox . print ( 'tO' , user . ui . findQuery . conditions )
2010-07-14 15:25:20 +00:00
// the inner $.merge() creates a clone
2010-07-20 20:03:47 +00:00
var conditions = $ . merge ( $ . merge ( [ ] , user . ui . listQuery . conditions ) , user . ui . findQuery . conditions ) ;
$ . merge ( conditions , groups ? $ . map ( groups , function ( v , i ) {
if ( v . id != groupId && v . query . conditions . length ) {
return v . query . conditions . length == 1 ?
v . query . conditions : v . query ;
2010-07-14 15:25:20 +00:00
}
} ) : [ ] ) ,
2010-09-03 20:54:02 +00:00
operator = conditions . length < 2 ? '' : ',' ; // fixme: should be &
2010-07-14 15:25:20 +00:00
Ox . print ( groupId , user . ui . find , conditions ) ;
return {
conditions : conditions ,
operator : operator
} ;
} ,
toString : function ( ) {
2010-09-03 20:54:02 +00:00
Ox . print ( 'tS' , user . ui . find )
2010-07-14 15:25:20 +00:00
return Ox . serialize ( {
find : constructFind ( Query . toObject ( ) ) ,
sort : user . ui . sort [ 0 ] . operator + user . ui . sort [ 0 ] . key ,
view : user . ui . listView
} ) ;
}
} ;
} ) ( ) ;
2010-07-05 16:14:12 +00:00
// App
2010-07-14 15:25:20 +00:00
Query . fromString ( location . hash . substr ( 1 ) ) ;
2010-09-03 20:54:02 +00:00
Ox . print ( 'user.ui' , user . ui )
2010-07-07 12:36:42 +00:00
document . title = config . appName ;
2010-07-05 16:14:12 +00:00
Ox . theme ( user . ui . theme ) ;
2010-06-24 13:11:46 +00:00
app = new Ox . App ( {
2010-07-07 12:36:42 +00:00
name : config . appName ,
2010-09-03 20:54:02 +00:00
requestURL : '/api/'
2010-06-24 13:11:46 +00:00
} ) ;
2010-09-03 20:54:02 +00:00
$ ( '<script>' )
2010-07-24 01:30:08 +00:00
. attr ( {
2010-09-03 20:54:02 +00:00
src : 'http://maps.google.com/maps/api/js?callback=foo&sensor=false' ,
type : 'text/javascript'
2010-07-24 01:30:08 +00:00
} )
. appendTo ( $body ) ;
foo = function ( ) { } ;
2010-07-05 16:14:12 +00:00
// MainMenu
$ui . mainMenu = new Ox . MainMenu ( {
2010-09-03 20:54:02 +00:00
extras : [
$ui . loadingIcon = new Ox . LoadingIcon ( {
size : 'medium'
} )
] ,
id : 'mainMenu' ,
menus : [
{ id : config . appId + 'Menu' , title : config . appName , items : [
{ id : 'about' , title : 'About' } ,
{ } ,
{ id : 'home' , title : 'Home Screen' } ,
{ id : 'faq' , title : 'Frequently Asked Questions' } ,
{ id : 'tos' , title : 'Terms of Service' } ,
{ } ,
{ id : 'contact' , title : 'Contact' }
2010-07-05 16:14:12 +00:00
] } ,
2010-09-03 20:54:02 +00:00
{ id : 'userMenu' , title : 'User' , items : [
{ id : 'username' , title : 'User: not logged in' , disabled : true } ,
{ } ,
{ id : 'preferences' , title : 'Preferences...' , disabled : true , keyboard : 'control ,' } ,
{ } ,
{ id : 'register' , title : 'Create an Account...' } ,
{ id : 'loginlogout' , title : [ 'Login...' , 'Logout...' ] }
2010-07-05 16:14:12 +00:00
] } ,
2010-09-03 20:54:02 +00:00
{ id : 'listMenu' , title : 'List' , items : [
{ id : 'history' , title : 'History' , items : [
{ id : 'allmovies' , title : 'All Movies' }
] } ,
{ id : 'lists' , title : 'View List' , items : [
{ id : 'favorites' , title : 'Favorites' }
] } ,
{ id : 'features' , title : 'View Feature' , items : [
{ id : 'situationistfilm' , title : 'Situationist Film' } ,
{ id : 'timelines' , title : 'Timelines' }
] } ,
{ } ,
{ id : 'newlist' , title : 'New List...' , keyboard : 'control n' } ,
{ id : 'newlistfromselection' , title : 'New List from Selection...' , disabled : true , keyboard : 'shift control n' } ,
{ id : 'newsmartlist' , title : 'New Smart List...' , keyboard : 'alt control n' } ,
{ id : 'newsmartlistfromresults' , title : 'New Smart List from Results...' , keyboard : 'shift alt control n' } ,
{ } ,
{ id : 'addmovietolist' , title : [ 'Add Selected Movie to List...' , 'Add Selected Movies to List...' ] , disabled : true } ,
{ } ,
{ id : 'setposterframe' , title : 'Set Poster Frame' , disabled : true }
] } ,
{ id : 'editMenu' , title : 'Edit' , items : [
{ id : 'undo' , title : 'Undo' , disabled : true , keyboard : 'control z' } ,
{ id : 'redo' , title : 'Redo' , disabled : true , keyboard : 'shift control z' } ,
{ } ,
{ id : 'cut' , title : 'Cut' , disabled : true , keyboard : 'control x' } ,
{ id : 'copy' , title : 'Copy' , disabled : true , keyboard : 'control c' } ,
{ id : 'paste' , title : 'Paste' , disabled : true , keyboard : 'control v' } ,
{ id : 'delete' , title : 'Delete' , disabled : true , keyboard : 'delete' } ,
{ } ,
{ id : 'selectall' , title : 'Select All' , disabled : true , keyboard : 'control a' } ,
{ id : 'selectnone' , title : 'Select None' , disabled : true , keyboard : 'shift control a' } ,
{ id : 'invertselection' , title : 'Invert Selection' , disabled : true , keyboard : 'alt control a' }
2010-07-05 16:14:12 +00:00
] } ,
2010-09-03 20:54:02 +00:00
{ id : 'viewMenu' , title : 'View' , items : [
{ id : 'movies' , title : 'View Movies' , items : [
{ group : 'viewmovies' , min : 1 , max : 1 , items : $ . map ( config . listViews , function ( view , i ) {
return $ . extend ( {
checked : user . ui . listView == view . id ,
} , view ) ;
} ) } ,
] } ,
{ id : 'icons' , title : 'Icons' , items : [
{ id : 'poster' , title : 'Poster' } ,
{ id : 'still' , title : 'Still' } ,
{ id : 'timeline' , title : 'Timeline' }
] } ,
{ id : 'info' , title : 'Info' , items : [
{ id : 'poster' , title : 'Poster' } ,
{ id : 'video' , title : 'Video' }
] } ,
{ } ,
{ id : 'openmovie' , title : [ 'Open Movie' , 'Open Movies' ] , disabled : true , items : $ . map ( config . itemViews , function ( view , i ) {
return view ;
} ) } ,
{ } ,
{ id : 'lists' , title : 'Hide Lists' , keyboard : 'shift l' } ,
{ id : 'info' , title : 'Hide Info' , keyboard : 'shift i' } ,
{ id : 'groups' , title : 'Hide Groups' , keyboard : 'shift g' } ,
{ id : 'movies' , title : 'Hide Movies' , disabled : true , keyboard : 'shift m' }
] } ,
{ id : 'sortMenu' , title : 'Sort' , items : [
{ id : 'sortmovies' , title : 'Sort Movies by' , items : [
{ group : 'sortmovies' , min : 1 , max : 1 , items : $ . map ( config . sortKeys , function ( key , i ) {
return $ . extend ( {
checked : user . ui . sort [ 0 ] . key == key . id ,
} , key ) ;
} ) }
] } ,
{ id : 'ordermovies' , title : 'Order Movies' , items : [
{ group : 'ordermovies' , min : 1 , max : 1 , items : [
{ id : 'ascending' , title : 'Ascending' , checked : user . ui . sort [ 0 ] . operator === '' } ,
{ id : 'descending' , title : 'Descending' , checked : user . ui . sort [ 0 ] . operator == '-' }
] }
] } ,
{ id : 'advancedsort' , title : 'Advanced Sort...' , keyboard : 'shift control s' } ,
{ } ,
{ id : 'groupsstuff' , title : 'Groups Stuff' }
2010-07-05 16:14:12 +00:00
] } ,
2010-09-03 20:54:02 +00:00
{ id : 'findMenu' , title : 'Find' , items : [
{ id : 'find' , title : 'Find' , items : [
{ group : 'find' , min : 1 , max : 1 , items : $ . map ( config . findKeys , function ( key , i ) {
return $ . extend ( {
checked : user . ui . findQuery . conditions . length &&
( user . ui . findQuery . conditions [ 0 ] . key == key . id ||
( user . ui . findQuery . conditions [ 0 ] . key === '' && key . id == 'all' ) ) ,
} , key )
} ) }
] } ,
{ id : 'advancedfind' , title : 'Advanced Find...' , keyboard : 'shift control f' }
2010-07-05 16:14:12 +00:00
] } ,
2010-09-03 20:54:02 +00:00
{ id : 'dataMenu' , title : 'Data' , items : [
{ id : 'titles' , title : 'Manage Titles...' } ,
{ id : 'names' , title : 'Manage Names...' } ,
{ } ,
{ id : 'posters' , title : 'Manage Stills...' } ,
{ id : 'posters' , title : 'Manage Posters...' } ,
{ } ,
{ id : 'places' , title : 'Manage Places...' } ,
{ id : 'events' , title : 'Manage Events...' } ,
{ } ,
{ id : 'users' , title : 'Manage Users...' } ,
{ id : 'lists' , title : 'Manage Lists...' } ,
] } ,
{ id : 'codeMenu' , title : 'Code' , items : [
{ id : 'download' , title : 'Download' } ,
{ id : 'contribute' , title : 'Contribute' } ,
{ id : 'report' , title : 'Report a Bug' } ,
] } ,
{ id : 'helpMenu' , title : 'Help' , items : [
{ id : 'help' , title : config . appName + ' Help' , keyboard : 'shift ?' }
] } ,
{ id : 'debugMenu' , title : 'Debug' , items : [
{ id : 'query' , title : 'Show Query' }
] } ,
{ id : 'testMenu' , title : 'Test' , items : [
{ group : 'foogroup' , items : [
{ id : 'item1' , title : 'Item 1' } ,
{ id : 'item2' , title : 'Item 2' }
] }
] }
]
} )
. bindEvent ( {
change : function ( event , data ) {
if ( data . id == 'find' ) {
var id = data . checked [ 0 ] . id ;
$ui . findSelect . selectItem ( id ) ;
} else if ( data . id == 'ordermovies' ) {
var id = data . checked [ 0 ] . id ;
$ui . list . sort ( user . ui . sort [ 0 ] . key , id == 'ascending' ? '' : '-' ) ;
Ox . print ( user . ui . sort [ 0 ] . key , user . ui . sort [ 0 ] . operator ) ;
} else if ( data . id == 'sortmovies' ) {
var id = data . checked [ 0 ] . id ,
operator = Ox . getObjectById ( config . sortKeys , id ) . operator ;
$ui . mainMenu . checkItem ( 'sortMenu_ordermovies_' + ( operator === '' ? 'ascending' : 'descending' ) ) ;
$ui . list . sort ( id , operator ) ;
Ox . print ( user . ui . sort [ 0 ] . key , user . ui . sort [ 0 ] . operator ) ;
}
} ,
click : function ( event , data ) {
if ( data . id == 'about' ) {
var $dialog = new Ox . Dialog ( {
buttons : [
{
click : function ( ) {
$dialog . close ( ) ;
} ,
id : 'close' ,
title : 'Close'
}
] ,
id : 'about' ,
title : 'About'
} ) . open ( ) ;
} else if ( data . id == 'home' ) {
var $dialog = new Ox . Dialog ( {
buttons : [
{
click : function ( ) {
$dialog . close ( ) ;
} ,
id : 'close' ,
title : 'Close'
}
] ,
height : 498 ,
id : 'home' ,
title : config . appName ,
width : 800
} ) . open ( ) ;
} else if ( data . id == 'places' ) {
var $manage = new Ox . SplitPanel ( {
elements : [
{
collapsible : true ,
element : new Ox . SplitPanel ( {
elements : [
{
element : new Ox . Toolbar ( {
orientation : 'horizontal' ,
size : 44
} ) . append (
$ui . findPlacesInput = new Ox . Input ( {
clear : true ,
id : 'findPlacesInput' ,
placeholder : [
{ id : 'name' , title : 'Find: Name' } ,
{ id : 'region' , title : 'Find: Region' } ,
{ id : 'user' , title : 'Find: User' }
]
} )
. css ( {
float : 'left' ,
margin : '4px'
} )
. width ( 128 )
) . append (
$ui . findPlacesInput = new Ox . Select ( {
id : 'sortPlacesSelect' ,
items : [
{ id : 'name' , title : 'Sort by Name' , checked : true } ,
{ id : 'region' , title : 'Sort by Region' } ,
{ id : 'size' , title : 'Sort by Size' } ,
{ id : 'latitude' , title : 'Sort by Latitude' } ,
{ id : 'longitude' , title : 'Sort by Longitude' } ,
{ id : 'clips' , title : 'Sort by Number of Clips' } ,
{ id : 'user' , title : 'Sort by User' } ,
{ id : 'datecreated' , title : 'Sort by Date Added' } ,
{ id : 'datemodified' , title : 'Sort by Date Modified' }
]
} )
. css ( {
float : 'left' ,
margin : '0 4px 4px 2px'
} )
. width ( 128 )
) ,
size : 44
} ,
{
element : new Ox . Element ( 'div' )
} ,
{
element : new Ox . Toolbar ( {
orientation : 'horizontal' ,
size : 16
} ) ,
size : 16
}
] ,
orientation : 'vertical'
} ) ,
resizable : true ,
resize : [ 128 , 192 , 256 ] ,
size : 192
} ,
{
element : new Ox . SplitPanel ( {
elements : [
{
element : new Ox . Toolbar ( {
orientation : 'horizontal' ,
size : 24
} ) . append (
$ui . labelsButton = new Ox . Button ( {
id : 'labelsButton' ,
value : [ 'Show Labels' , 'Hide Labels' ]
} )
. css ( {
float : 'left' ,
margin : '4px'
} )
. width ( 80 )
) . append (
$ui . findMapInput = new Ox . Input ( {
clear : true ,
id : 'findMapInput' ,
placeholder : [ { id : 'foo' , title : 'Find on Map' } ]
} )
. css ( {
float : 'right' ,
margin : '4px'
} )
. width ( 200 )
) ,
size : 24
} ,
{
element : $ui . map = new Ox . Map ( {
places : [ 'Boston' , 'Barcelona' , 'Berlin' , 'Beirut' , 'Bombay' , 'Bangalore' , 'Beijing' ]
} ) . css ( {
left : 0 ,
top : 0 ,
right : 0 ,
bottom : 0
} )
} ,
{
element : new Ox . Toolbar ( {
orientation : 'horizontal' ,
size : 24
} ) . append (
$ui . newPlaceButton = new Ox . Button ( {
id : 'newPlaceButton' ,
value : 'New Place...'
} )
. css ( {
float : 'left' ,
margin : '4px'
} )
. width ( 80 )
) ,
size : 24
}
] ,
orientation : 'vertical'
} )
}
] ,
orientation : 'horizontal'
} ) . css ( {
top : '24px' ,
bottom : '24px' ,
} ) ,
$dialog = new Ox . Dialog ( {
buttons : [
{
click : function ( ) {
$dialog . close ( ) ;
} ,
id : 'close' ,
title : 'Close' ,
value : 'Close'
}
] ,
height : parseInt ( $document . height ( ) * 0.8 ) ,
id : 'places' ,
minHeight : 400 ,
minWidth : 600 ,
padding : 0 ,
title : 'Manage Places' ,
width : parseInt ( $document . width ( ) * 0.8 )
} ) . css ( {
overflow : 'hidden'
} ) . append ( $manage ) . open ( ) ;
}
}
} ) ;
2010-07-05 16:14:12 +00:00
2010-07-11 08:01:15 +00:00
// Lists
$ui . lists = new Ox . Element ( ) ;
$ui . sections = [ ] ;
$ . each ( user . ui . sections , function ( i , id ) {
var section = new Ox . CollapsePanel ( {
2010-09-03 20:54:02 +00:00
id : id ,
size : 'small' ,
2010-07-11 08:01:15 +00:00
title : Ox . getObjectById ( config . sections , id ) . title
} ) ;
$ui . sections . push ( section ) ;
section . $content . append (
2010-09-03 20:54:02 +00:00
$ ( '<div>' ) . css ( { height : '20px' } ) . append (
$ ( '<div>' ) . css ( { float : 'left' , width : '16px' , height : '16px' , margin : '1px' } ) . append (
$ ( '<img>' ) . attr ( { src : 'static/oxjs/build/png/ox.ui.modern/iconFind.png' } ) . css ( { width : '16px' , height : '16px' , border : 0 , background : 'rgb(64, 64, 64)' , WebkitBorderRadius : '2px' } )
2010-07-11 08:01:15 +00:00
)
) . append (
2010-09-03 20:54:02 +00:00
$ ( '<div>' ) . css ( { float : 'left' , width : '122px' , height : '14px' , margin : '2px' } ) . html ( 'Foo' )
2010-07-11 08:01:15 +00:00
) . append (
2010-09-03 20:54:02 +00:00
$ ( '<div>' ) . css ( { float : 'left' , width : '40px' , height : '14px' , margin : '2px' , textAlign : 'right' } ) . html ( '23' )
2010-07-11 08:01:15 +00:00
)
) ;
$ui . lists . append ( section ) ;
} )
// Info
2010-07-08 15:02:22 +00:00
$ui . info = new Ox . Element ( )
. append (
2010-09-03 20:54:02 +00:00
$ui . infoStill = new Ox . Element ( 'img' )
2010-07-08 15:02:22 +00:00
. css ( {
2010-09-03 20:54:02 +00:00
position : 'absolute' ,
2010-07-08 15:02:22 +00:00
left : 0 ,
top : 0
} )
)
. append (
2010-09-03 20:54:02 +00:00
$ui . infoTimeline = new Ox . Element ( 'img' )
2010-07-08 15:02:22 +00:00
. css ( {
2010-09-03 20:54:02 +00:00
position : 'absolute' ,
2010-07-08 15:02:22 +00:00
left : 0 ,
bottom : 0 ,
2010-09-03 20:54:02 +00:00
height : '16px' ,
2010-07-08 15:02:22 +00:00
} )
) ;
2010-07-05 16:14:12 +00:00
// Toolbar
$ui . toolbar = new Ox . Bar ( {
size : 24
} )
. append (
$ui . groupsButton = new Ox . Button ( {
2010-09-03 20:54:02 +00:00
id : 'groupsButton' ,
title : [
{ id : 'show' , title : 'Show Groups' } ,
{ id : 'hide' , title : 'Hide Groups' }
] ,
width : 96
2010-07-05 16:14:12 +00:00
} )
. css ( {
2010-09-03 20:54:02 +00:00
float : 'left' ,
margin : '4px'
2010-07-05 16:14:12 +00:00
} )
)
. append (
$ui . viewSelect = new Ox . Select ( {
2010-09-03 20:54:02 +00:00
id : 'viewSelect' ,
2010-07-05 16:14:12 +00:00
items : $ . map ( config . listViews , function ( view , i ) {
2010-09-03 20:54:02 +00:00
view . title = 'View ' + view . title
2010-07-06 05:48:42 +00:00
return $ . extend ( {
checked : user . ui . listView == view . id ,
} , view ) ;
2010-09-03 20:54:02 +00:00
} ) ,
width : 144
2010-07-05 16:14:12 +00:00
} )
. css ( {
2010-09-03 20:54:02 +00:00
float : 'left' ,
margin : '4px'
} )
. bindEvent ( 'change' , function ( event , data ) {
var id = data . checked [ 0 ] . id ;
$ui . mainMenu . checkItem ( 'viewMenu_movies_' + id ) ;
//$ui.list.$element.replaceWith(constructList(id));
Ox . print ( 'change ... id' , id , list = constructList ( id ) , list . options ( ) , list . options ( 'id' ) )
//$ui.contentPanel.replace('list', constructList(id));
$ui . contentPanel . replace ( 1 , constructList ( id ) ) ;
2010-07-05 16:14:12 +00:00
} )
)
. append (
2010-09-03 20:54:02 +00:00
$ui . findElement = new Ox . FormElementGroup ( {
elements : [
$ui . findSelect = new Ox . Select ( {
id : 'select' ,
items : $ . map ( config . findKeys , function ( key , i ) {
return {
id : key . id ,
title : 'Find: ' + key . title
} ;
} ) ,
overlap : 'right' ,
width : 112
} )
. bindEvent ( 'change' , function ( event , data ) {
var key = data . checked [ 0 ] . id ;
user . ui . findQuery . conditions [ 0 ] . key = key
$ui . mainMenu . checkItem ( 'findMenu_find_' + key ) ;
} ) ,
$ui . findInput = new Ox . Input ( {
autocomplete : function ( value , callback ) {
var key = 'title' ;
var findKey = Ox . getObjectById ( config . findKeys , key ) ;
Ox . print ( 'autocomplete' , key , value ) ;
value === '' && Ox . print ( 'Warning: autocomplete function should never be called with empty value' ) ;
if ( 'autocomplete' in findKey && findKey . autocomplete ) {
app . request ( 'find' , {
keys : [ key ] ,
query : {
conditions : [
{
key : key ,
value : value ,
operator : ''
}
] ,
operator : ''
} ,
sort : [
{
key : key ,
operator : ''
}
] ,
range : [ 0 , 10 ]
} , function ( result ) {
callback ( $ . map ( result . data . items , function ( v ) {
return v . title ;
} ) ) ;
} ) ;
} else {
callback ( ) ;
}
} ,
autocompleteSelect : true ,
autocompleteSelectHighlight : true ,
autocompleteSelectSubmit : true ,
clear : true ,
id : 'input' ,
width : 192
} )
. bindEvent ( 'submit' , function ( event , data ) {
var key = user . ui . findQuery . conditions [ 0 ] . key ,
query ;
Ox . print ( 'key' , key ) ;
user . ui . findQuery . conditions = [
{
key : key == 'all' ? '' : key ,
value : data . value ,
operator : ''
}
] ;
$ . each ( groups , function ( i , group ) {
groups [ i ] . query . conditions = [ ] ;
$ui . groups [ i ] . options ( {
request : function ( options ) {
delete options . keys ;
return app . request ( 'find' , $ . extend ( options , {
group : group . id ,
query : Query . toObject ( group . id )
} ) , options . callback ) ;
}
} ) ;
} ) ;
$ui . list . options ( {
request : function ( options ) {
return app . request ( 'find' , $ . extend ( options , {
query : query = Query . toObject ( )
} ) , options . callback ) ;
}
} ) ;
location . hash = Query . toString ( query ) ;
} )
] ,
id : 'findInput'
} )
. css ( {
float : 'right' ,
margin : '4px'
} )
/ *
2010-07-05 16:14:12 +00:00
$ui . findInput = new Ox . Input ( {
autocomplete : function ( key , value , callback ) {
2010-07-15 14:41:40 +00:00
var findKey = Ox . getObjectById ( config . findKeys , key )
2010-09-03 20:54:02 +00:00
Ox . print ( 'autocomplete' , key , value ) ;
value === '' && Ox . print ( 'Warning: autocomplete function should never be called with empty value' ) ;
if ( 'autocomplete' in findKey && findKey . autocomplete ) {
app . request ( 'find' , {
2010-07-05 16:14:12 +00:00
keys : [ key ] ,
query : {
conditions : [
{
key : key ,
value : value ,
2010-09-03 20:54:02 +00:00
operator : ''
2010-07-05 16:14:12 +00:00
}
] ,
2010-09-03 20:54:02 +00:00
operator : ''
2010-07-05 16:14:12 +00:00
} ,
sort : [
{
key : key ,
2010-09-03 20:54:02 +00:00
operator : ''
2010-07-05 16:14:12 +00:00
}
] ,
range : [ 0 , 10 ]
} , function ( result ) {
callback ( $ . map ( result . data . items , function ( v ) {
return v . title ;
} ) ) ;
} ) ;
2010-07-14 15:25:20 +00:00
} else {
callback ( ) ;
2010-07-05 16:14:12 +00:00
}
} ,
clear : true ,
highlight : true ,
2010-09-03 20:54:02 +00:00
id : 'findInput' ,
2010-07-05 16:14:12 +00:00
label : $ . map ( config . findKeys , function ( key , i ) {
return {
id : key . id ,
2010-09-03 20:54:02 +00:00
title : 'Find: ' + key . title
2010-07-05 16:14:12 +00:00
}
} ) ,
labelWidth : 85
} )
2010-07-06 05:48:42 +00:00
. css ( {
2010-09-03 20:54:02 +00:00
float : 'right' ,
margin : '4px'
2010-07-05 16:14:12 +00:00
} )
. width ( 300 )
2010-09-03 20:54:02 +00:00
* /
2010-07-05 16:14:12 +00:00
) ;
// Groups
2010-07-07 07:18:29 +00:00
var panelWidth = $document . width ( ) - user . ui . listsSize - 1 ,
2010-07-05 16:14:12 +00:00
groups = $ . map ( config . groups , function ( id , i ) {
2010-07-07 07:18:29 +00:00
var title = Ox . getObjectById ( config . sortKeys , id ) . title ,
width = getGroupWidth ( i , panelWidth ) ;
2010-07-05 16:14:12 +00:00
return {
id : id ,
2010-09-03 20:54:02 +00:00
element : $ui . groups [ i ] = new Ox . TextList ( {
columns : [
{
align : 'left' ,
id : 'name' ,
operator : id == 'year' ? '-' : '+' ,
title : title ,
unique : true ,
visible : true ,
width : width . column
} ,
{
align : 'right' ,
id : 'items' ,
operator : '-' ,
title : '#' ,
visible : true ,
width : 40
}
] ,
id : 'group_' + id ,
request : function ( options ) {
delete options . keys ;
app . request ( 'find' , $ . extend ( options , {
group : id ,
query : Query . toObject ( )
} ) , options . callback ) ;
2010-07-05 16:14:12 +00:00
} ,
2010-09-03 20:54:02 +00:00
sort : [
{
key : id == 'year' ? 'name' : 'items' ,
operator : '-'
}
]
} )
. bindEvent ( 'select' , function ( event , data ) {
Ox . print ( 'select' , i )
var group = groups [ i ] ,
query ;
groups [ i ] . query . conditions = $ . map ( data . ids , function ( v ) {
return {
key : group . id ,
value : v ,
operator : '='
} ;
} ) ;
query = Query . toObject ( ) ;
$ui . list . options ( {
request : function ( options ) {
return app . request ( 'find' , $ . extend ( options , {
query : query
} ) , options . callback ) ;
}
} ) ;
$ . each ( groups , function ( i _ , group _ ) {
if ( i _ != i ) {
$ui . groups [ i _ ] . options ( {
request : function ( options ) {
delete options . keys ;
return app . request ( 'find' , $ . extend ( options , {
group : group _ . id ,
query : Query . toObject ( group _ . id )
} ) , options . callback ) ;
}
} ) ;
}
} ) ;
location . hash = Query . toString ( query ) ;
} ) ,
2010-07-20 20:03:47 +00:00
query : {
conditions : [ ] ,
2010-09-03 20:54:02 +00:00
operator : '|'
2010-07-20 20:03:47 +00:00
} ,
2010-07-07 07:18:29 +00:00
size : width . list ,
2010-07-05 16:14:12 +00:00
title : title
} ;
} ) ;
2010-07-06 05:48:42 +00:00
// Statusbar
$ui . statusbar = new Ox . Bar ( {
size : 16
} )
. css ( {
2010-09-03 20:54:02 +00:00
textAlign : 'center'
2010-07-06 05:48:42 +00:00
} )
. append (
new Ox . Element ( )
. css ( {
2010-09-03 20:54:02 +00:00
marginTop : '2px' ,
fontSize : '9px'
2010-07-06 05:48:42 +00:00
} )
. append (
2010-09-03 20:54:02 +00:00
$ui . total = new Ox . Element ( 'span' )
2010-07-06 05:48:42 +00:00
)
. append (
2010-09-03 20:54:02 +00:00
new Ox . Element ( 'span' ) . html ( ' — ' )
2010-07-06 05:48:42 +00:00
)
. append (
2010-09-03 20:54:02 +00:00
$ui . selected = new Ox . Element ( 'span' )
2010-07-06 05:48:42 +00:00
)
) ;
2010-07-05 16:14:12 +00:00
// Interface
$ui . app = new Ox . SplitPanel ( {
2010-06-24 13:11:46 +00:00
elements : [
{
2010-07-05 16:14:12 +00:00
element : $ui . mainMenu ,
size : 20
2010-06-24 13:11:46 +00:00
} ,
{
2010-07-05 16:14:12 +00:00
element : $ui . mainPanel = new Ox . SplitPanel ( {
elements : [
{
2010-07-06 18:28:42 +00:00
collapsible : true ,
2010-07-05 16:14:12 +00:00
element : $ui . leftPanel = new Ox . SplitPanel ( {
2010-09-03 20:54:02 +00:00
elements : [
{
element : $ui . lists . options ( {
id : 'listsPanel'
} )
} ,
{
collapsible : true ,
element : $ui . info . options ( {
id : 'infoPanel'
} ) ,
size : user . ui . listsSize / ui . infoRatio + 16
}
] ,
id : 'leftPanel' ,
orientation : 'vertical'
} )
. bindEvent ( 'resize' , function ( event , data ) {
Ox . print ( 'resize' , data , data / ui . infoRatio + 16 ) ;
$ui . leftPanel . resize ( 'infoPanel' , Math . round ( data / ui . infoRatio ) + 16 ) ;
} ) ,
2010-07-06 18:28:42 +00:00
resizable : true ,
2010-07-15 19:04:19 +00:00
resize : [ 128 , 192 , 256 ] ,
size : user . ui . listsSize
2010-07-05 16:14:12 +00:00
} ,
{
element : $ui . rightPanel = new Ox . SplitPanel ( {
elements : [
{
2010-07-16 07:12:46 +00:00
element : $ui . toolbar . css ( { zIndex : 2 } ) , // fixme: remove later
2010-07-05 16:14:12 +00:00
size : 24
} ,
{
element : $ui . contentPanel = new Ox . SplitPanel ( {
elements : [
{
2010-07-15 19:04:19 +00:00
collapsible : true ,
2010-07-05 16:14:12 +00:00
element : $ui . groupsOuterPanel = new Ox . SplitPanel ( {
elements : [
{
2010-09-03 20:54:02 +00:00
element : $ui . groups [ 0 ] ,
2010-07-05 16:14:12 +00:00
size : groups [ 0 ] . size
} ,
{
element : $ui . groupsInnerPanel = new Ox . SplitPanel ( {
elements : [
{
2010-09-03 20:54:02 +00:00
element : $ui . groups [ 1 ] ,
2010-07-05 16:14:12 +00:00
size : groups [ 1 ] . size
} ,
{
2010-09-03 20:54:02 +00:00
element : $ui . groups [ 2 ] ,
2010-07-05 16:14:12 +00:00
} ,
{
2010-09-03 20:54:02 +00:00
element : $ui . groups [ 3 ] ,
2010-07-05 16:14:12 +00:00
size : groups [ 3 ] . size
}
2010-07-06 05:48:42 +00:00
] ,
2010-09-03 20:54:02 +00:00
orientation : 'horizontal'
2010-07-05 16:14:12 +00:00
} )
} ,
{
2010-09-03 20:54:02 +00:00
element : $ui . groups [ 4 ] ,
2010-07-05 16:14:12 +00:00
size : groups [ 4 ] . size
2010-07-06 05:48:42 +00:00
} ,
] ,
2010-09-03 20:54:02 +00:00
orientation : 'horizontal'
2010-07-05 16:14:12 +00:00
} ) ,
2010-07-15 19:04:19 +00:00
resizable : true ,
resize : [ 96 , 112 , 128 , 144 , 160 , 176 ] ,
size : user . ui . groupsSize
2010-07-05 16:14:12 +00:00
} ,
{
element : $ui . list = constructList ( user . ui . listView )
}
2010-07-06 05:48:42 +00:00
] ,
2010-09-03 20:54:02 +00:00
orientation : 'vertical'
2010-07-05 16:14:12 +00:00
} )
2010-07-06 05:48:42 +00:00
} ,
2010-07-05 16:14:12 +00:00
{
2010-07-06 05:48:42 +00:00
element : $ui . statusbar ,
2010-07-05 16:14:12 +00:00
size : 16
}
2010-07-06 05:48:42 +00:00
] ,
2010-09-03 20:54:02 +00:00
id : 'rightPanel' ,
orientation : 'vertical'
} )
. bindEvent ( 'resize' , function ( event , data ) {
var widths = $ . map ( groups , function ( v , i ) {
return getGroupWidth ( i , data ) ;
} ) ;
Ox . print ( 'widths' , widths ) ;
$ui . groupsOuterPanel . resize ( 0 , widths [ 0 ] . list ) . resize ( 2 , widths [ 4 ] . list ) ;
$ui . groupsInnerPanel . resize ( 0 , widths [ 1 ] . list ) . resize ( 2 , widths [ 3 ] . list ) ;
$ . each ( $ui . groups , function ( i , list ) {
list . resizeColumn ( 'name' , widths [ i ] . column ) ;
} ) ;
} )
2010-07-05 16:14:12 +00:00
}
2010-07-06 05:48:42 +00:00
] ,
2010-09-03 20:54:02 +00:00
orientation : 'horizontal'
2010-07-05 16:14:12 +00:00
} )
2010-06-24 13:11:46 +00:00
}
2010-07-06 05:48:42 +00:00
] ,
2010-09-03 20:54:02 +00:00
orientation : 'vertical'
2010-07-05 16:14:12 +00:00
} ) . appendTo ( $body ) ;
// Events
2010-07-06 05:48:42 +00:00
Ox . Request . requests ( ) && $ui . loadingIcon . start ( ) ;
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( '' , 'requestStart' , function ( ) {
Ox . print ( 'requestStart' )
2010-07-06 05:48:42 +00:00
$ui . loadingIcon . start ( ) ;
2010-07-05 16:14:12 +00:00
} ) ;
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( '' , 'requestStop' , function ( ) {
Ox . print ( 'requestStop' )
2010-07-06 05:48:42 +00:00
$ui . loadingIcon . stop ( ) ;
2010-07-05 16:14:12 +00:00
} ) ;
2010-07-07 12:36:42 +00:00
// Menu
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'click_loginlogout' , function ( event , data ) {
2010-07-20 20:03:47 +00:00
var $form = new Ox . Form ( {
2010-09-03 20:54:02 +00:00
error : 'Unknown username or wrong password' ,
id : 'login' ,
2010-07-20 20:03:47 +00:00
items : [
{
element : new Ox . Input ( {
2010-07-24 01:30:08 +00:00
autocorrect : function ( value , blur ) {
var length = value . length ;
2010-09-03 20:54:02 +00:00
value = $ . map ( value . toLowerCase ( ) . split ( '' ) , function ( v , i ) {
if ( new RegExp ( '[a-z0-9' + ( ( i == 0 || ( i == length - 1 && blur ) ) ? '' : '\- ' ) + ']' ) ( v ) ) {
2010-07-24 01:30:08 +00:00
return v
} else {
return null ;
}
2010-09-03 20:54:02 +00:00
} ) . join ( '' ) ;
$ . each ( [ '--' , '- ' , ' -' , '--' ] , function ( i , v ) {
2010-07-24 01:30:08 +00:00
while ( value . indexOf ( v ) > - 1 ) {
2010-09-03 20:54:02 +00:00
value = value . replace ( new RegExp ( v , 'g' ) , v [ 0 ] ) ;
2010-07-24 01:30:08 +00:00
}
} )
return value ;
} ,
2010-09-03 20:54:02 +00:00
id : 'username' ,
label : 'Username' ,
2010-07-24 01:30:08 +00:00
labelWidth : 120 ,
validate : function ( value , callback ) {
2010-09-03 20:54:02 +00:00
app . request ( 'findUser' , {
key : 'username' ,
2010-07-24 01:30:08 +00:00
value : value ,
2010-09-03 20:54:02 +00:00
operator : '='
2010-07-24 01:30:08 +00:00
} , function ( result ) {
2010-09-03 20:54:02 +00:00
Ox . print ( 'result' , result )
2010-07-24 01:30:08 +00:00
var valid = result . data . users . length == 1 ;
callback ( {
2010-09-03 20:54:02 +00:00
message : 'Unknown Username' ,
2010-07-24 01:30:08 +00:00
valid : valid
} ) ;
} ) ;
}
} ) . width ( 300 )
2010-07-20 20:03:47 +00:00
} ,
{
element : new Ox . Input ( {
2010-09-03 20:54:02 +00:00
id : 'password' ,
label : 'Password' ,
2010-07-24 01:30:08 +00:00
labelWidth : 120 ,
2010-09-03 20:54:02 +00:00
type : 'password' ,
2010-07-24 01:30:08 +00:00
validate : /.+/
} ) . width ( 300 )
2010-07-20 20:03:47 +00:00
}
2010-07-24 01:30:08 +00:00
] ,
submit : function ( data , callback ) {
2010-09-03 20:54:02 +00:00
app . request ( 'login' , data , function ( result ) {
2010-07-24 01:30:08 +00:00
if ( result . status . code == 200 ) {
$dialog . close ( ) ;
user = result . data . user ;
2010-09-03 20:54:02 +00:00
$ui . mainMenu . getItem ( 'username' ) . options ( {
title : 'User: ' + user . username
2010-07-24 01:30:08 +00:00
} ) ;
2010-09-03 20:54:02 +00:00
$ui . mainMenu . getItem ( 'preferences' ) . options ( {
2010-07-24 01:30:08 +00:00
disabled : false
} ) ;
2010-09-03 20:54:02 +00:00
$ui . mainMenu . getItem ( 'register' ) . options ( {
2010-07-24 01:30:08 +00:00
disabled : true
} ) ;
} else {
2010-09-03 20:54:02 +00:00
callback ( [ { id : 'password' , message : 'Incorrect Password' } ] ) ;
2010-07-24 01:30:08 +00:00
}
} ) ;
}
2010-07-20 20:03:47 +00:00
} ) ,
$dialog = new Ox . Dialog ( {
buttons : [
[
{
click : function ( ) {
} ,
2010-09-03 20:54:02 +00:00
id : 'signup' ,
value : 'Sign up...'
2010-07-20 20:03:47 +00:00
} ,
{
click : function ( ) {
} ,
2010-09-03 20:54:02 +00:00
id : 'reset' ,
value : 'Reset Password...'
2010-07-20 20:03:47 +00:00
}
] ,
[
{
click : function ( ) {
$dialog . close ( ) ;
2010-09-03 20:54:02 +00:00
$ui . mainMenu . getItem ( 'loginlogout' ) . toggleTitle ( ) ;
2010-07-20 20:03:47 +00:00
} ,
2010-09-03 20:54:02 +00:00
id : 'cancel' ,
value : 'Cancel'
2010-07-20 20:03:47 +00:00
} ,
{
2010-07-24 01:30:08 +00:00
click : $form . submit ,
2010-07-20 20:03:47 +00:00
disabled : true ,
2010-09-03 20:54:02 +00:00
id : 'signin' ,
value : 'Sign in'
2010-07-20 20:03:47 +00:00
}
]
] ,
2010-09-03 20:54:02 +00:00
id : 'login' ,
2010-07-24 01:30:08 +00:00
minWidth : 332 ,
2010-09-03 20:54:02 +00:00
title : 'Sign in' ,
2010-07-24 01:30:08 +00:00
width : 332
2010-07-20 20:03:47 +00:00
} ) . append ( $form ) . open ( ) ;
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'validate_login' , function ( event , data ) {
$dialog [ ( data . valid ? 'enable' : 'disable' ) + 'Button' ] ( 'signin' ) ;
2010-07-24 01:30:08 +00:00
} ) ;
2010-07-20 20:03:47 +00:00
} ) ;
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'change_viewmovies' , function ( event , data ) {
2010-07-07 12:36:42 +00:00
$ui . viewSelect . selectItem ( data . id ) ;
} ) ;
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'change_find' , function ( event , data ) {
2010-07-07 12:36:42 +00:00
$ui . findInput . changeLabel ( data . id ) ;
} ) ;
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'click_places' , function ( event , data ) {
2010-07-24 01:30:08 +00:00
} ) ;
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'click_query' , function ( event , data ) {
2010-07-14 15:25:20 +00:00
var $dialog = new Ox . Dialog ( {
buttons : [
{
click : function ( ) {
$dialog . close ( ) ;
} ,
2010-09-03 20:54:02 +00:00
id : 'close' ,
title : 'Close' ,
value : 'Close'
2010-07-14 15:25:20 +00:00
}
] ,
2010-09-03 20:54:02 +00:00
id : 'query' ,
title : 'Query'
} ) . append ( Query . toString ( ) + '<br/><br/>' + JSON . stringify ( Query . toObject ( ) ) ) . open ( ) ;
2010-07-14 15:25:20 +00:00
} ) ;
2010-07-07 12:36:42 +00:00
// Toolbar
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'change_findInputLabel' , function ( event , data ) {
$ui . mainMenu . checkItem ( 'findMenu_find_' + data . id ) ;
2010-07-05 16:14:12 +00:00
} ) ;
2010-07-07 07:40:38 +00:00
2010-07-07 12:36:42 +00:00
// Resize
2010-09-03 20:54:02 +00:00
Ox . Event . bind ( 'click_show_query' , function ( event , data ) {
2010-07-05 16:14:12 +00:00
var query = constructQuery ( ) ,
2010-09-03 20:54:02 +00:00
html = 'Conditions<br/><br/>' + $ . map ( query . conditions , function ( v ) {
return v . key + ' ' + v . operator + ' ' + v . value ;
} ) . join ( '<br/>' ) + '<br/><br/>Operator: ' + query . operator ,
2010-07-05 16:14:12 +00:00
$dialog = new Ox . Dialog ( {
buttons : [
{
2010-09-03 20:54:02 +00:00
value : 'Close' ,
2010-07-05 16:14:12 +00:00
click : function ( ) {
$dialog . close ( ) ;
}
}
2010-07-20 20:03:47 +00:00
] ,
2010-09-03 20:54:02 +00:00
title : 'Show Query'
2010-07-05 16:14:12 +00:00
} )
. append ( html )
. open ( ) ;
} ) ;
// Functions
function constructList ( view ) {
var $list ;
2010-09-03 20:54:02 +00:00
Ox . print ( 'constructList' , view ) ;
if ( view == 'list' || view == 'calendar' ) {
2010-07-05 16:14:12 +00:00
$list = new Ox . TextList ( {
columns : $ . map ( config . sortKeys , function ( key , i ) {
2010-07-06 05:48:42 +00:00
return $ . extend ( {
2010-07-05 16:14:12 +00:00
visible : $ . inArray ( key . id , user . ui . columns ) > - 1 ,
2010-09-03 20:54:02 +00:00
unique : key . id == 'id'
2010-07-06 05:48:42 +00:00
} , key ) ;
2010-07-05 16:14:12 +00:00
} ) ,
2010-09-03 20:54:02 +00:00
id : 'list' ,
2010-07-05 16:14:12 +00:00
request : function ( options ) {
2010-09-03 20:54:02 +00:00
Ox . print ( 'options, Query.toObject' , options , Query . toObject ( ) )
app . request ( 'find' , $ . extend ( options , {
2010-07-14 15:25:20 +00:00
query : Query . toObject ( )
2010-07-05 16:14:12 +00:00
} ) , options . callback ) ;
} ,
sort : user . ui . sort
} ) ;
2010-09-03 20:54:02 +00:00
} else if ( view == 'icons' ) {
2010-07-05 16:14:12 +00:00
$list = new Ox . IconList ( {
2010-09-03 20:54:02 +00:00
id : 'list' ,
2010-07-05 16:14:12 +00:00
item : function ( data , sort , size ) {
return {
height : data . posterHeight ,
2010-09-03 20:54:02 +00:00
id : data [ 'id' ] ,
info : data [ $ . inArray ( sort [ 0 ] . key , [ 'title' , 'director' ] ) > - 1 ? 'year' : sort [ 0 ] . key ] ,
title : data . title + ( data . director ? ' (' + data . director + ')' : '' ) ,
url : 'http://0xdb.org/' + data . id + '/poster.' + size + '.' + 'jpg' ,
2010-07-05 16:14:12 +00:00
width : data . posterWidth
} ;
} ,
2010-09-03 20:54:02 +00:00
keys : [ 'director' , 'id' , 'posterHeight' , 'posterWidth' , 'posterURL' , 'title' ] ,
2010-07-05 16:14:12 +00:00
request : function ( options ) {
2010-09-03 20:54:02 +00:00
app . request ( 'find' , $ . extend ( options , {
2010-07-14 15:25:20 +00:00
query : Query . toObject ( )
2010-07-05 16:14:12 +00:00
} ) , options . callback ) ;
} ,
size : 128 ,
sort : [
{
2010-09-03 20:54:02 +00:00
key : 'director' ,
operator : ''
2010-07-05 16:14:12 +00:00
}
] ,
2010-09-03 20:54:02 +00:00
unique : 'id'
} ) . css ( 'background' , 'blue' ) ;
} else {
$list = new Ox . Element ( '<div>' )
. css ( {
width : '100px' ,
height : '100px' ,
background : 'red'
} )
2010-07-05 16:14:12 +00:00
}
2010-09-03 20:54:02 +00:00
$list . bindEvent ( {
closepreview : function ( event , data ) {
$ui . previewDialog . close ( ) ;
delete $ui . previewDialog ;
} ,
load : function ( event , data ) {
$ui . total . html ( constructStatus ( 'total' , data ) ) ;
data = [ ] ;
$ . each ( config . totals , function ( i , v ) {
data [ v . id ] = 0 ;
} ) ;
$ui . selected . html ( constructStatus ( 'selected' , data ) ) ;
} ,
openpreview : function ( event , data ) {
app . request ( 'find' , {
keys : [ 'director' , 'id' , 'posterHeight' , 'posterWidth' , 'posterURL' , 'title' ] ,
query : {
conditions : $ . map ( data . ids , function ( id , i ) {
return {
key : 'id' ,
value : id ,
operator : '='
}
} ) ,
operator : '|'
}
} , function ( result ) {
var item = result . data . items [ 0 ] ,
title = item . title + ( item . director ? ' (' + item . director + ')' : '' ) ,
documentHeight = $document . height ( ) ,
dialogHeight = documentHeight - 40 ,
dialogWidth = parseInt ( ( dialogHeight - 48 ) * 0.75 ) ,
$image = $ ( '<img>' )
. attr ( {
src : 'http://0xdb.org/' + item . id + '/poster.large.jpg'
} )
. css ( {
height : ( dialogHeight - 48 ) + 'px' ,
width : dialogWidth + 'px'
} )
. load ( function ( ) {
var image = $image [ 0 ] ,
imageHeight = Math . min ( image . height , documentHeight - 88 ) ,
imageWidth = parseInt ( image . width * imageHeight / image . height ) ;
$ui . previewDialog . options ( {
height : imageHeight + 48 ,
width : imageWidth
} ) ;
$image . css ( {
height : imageHeight + 'px' ,
width : imageWidth + 'px'
} ) ;
} ) ;
if ( 'previewDialog' in $ui ) {
$ui . previewDialog . options ( {
title : title
} ) ;
$ui . previewImage . animate ( {
opacity : 0
} , 250 , function ( ) {
$ui . previewImage . replaceWith (
$image . css ( {
opacity : 0
} ) . animate ( {
opacity : 1
} , 250 ) ) ;
$ui . previewImage = $image ;
} ) ;
} else {
$ui . previewDialog = new Ox . Dialog ( {
buttons : [
{
title : 'Close' ,
click : function ( ) {
$ui . previewDialog . close ( ) ;
delete $ui . previewDialog ;
$ui . list . closePreview ( ) ;
}
}
] ,
height : dialogHeight ,
padding : 0 ,
title : title ,
width : dialogWidth
} )
. append ( $image )
. open ( ) ;
$ui . previewImage = $image ;
}
} ) ;
} ,
select : function ( event , data ) {
var $still , $timeline ;
ui . selectedMovies = data . ids ;
if ( data . ids . length ) {
$ui . mainMenu . enableItem ( 'copy' ) ;
$ui . mainMenu . enableItem ( 'openmovie' ) ;
} else {
$ui . mainMenu . disableItem ( 'copy' ) ;
$ui . mainMenu . disableItem ( 'openmovie' ) ;
}
if ( data . ids . length == 1 ) {
$still = $ ( '<img>' )
. attr ( {
src : 'http://0xdb.org/' + data . ids [ 0 ] + '/still.jpg'
} )
. one ( 'load' , function ( ) {
if ( data . ids [ 0 ] != ui . selectedMovies [ 0 ] ) {
Ox . print ( 'cancel after load...' )
return ;
}
var image = $still [ 0 ] ,
imageWidth = image . width ,
imageHeight = image . height ,
width = $ui . info . width ( ) ,
height = imageHeight * width / imageWidth ;
ui . infoRatio = width / height ;
$still . css ( {
position : 'absolute' ,
left : 0 ,
top : 0 ,
//width: width + 'px',
//height: height + 'px',
width : '100%' ,
opacity : 0
} )
. appendTo ( $ui . info . $element )
. animate ( {
opacity : 1
} ) ;
$ui . infoStill . animate ( {
opacity : 0
} , 250 ) ;
$ui . info . animate ( {
height : ( height + 16 ) + 'px'
} , 250 , function ( ) {
$ui . infoStill . remove ( ) ;
$ui . infoStill = $still ;
} ) ;
} ) ;
/ *
$timeline = $ ( '<img>' )
. attr ( {
src : 'http://0xdb.org/' + data . ids [ 0 ] + '/timeline/timeline.png'
} )
. one ( 'load' , function ( ) {
$timeline . css ( {
position : 'absolute' ,
left : 0 ,
bottom : '16px' ,
opacity : 0
} )
. appendTo ( $ui . info . $element )
. animate ( {
opacity : 1
} ) ;
$ui . infoTimeline . animate ( {
opacity : 0
} , 250 , function ( ) {
$ui . infoTimeline . remove ( ) ;
$ui . infoTimeline = $timeline ;
} ) ;
} ) ;
* /
}
app . request ( 'find' , {
query : {
conditions : $ . map ( data . ids , function ( id , i ) {
return {
key : 'id' ,
value : id ,
operator : '='
}
} ) ,
operator : '|'
}
} , function ( result ) {
$ui . selected . html ( constructStatus ( 'selected' , result . data ) ) ;
} ) ;
} ,
sort : function ( event , data ) {
/ * s o m e m a g i c h a s a l r e a d y s e t u s e r . u i . s o r t
Ox . print ( ':' , user . ui . sort [ 0 ] )
if ( data . key != user . ui . sort [ 0 ] . key ) {
$ui . mainMenu . checkItem ( 'sort_sortmovies_' + data . key ) ;
}
if ( data . operator != user . ui . sort [ 0 ] . operator ) {
$ui . mainMenu . checkItem ( 'sort_ordermovies_' + data . operator === '' ? 'ascending' : 'descending' ) ;
}
user . ui . sort [ 0 ] = data ;
* /
$ui . mainMenu . checkItem ( 'sortMenu_sortmovies_' + data . key ) ;
$ui . mainMenu . checkItem ( 'sortMenu_ordermovies_' + ( data . operator === '' ? 'ascending' : 'descending' ) ) ;
}
} ) ;
2010-07-05 16:14:12 +00:00
return $list ;
2010-09-03 20:54:02 +00:00
2010-07-05 16:14:12 +00:00
}
2010-07-06 05:48:42 +00:00
function constructStatus ( key , data ) {
2010-09-03 20:54:02 +00:00
return Ox . toTitleCase ( key ) + ': ' + [
Ox . formatNumber ( data . items ) + ' movie' + ( data . items != 1 ? 's' : '' ) ,
Ox . formatDuration ( data . runtime , 'medium' ) ,
data . files + ' file' + ( data . files != 1 ? 's' : '' ) ,
Ox . formatDuration ( data . duration , 'short' ) ,
Ox . formatValue ( data . size , 'B' ) ,
Ox . formatValue ( data . pixels , 'px' )
] . join ( ', ' ) ;
2010-07-05 16:14:12 +00:00
}
2010-07-07 07:18:29 +00:00
function getGroupWidth ( pos , panelWidth ) {
var width = { } ;
width . list = Math . floor ( panelWidth / 5 ) + ( panelWidth % 5 > pos ) ;
width . column = width . list - 40 - ( $ . browser . mozilla ? 16 : 12 ) ;
return width ;
}
2010-07-05 16:14:12 +00:00
2010-09-03 20:54:02 +00:00
return ;
2010-06-24 13:11:46 +00:00
//FIXME: how to properly overwrite functions without replacing them
var super _launch = app . launch ;
app . launch = function ( ) {
app . request ( 'hello' , function ( result ) {
app . user = result . data . user ;
if ( app . user . group != 'guest' ) {
2010-09-03 20:54:02 +00:00
app . menu . getItem ( 'status' ) . options ( 'title' , 'User: ' + app . user . username ) ;
2010-06-24 13:11:46 +00:00
app . menu . getItem ( 'login' ) . options ( 'title' , 'Logout' ) ;
}
} ) ;
super _launch ( ) ;
} ;
2010-07-05 16:17:38 +00:00
2010-06-24 13:11:46 +00:00
var loadingIcon = new Ox . LoadingIcon ( {
2010-09-03 20:54:02 +00:00
size : 'medium'
2010-06-24 13:11:46 +00:00
} )
. css ( {
2010-09-03 20:54:02 +00:00
marginLeft : '4px'
2010-06-24 13:11:46 +00:00
} ) ;
2010-07-05 16:17:38 +00:00
2010-06-24 13:11:46 +00:00
app . menu = new Ox . MainMenu ( {
extras : [
new Ox . Input ( {
autocomplete : function ( option , value , callback ) {
var field = option . substring ( 6 ) . toLowerCase ( ) ;
2010-07-01 08:49:53 +00:00
if ( typeof ( callback ) == 'undefined' ) {
callback = value ;
value = null ;
}
Ox . debug ( 'app.menu.find.autocomplete: option: ' , option , 'value: ' , value , ', callback:' , callback ) ;
Ox . debug ( 'app.menu.find.autocomplete: field: ' , field ) ;
2010-06-24 13:11:46 +00:00
if ( field == 'all' ) {
callback ( [ ] ) ;
2010-07-01 08:49:53 +00:00
} else if ( value ) {
2010-06-24 13:11:46 +00:00
value = value . toLowerCase ( ) ;
//var order = $.inArray(field, ['year', 'date'])?'-':'';
app . request ( 'find' , {
query : {
conditions : [
{
key : field ,
value : value ,
operator : '~'
}
]
} ,
list : 'all' ,
2010-06-30 08:44:26 +00:00
sort : [ { key : field , operator : '' } ] ,
2010-06-24 13:11:46 +00:00
keys : [ field ] ,
range : [ 0 , 10 ]
} , function ( result ) {
var items = $ . map (
result . data . items ,
function ( item , i ) { return item . title ; }
) ;
callback ( items ) ;
} ) ;
}
} ,
clear : true ,
highlight : false ,
2010-09-03 20:54:02 +00:00
id : 'find' ,
2010-07-05 12:36:12 +00:00
label : [
2010-09-03 20:54:02 +00:00
{ id : 'all' , title : 'Find: All' } ,
{ id : 'title' , title : 'Find: Title' } ,
{ id : 'director' , title : 'Find: Director' } ,
{ id : 'country' , title : 'Find: Country' } ,
{ id : 'year' , title : 'Find: Year' } ,
{ id : 'language' , title : 'Find: Language' } ,
{ id : 'writer' , title : 'Find: Writer' } ,
{ id : 'producer' , title : 'Find: Producer' } ,
{ id : 'cinematographer' , title : 'Find: Cinematographer' } ,
{ id : 'editor' , title : 'Find: Editor' } ,
{ id : 'actor' , title : 'Find: Actor' } ,
{ id : 'character' , title : 'Find: Character' } ,
{ id : 'name' , title : 'Find: Name' } ,
{ id : 'genre' , title : 'Find: Genre' } ,
{ id : 'keyword' , title : 'Find: Keyword' } ,
{ id : 'summary' , title : 'Find: Summary' } ,
{ id : 'dialog' , title : 'Find: Dialog' }
2010-07-05 12:36:12 +00:00
] ,
2010-06-24 13:11:46 +00:00
labelWidth : 96
} ) . width ( 320 ) ,
loadingIcon
] ,
menus : [
{
2010-09-03 20:54:02 +00:00
id : 'pandoraMM' ,
2010-06-24 13:11:46 +00:00
title : site . name ,
items : [
2010-09-03 20:54:02 +00:00
{ id : 'about' , title : 'About ' + site . name } ,
2010-06-24 13:11:46 +00:00
{ } ,
2010-09-03 20:54:02 +00:00
{ id : 'faq' , title : 'Frequently Asked Questions' } ,
{ id : 'tos' , title : 'Terms of Service' } ,
{ id : 'sas' , title : 'Security Advisory System' } ,
2010-06-24 13:11:46 +00:00
{ } ,
2010-09-03 20:54:02 +00:00
{ id : 'contact' , title : 'Contact' } ,
2010-06-24 13:11:46 +00:00
{ } ,
2010-09-03 20:54:02 +00:00
{ id : 'technology' , title : 'Technology' } ,
{ id : 'source' , title : 'Source Code' } ,
{ id : 'report' , title : 'Report a Bug...' } ,
2010-06-24 13:11:46 +00:00
]
} ,
{
2010-09-03 20:54:02 +00:00
id : 'user' ,
id : 'user' ,
title : 'User' ,
2010-06-24 13:11:46 +00:00
items : [
2010-09-03 20:54:02 +00:00
{ id : 'status' , title : 'User: not logged in' , disabled : true } ,
2010-06-24 13:11:46 +00:00
{ } ,
2010-09-03 20:54:02 +00:00
{ id : 'accunt' , title : 'Account' , disabled : true } ,
{ id : 'preferences' , title : 'Preferences' , disabled : true } ,
2010-06-24 13:11:46 +00:00
{ } ,
2010-09-03 20:54:02 +00:00
{ id : 'login' , title : 'Login' } ,
2010-06-24 13:11:46 +00:00
]
} ,
{
2010-09-03 20:54:02 +00:00
id : 'file' ,
title : 'File' ,
2010-06-24 13:11:46 +00:00
items : [
2010-09-03 20:54:02 +00:00
{ id : 'load' , keyboard : 'control o' , title : 'Open' } ,
{ id : 'save' , keyboard : 'control a' , title : 'Save' } ,
{ id : 'save_ad' , keyboard : 'shift control s' , title : 'Save As...' }
2010-06-24 13:11:46 +00:00
]
} ,
{
2010-09-03 20:54:02 +00:00
id : 'edit' ,
title : 'Edit' ,
2010-06-24 13:11:46 +00:00
items : [
2010-09-03 20:54:02 +00:00
{ id : 'undo' , keyboard : 'control z' , title : 'Undo' } ,
{ id : 'redo' , keyboard : 'shift control z' , title : 'Redo' } ,
2010-06-24 13:11:46 +00:00
{ } ,
2010-09-03 20:54:02 +00:00
{ id : 'cut' , keyboard : 'control x' , title : 'Cut' } ,
{ id : 'copy' , keyboard : 'control c' , title : 'Copy' } ,
{ id : 'paste' , keyboard : 'control v' , title : 'Paste' } ,
{ id : 'delete' , keyboard : 'delete' , title : 'Delete' } ,
2010-06-24 13:11:46 +00:00
{ } ,
2010-09-03 20:54:02 +00:00
{ id : 'select_all' , keyboard : 'control a' , title : 'Select All' } ,
{ id : 'select_none' , keyboard : 'shift control a' , title : 'Select None' } ,
{ id : 'invert_selection' , keyboard : 'alt control a' , title : 'Invert Selection' } ,
2010-06-24 13:11:46 +00:00
]
} ,
{
2010-09-03 20:54:02 +00:00
id : 'sort' ,
title : 'Sort' ,
2010-06-24 13:11:46 +00:00
items : [
2010-09-03 20:54:02 +00:00
{ id : 'sort_movies' , title : 'Sort Movies by' , items : [
{ checked : true , group : 'sort_movies' , id : 'title' , title : 'Title' } ,
{ checked : false , group : 'sort_movies' , id : 'director' , title : 'Director' } ,
2010-06-24 13:11:46 +00:00
] } ,
2010-09-03 20:54:02 +00:00
{ id : 'order_movies' , title : 'Order Movies' , items : [
{ checked : false , group : 'order_movies' , id : 'ascending' , title : 'Ascending' } ,
{ checked : true , group : 'order_movies' , id : 'descending' , title : 'Descending' } ,
2010-06-24 13:11:46 +00:00
] }
]
} ,
{
2010-09-03 20:54:02 +00:00
id : 'help' ,
title : 'Help' ,
2010-06-24 13:11:46 +00:00
items : [
2010-09-03 20:54:02 +00:00
{ id : 'help' , keyboard : 'control h' , title : 'Help' }
2010-06-24 13:11:46 +00:00
]
}
] ,
2010-09-03 20:54:02 +00:00
size : 'large'
2010-06-24 13:11:46 +00:00
} ) ;
2010-09-03 20:54:02 +00:00
function pageDialog ( title , page ) {
//Ox.debug(title, page);
2010-06-24 13:11:46 +00:00
var $dialog = new Ox . Dialog ( {
title : title ,
buttons : [
{
2010-09-03 20:54:02 +00:00
title : 'Close' ,
2010-06-24 13:11:46 +00:00
click : function ( ) { $dialog . close ( ) ; }
}
]
} )
. append ( page )
. open ( ) ;
} ;
//this should be: mainMenu.bind('click_about', function(event) {
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_about' , function ( ) {
2010-06-24 13:11:46 +00:00
pageDialog ( 'About ' + site . name , site . pages . about ) ;
} ) ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_faq' , function ( ) {
2010-06-24 13:11:46 +00:00
pageDialog ( app . menu . getItem ( 'faq' ) . options ( 'title' ) [ 0 ] ,
site . pages . faq ) ;
} ) ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_tos' , function ( ) {
2010-06-24 13:11:46 +00:00
pageDialog ( app . menu . getItem ( 'tos' ) . options ( 'title' ) [ 0 ] ,
site . pages . tos ) ;
} ) ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_sas' , function ( ) {
2010-06-24 13:11:46 +00:00
pageDialog ( app . menu . getItem ( 'sas' ) . options ( 'title' ) [ 0 ] ,
site . pages . sas ) ;
} ) ;
OxForm = function ( options , self ) {
var self = self || { } ,
that = new Ox . Element ( { } , self )
. defaults ( {
elements : [ ] ,
} )
. options ( options || { } )
2010-09-03 20:54:02 +00:00
. addClass ( 'OxForm' ) ,
2010-06-24 13:11:46 +00:00
length = self . options . elements . length ;
$ . each ( self . options . elements , function ( i , v ) {
that . append ( Ox . Container ( ) . css ( { 'margin' : '5px' } ) . append ( v ) ) ;
} ) ;
that . values = function ( ) {
var values = { } ;
$ . each ( self . options . elements , function ( i , v ) {
values [ v . $input . attr ( 'name' ) ] = v . $input . val ( ) ;
} ) ;
return values ;
}
return that ;
} ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_contact' , function ( ) {
2010-06-24 13:11:46 +00:00
var labelWidth = 64 ;
var inputWidth = 380 ;
var u = new Ox . Input ( {
2010-09-03 20:54:02 +00:00
label : 'Your Email' ,
2010-06-24 13:11:46 +00:00
labelWidth : labelWidth ,
name : 'email' ,
size : 'medium'
2010-09-03 20:54:02 +00:00
} ) . width ( inputWidth ) . addClass ( 'margin' ) ;
2010-06-24 13:11:46 +00:00
if ( app . user && app . user . preferences . email ) {
u . val ( app . user . preferences . email ) ;
}
var form = new OxForm ( {
elements : [
u ,
new Ox . Input ( {
2010-09-03 20:54:02 +00:00
label : 'Subject' ,
2010-06-24 13:11:46 +00:00
labelWidth : labelWidth ,
2010-09-03 20:54:02 +00:00
name : 'subject' ,
size : 'medium'
} ) . width ( inputWidth ) . addClass ( 'margin' ) ,
2010-06-24 13:11:46 +00:00
new Ox . Input ( {
2010-09-03 20:54:02 +00:00
label : 'Message' ,
2010-06-24 13:11:46 +00:00
labelWidth : labelWidth ,
2010-09-03 20:54:02 +00:00
type : 'textarea' ,
size : 'medium' ,
name : 'message'
} ) . width ( 380 ) . height ( 176 ) . addClass ( 'margin' )
2010-06-24 13:11:46 +00:00
]
} ) ;
var $dialog = new Ox . Dialog ( {
2010-09-03 20:54:02 +00:00
title : 'Contact' ,
2010-06-24 13:11:46 +00:00
width : 424 ,
height : 320 ,
buttons : [
{
2010-09-03 20:54:02 +00:00
value : 'Cancel' ,
2010-06-24 13:11:46 +00:00
click : function ( ) { $dialog . close ( ) ; }
} ,
{
2010-09-03 20:54:02 +00:00
value : 'Contact' ,
2010-06-24 13:11:46 +00:00
click : function ( ) {
app . request ( 'contact' , form . values ( ) ,
function ( result ) {
if ( result . status . code == 200 ) {
$dialog . close ( ) ;
} else {
$dialog . append ( result . status . text ) ;
}
} ) ;
}
}
]
} )
. append ( form )
. open ( ) ;
} ) ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_technology' , function ( ) {
2010-06-24 13:11:46 +00:00
pageDialog ( app . menu . getItem ( 'technology' ) . options ( 'title' ) [ 0 ] ,
site . pages . technology ) ;
} ) ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_source' , function ( ) {
2010-06-24 13:11:46 +00:00
pageDialog ( app . menu . getItem ( 'source' ) . options ( 'title' ) [ 0 ] ,
site . pages . source ) ;
} ) ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_report' , function ( ) {
2010-06-24 13:11:46 +00:00
pageDialog ( app . menu . getItem ( 'report' ) . options ( 'title' ) [ 0 ] ,
site . pages . report ) ;
} ) ;
app . logout = function ( ) {
this . request ( 'logout' ) ;
this . user = { } ;
this . menu . getItem ( 'logout' ) . toggle ( ) ;
2010-09-03 20:54:02 +00:00
this . menu . getItem ( 'status' ) . options ( 'title' , 'User: not logged in' ) ;
2010-06-24 13:11:46 +00:00
} ;
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_logout' , function ( event , data ) {
2010-06-24 13:11:46 +00:00
app . logout ( ) ;
} ) ;
2010-07-05 12:35:51 +00:00
2010-07-01 08:49:53 +00:00
app . menu . bindEvent ( 'click_login' , function ( element ) {
2010-06-24 13:11:46 +00:00
var labelWidth = 64 ;
var inputWidth = labelWidth + 200 ;
var loginForm = new OxForm ( {
elements : [
new Ox . Input ( {
2010-09-03 20:54:02 +00:00
label : 'Username' ,
2010-06-24 13:11:46 +00:00
labelWidth : labelWidth ,
name : 'username' ,
size : 'medium'
2010-09-03 20:54:02 +00:00
} ) . addClass ( 'margin' ) . width ( inputWidth ) ,
2010-06-24 13:11:46 +00:00
new Ox . Input ( {
label : 'Password' ,
labelWidth : labelWidth ,
name : 'password' ,
type : 'password' ,
size : 'medium'
2010-09-03 20:54:02 +00:00
} ) . addClass ( 'margin' ) . width ( inputWidth )
2010-06-24 13:11:46 +00:00
]
} ) . css ( {
'padding-top' : '48px' ,
} ) ;
var submit = function ( ) {
app . request ( 'login' , loginForm . values ( ) , function ( result ) {
if ( result . status . code == 200 ) {
$dialog . close ( ) ;
app . user = result . data . user ;
2010-09-03 20:54:02 +00:00
app . menu . getItem ( 'status' ) . options ( title , 'User: ' + app . user . username ) ;
2010-06-24 13:11:46 +00:00
app . menu . getItem ( 'login' ) . toggle ( ) ;
} else {
$dialog . append ( 'Login failed ' + result . status . text ) ;
}
} ) ;
}
var d = new Ox . Container ( ) ;
var registerInfo = new Ox . Panel ( ) ;
2010-07-05 12:28:43 +00:00
registerInfo . append ( Ox . Element ( ) . css ( { 'margin-left' : '4px' } ) . append ( '<br>Forgot your password? <a href="">Recover Password</a><br>Dont have an account? <a href="">Register Now</a>' ) ) ;
2010-06-24 13:11:46 +00:00
var panel = Ox . SplitPanel ( {
elements : [
{
element : loginForm ,
} ,
{
element : registerInfo ,
size : 80
}
] ,
2010-09-03 20:54:02 +00:00
orientation : 'vertical'
2010-06-24 13:11:46 +00:00
} ) . appendTo ( d ) ;
var $dialog = new Ox . Dialog ( {
2010-09-03 20:54:02 +00:00
title : 'Login' ,
2010-06-24 13:11:46 +00:00
width : inputWidth + 24 ,
height : 184 ,
buttons : [
[ ] , [
{
2010-09-03 20:54:02 +00:00
value : 'Cancel' ,
2010-06-24 13:11:46 +00:00
click : function ( ) { $dialog . close ( ) ; }
} ,
{
2010-09-03 20:54:02 +00:00
value : 'Login' ,
2010-06-24 13:11:46 +00:00
click : submit
}
]
]
} )
. append ( d )
. open ( ) ;
} ) ;
2010-09-03 20:54:02 +00:00
var bottomPanel = Ox . Toolbar ( { size : 'small' } )
2010-06-24 13:11:46 +00:00
. css ( {
zIndex : 2 ,
2010-09-03 20:54:02 +00:00
MozBoxShadow : '0 0 4px rgb(0, 0, 0)' ,
WebkitBoxShadow : '0 0 4px rgb(0, 0, 0)'
2010-06-24 13:11:46 +00:00
} )
. append (
2010-09-03 20:54:02 +00:00
$ ( '<div/>' )
. addClass ( 'bottom' )
. html ( site . url + ' - a rather unique kind of movie database.' )
2010-06-24 13:11:46 +00:00
) ;
var mainSplitPanel = Ox . SplitPanel ( {
elements : [
{
element : app . menu ,
size : 24
} ,
{
element : middleSplitPanel
} ,
{
element : bottomPanel ,
size : 24
}
] ,
2010-09-03 20:54:02 +00:00
orientation : 'vertical'
2010-06-24 13:11:46 +00:00
} ) . appendTo ( $body ) ;
var listPanel = new Ox . CollapsePanel ( {
2010-09-03 20:54:02 +00:00
title : 'Lists'
2010-06-24 13:11:46 +00:00
} ) . appendTo ( sidePanel ) ;
2010-09-03 20:54:02 +00:00
listPanel . $content . html ( 'Nouvelle Vague<br/>Hollywood 40\'s<br/>Pirate Cinema Berlin' )
2010-06-24 13:11:46 +00:00
var historyPanel = new Ox . CollapsePanel ( {
2010-09-03 20:54:02 +00:00
title : 'Search History'
2010-06-24 13:11:46 +00:00
} ) . appendTo ( sidePanel ) ;
2010-09-03 20:54:02 +00:00
historyPanel . $content . html ( 'Paris<br/>Matirx<br/>Godard' )
2010-06-24 13:11:46 +00:00
/ *
var tabbar = new Ox . Tabbar ( {
2010-09-03 20:54:02 +00:00
values : [ 'Info' , 'Scenes' , 'Timeline' , 'Map' , 'Admin' ] ,
2010-06-24 13:11:46 +00:00
selected : 0 ,
} ) . appendTo ( mainPanel )
* /
var content = new Ox . Container ( )
. appendTo ( mainPanel ) ;
/ *
tabbar . bind ( 'OxButtonToggle' , function ( event , data ) {
2010-07-01 08:49:53 +00:00
Ox . debug ( 'tabbar selected' ) ;
Ox . debug ( data . value ) ;
2010-06-24 13:11:46 +00:00
if ( data . value == 'Info' ) {
content . html ( 'this is for testing purposes only, lets get down to it...' ) ;
} else if ( data . value == 'Scenes' ) {
content . html ( 'what a wonderfull scene' ) ;
} else if ( data . value == 'Timeline' ) {
content . html ( 'here we will see a timeline' ) ;
} else if ( data . value == 'Map' ) {
content . html ( 'Here be a map of dragons' ) ;
} else if ( data . value == 'Admin' ) {
content . html ( 'Here be admin' ) ;
}
} ) ;
* /
2010-07-01 08:49:53 +00:00
app . results = new Ox . TextList ( {
columns : [ {
2010-09-03 20:54:02 +00:00
align : 'left' ,
id : 'title' ,
operator : '+' ,
title : 'Title' ,
2010-06-30 08:44:26 +00:00
visible : true ,
2010-06-28 07:50:00 +00:00
width : 160
} ,
{
2010-09-03 20:54:02 +00:00
align : 'left' ,
id : 'director' ,
operator : '+' ,
title : 'Director' ,
2010-06-30 08:44:26 +00:00
visible : true ,
2010-06-28 07:50:00 +00:00
width : 160
} ,
{
2010-09-03 20:54:02 +00:00
align : 'right' ,
id : 'year' ,
operator : '-' ,
title : 'Year' ,
2010-06-30 08:44:26 +00:00
visible : true ,
2010-06-28 07:50:00 +00:00
width : 80
2010-06-30 08:44:26 +00:00
}
2010-07-01 08:49:53 +00:00
] ,
request : function ( options ) {
2010-09-03 20:54:02 +00:00
app . request ( 'find' , $ . extend ( options , {
2010-07-01 08:49:53 +00:00
query : {
conditions : [ ] ,
2010-09-03 20:54:02 +00:00
operator : ',' // fixme: should be &
2010-07-01 08:49:53 +00:00
}
} ) , options . callback ) ;
} ,
2010-09-03 20:54:02 +00:00
id : 'results' ,
2010-07-01 08:49:53 +00:00
sort : [ {
2010-09-03 20:54:02 +00:00
key : 'year' ,
operator : '-'
2010-07-01 08:49:53 +00:00
} ]
} ) . appendTo ( content ) ;
2010-07-05 12:35:51 +00:00
app . menu . bindEvent ( 'submit_find' , function ( event , data ) {
2010-07-01 08:49:53 +00:00
app . results . options ( {
2010-06-28 07:50:00 +00:00
request : function ( options ) {
2010-09-03 20:54:02 +00:00
app . request ( 'find' , $ . extend ( options , {
2010-07-01 08:49:53 +00:00
query : {
key : data . option . substr ( 6 ) . toLowerCase ( ) ,
value : data . value ,
2010-09-03 20:54:02 +00:00
operator : '~'
2010-07-01 08:49:53 +00:00
}
2010-06-28 07:50:00 +00:00
} ) , options . callback ) ;
} ,
} ) ;
} ) ;
2010-06-24 13:11:46 +00:00
app . launch ( ) ;
} ) ;
2010-07-01 08:49:53 +00:00
