index.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. // TODO - Add initial page loading and handlers
  2. (function($,History){
  3. var State = History.getState(),
  4. Old = {},
  5. Key = null,
  6. flags = [],
  7. flag = window.flag = function(name,value){
  8. if(exists(value)){
  9. flags[name] = value;
  10. }else{
  11. return exists(flags[name])?flags[name]:false;
  12. }
  13. },
  14. settings = {},
  15. exists = function(v){
  16. return typeof v != 'undefined';
  17. },
  18. get = window.get = function(s){
  19. return settings[s];
  20. },
  21. set = window.set = function(s,v){
  22. settings[s] = v;
  23. return v;
  24. },
  25. setKey = window.setKey = function(key){
  26. if(key !== null){
  27. console.log('Key change to '+key);
  28. Key = key;
  29. var d = new Date();
  30. d.setTime(d.getTime()+get('timeout'));
  31. $.cookie('key',key,{
  32. expires: d
  33. });
  34. }else{
  35. console.log('Key deleted');
  36. Key = null;
  37. $.removeCookie('key');
  38. }
  39. },
  40. getKey = window.getKey = function(){
  41. return Key;
  42. },
  43. apiCall = window.apiCall = function(data,callback){
  44. console.log('apiCall('+data.type+'-'+data.id+')');
  45. $('#loading').show();
  46. data.get = 'api';
  47. data.timestamp = +new Date;
  48. $.get(location.href,data,function(d){
  49. if(exists(d['error'])){
  50. error(d);
  51. }else{
  52. if(location.href.substr(location.href.lastIndexOf('/')+1) != d.state.url){
  53. console.log('Forced redirection to '+d.state.url);
  54. History.replaceState(d.state.data,d.state.title,d.state.url);
  55. }
  56. }
  57. if(exists(callback)){
  58. callback(d);
  59. }
  60. },'json');
  61. },
  62. loadState = window.loadState = function(href,callback){
  63. console.log('loadState('+href+')');
  64. $('#loading').show();
  65. var data = {
  66. get:'state',
  67. timestamp: +new Date
  68. };
  69. $.get(href,data,function(d){
  70. if(exists(d['error'])){
  71. error(d);
  72. }else{
  73. History.pushState(d.state.data,d.state.title,href);
  74. getNewState();
  75. }
  76. if(exists(callback)){
  77. callback(d);
  78. }
  79. },'json');
  80. },
  81. apiState = window.apiState = function(href,callback){
  82. console.log('apiState('+href+')');
  83. $('#loading').show();
  84. var data = {
  85. get:'state',
  86. timestamp: +new Date
  87. };
  88. $.get(href,data,function(d){
  89. if(exists(d['error'])){
  90. error(d);
  91. }else{
  92. History.replaceState(d.state.data,d.state.title,href);
  93. getNewState();
  94. }
  95. if(exists(callback)){
  96. callback(d);
  97. }
  98. },'json');
  99. },
  100. error = function(e){
  101. e = '['+State.url+']'+e.error;
  102. console.error(e+"\n"+(exists(e.state)?JSON.stringify(e.state):''));
  103. alert(e);
  104. },
  105. getNewState = function(){
  106. State = History.getState();
  107. console.log("State change. "+JSON.stringify(State.data));
  108. },
  109. equal = function(o1,o2){
  110. for(var i in o1){
  111. if(!exists(o2[i])||o2[i]!=o1[i]){
  112. return false;
  113. }
  114. }
  115. for(i in o2){
  116. if(!exists(o1[i])||o2[i]!=o1[i]){
  117. return false;
  118. }
  119. }
  120. return true;
  121. },
  122. render = {
  123. topbar: function(t,c){
  124. $('#topbar').html(Handlebars.compile(t)(c));
  125. render.links('#topbar');
  126. },
  127. content: function(t,c){
  128. $('#content').html(Handlebars.compile(t)(c)).mCustomScrollbar('destroy');
  129. $('#content,.scroll').mCustomScrollbar({
  130. theme: 'dark-2',
  131. scrollInertia: 0
  132. });
  133. render.links('#content');
  134. },
  135. links: function(selector){
  136. $(selector).find('a').each(function(){
  137. var href = this.href;
  138. if(href.indexOf(location.origin) != -1 && href.indexOf('#') != -1){
  139. href = href.substr(href.indexOf('#')+1);
  140. $(this).click(function(){
  141. loadState(href);
  142. return false;
  143. });
  144. }
  145. });
  146. }
  147. };
  148. if(exists($.cookie('key'))){
  149. setKey($.cookie('key'));
  150. }else{
  151. setKey(null);
  152. }
  153. $(document).ready(function(){
  154. $(window).on('statechange',function(){
  155. getNewState();
  156. if(!equal(State.data,Old)){
  157. document.title = State.title;
  158. switch(State.data.type){
  159. case 'page':case 'user':
  160. apiCall(State.data,function(d){
  161. if(exists(d.context)){
  162. if(!exists(d.context.key)&&Key!==null){
  163. console.log('Context detected logout');
  164. setKey(null);
  165. }
  166. render.topbar(d.topbar.template,d.topbar.context);
  167. render.content(d.template,d.context);
  168. $('#loading').hide();
  169. }else{
  170. console.error('No context given');
  171. History.back();
  172. }
  173. });
  174. break;
  175. case 'action':break;
  176. default:
  177. error({
  178. url: State.url,
  179. error: "Something went wrong!"
  180. });
  181. }
  182. Old = State.data;
  183. }else{
  184. console.log(State.data,Old);
  185. console.warn('Stopped double load of '+Old.type+'-'+Old.id);
  186. $('#loading').hide();
  187. }
  188. });
  189. if($.isEmptyObject(State.data)){
  190. History.replaceState({
  191. type: 'page',
  192. id: 'index'
  193. },'Bugs','page-index');
  194. console.log('Forcing default state.');
  195. }else{
  196. flag('load',true);
  197. }
  198. var data = {
  199. get: 'settings',
  200. timestamp: +new Date
  201. };
  202. $.get(location.href,data,function(d){
  203. settings = d;
  204. apiState(location.href,function(){
  205. if(flag('load')){
  206. State.data = {
  207. type: '',
  208. data: ''
  209. };
  210. }
  211. flag('load',false);
  212. });
  213. },'json');
  214. });
  215. $.fn.serializeObject = function(){
  216. var o = {},
  217. a = this.serializeArray();
  218. $.each(a,function(){
  219. if(o[this.name] !== undefined){
  220. if(!o[this.name].push){
  221. o[this.name] = [o[this.name]];
  222. }
  223. o[this.name].push(this.value || '');
  224. }else{
  225. o[this.name] = this.value || '';
  226. }
  227. });
  228. return o;
  229. };
  230. $.ajaxSetup({
  231. async: false
  232. });
  233. })(jQuery,History);