app/Resources/static/themes/material/index.js

   1 import $ from 'jquery';
   2
   3 /* Materialize imports */
   4 import 'materialize-css/dist/css/materialize.css';
   5 import 'materialize-css/dist/js/materialize';
   6
   7 /* Global imports */
   8 import '../_global/index';
   9
  10 /* Tools */
  11 import { initExport, initFilters, initRandom } from './js/tools';
  12
  13 /* Import shortcuts */
  14 import './js/shortcuts/main';
  15 import './js/shortcuts/entry';
  16
  17 /* Theme style */
  18 import './css/index.scss';
  19
  20 const stickyNav = () => {
  21   const nav = $('.js-entry-nav-top');
  22   $('[data-toggle="actions"]').click(() => {
  23     nav.toggleClass('entry-nav-top--sticky');
  24   });
  25 };
  26
  27 const articleScroll = () => {
  28   const articleEl = $('#article');
  29   if (articleEl.length > 0) {
  30     $(window).scroll(() => {
  31       const s = $(window).scrollTop();
  32       const d = $(document).height();
  33       const c = $(window).height();
  34       const articleElBottom = articleEl.offset().top + articleEl.height();
  35       const scrollPercent = (s / (d - c)) * 100;
  36       $('.progress .determinate').css('width', `${scrollPercent}%`);
  37       const fixedActionBtn = $('.js-fixed-action-btn');
  38       const toggleScrollDataName = 'toggle-auto';
  39       if ((s + c) > articleElBottom) {
  40         fixedActionBtn.data(toggleScrollDataName, true);
  41         fixedActionBtn.openFAB();
  42       } else if (fixedActionBtn.data(toggleScrollDataName) === true) {
  43         fixedActionBtn.data(toggleScrollDataName, false);
  44         fixedActionBtn.closeFAB();
  45       }
  46     });
  47   }
  48 };
  49
  50 $(document).ready(() => {
  51   // sideNav
  52   $('.button-collapse').sideNav();
  53   $('select').material_select();
  54   $('.collapsible').collapsible({
  55     accordion: false,
  56   });
  57   $('.datepicker').pickadate({
  58     selectMonths: true,
  59     selectYears: 15,
  60     formatSubmit: 'yyyy-mm-dd',
  61     hiddenName: false,
  62     format: 'yyyy-mm-dd',
  63     container: 'body',
  64   });
  65
  66   $('.dropdown-trigger').dropdown({ hover: false });
  67
  68   initFilters();
  69   initExport();
  70   initRandom();
  71   stickyNav();
  72   articleScroll();
  73
  74   const toggleNav = (toShow, toFocus) => {
  75     $('.nav-panel-actions').hide(100);
  76     $(toShow).show(100);
  77     $('.nav-panels').css('background', 'white');
  78     $(toFocus).focus();
  79   };
  80
  81   $('#nav-btn-add-tag').on('click', () => {
  82     $('.nav-panel-add-tag').toggle(100);
  83     $('.nav-panel-menu').addClass('hidden');
  84     $('#tag_label').focus();
  85     return false;
  86   });
  87
  88   $('#nav-btn-add').on('click', () => {
  89     toggleNav('.nav-panel-add', '#entry_url');
  90     return false;
  91   });
  92
  93   const materialAddForm = $('.nav-panel-add');
  94   materialAddForm.on('submit', () => {
  95     materialAddForm.addClass('disabled');
  96     $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
  97   });
  98
  99   $('#nav-btn-search').on('click', () => {
 100     toggleNav('.nav-panel-search', '#search_entry_term');
 101     return false;
 102   });
 103
 104   $('.close').on('click', (e) => {
 105     $(e.target).parent('.nav-panel-item').hide(100);
 106     $('.nav-panel-actions').show(100);
 107     $('.nav-panels').css('background', 'transparent');
 108     return false;
 109   });
 110
 111   const mainCheckboxes = document.querySelectorAll('[data-js="checkboxes-toggle"]');
 112   if (mainCheckboxes.length) {
 113     [...mainCheckboxes].forEach((el) => {
 114       el.addEventListener('click', () => {
 115         const checkboxes = document.querySelectorAll(el.dataset.toggle);
 116         [...checkboxes].forEach((checkbox) => {
 117           const checkboxClone = checkbox;
 118           checkboxClone.checked = el.checked;
 119         });
 120       });
 121     });
 122   }
 123
 124   $('.markasread').on('click', () => {
 125     const article = document.getElementById('article');
 126     const link = document.getElementById('link-archive');
 127     const articleId = article.dataset.id;
 128     const xhr = new XMLHttpRequest();
 129
 130     xhr.onload = function toggleArchive() {
 131       if (xhr.status === 200) {
 132         const previousStatus = document.getElementById('archive-icon').innerHTML;
 133         let status = link.dataset.iconUnread;
 134         let label = link.dataset.labelUnread;
 135         if (previousStatus === 'unarchive') {
 136           status = link.dataset.iconRead;
 137           label = link.dataset.labelRead;
 138         }
 139         document.getElementById('archive-icon').innerHTML = status;
 140         document.getElementById('archive-label').innerHTML = label;
 141         window.Materialize.toast(xhr.responseText, 4000);
 142       }
 143     };
 144
 145     const url = `${Routing.generate('archive_entry', { id: articleId })}?some_var_name=true`;
 146     xhr.open('GET', url, false);
 147     xhr.send(null);
 148   });
 149 });