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

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