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: 'dd/mm/yyyy',
  61     hiddenName: true,
  62     format: 'dd/mm/yyyy',
  63     container: 'body',
  64   });
  65
  66   initFilters();
  67   initExport();
  68   initRandom();
  69   stickyNav();
  70   articleScroll();
  71
  72   const toggleNav = (toShow, toFocus) => {
  73     $('.nav-panel-actions').hide(100);
  74     $(toShow).show(100);
  75     $('.nav-panels').css('background', 'white');
  76     $(toFocus).focus();
  77   };
  78
  79   $('#nav-btn-add-tag').on('click', () => {
  80     $('.nav-panel-add-tag').toggle(100);
  81     $('.nav-panel-menu').addClass('hidden');
  82     $('#tag_label').focus();
  83     return false;
  84   });
  85
  86   $('#nav-btn-add').on('click', () => {
  87     toggleNav('.nav-panel-add', '#entry_url');
  88     return false;
  89   });
  90
  91   const materialAddForm = $('.nav-panel-add');
  92   materialAddForm.on('submit', () => {
  93     materialAddForm.addClass('disabled');
  94     $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
  95   });
  96
  97   $('#nav-btn-search').on('click', () => {
  98     toggleNav('.nav-panel-search', '#search_entry_term');
  99     return false;
 100   });
 101
 102   $('.close').on('click', (e) => {
 103     $(e.target).parent('.nav-panel-item').hide(100);
 104     $('.nav-panel-actions').show(100);
 105     $('.nav-panels').css('background', 'transparent');
 106     return false;
 107   });
 108 });