index.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. // TODO - Add initial page loading and handlers
  2. (function($,History){
  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. $('#loading').show();
  93. data.get = 'api';
  94. data.timestamp = +new Date;
  95. if(exists(templates[data.type+'-'+data.id])){
  96. data.template = false;
  97. }
  98. $.get(location.href,data,function(d){
  99. if(exists(d['error'])){
  100. error(d);
  101. }else{
  102. if(location.href.substr(location.href.lastIndexOf('/')+1) != d.state.url){
  103. console.log('Forced redirection to '+d.state.url);
  104. History.replaceState(d.state.data,d.state.title,d.state.url);
  105. }
  106. }
  107. if(exists(callback)){
  108. callback(d);
  109. }
  110. },'json');
  111. },
  112. loadState = window.loadState = function(href,callback){
  113. console.log('loadState('+href+')');
  114. $('#loading').show();
  115. var data = {
  116. get:'state',
  117. timestamp: +new Date
  118. };
  119. $.get(href,data,function(d){
  120. if(exists(d['error'])){
  121. error(d);
  122. }else{
  123. History.pushState(d.state.data,d.state.title,href);
  124. getNewState();
  125. }
  126. if(exists(callback)){
  127. callback(d);
  128. }
  129. },'json');
  130. },
  131. apiState = window.apiState = function(href,callback){
  132. console.log('apiState('+href+')');
  133. $('#loading').show();
  134. var data = {
  135. get:'state',
  136. timestamp: +new Date
  137. };
  138. $.get(href,data,function(d){
  139. if(exists(d['error'])){
  140. error(d);
  141. }else{
  142. History.replaceState(d.state.data,d.state.title,href);
  143. getNewState();
  144. }
  145. if(exists(callback)){
  146. callback(d);
  147. }
  148. },'json');
  149. },
  150. error = function(e){
  151. e = '['+State.url+']'+e.error;
  152. console.error(e+"\n"+(exists(e.state)?JSON.stringify(e.state):''));
  153. alert(e);
  154. },
  155. getNewState = function(){
  156. State = History.getState();
  157. console.log("State change. "+JSON.stringify(State.data));
  158. if (!window.location.origin) {
  159. window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
  160. }
  161. },
  162. equal = function(o1,o2){
  163. for(var i in o1){
  164. if(!exists(o2[i])||o2[i]!=o1[i]){
  165. return false;
  166. }
  167. }
  168. for(i in o2){
  169. if(!exists(o1[i])||o2[i]!=o1[i]){
  170. return false;
  171. }
  172. }
  173. return true;
  174. },
  175. render = window.render = {
  176. topbar: function(t,c){
  177. $('#topbar').html(Handlebars.compile(t)(c));
  178. render.links('#topbar');
  179. $(window).resize();
  180. },
  181. content: function(t,c){
  182. $('#content').html(
  183. Handlebars.compile(t)(c)
  184. );
  185. render.links('#content');
  186. $(window).resize();
  187. },
  188. links: function(selector){
  189. $(selector).find('a').each(function(){
  190. var href = this.href;
  191. if(href.indexOf('#')!=-1&&(href.indexOf(location.origin)!=-1||href.indexOf('#')==0)){
  192. href = href.substr(href.indexOf('#')+1);
  193. $(this).click(function(e){
  194. try{
  195. if(($(this).hasClass('topbar-home') || $(this).hasClass('topbar-back'))&&$(window).width()<767){
  196. $('#topbar').children('div.topbar-right,div.topbar-left').toggle();
  197. $(window).resize();
  198. }else if($(this).hasClass('topbar-history')){
  199. History.back();
  200. }else{
  201. loadState(href);
  202. }
  203. }catch(error){
  204. console.error(error);
  205. }
  206. e.preventDefault();
  207. return false;
  208. });
  209. }
  210. });
  211. }
  212. };
  213. if(exists($.cookie('key'))){
  214. setKey($.cookie('key'));
  215. }else{
  216. setKey(null);
  217. }
  218. $(document).ready(function(){
  219. templates = $.localStorage('templates');
  220. if(templates === null){
  221. templates = [];
  222. }
  223. if(!exists($.support.touch)){
  224. $.support.touch = 'ontouchstart' in window || 'onmsgesturechange' in window;
  225. }
  226. $(window).on('statechange',function(){
  227. getNewState();
  228. if(!equal(State.data,Old)){
  229. document.title = State.title;
  230. switch(State.data.type){
  231. case 'page':case 'user':
  232. apiCall(State.data,function(d){
  233. if(exists(d.context)){
  234. if(!exists(d.context.key)&&Key!==null){
  235. console.log('Context detected logout');
  236. setKey(null);
  237. }
  238. if(exists(d.template)){
  239. template(State.data.type+'-'+State.data.id,d.template);
  240. }else{
  241. d.template = template(State.data.type+'-'+State.data.id);
  242. }
  243. render.topbar(d.topbar.template,d.topbar.context);
  244. render.content(d.template,d.context);
  245. $(window).resize();
  246. $('#loading').hide();
  247. }else{
  248. console.error('No context given');
  249. History.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').hide();
  265. }
  266. });
  267. $('#content').niceScroll({
  268. cursorwidth: 10,
  269. nativeparentscrolling: false,
  270. preservenativescrolling: false
  271. });
  272. document.addEventListener('touchmove',function(e){
  273. e.preventDefault();
  274. });
  275. $(window).resize(function(){
  276. if($(window).width()>767){
  277. $('#topbar div.topbar-right, #topbar div.topbar-left').css({
  278. 'display': ''
  279. });
  280. }
  281. $('#content').height($('body').height()-$('#topbar').height());
  282. $('#content').getNiceScroll().resize();
  283. });
  284. var data = {
  285. get: 'settings',
  286. timestamp: +new Date
  287. };
  288. $.get(location.href,data,function(d){
  289. settings = d;
  290. apiState(location.href);
  291. },'json');
  292. });
  293. shortcut.add('f12',function(){
  294. if(!flag('firebug-lite')){
  295. (function(F,i,r,e,b,u,g,L,I,T,E){
  296. if(F.getElementById(b))
  297. return;
  298. E=F[i+'NS']&&F.documentElement.namespaceURI;
  299. E=E?F[i+'NS'](E,'script'):F[i]('script');
  300. E[r]('id',b);
  301. E[r]('src',I+g+T);
  302. E[r](b,u);
  303. (F[e]('head')[0]||F[e]('body')[0]).appendChild(E);
  304. E=new Image;
  305. E[r]('src',I+L);
  306. })(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
  307. flag('firebug-lite',true);
  308. }
  309. });
  310. $.fn.serializeObject = function(){
  311. var o = {},
  312. a = this.serializeArray();
  313. $.each(a,function(){
  314. if(o[this.name] !== undefined){
  315. if(!o[this.name].push){
  316. o[this.name] = [o[this.name]];
  317. }
  318. o[this.name].push(this.value || '');
  319. }else{
  320. o[this.name] = this.value || '';
  321. }
  322. });
  323. return o;
  324. };
  325. $.ajaxSetup({
  326. async: false
  327. });
  328. })(jQuery,History);