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

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