index.js 5.1 KB

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