diaspora.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. var Home = location.href,
  2. Pages = 4,
  3. xhr,
  4. xhrUrl = '';
  5. var Diaspora = {
  6. L: function(url, f, err) {
  7. if (url == xhrUrl) {
  8. return false;
  9. }
  10. xhrUrl = url;
  11. if (xhr) {
  12. xhr.abort();
  13. }
  14. xhr = $.ajax({
  15. type: 'GET',
  16. url: url,
  17. timeout: 10000,
  18. success: function(data) {
  19. f(data);
  20. xhrUrl = '';
  21. },
  22. error: function(a, b, c) {
  23. if (b == 'abort') {
  24. err && err()
  25. } else {
  26. window.location.href = url;
  27. }
  28. xhrUrl = '';
  29. }
  30. });
  31. },
  32. P: function() {
  33. return !!('ontouchstart' in window);
  34. },
  35. PS: function() {
  36. if (!(window.history && history.pushState)){
  37. return;
  38. }
  39. history.replaceState({u: Home, t: document.title}, document.title, Home);
  40. window.addEventListener('popstate', function(e) {
  41. var state = e.state;
  42. if (!state) return;
  43. document.title = state.t;
  44. if (state.u == Home) {
  45. $('#preview').css('position', 'fixed');
  46. setTimeout(function() {
  47. $('#preview').removeClass('show');
  48. $('#container').show();
  49. window.scrollTo(0, parseInt($('#container').data('scroll')));
  50. setTimeout(function() {
  51. $('#preview').html('');
  52. $(window).trigger('resize');
  53. }, 300);
  54. }, 0);
  55. } else {
  56. Diaspora.loading();
  57. Diaspora.L(state.u, function(data) {
  58. document.title = state.t;
  59. $('#preview').html($(data).filter('#single'));
  60. Diaspora.preview();
  61. setTimeout(function() { Diaspora.player(); }, 0);
  62. });
  63. }
  64. });
  65. },
  66. HS: function(tag, flag) {
  67. var id = tag.data('id') || 0,
  68. url = tag.attr('href'),
  69. title = tag.attr('title') || tag.text();
  70. if (!$('#preview').length || !(window.history && history.pushState)) location.href = url;
  71. Diaspora.loading()
  72. var state = {d: id, t: title, u: url};
  73. Diaspora.L(url, function(data) {
  74. if (!$(data).filter('#single').length) {
  75. location.href = url;
  76. return
  77. }
  78. switch (flag) {
  79. case 'push':
  80. history.pushState(state, title, url)
  81. break;
  82. case 'replace':
  83. history.replaceState(state, title, url)
  84. break;
  85. }
  86. document.title = title;
  87. $('#preview').html($(data).filter('#single'))
  88. switch (flag) {
  89. case 'push':
  90. Diaspora.preview()
  91. break;
  92. case 'replace':
  93. window.scrollTo(0, 0)
  94. Diaspora.loaded()
  95. break;
  96. }
  97. setTimeout(function() {
  98. Diaspora.player();
  99. $('#top').show();
  100. comment = $("#gitalk-container");
  101. if (comment.data('ae') == true){
  102. comment.click();
  103. }
  104. }, 0)
  105. })
  106. },
  107. preview: function() {
  108. // preview toggle
  109. $("#preview").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
  110. var left = $('#preview').css('left');
  111. if (left == '0px') {
  112. $('#container').hide();
  113. }else{
  114. $('#container').show();
  115. }
  116. Diaspora.loaded();
  117. });
  118. setTimeout(function() {
  119. $('#preview').addClass('show');
  120. $('#container').data('scroll', window.scrollY);
  121. setTimeout(function() {
  122. $('#preview').css({
  123. 'position': 'static',
  124. 'overflow-y': 'auto'
  125. });
  126. }, 500);
  127. }, 0);
  128. },
  129. player: function() {
  130. var p = $('#audio');
  131. if (!p.length) {
  132. $('.icon-play').css({
  133. 'color': '#dedede',
  134. 'cursor': 'not-allowed'
  135. })
  136. return
  137. }
  138. var sourceSrc= $("#audio source").eq(0).attr('src')
  139. if (sourceSrc == '' && p[0].src == ''){
  140. audiolist = $('#audio-list li');
  141. mp3 = audiolist.eq([Math.floor(Math.random() * audiolist.size())])
  142. p[0].src = mp3.data('url')
  143. }
  144. if (p.eq(0).data("autoplay") == true) {
  145. p[0].play();
  146. }
  147. p.on({
  148. 'timeupdate': function() {
  149. var progress = p[0].currentTime / p[0].duration * 100;
  150. $('.bar').css('width', progress + '%');
  151. if (progress / 5 <= 1) {
  152. p[0].volume = progress / 5;
  153. }else {
  154. p[0].volume = 1;
  155. }
  156. },
  157. 'ended': function() {
  158. $('.icon-pause').removeClass('icon-pause').addClass('icon-play')
  159. },
  160. 'playing': function() {
  161. $('.icon-play').removeClass('icon-play').addClass('icon-pause')
  162. }
  163. })
  164. },
  165. loading: function() {
  166. var w = window.innerWidth;
  167. var css = '<style class="loaderstyle" id="loaderstyle'+ w +'">'+
  168. '@-moz-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
  169. '@-webkit-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
  170. '.loader'+ w +'{-webkit-animation:loader'+ w +' 3s linear infinite;-moz-animation:loader'+ w +' 3s linear infinite;}'+
  171. '</style>';
  172. $('.loaderstyle').remove()
  173. $('head').append(css)
  174. $('#loader').removeClass().addClass('loader'+ w).show()
  175. },
  176. loaded: function() {
  177. $('#loader').removeClass().hide()
  178. },
  179. F: function(id, w, h) {
  180. var _height = $(id).parent().height(),
  181. _width = $(id).parent().width(),
  182. ratio = h / w;
  183. if (_height / _width > ratio) {
  184. id.style.height = _height +'px';
  185. id.style.width = _height / ratio +'px';
  186. } else {
  187. id.style.width = _width +'px';
  188. id.style.height = _width * ratio +'px';
  189. }
  190. id.style.left = (_width - parseInt(id.style.width)) / 2 +'px';
  191. id.style.top = (_height - parseInt(id.style.height)) / 2 +'px';
  192. }
  193. };
  194. $(function() {
  195. if (Diaspora.P()) {
  196. $('body').addClass('touch')
  197. }
  198. if ($('#preview').length) {
  199. var cover = {};
  200. cover.t = $('#cover');
  201. cover.w = cover.t.attr('width');
  202. cover.h = cover.t.attr('height');
  203. ;(cover.o = function() {
  204. $('#mark').height(window.innerHeight)
  205. })();
  206. if (cover.t.prop('complete')) {
  207. // why setTimeout ?
  208. setTimeout(function() { cover.t.load() }, 0)
  209. }
  210. cover.t.on('load', function() {
  211. ;(cover.f = function() {
  212. var _w = $('#mark').width(), _h = $('#mark').height(), x, y, i, e;
  213. e = (_w >= 1000 || _h >= 1000) ? 1000 : 500;
  214. if (_w >= _h) {
  215. i = _w / e * 50;
  216. y = i;
  217. x = i * _w / _h;
  218. } else {
  219. i = _h / e * 50;
  220. x = i;
  221. y = i * _h / _w;
  222. }
  223. $('.layer').css({
  224. 'width': _w + x,
  225. 'height': _h + y,
  226. 'marginLeft': - 0.5 * x,
  227. 'marginTop': - 0.5 * y
  228. })
  229. if (!cover.w) {
  230. cover.w = cover.t.width();
  231. cover.h = cover.t.height();
  232. }
  233. Diaspora.F($('#cover')[0], cover.w, cover.h)
  234. })();
  235. setTimeout(function() {
  236. $('html, body').removeClass('loading')
  237. }, 1000)
  238. $('#mark').parallax()
  239. var vibrant = new Vibrant(cover.t[0]);
  240. var swatches = vibrant.swatches()
  241. if (swatches['DarkVibrant']) {
  242. $('#vibrant polygon').css('fill', swatches['DarkVibrant'].getHex())
  243. $('#vibrant div').css('background-color', swatches['DarkVibrant'].getHex())
  244. }
  245. if (swatches['Vibrant']) {
  246. $('.icon-menu').css('color', swatches['Vibrant'].getHex())
  247. }
  248. })
  249. if (!cover.t.attr('src')) {
  250. alert('Please set the post thumbnail')
  251. }
  252. $('#preview').css('min-height', window.innerHeight)
  253. Diaspora.PS()
  254. $('.pview a').addClass('pviewa')
  255. var T;
  256. $(window).on('resize', function() {
  257. clearTimeout(T)
  258. T = setTimeout(function() {
  259. if (!Diaspora.P() && location.href == Home) {
  260. cover.o()
  261. cover.f()
  262. }
  263. if ($('#loader').attr('class')) {
  264. Diaspora.loading()
  265. }
  266. }, 500)
  267. })
  268. } else {
  269. $('#single').css('min-height', window.innerHeight)
  270. setTimeout(function() {
  271. $('html, body').removeClass('loading')
  272. }, 1000)
  273. window.addEventListener('popstate', function(e) {
  274. if (e.state) location.href = e.state.u;
  275. })
  276. Diaspora.player();
  277. $('.icon-icon, .image-icon').attr('href', '/')
  278. $('#top').show()
  279. }
  280. $(window).on('scroll', function() {
  281. if ($('.scrollbar').length && !Diaspora.P() && !$('.icon-images').hasClass('active')) {
  282. var wt = $(window).scrollTop(),
  283. tw = $('#top').width(),
  284. dh = document.body.scrollHeight,
  285. wh = $(window).height();
  286. var width = tw / (dh - wh) * wt;
  287. $('.scrollbar').width(width)
  288. if (wt > 80 && window.innerWidth > 800) {
  289. $('.subtitle').fadeIn()
  290. } else {
  291. $('.subtitle').fadeOut()
  292. }
  293. }
  294. })
  295. $(window).on('touchmove', function(e) {
  296. if ($('body').hasClass('mu')) {
  297. e.preventDefault()
  298. }
  299. })
  300. $('body').on('click', function(e) {
  301. var tag = $(e.target).attr('class') || '',
  302. rel = $(e.target).attr('rel') || '';
  303. // .content > p > img
  304. if (e.target.nodeName == "IMG" && $(e.target).parent().get(0).nodeName == "P") {
  305. tag = 'pimg';
  306. }
  307. if (!tag && !rel) return;
  308. switch (true) {
  309. // nav menu
  310. case (tag.indexOf('switchmenu') != -1):
  311. window.scrollTo(0, 0)
  312. $('html, body').toggleClass('mu');
  313. break;
  314. // next page
  315. case (tag.indexOf('more') != -1):
  316. tag = $('.more');
  317. if (tag.data('status') == 'loading') {
  318. return false
  319. }
  320. var num = parseInt(tag.data('page')) || 1;
  321. if (num == 1) {
  322. tag.data('page', 1)
  323. }
  324. if (num >= Pages) {
  325. return
  326. }
  327. tag.html('加载中...').data('status', 'loading')
  328. Diaspora.loading()
  329. Diaspora.L(tag.attr('href'), function(data) {
  330. var link = $(data).find('.more').attr('href');
  331. if (link != undefined) {
  332. tag.attr('href', link).html('加载更多').data('status', 'loaded')
  333. tag.data('page', parseInt(tag.data('page')) + 1)
  334. } else {
  335. $('#pager').remove()
  336. }
  337. var tempScrollTop = $(window).scrollTop();
  338. $('#primary').append($(data).find('.post'))
  339. $(window).scrollTop(tempScrollTop + 100);
  340. Diaspora.loaded()
  341. $('html,body').animate({ scrollTop: tempScrollTop + 400 }, 500);
  342. }, function() {
  343. tag.html('加载更多').data('status', 'loaded')
  344. })
  345. return false;
  346. break;
  347. // home
  348. case (tag.indexOf('icon-home') != -1):
  349. $('.toc').fadeOut(100);
  350. if ($('#preview').hasClass('show')) {
  351. history.back();
  352. } else {
  353. location.href = "/";
  354. }
  355. break;
  356. // qrcode
  357. case (tag.indexOf('icon-scan') != -1):
  358. if ($('.icon-scan').hasClass('tg')) {
  359. $('#qr').toggle()
  360. } else {
  361. $('.icon-scan').addClass('tg')
  362. $('#qr').qrcode({ width: 128, height: 128, text: location.href}).toggle()
  363. }
  364. break;
  365. // audio play
  366. case (tag.indexOf('icon-play') != -1):
  367. $('#audio')[0].play()
  368. $('.icon-play').removeClass('icon-play').addClass('icon-pause')
  369. break;
  370. // audio pause
  371. case (tag.indexOf('icon-pause') != -1):
  372. $('#audio')[0].pause()
  373. $('.icon-pause').removeClass('icon-pause').addClass('icon-play')
  374. break;
  375. // history state
  376. case (tag.indexOf('cover') != -1):
  377. Diaspora.HS($(e.target).parent(), 'push')
  378. return false;
  379. break;
  380. // history state
  381. case (tag.indexOf('posttitle') != -1):
  382. Diaspora.HS($(e.target), 'push')
  383. return false;
  384. break;
  385. // prev, next post
  386. case (rel == 'prev' || rel == 'next'):
  387. if (rel == 'prev') {
  388. var t = $('#prev_next a')[0].text
  389. } else {
  390. var t = $('#prev_next a')[1].text
  391. }
  392. $(e.target).attr('title', t)
  393. Diaspora.HS($(e.target), 'replace')
  394. return false;
  395. break;
  396. // toc
  397. case (tag.indexOf('toc-text') != -1 || tag.indexOf('toc-link') != -1
  398. || tag.indexOf('toc-number') != -1):
  399. hash = '';
  400. if (e.target.nodeName == 'SPAN'){
  401. hash = $(e.target).parent().attr('href')
  402. }else{
  403. hash = $(e.target).attr('href')
  404. }
  405. to = $("a.headerlink[href='" + hash + "']")
  406. $("html,body").animate({
  407. scrollTop: to.offset().top - 50
  408. }, 300);
  409. return false;
  410. break;
  411. // quick view
  412. case (tag.indexOf('pviewa') != -1):
  413. $('body').removeClass('mu')
  414. setTimeout(function() {
  415. Diaspora.HS($(e.target), 'push')
  416. $('.toc').fadeIn(1000);
  417. }, 300)
  418. return false;
  419. break;
  420. // photoswipe
  421. case (tag.indexOf('pimg') != -1):
  422. var pswpElement = $('.pswp').get(0);
  423. if (pswpElement) {
  424. var items = [];
  425. var index = 0;
  426. var imgs = [];
  427. $('.content img').each(function(i, v){
  428. // get index
  429. if (e.target.src == v.src) {
  430. index = i;
  431. }
  432. var item = {
  433. src: v.src,
  434. w: v.naturalWidth,
  435. h: v.naturalHeight
  436. };
  437. imgs.push(v);
  438. items.push(item);
  439. });
  440. var options = {
  441. index: index,
  442. shareEl: false,
  443. zoomEl: false,
  444. allowRotationOnUserZoom: true,
  445. history: false,
  446. getThumbBoundsFn: function(index) {
  447. // See Options -> getThumbBoundsFn section of documentation for more info
  448. var thumbnail = imgs[index],
  449. pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  450. rect = thumbnail.getBoundingClientRect();
  451. return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
  452. }
  453. };
  454. var lightBox= new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  455. lightBox.init();
  456. }
  457. return false;
  458. break;
  459. // comment
  460. case - 1 != tag.indexOf("comment"):
  461. Diaspora.loading(),
  462. comment = $('#gitalk-container');
  463. gitalk = new Gitalk({
  464. clientID: comment.data('ci'),
  465. clientSecret: comment.data('cs'),
  466. repo: comment.data('r'),
  467. owner: comment.data('o'),
  468. admin: comment.data('a'),
  469. id: location.pathname,
  470. distractionFreeMode: comment.data('d')
  471. })
  472. $(".comment").removeClass("link")
  473. gitalk.render('gitalk-container')
  474. Diaspora.loaded();
  475. return false;
  476. break;
  477. default:
  478. return true;
  479. break;
  480. }
  481. })
  482. // 是否自动展开评论
  483. comment = $("#gitalk-container");
  484. if (comment.data('ae') == true){
  485. comment.click();
  486. }
  487. })