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

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