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 mobileMaxWidth = 993;
  21
  22 const stickyNav = () => {
  23   const nav = $('.js-entry-nav-top');
  24   $('[data-toggle="actions"]').click(() => {
  25     nav.toggleClass('entry-nav-top--sticky');
  26   });
  27 };
  28
  29 const articleScroll = () => {
  30   const articleEl = $('#article');
  31   if (articleEl.length > 0) {
  32     $(window).scroll(() => {
  33       const s = $(window).scrollTop();
  34       const d = $(document).height();
  35       const c = $(window).height();
  36       const articleElBottom = articleEl.offset().top + articleEl.height();
  37       const scrollPercent = (s / (d - c)) * 100;
  38       $('.progress .determinate').css('width', `${scrollPercent}%`);
  39       const fixedActionBtn = $('.js-fixed-action-btn');
  40       const toggleScrollDataName = 'toggle-auto';
  41       if ((s + c) > articleElBottom) {
  42         fixedActionBtn.data(toggleScrollDataName, true);
  43         fixedActionBtn.openFAB();
  44       } else if (fixedActionBtn.data(toggleScrollDataName) === true) {
  45         fixedActionBtn.data(toggleScrollDataName, false);
  46         fixedActionBtn.closeFAB();
  47       }
  48     });
  49   }
  50 };
  51
  52 $(document).ready(() => {
  53   // sideNav
  54   $('.button-collapse').sideNav();
  55   $('select').material_select();
  56   $('.collapsible').collapsible({
  57     accordion: false,
  58   });
  59   $('.datepicker').pickadate({
  60     selectMonths: true,
  61     selectYears: 15,
  62     formatSubmit: 'yyyy-mm-dd',
  63     hiddenName: false,
  64     format: 'yyyy-mm-dd',
  65     container: 'body',
  66   });
  67
  68   $('.dropdown-trigger').dropdown({ hover: false });
  69
  70   initFilters();
  71   initExport();
  72   initRandom();
  73   stickyNav();
  74   articleScroll();
  75
  76   const toggleNav = (toShow, toFocus) => {
  77     $('.nav-panel-actions').hide(100);
  78     $(toShow).show(100);
  79     $('.nav-panels').css('background', 'white');
  80     $(toFocus).focus();
  81   };
  82
  83   $('#nav-btn-add-tag').on('click', () => {
  84     $('.nav-panel-add-tag').toggle(100);
  85     $('.nav-panel-menu').addClass('hidden');
  86     if (window.innerWidth < mobileMaxWidth) {
  87       $('.side-nav').sideNav('hide');
  88     }
  89     $('#tag_label').focus();
  90     return false;
  91   });
  92
  93   $('#nav-btn-add').on('click', () => {
  94     toggleNav('.nav-panel-add', '#entry_url');
  95     return false;
  96   });
  97
  98   const materialAddForm = $('.nav-panel-add');
  99   materialAddForm.on('submit', () => {
 100     materialAddForm.addClass('disabled');
 101     $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
 102   });
 103
 104   $('#nav-btn-search').on('click', () => {
 105     toggleNav('.nav-panel-search', '#search_entry_term');
 106     return false;
 107   });
 108
 109   $('.close').on('click', (e) => {
 110     $(e.target).parent('.nav-panel-item').hide(100);
 111     $('.nav-panel-actions').show(100);
 112     $('.nav-panels').css('background', 'transparent');
 113     return false;
 114   });
 115
 116   const mainCheckboxes = document.querySelectorAll('[data-js="checkboxes-toggle"]');
 117   if (mainCheckboxes.length) {
 118     [...mainCheckboxes].forEach((el) => {
 119       el.addEventListener('click', () => {
 120         const checkboxes = document.querySelectorAll(el.dataset.toggle);
 121         [...checkboxes].forEach((checkbox) => {
 122           const checkboxClone = checkbox;
 123           checkboxClone.checked = el.checked;
 124         });
 125       });
 126     });
 127   }
 128 });