diaspora.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  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. if (p.eq(0).data("autoplay") == true) {
  139. p[0].play();
  140. }
  141. if (p[0].src == ''){
  142. audiolist = $('#audio-list li');
  143. mp3 = audiolist.eq([Math.floor(Math.random() * audiolist.size())])
  144. p[0].src = mp3.data('url')
  145. }
  146. p.on({
  147. 'timeupdate': function() {
  148. var progress = p[0].currentTime / p[0].duration * 100;
  149. $('.bar').css('width', progress + '%');
  150. if (progress / 5 <= 1) {
  151. p[0].volume = progress / 5;
  152. }else {
  153. p[0].volume = 1;
  154. }
  155. },
  156. 'ended': function() {
  157. $('.icon-pause').removeClass('icon-pause').addClass('icon-play')
  158. },
  159. 'playing': function() {
  160. $('.icon-play').removeClass('icon-play').addClass('icon-pause')
  161. }
  162. })
  163. },
  164. loading: function() {
  165. var w = window.innerWidth;
  166. var css = '<style class="loaderstyle" id="loaderstyle'+ w +'">'+
  167. '@-moz-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
  168. '@-webkit-keyframes loader'+ w +'{100%{background-position:'+ w +'px 0}}'+
  169. '.loader'+ w +'{-webkit-animation:loader'+ w +' 3s linear infinite;-moz-animation:loader'+ w +' 3s linear infinite;}'+
  170. '</style>';
  171. $('.loaderstyle').remove()
  172. $('head').append(css)
  173. $('#loader').removeClass().addClass('loader'+ w).show()
  174. },
  175. loaded: function() {
  176. $('#loader').removeClass().hide()
  177. },
  178. F: function(id, w, h) {
  179. var _height = $(id).parent().height(),
  180. _width = $(id).parent().width(),
  181. ratio = h / w;
  182. if (_height / _width > ratio) {
  183. id.style.height = _height +'px';
  184. id.style.width = _height / ratio +'px';
  185. } else {
  186. id.style.width = _width +'px';
  187. id.style.height = _width * ratio +'px';
  188. }
  189. id.style.left = (_width - parseInt(id.style.width)) / 2 +'px';
  190. id.style.top = (_height - parseInt(id.style.height)) / 2 +'px';
  191. }
  192. };
  193. $(function() {
  194. if (Diaspora.P()) {
  195. $('body').addClass('touch')
  196. }
  197. if ($('#preview').length) {
  198. var cover = {};
  199. cover.t = $('#cover');
  200. cover.w = cover.t.attr('width');
  201. cover.h = cover.t.attr('height');
  202. ;(cover.o = function() {
  203. $('#mark').height(window.innerHeight)
  204. })();
  205. if (cover.t.prop('complete')) {
  206. // why setTimeout ?
  207. setTimeout(function() { cover.t.load() }, 0)
  208. }
  209. cover.t.on('load', function() {
  210. ;(cover.f = function() {
  211. var _w = $('#mark').width(), _h = $('#mark').height(), x, y, i, e;
  212. e = (_w >= 1000 || _h >= 1000) ? 1000 : 500;
  213. if (_w >= _h) {
  214. i = _w / e * 50;
  215. y = i;
  216. x = i * _w / _h;
  217. } else {
  218. i = _h / e * 50;
  219. x = i;
  220. y = i * _h / _w;
  221. }
  222. $('.layer').css({
  223. 'width': _w + x,
  224. 'height': _h + y,
  225. 'marginLeft': - 0.5 * x,
  226. 'marginTop': - 0.5 * y
  227. })
  228. if (!cover.w) {
  229. cover.w = cover.t.width();
  230. cover.h = cover.t.height();
  231. }
  232. Diaspora.F($('#cover')[0], cover.w, cover.h)
  233. })();
  234. setTimeout(function() {
  235. $('html, body').removeClass('loading')
  236. }, 1000)
  237. $('#mark').parallax()
  238. var vibrant = new Vibrant(cover.t[0]);
  239. var swatches = vibrant.swatches()
  240. if (swatches['DarkVibrant']) {
  241. $('#vibrant polygon').css('fill', swatches['DarkVibrant'].getHex())
  242. $('#vibrant div').css('background-color', swatches['DarkVibrant'].getHex())
  243. }
  244. if (swatches['Vibrant']) {
  245. $('.icon-menu').css('color', swatches['Vibrant'].getHex())
  246. }
  247. })
  248. if (!cover.t.attr('src')) {
  249. alert('Please set the post thumbnail')
  250. }
  251. $('#preview').css('min-height', window.innerHeight)
  252. Diaspora.PS()
  253. $('.pview a').addClass('pviewa')
  254. var T;
  255. $(window).on('resize', function() {
  256. clearTimeout(T)
  257. T = setTimeout(function() {
  258. if (!Diaspora.P() && location.href == Home) {
  259. cover.o()
  260. cover.f()
  261. }
  262. if ($('#loader').attr('class')) {
  263. Diaspora.loading()
  264. }
  265. }, 500)
  266. })
  267. } else {
  268. $('#single').css('min-height', window.innerHeight)
  269. setTimeout(function() {
  270. $('html, body').removeClass('loading')
  271. }, 1000)
  272. window.addEventListener('popstate', function(e) {
  273. if (e.state) location.href = e.state.u;
  274. })
  275. Diaspora.player();
  276. $('.icon-icon, .image-icon').attr('href', '/')
  277. $('#top').show()
  278. }
  279. $(window).on('scroll', function() {
  280. if ($('.scrollbar').length && !Diaspora.P() && !$('.icon-images').hasClass('active')) {
  281. var wt = $(window).scrollTop(),
  282. tw = $('#top').width(),
  283. dh = document.body.scrollHeight,
  284. wh = $(window).height();
  285. var width = tw / (dh - wh) * wt;
  286. $('.scrollbar').width(width)
  287. if (wt > 80 && window.innerWidth > 800) {
  288. $('.subtitle').fadeIn()
  289. } else {
  290. $('.subtitle').fadeOut()
  291. }
  292. }
  293. })
  294. $(window).on('touchmove', function(e) {
  295. if ($('body').hasClass('mu')) {
  296. e.preventDefault()
  297. }
  298. })
  299. $('body').on('click', function(e) {
  300. var tag = $(e.target).attr('class') || '',
  301. rel = $(e.target).attr('rel') || '';
  302. // .content > p > img
  303. if (e.target.nodeName == "IMG" && $(e.target).parent().get(0).nodeName == "P") {
  304. tag = 'pimg';
  305. }
  306. if (!tag && !rel) return;
  307. switch (true) {
  308. // nav menu
  309. case (tag.indexOf('switchmenu') != -1):
  310. window.scrollTo(0, 0)
  311. $('html, body').toggleClass('mu');
  312. break;
  313. // next page
  314. case (tag.indexOf('more') != -1):
  315. tag = $('.more');
  316. if (tag.data('status') == 'loading') {
  317. return false
  318. }
  319. var num = parseInt(tag.data('page')) || 1;
  320. if (num == 1) {
  321. tag.data('page', 1)
  322. }
  323. if (num >= Pages) {
  324. return
  325. }
  326. tag.html('加载中...').data('status', 'loading')
  327. Diaspora.loading()
  328. Diaspora.L(tag.attr('href'), function(data) {
  329. var link = $(data).find('.more').attr('href');
  330. if (link != undefined) {
  331. tag.attr('href', link).html('加载更多').data('status', 'loaded')
  332. tag.data('page', parseInt(tag.data('page')) + 1)
  333. } else {
  334. $('#pager').remove()
  335. }
  336. var tempScrollTop = $(window).scrollTop();
  337. $('#primary').append($(data).find('.post'))
  338. $(window).scrollTop(tempScrollTop + 100);
  339. Diaspora.loaded()
  340. $('html,body').animate({ scrollTop: tempScrollTop + 400 }, 500);
  341. }, function() {
  342. tag.html('加载更多').data('status', 'loaded')
  343. })
  344. return false;
  345. break;
  346. // home
  347. case (tag.indexOf('icon-home') != -1):
  348. $('.toc').fadeOut(100);
  349. if ($('#preview').hasClass('show')) {
  350. history.back();
  351. } else {
  352. location.href = "/";
  353. }
  354. break;
  355. // qrcode
  356. case (tag.indexOf('icon-scan') != -1):
  357. if ($('.icon-scan').hasClass('tg')) {
  358. $('#qr').toggle()
  359. } else {
  360. $('.icon-scan').addClass('tg')
  361. $('#qr').qrcode({ width: 128, height: 128, text: location.href}).toggle()
  362. }
  363. break;
  364. // audio play
  365. case (tag.indexOf('icon-play') != -1):
  366. $('#audio')[0].play()
  367. $('.icon-play').removeClass('icon-play').addClass('icon-pause')
  368. break;
  369. // audio pause
  370. case (tag.indexOf('icon-pause') != -1):
  371. $('#audio')[0].pause()
  372. $('.icon-pause').removeClass('icon-pause').addClass('icon-play')
  373. break;
  374. // history state
  375. case (tag.indexOf('cover') != -1):
  376. Diaspora.HS($(e.target).parent(), 'push')
  377. return false;
  378. break;
  379. // history state
  380. case (tag.indexOf('posttitle') != -1):
  381. Diaspora.HS($(e.target), 'push')
  382. return false;
  383. break;
  384. // prev, next post
  385. case (rel == 'prev' || rel == 'next'):
  386. if (rel == 'prev') {
  387. var t = $('#prev_next a')[0].text
  388. } else {
  389. var t = $('#prev_next a')[1].text
  390. }
  391. $(e.target).attr('title', t)
  392. Diaspora.HS($(e.target), 'replace')
  393. return false;
  394. break;
  395. // toc
  396. case (tag.indexOf('toc-text') != -1 || tag.indexOf('toc-link') != -1
  397. || tag.indexOf('toc-number') != -1):
  398. hash = '';
  399. if (e.target.nodeName == 'SPAN'){
  400. hash = $(e.target).parent().attr('href')
  401. }else{
  402. hash = $(e.target).attr('href')
  403. }
  404. to = $("a.headerlink[href='" + hash + "']")
  405. $("html,body").animate({
  406. scrollTop: to.offset().top - 50
  407. }, 300);
  408. return false;
  409. break;
  410. // quick view
  411. case (tag.indexOf('pviewa') != -1):
  412. $('body').removeClass('mu')
  413. setTimeout(function() {
  414. Diaspora.HS($(e.target), 'push')
  415. $('.toc').fadeIn(1000);
  416. }, 300)
  417. return false;
  418. break;
  419. // photoswipe
  420. case (tag.indexOf('pimg') != -1):
  421. var pswpElement = $('.pswp').get(0);
  422. if (pswpElement) {
  423. var items = [];
  424. var index = 0;
  425. var imgs = [];
  426. $('.content img').each(function(i, v){
  427. // get index
  428. if (e.target.src == v.src) {
  429. index = i;
  430. }
  431. var item = {
  432. src: v.src,
  433. w: v.naturalWidth,
  434. h: v.naturalHeight
  435. };
  436. imgs.push(v);
  437. items.push(item);
  438. });
  439. var options = {
  440. index: index,
  441. shareEl: false,
  442. zoomEl: false,
  443. allowRotationOnUserZoom: true,
  444. history: false,
  445. getThumbBoundsFn: function(index) {
  446. // See Options -> getThumbBoundsFn section of documentation for more info
  447. var thumbnail = imgs[index],
  448. pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
  449. rect = thumbnail.getBoundingClientRect();
  450. return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
  451. }
  452. };
  453. var lightBox= new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  454. lightBox.init();
  455. }
  456. return false;
  457. break;
  458. // comment
  459. case - 1 != tag.indexOf("comment"):
  460. Diaspora.loading(),
  461. comment = $('#gitalk-container');
  462. gitalk = new Gitalk({
  463. clientID: comment.data('ci'),
  464. clientSecret: comment.data('cs'),
  465. repo: comment.data('r'),
  466. owner: comment.data('o'),
  467. admin: comment.data('a'),
  468. id: location.pathname,
  469. distractionFreeMode: comment.data('d')
  470. })
  471. $(".comment").removeClass("link")
  472. gitalk.render('gitalk-container')
  473. Diaspora.loaded();
  474. return false;
  475. break;
  476. default:
  477. return true;
  478. break;
  479. }
  480. })
  481. // 是否自动展开评论
  482. comment = $("#gitalk-container");
  483. if (comment.data('ae') == true){
  484. comment.click();
  485. }
  486. console.log("%c Github %c","background:#24272A; color:#ffffff","","https://github.com/Fechin/hexo-theme-diaspora")
  487. })