declare var $ ; $ ( ( ) => { let svg = Snap ( "#datacanvas" ) ; let state = stateFromPath ( ) ; let firstSearch = true ; let tabs = { "impact" : new Impact . Impact ( svg ) , "timeline" : new Timeline . Timeline ( svg ) , "geography" : new Geography . Geography ( svg ) } ; let opSwitcher = new Toggler ( { selector : "#op_switcher" , ops : [ [ "OR" , "OR" ] , [ "AND" , "AND" ] ] , callback : ( _ ) => { if ( searched ( 2 ) ) { search ( ) ; } } } ) . draw ( ) ; let tabSwitcher = new Toggler ( { selector : "#tab_switcher" , ops : [ [ "Who?" , "impact" ] , [ "When?" , "timeline" ] ] , callback : ( _ ) => { search ( false ) ; } } ) . draw ( ) ; $ ( "select.tags" ) . selectivity ( { placeholder : "Search one or more topics... e.g Programming languages, Concurrency, Lisp" , templates : { multipleSelectedItem : function ( item ) { return ( `<span class="selectivity-multiple-selected-item" data-item-id="${ item . id }">
                         ${ item . text }
                         <a class="selectivity-multiple-selected-item-remove"><span class="fa fa-remove"></span></a>
                       </span>` ) ; } } } ) ; $ ( window ) . on ( "popstate" , ( ) => { clearTab ( ) ; fetchState ( ) ; } ) . on ( "orientationchange" , ( _ ) => { setTimeout ( ( ) => { setDimensions ( ) ; } , 900 ) ; } ) . on ( "resize" , ( _ ) => { if ( ! Helpers . isMobile ( ) ) { setDimensions ( ) ; } } ) . on ( "load" , ( ) => { setDimensions ( true ) ; if ( searched ( ) ) { $ ( "#intro" ) . hide ( ) ; } } ) ; $ ( "div.tags" ) . change ( ( e ) => { e . preventDefault ( ) ; if ( e . cancelable ) { search ( ) ; } } ) ; $ ( "#start" ) . click ( ( e ) => { e . preventDefault ( ) ; let tags = $ ( e . target ) . data ( "tags" ) ; let select = $ ( "select.tags" ) ; $ ( "#intro" ) . hide ( ) ; tags . split ( "," ) . forEach ( ( t ) => { select . selectivity ( "add" , t ) ; } ) ; if ( ! Helpers . isMobile ( ) ) { select . selectivity ( "focus" ) ; } } ) ; $ ( "#looking_glass" ) . click ( ( e ) => { e . preventDefault ( ) ; $ ( "select.tags" ) . selectivity ( "focus" ) . selectivity ( "open" ) ; } ) ; $ ( document ) . on ( "click" , "a.add_tag" , ( e ) => { e . preventDefault ( ) ; let tag = $ ( e . target ) . data ( "tag" ) ; $ . magnificPopup . close ( ) ; setTags ( [ tag ] ) ; search ( ) ; } ) ; $ ( ".popup" ) . magnificPopup ( { type : "inline" , midClick : true } ) ; function clearTab ( ) { let tab = tabs [ state . tab ] ; if ( tab . built ( ) ) { tab . unfocus ( ) ; $ ( "div#pioneer" ) . hide ( ) ; $ ( ".highlight_overlay" ) . hide ( ) ; svg . clear ( ) ; } } function search ( rebuild = true ) { clearTab ( ) ; state = { tab : < Structure . TabState > tabSwitcher . getSelectedVal ( ) , op : < Structure . OpState > opSwitcher . getSelectedVal ( ) , tags : $ ( "select.tags" ) . selectivity ( "value" ) } ; if ( tabs [ state . tab ] . built ( ) || searched ( ) ) { writeState ( ) ; if ( rebuild ) { buildTabs ( executeState ) ; } else { executeState ( ) ; } } } function buildTabs ( f ) { if ( searched ( ) ) { $ . getJSON ( "/people" , state , ( d ) => { for ( let t in tabs ) { tabs [ t ] . build ( d . people ) ; } f ( ) ; } ) ; } else { f ( ) ; } } function splash ( ) { svg . clear ( ) ; formToState ( { op : "OR" , tags : [ ] } ) ; $ ( "#splash" ) . show ( ) ; } function resizeTab ( ) { let page = $ ( "div#page" ) ; let [ width , height ] = [ page . width ( ) , page . height ( ) ] ; $ ( "div#pioneer" ) . css ( { width : width , height : height } ) ; svg . attr ( { width : width , height : height } ) ; tabs [ state . tab ] . resize ( width , height ) ; } function setDimensions ( rebuild = false ) { clearTab ( ) ; resizeTab ( ) ; fetchState ( rebuild ) ; } function fetchState ( rebuild = true ) { state = history . state || stateFromPath ( ) ; if ( rebuild ) { buildTabs ( ( ) => executeState ( true ) ) ; } else { executeState ( true ) ; } } function stateFromPath ( ) { let isValid = /^\/(impact|timeline|geography)\/(and|or)\/([\w\-\+]+)$/ ; let groups = isValid . exec ( document . location . pathname ) ; if ( groups ) { return { tab : < Structure . TabState > groups [ 1 ] , op : < Structure . OpState > groups [ 2 ] . toUpperCase ( ) , tags : groups [ 3 ] . split ( "+" ) } ; } return { tab : "impact" , op : "OR" , tags : [ ] } ; } function executeState ( updateForm = false ) { if ( searched ( ) ) { let t = tabs [ state . tab ] ; $ ( "#splash, #noresults" ) . hide ( ) ; resizeTab ( ) ; if ( t . built ( ) ) { $ ( "#loading" ) . show ( ) ; t . preload ( ( ) => { $ ( "#loading" ) . hide ( ) ; if ( Helpers . isMobile ( ) ) { svg . clear ( ) ; } t . execute ( firstSearch ) ; firstSearch = false ; } ) ; } else { t . unfocus ( ) ; $ ( "#noresults" ) . show ( ) ; } if ( updateForm ) { formToState ( state ) ; } } else { splash ( ) ; } } function formToState ( s ) { opSwitcher . setTo ( s . op ) ; tabSwitcher . setTo ( s . tab ) ; setTags ( s . tags ) ; } function setTags ( tags ) { $ ( "select.tags" ) . selectivity ( "value" , tags , { triggerChange : false } ) . selectivity ( "rerenderSelection" ) ; } function writeState ( ) { let path = searched ( ) ? `/${ state . tab }/${ state . op . toLowerCase ( ) }/${ state . tags . join ( "+" ) }` : "/" ; history . pushState ( state , null , path ) ; } function searched ( minimum = 1 ) { return state . tags . length >= minimum ; } } ) ;