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

   1 const $ = global.jquery = require('jquery');
   2 require('jquery.cookie');
   3 require('jquery-ui-browserify');
   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   /**
 128    * Not working on v2
 129    *
 130
 131   $('#value').bind('keydown', (event) => {
 132     if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) {
 133       event.preventDefault();
 134     }
 135   }).autocomplete({
 136     source: function source(request, response) {
 137       $.getJSON('./?view=tags', {
 138         term: extractLast(request.term),
 139         //id: $(':hidden#entry_id').val()
 140       }, response);
 141     },
 142     search: function search() {
 143       // custom minLength
 144       const term = extractLast(this.value);
 145       return term.length >= 1;
 146     },
 147     focus: function focus() {
 148       // prevent value inserted on focus
 149       return false;
 150     },
 151     select: function select(event, ui) {
 152       const terms = split(this.value);
 153       // remove the current input
 154       terms.pop();
 155       // add the selected item
 156       terms.push(ui.item.value);
 157       // add placeholder to get the comma-and-space at the end
 158       terms.push('');
 159       this.value = terms.join(', ');
 160       return false;
 161     },
 162   });
 163   */
 164
 165   //---------------------------------------------------------------------------
 166   // Close the message box when the user clicks the close icon
 167   //---------------------------------------------------------------------------
 168   $('a.closeMessage').on('click', () => {
 169     $(this).parents('div.messages').slideUp(300, () => { $(this).remove(); });
 170     return false;
 171   });
 172
 173   $('#search-form').hide();
 174   $('#bagit-form').hide();
 175   $('#filters').hide();
 176   $('#download-form').hide();
 177
 178   //---------------------------------------------------------------------------
 179   // Toggle the 'Search' popup in the sidebar
 180   //---------------------------------------------------------------------------
 181   function toggleSearch() {
 182     $('#search-form').toggle();
 183     $('#search').toggleClass('current');
 184     $('#search').toggleClass('active-current');
 185     $('#search-arrow').toggleClass('arrow-down');
 186     if ($('#search').hasClass('current')) {
 187       $('#content').addClass('opacity03');
 188     } else {
 189       $('#content').removeClass('opacity03');
 190     }
 191   }
 192
 193   //---------------------------------------------------------------------------
 194   // Toggle the 'Filter' popup on entries list
 195   //---------------------------------------------------------------------------
 196   function toggleFilter() {
 197     $('#filters').toggle();
 198   }
 199
 200   //---------------------------------------------------------------------------
 201   // Toggle the 'Download' popup on entries list
 202   //---------------------------------------------------------------------------
 203   function toggleDownload() {
 204     $('#download-form').toggle();
 205   }
 206
 207   //---------------------------------------------------------------------------
 208   // Toggle the 'Save a Link' popup in the sidebar
 209   //---------------------------------------------------------------------------
 210   function toggleBagit() {
 211     $('#bagit-form').toggle();
 212     $('#bagit').toggleClass('current');
 213     $('#bagit').toggleClass('active-current');
 214     $('#bagit-arrow').toggleClass('arrow-down');
 215     if ($('#bagit').hasClass('current')) {
 216       $('#content').addClass('opacity03');
 217     } else {
 218       $('#content').removeClass('opacity03');
 219     }
 220   }
 221
 222   //---------------------------------------------------------------------------
 223   // Close all #links popups in the sidebar
 224   //---------------------------------------------------------------------------
 225   function closePopups() {
 226     $('#links .messages').hide();
 227     $('#links > li > a').removeClass('active-current');
 228     $('#links > li > a').removeClass('current');
 229     $('[id$=-arrow]').removeClass('arrow-down');
 230     $('#content').removeClass('opacity03');
 231   }
 232
 233   $('#search').click(() => {
 234     closePopups();
 235     toggleSearch();
 236     $('#searchfield').focus();
 237   });
 238
 239   $('.filter-btn').click(() => {
 240     closePopups();
 241     toggleFilter();
 242   });
 243
 244   $('.download-btn').click(() => {
 245     closePopups();
 246     toggleDownload();
 247   });
 248
 249   $('#bagit').click(() => {
 250     closePopups();
 251     toggleBagit();
 252     $('#plainurl').focus();
 253   });
 254
 255   $('#search-form-close').click(() => {
 256     toggleSearch();
 257   });
 258
 259   $('#filter-form-close').click(() => {
 260     toggleFilter();
 261   });
 262
 263   $('#download-form-close').click(() => {
 264     toggleDownload();
 265   });
 266
 267   $('#bagit-form-close').click(() => {
 268     toggleBagit();
 269   });
 270
 271   const $bagitFormForm = $('#bagit-form-form');
 272
 273   /* ==========================================================================
 274    bag it link and close button
 275    ========================================================================== */
 276
 277   // send 'bag it link' form request via ajax
 278   $bagitFormForm.submit((event) => {
 279     $('body').css('cursor', 'wait');
 280     $('#add-link-result').empty();
 281
 282     $.ajax({
 283       type: $bagitFormForm.attr('method'),
 284       url: $bagitFormForm.attr('action'),
 285       data: $bagitFormForm.serialize(),
 286       success: function success() {
 287         $('#add-link-result').html('Done!');
 288         $('#plainurl').val('');
 289         $('#plainurl').blur('');
 290         $('body').css('cursor', 'auto');
 291       },
 292       error: function error() {
 293         $('#add-link-result').html('Failed!');
 294         $('body').css('cursor', 'auto');
 295       },
 296     });
 297
 298     event.preventDefault();
 299   });
 300
 301   /* ==========================================================================
 302    Process all links inside an article
 303    ========================================================================== */
 304
 305   $('article a[href^="http"]').after(
 306       () => `<a href="${$(this).attr('href')}" class="add-to-wallabag-link-after" ` +
 307       'alt="add to wallabag" title="add to wallabag"></a>'
 308   );
 309
 310   $('.add-to-wallabag-link-after').click((event) => {
 311     toggleSaveLinkForm($(this).attr('href'), event);
 312     event.preventDefault();
 313   });
 314 });