app/Resources/static/themes/baggy/js/init.js

   1 import $ from 'jquery';
   2 import { initFilters, initExport } from '../../_global/js/tools';
   3 import './shortcuts/main.js';
   4 import './shortcuts/entry.js';
   5
   6 /* eslint-disable no-unused-vars */
   7 /* jquery has default scope */
   8 import cookie from 'jquery.cookie';
   9 import ui from 'jquery-ui-browserify';
  10 /* eslint-enable no-unused-vars */
  11
  12 import annotator from 'annotator';
  13
  14 import { savePercent, retrievePercent } from '../../_global/js/tools';
  15 import toggleSaveLinkForm from './uiTools';
  16
  17 global.jquery = $;
  18
  19 $.fn.ready(() => {
  20   const $listmode = $('#listmode');
  21   const $listentries = $('#list-entries');
  22
  23   /* ==========================================================================
  24      Menu
  25      ========================================================================== */
  26
  27   $('#menu').click(() => {
  28     $('#links').toggleClass('menu--open');
  29     const content = $('#content');
  30     if (content.hasClass('opacity03')) {
  31       content.removeClass('opacity03');
  32     }
  33   });
  34
  35   /* ==========================================================================
  36      List mode or Table Mode
  37      ========================================================================== */
  38
  39   $listmode.click(() => {
  40     if ($.cookie('listmode') === 1) {
  41       // Cookie
  42       $.removeCookie('listmode');
  43
  44       $listentries.removeClass('listmode');
  45       $listmode.removeClass('tablemode');
  46       $listmode.addClass('listmode');
  47     } else {
  48       // Cookie
  49       $.cookie('listmode', 1, { expires: 365 });
  50
  51       $listentries.addClass('listmode');
  52       $listmode.removeClass('listmode');
  53       $listmode.addClass('tablemode');
  54     }
  55   });
  56
  57   /* ==========================================================================
  58      Cookie listmode
  59      ========================================================================== */
  60
  61   if ($.cookie('listmode') === 1) {
  62     $listentries.addClass('listmode');
  63     $listmode.removeClass('listmode');
  64     $listmode.addClass('tablemode');
  65   }
  66
  67   /* ==========================================================================
  68      Add tag panel
  69      ========================================================================== */
  70
  71
  72   $('#nav-btn-add-tag').on('click', () => {
  73     $('.nav-panel-add-tag').toggle(100);
  74     $('.nav-panel-menu').addClass('hidden');
  75     $('#tag_label').focus();
  76     return false;
  77   });
  78
  79   /**
  80    * Filters & Export
  81    */
  82   // no display if filters not available
  83   if ($('div').is('#filters')) {
  84     $('#button_filters').show();
  85     $('#clear_form_filters').on('click', () => {
  86       $('#filters input').val('');
  87       $('#filters :checked').removeAttr('checked');
  88       return false;
  89     });
  90   }
  91
  92   /* ==========================================================================
  93      Annotations & Remember position
  94      ========================================================================== */
  95
  96   if ($('article').length) {
  97     const app = new annotator.App();
  98
  99     app.include(annotator.ui.main, {
 100       element: document.querySelector('article'),
 101     });
 102
 103     const x = JSON.parse($('#annotationroutes').html());
 104     app.include(annotator.storage.http, x);
 105
 106     app.start().then(() => {
 107       app.annotations.load({ entry: x.entryId });
 108     });
 109
 110     $(window).scroll(() => {
 111       const scrollTop = $(window).scrollTop();
 112       const docHeight = $(document).height();
 113       const scrollPercent = (scrollTop) / (docHeight);
 114       const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
 115       savePercent(x.entryId, scrollPercentRounded);
 116     });
 117
 118     retrievePercent(x.entryId);
 119
 120     $(window).resize(() => {
 121       retrievePercent(x.entryId);
 122     });
 123   }
 124
 125   /**
 126    * Close window after adding entry if popup
 127    */
 128   const currentUrl = window.location.href;
 129   if (currentUrl.match('&closewin=true')) {
 130     window.close();
 131   }
 132
 133   /**
 134    * Tags autocomplete
 135    */
 136   /**
 137    * Not working on v2
 138    *
 139
 140   $('#value').bind('keydown', (event) => {
 141     if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) {
 142       event.preventDefault();
 143     }
 144   }).autocomplete({
 145     source: function source(request, response) {
 146       $.getJSON('./?view=tags', {
 147         term: extractLast(request.term),
 148         //id: $(':hidden#entry_id').val()
 149       }, response);
 150     },
 151     search: function search() {
 152       // custom minLength
 153       const term = extractLast(this.value);
 154       return term.length >= 1;
 155     },
 156     focus: function focus() {
 157       // prevent value inserted on focus
 158       return false;
 159     },
 160     select: function select(event, ui) {
 161       const terms = split(this.value);
 162       // remove the current input
 163       terms.pop();
 164       // add the selected item
 165       terms.push(ui.item.value);
 166       // add placeholder to get the comma-and-space at the end
 167       terms.push('');
 168       this.value = terms.join(', ');
 169       return false;
 170     },
 171   });
 172   */
 173
 174   //---------------------------------------------------------------------------
 175   // Close the message box when the user clicks the close icon
 176   //---------------------------------------------------------------------------
 177   $('a.closeMessage').on('click', () => {
 178     $(this).parents('div.messages').slideUp(300, () => { $(this).remove(); });
 179     return false;
 180   });
 181
 182   $('#search-form').hide();
 183   $('#bagit-form').hide();
 184   $('#filters').hide();
 185   $('#download-form').hide();
 186
 187   //---------------------------------------------------------------------------
 188   // Toggle the 'Search' popup in the sidebar
 189   //---------------------------------------------------------------------------
 190   function toggleSearch() {
 191     $('#search-form').toggle();
 192     $('#search').toggleClass('current');
 193     $('#search').toggleClass('active-current');
 194     $('#search-arrow').toggleClass('arrow-down');
 195     if ($('#search').hasClass('current')) {
 196       $('#content').addClass('opacity03');
 197     } else {
 198       $('#content').removeClass('opacity03');
 199     }
 200   }
 201
 202   //---------------------------------------------------------------------------
 203   // Toggle the 'Filter' popup on entries list
 204   //---------------------------------------------------------------------------
 205   function toggleFilter() {
 206     $('#filters').toggle();
 207   }
 208
 209   //---------------------------------------------------------------------------
 210   // Toggle the 'Download' popup on entries list
 211   //---------------------------------------------------------------------------
 212   function toggleDownload() {
 213     $('#download-form').toggle();
 214   }
 215
 216   //---------------------------------------------------------------------------
 217   // Toggle the 'Save a Link' popup in the sidebar
 218   //---------------------------------------------------------------------------
 219   function toggleBagit() {
 220     $('#bagit-form').toggle();
 221     $('#bagit').toggleClass('current');
 222     $('#bagit').toggleClass('active-current');
 223     $('#bagit-arrow').toggleClass('arrow-down');
 224     if ($('#bagit').hasClass('current')) {
 225       $('#content').addClass('opacity03');
 226     } else {
 227       $('#content').removeClass('opacity03');
 228     }
 229   }
 230
 231   //---------------------------------------------------------------------------
 232   // Close all #links popups in the sidebar
 233   //---------------------------------------------------------------------------
 234   function closePopups() {
 235     $('#links .messages').hide();
 236     $('#links > li > a').removeClass('active-current');
 237     $('#links > li > a').removeClass('current');
 238     $('[id$=-arrow]').removeClass('arrow-down');
 239     $('#content').removeClass('opacity03');
 240   }
 241
 242   $('#search').click(() => {
 243     closePopups();
 244     toggleSearch();
 245     $('#searchfield').focus();
 246   });
 247
 248   $('.filter-btn').click(() => {
 249     closePopups();
 250     toggleFilter();
 251   });
 252
 253   $('.download-btn').click(() => {
 254     closePopups();
 255     toggleDownload();
 256   });
 257
 258   $('#bagit').click(() => {
 259     closePopups();
 260     toggleBagit();
 261     $('#plainurl').focus();
 262   });
 263
 264   $('#search-form-close').click(() => {
 265     toggleSearch();
 266   });
 267
 268   $('#filter-form-close').click(() => {
 269     toggleFilter();
 270   });
 271
 272   $('#download-form-close').click(() => {
 273     toggleDownload();
 274   });
 275
 276   $('#bagit-form-close').click(() => {
 277     toggleBagit();
 278   });
 279
 280   const $bagitFormForm = $('#bagit-form-form');
 281
 282   /* ==========================================================================
 283    bag it link and close button
 284    ========================================================================== */
 285
 286   // send 'bag it link' form request via ajax
 287   $bagitFormForm.submit((event) => {
 288     $('body').css('cursor', 'wait');
 289     $('#add-link-result').empty();
 290
 291     $.ajax({
 292       type: $bagitFormForm.attr('method'),
 293       url: $bagitFormForm.attr('action'),
 294       data: $bagitFormForm.serialize(),
 295       success: function success() {
 296         $('#add-link-result').html('Done!');
 297         $('#plainurl').val('');
 298         $('#plainurl').blur('');
 299         $('body').css('cursor', 'auto');
 300       },
 301       error: function error() {
 302         $('#add-link-result').html('Failed!');
 303         $('body').css('cursor', 'auto');
 304       },
 305     });
 306
 307     event.preventDefault();
 308   });
 309
 310   /* ==========================================================================
 311    Process all links inside an article
 312    ========================================================================== */
 313
 314   $('article a[href^="http"]').after(
 315       () => `<a href="${$(this).attr('href')}" class="add-to-wallabag-link-after" ` +
 316       'alt="add to wallabag" title="add to wallabag"></a>'
 317   );
 318
 319   $('.add-to-wallabag-link-after').click((event) => {
 320     toggleSaveLinkForm($(this).attr('href'), event);
 321     event.preventDefault();
 322   });
 323 });