index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. // TODO - Add initial page loading and handlers
  2. (function($,History,console){
  3. var State = History.getState(),
  4. Old = {},
  5. Key = null,
  6. flags = [],
  7. templates = [],
  8. flag = window.flag = function(name,value){
  9. if(exists(value)){
  10. flags[name] = value;
  11. }else{
  12. return exists(flags[name])?flags[name]:false;
  13. }
  14. },
  15. settings = {},
  16. exists = function(v){
  17. return typeof v != 'undefined';
  18. },
  19. get = window.get = function(s){
  20. return settings[s];
  21. },
  22. set = window.set = function(s,v){
  23. settings[s] = v;
  24. return v;
  25. },
  26. setKey = window.setKey = function(key){
  27. if(key !== null){
  28. console.log('Key change to '+key);
  29. Key = key;
  30. var d = new Date();
  31. d.setTime(d.getTime()+get('expire'));
  32. $.cookie('key',key,{
  33. expires: d
  34. });
  35. }else{
  36. console.log('Key deleted');
  37. Key = null;
  38. $.removeCookie('key');
  39. }
  40. },
  41. getKey = window.getKey = function(){
  42. return Key;
  43. },
  44. template = window.template = function(name,template){
  45. var d = +new Date,
  46. id = (function(name){
  47. for(var i in templates){
  48. if(templates[i].name == name){
  49. return i;
  50. }
  51. }
  52. return false;
  53. })(name);
  54. if(exists(template)){
  55. if(template === null){
  56. if(id!==false){
  57. templates.splice(id,1);
  58. }
  59. $.localStorage('templates',templates);
  60. console.log('Dropping template for: '+name);
  61. return '';
  62. }else{
  63. var o = {
  64. name: name,
  65. template: template,
  66. date: get('expire')+d
  67. }
  68. if(id===false){
  69. console.log('Storing new template for: '+name);
  70. templates.push(o);
  71. }else{
  72. console.log('Replacing old template for: '+name);
  73. templates[id] = o;
  74. }
  75. $.localStorage('templates',templates);
  76. }
  77. }else if(id!==false){
  78. console.log('Using cached template for: '+name);
  79. var template = templates[id].template;
  80. if(templates[id].date < d){
  81. delete templates[name];
  82. $.localStorage('templates',templates);
  83. }
  84. return template;
  85. }else{
  86. console.log('No cached template stored for: '+name);
  87. return '';
  88. }
  89. },
  90. apiCall = window.apiCall = function(data,callback){
  91. console.log('apiCall('+data.type+'-'+data.id+')');
  92. if(!flag('error')){
  93. loading(true);
  94. data.get = 'api';
  95. data.back = State.data.back;
  96. data.timestamp = +new Date;
  97. if(''!=template(data.type+'-'+data.id)){
  98. data.template = false;
  99. }
  100. $.get(location.href,data,function(d){
  101. if(exists(d['error'])){
  102. error(d);
  103. }else{
  104. if(location.href.substr(location.href.lastIndexOf('/')+1) != d.state.url){
  105. console.log('Forced redirection to '+d.state.url);
  106. History.replaceState(d.state.data,d.state.title,d.state.url);
  107. getNewState();
  108. }
  109. }
  110. if(exists(callback)){
  111. console.log('Running apiCall callback');
  112. callback(d);
  113. }
  114. },'json');
  115. }
  116. },
  117. loadState = window.loadState = function(href,callback){
  118. console.log('loadState('+href+')');
  119. if(!flag('error')){
  120. loading(true);
  121. var data = {
  122. get:'state',
  123. timestamp: +new Date,
  124. back: location.href
  125. };
  126. ajax = $.ajax(href,{
  127. data: data,
  128. async: true,
  129. type: 'GET',
  130. success: function(d){
  131. if(exists(d['error'])){
  132. error(d);
  133. }else{
  134. console.log('pushState: '+d.state.title+'['+href+']');
  135. History.pushState(d.state.data,d.state.title,href);
  136. getNewState();
  137. }
  138. if(exists(callback)){
  139. callback(d);
  140. }
  141. if(!exists(d['error'])){
  142. flag('handled',true);
  143. stateChange();
  144. flag('handled',false);
  145. }
  146. },
  147. error: function(x,t,e){
  148. error({
  149. error: '['+t+'] '+e
  150. });
  151. if(exists(callback)){
  152. callback({
  153. error: '['+t+'] '+e
  154. });
  155. }
  156. },
  157. dataType: 'json'
  158. });
  159. }
  160. },
  161. apiState = window.apiState = function(href,callback){
  162. console.log('apiState('+href+')');
  163. if(!flag('error')){
  164. loading(true);
  165. var data = {
  166. get:'state',
  167. timestamp: +new Date,
  168. back: State.data.back
  169. };
  170. $.ajax(href,{
  171. data: data,
  172. async: true,
  173. type: 'GET',
  174. success: function(d){
  175. if(exists(d['error'])){
  176. error(d);
  177. }else{
  178. console.log('pushState: '+d.state.title+'['+href+']');
  179. History.replaceState(d.state.data,d.state.title,href);
  180. getNewState();
  181. }
  182. if(exists(callback)){
  183. callback(d);
  184. }
  185. console.log(d.state.title);
  186. if(!exists(d['error'])){
  187. flag('handled',true);
  188. stateChange();
  189. flag('handled',false);
  190. }
  191. },
  192. error: function(x,t,e){
  193. error({
  194. error: '['+t+'] '+e
  195. });
  196. if(exists(callback)){
  197. callback({
  198. error: '['+t+'] '+e
  199. });
  200. }
  201. },
  202. dataType: 'json'
  203. });
  204. }
  205. },
  206. error = function(e,callback){
  207. if(!flag('error')){
  208. flag('error',true);
  209. var msg = '['+State.url+']'+e.error;
  210. console.error(msg.trim()+"\n"+(exists(e.state)?JSON.stringify(e.state):''));
  211. alert(msg.trim(),'Error',callback);
  212. }
  213. },
  214. getNewState = function(){
  215. State = History.getState();
  216. console.log("State change: ["+State.title+"] "+JSON.stringify(State.data));
  217. if(!window.location.origin){
  218. window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
  219. }
  220. document.title = State.title;
  221. },
  222. stateChange = function(){
  223. getNewState();
  224. if(!equal(State.data,Old)){
  225. switch(State.data.type){
  226. case 'page':case 'user':case 'project':
  227. apiCall(State.data,function(d){
  228. if(!exists(d.error)){
  229. if(exists(d.context)){
  230. if(!exists(d.context.key)&&Key!==null){
  231. console.log('Context detected console.logout');
  232. setKey(null);
  233. }
  234. if(exists(d.template)){
  235. template(State.data.type+'-'+State.data.id,d.template);
  236. }else{
  237. d.template = template(State.data.type+'-'+State.data.id);
  238. }
  239. render.topbar(d.topbar.template,d.topbar.context);
  240. render.content(d.template,d.context);
  241. $(window).resize();
  242. loading(false);
  243. }else{
  244. console.error('No context given');
  245. back();
  246. }
  247. }else{
  248. error(d);
  249. back();
  250. }
  251. });
  252. break;
  253. case 'action':break;
  254. default:
  255. error({
  256. url: State.url,
  257. error: "Something went wrong!"
  258. });
  259. }
  260. Old = State.data;
  261. }else{
  262. console.log(State.data,Old);
  263. console.warn('Stopped double load of '+Old.type+'-'+Old.id);
  264. loading(false);
  265. }
  266. },
  267. equal = function(o1,o2){
  268. for(var i in o1){
  269. if(!exists(o2[i])||o2[i]!=o1[i]){
  270. return false;
  271. }
  272. }
  273. for(i in o2){
  274. if(!exists(o1[i])||o2[i]!=o1[i]){
  275. return false;
  276. }
  277. }
  278. return true;
  279. },
  280. render = window.render = {
  281. topbar: function(t,c){
  282. $('#topbar').html(Handlebars.compile(t)(c));
  283. render.links('#topbar');
  284. render.buttons('#topbar');
  285. render.menus('#topbar');
  286. if(State.url == location.origin+'/page-index'){
  287. $('#topbar').find('.topbar-history').hide();
  288. }
  289. $('#topbar').addClass('overflow-hide');
  290. $(window).resize();
  291. },
  292. content: function(t,c){
  293. $('#content').html(
  294. Handlebars.compile(t)(c)
  295. );
  296. render.links('#content');
  297. render.buttons('#content');
  298. render.accordions('#content');
  299. render.menus('#content');
  300. render.form('#content');
  301. $(window).resize();
  302. },
  303. accordions: function(selector){
  304. $(selector).find('.accordion').each(function(){
  305. var icons = {};
  306. if($(this).children('.icons').length == 1){
  307. icons = JSON.parse($(this).children('.icons').text());
  308. }
  309. $(this).children('.icons').remove();
  310. $(this).accordion({
  311. collapsible: true,
  312. icons: icons,
  313. active: false
  314. });
  315. });
  316. },
  317. buttons: function(selector){
  318. $(selector).find('.button').button();
  319. $(selector).find('input[type=submit]').button();
  320. $(selector).find('input[type=button]').button();
  321. $(selector).find('button').button();
  322. },
  323. menus: function(selector){
  324. $(selector).find('.menu').css({
  325. 'list-style':'none'
  326. }).menu({
  327. icons:{
  328. submenu: "ui-icon-circle-triangle-e"
  329. }
  330. }).removeClass('ui-corner-all').addClass('ui-corner-bottom').parent().click(function(e){
  331. e.stopPropagation();
  332. });
  333. },
  334. form: function(selector){
  335. $(selector).find('#form').position({of:selector,my:'center',at:'center'});
  336. },
  337. dialog: function(selector,title){
  338. $(selector).dialog({
  339. close: function(){
  340. flag('error',false);
  341. var fn = $(this).data('callback');
  342. if(exists(fn)){
  343. fn();
  344. }
  345. loading(false);
  346. },
  347. resizable: false,
  348. draggable: false,
  349. title: title,
  350. buttons: [
  351. {
  352. text: 'Ok',
  353. class: 'recommend-force',
  354. click: function(){
  355. $(this).dialog('close');
  356. }
  357. }
  358. ]
  359. });
  360. },
  361. links: function(selector){
  362. $(selector).find('a').each(function(){
  363. var href = this.href;
  364. if(href.indexOf('#')!=-1&&(href.indexOf(location.origin)!=-1||href.indexOf('#')==0)){
  365. href = href.substr(href.indexOf('#')+1);
  366. $(this).click(function(e){
  367. try{
  368. if(($(this).hasClass('topbar-home') || $(this).hasClass('topbar-back'))&&$(window).width()<767){
  369. $('#topbar').children('div.topbar-right,div.topbar-left').toggle();
  370. $('#topbar').toggleClass('overflow-hide');
  371. $(window).resize();
  372. }else if($(this).hasClass('topbar-history')){
  373. back();
  374. }else{
  375. loadState(href);
  376. }
  377. }catch(error){
  378. console.error(error);
  379. }
  380. e.preventDefault();
  381. return false;
  382. });
  383. }
  384. });
  385. }
  386. },
  387. back = function(){
  388. if(exists(State.data.back)){
  389. if(!History.back()){
  390. loadState(State.data.back);
  391. }
  392. }else if(State.data.type != 'page' || State.data.id != 'index'){
  393. loadState('page-index');
  394. }else{
  395. location.reload();
  396. }
  397. },
  398. alert = function(text,title,callback){
  399. $('#dialog').text(text).data('callback',callback);
  400. render.dialog('#dialog',title,callback);
  401. },
  402. loading = function(state){
  403. state = exists(state)?state:false;
  404. console.log('loading state '+state);
  405. if(!flag('error') && !state){
  406. $('#loading').hide();
  407. }else if(state){
  408. $('#loading').show();
  409. }
  410. };
  411. if(exists($.cookie('key'))){
  412. setKey($.cookie('key'));
  413. }else{
  414. setKey(null);
  415. }
  416. $(document).ready(function(){
  417. $.fn.serializeObject = function(){
  418. var o = {},
  419. a = this.serializeArray();
  420. $.each(a,function(){
  421. if(o[this.name] !== undefined){
  422. if(!o[this.name].push){
  423. o[this.name] = [o[this.name]];
  424. }
  425. o[this.name].push(this.value || '');
  426. }else{
  427. o[this.name] = this.value || '';
  428. }
  429. });
  430. return o;
  431. };
  432. $.ajaxSetup({
  433. async: false,
  434. cache: false,
  435. timeout: 2000
  436. });
  437. $(document).ajaxError(function(event, request, settings) {
  438. error({error:'Request timed out'});
  439. });
  440. templates = $.localStorage('templates');
  441. if(templates === null){
  442. templates = [];
  443. }
  444. if(!exists($.support.touch)){
  445. $.support.touch = 'ontouchstart' in window || 'onmsgesturechange' in window;
  446. }
  447. $('#content').niceScroll({
  448. cursorwidth: 10,
  449. nativeparentscrolling: false,
  450. preservenativescrolling: false
  451. });
  452. $('#content,#topbar').click(function(){
  453. $('.menu').hide();
  454. });
  455. document.addEventListener('touchmove',function(e){
  456. e.preventDefault();
  457. });
  458. $(window).resize(function(){
  459. if($(window).width()>767){
  460. $('#topbar div.topbar-right, #topbar div.topbar-left').css({
  461. 'display': ''
  462. });
  463. }
  464. $('#content').height($('body').height()-$('#topbar').height());
  465. $('#content').getNiceScroll().resize();
  466. render.form('#content');
  467. });
  468. var data = {
  469. get: 'settings',
  470. timestamp: +new Date,
  471. back: false
  472. };
  473. $.get(location.href,data,function(d){
  474. settings = d;
  475. apiState(location.href);
  476. },'json');
  477. $(window).on('statechange',function(){
  478. if(!flag('handled')){
  479. console.log('unhandled state change event');
  480. stateChange();
  481. }
  482. });
  483. var getState = History.getState;
  484. History.getState = function(flag){
  485. if(exists(flag)){
  486. return State;
  487. }else{
  488. return getState.call(History);
  489. }
  490. };
  491. });
  492. shortcut.add('f12',function(){
  493. if(!flag('firebug-lite')){
  494. $('head').append(
  495. $('<script>').attr({
  496. 'type': 'text/javascript',
  497. 'src': 'https://getfirebug.com/firebug-lite.js#startOpened',
  498. 'id': 'FirebugLite'
  499. })
  500. );
  501. $('<image>').attr('src','https://getfirebug.com/releases/lite/latest/skin/xp/sprite.png');
  502. flag('firebug-lite',true);
  503. }
  504. });
  505. shortcut.add('Ctrl+f12',function(){
  506. if(!flag('manifesto')){
  507. if(window.applicationCache){
  508. if(window.applicationCache.status==window.applicationCache.UNCACHED){
  509. $('head').append(
  510. $('<script>').attr({
  511. 'type': 'text/javascript',
  512. 'src': 'http://manifesto.ericdelabar.com/manifesto.js?x="+(Math.random())'
  513. })
  514. );
  515. (function wait(){
  516. if($('#cacheStatus').length == 0){
  517. setTimeout(wait,10);
  518. }else{
  519. $('#cacheStatus').niceScroll();
  520. }
  521. })();
  522. }else{
  523. alert("Manifest file is valid.");
  524. }
  525. }else{
  526. alert("This browser does not support HTML5 Offline Application Cache.");
  527. }
  528. flag('manifesto',true);
  529. }
  530. });
  531. shortcut.add('Shift+f12',function(){
  532. templates = [];
  533. $.localStorage('templates',null);
  534. console.log('Templates cleared.');
  535. });
  536. })(jQuery,History,console);