ui/js/common.js

   1 /*!
   2  * Copyright © 2007-2014 The Galette Team
   3  *
   4  * This file is part of Galette (http://galette.tuxfamily.org).
   5  *
   6  * Galette is free software: you can redistribute it and/or modify
   7  * it under the terms of the GNU General Public License as published by
   8  * the Free Software Foundation, either version 3 of the License, or
   9  * (at your option) any later version.
  10  *
  11  * Galette is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  *  GNU General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU General Public License
  17  * along with Galette. If not, see <http://www.gnu.org/licenses/>.
  18  *
  19  * @category  Javascript
  20  * @package   Galette
  21  *
  22  * @author    Johan Cwiklinski <johan@x-tnd.be>
  23  * @copyright 2007-2014 The Galette Team
  24  * @license   http://www.gnu.org/licenses/gpl-3.0.html GPL License 3.0 or (at your option) any later version
  25  * @link      http://galette.tuxfamily.org
  26  * @since     Available since 0.7dev - 2007-10-06
  27  */
  28
  29 /* Fomantic UI components */
  30 var _bindFomanticComponents = function() {
  31     if (!("ontouchstart" in document.documentElement) || !("no-touch" in document.documentElement.classList)) {
  32         document.documentElement.classList.add("no-touch");
  33     }
  34
  35     var
  36         $sidebar         = $('.ui.sidebar'),
  37         $dropdown        = $('.ui.dropdown:not(.navigation, .autosubmit), select:not(.nochosen)'),
  38         $dropdownNav     = $('.ui.dropdown.navigation'),
  39         $accordion       = $('.ui.accordion'),
  40         $checkbox        = $('.ui.checkbox, .ui.radio.checkbox'),
  41         $tabulation      = $('.ui.tabbed .item'),
  42         $popup           = $('.no-touch a[title], .no-touch .tooltip'),
  43         $menuPopupRight  = $('.no-touch .ui.vertical.accordion.menu a[title]'),
  44         $menuPopupBottom = $('.no-touch .ui.top.fixed.menu a.item[title]'),
  45         $menuPopupLeft   = $('.no-touch .ui.dropdown.right-aligned a[title]')
  46     ;
  47
  48     $sidebar.sidebar('attach events', '.toc.item');
  49
  50     /* Make all dropdowns clickable when js is enabled for UX consistency.
  51      * Keep them hoverable only when js is disabled.
  52      */
  53     $('.simple.dropdown').removeClass('simple');
  54     $dropdown.dropdown();
  55
  56     /* Required for keyboard accessibility on dropdowns used in navigation.
  57      */
  58     $dropdownNav.dropdown({
  59         // Set default action : simply open the link selected.
  60         action: function(text, value, element) {
  61             location.href = element[0].href;
  62         }
  63     });
  64
  65     $accordion.accordion();
  66
  67     $checkbox.checkbox();
  68
  69     $tabulation.tab();
  70
  71     /* Fomantic UI Tooltips */
  72     /* Hide all popups when a dropdown is shown. */
  73     $.fn.dropdown.settings.onShow = function() {
  74         $('body').popup('hide all');
  75     };
  76     /* Hide all popups when an accordion is opened. */
  77     $.fn.accordion.settings.onOpening = function() {
  78         $('body').popup('hide all');
  79     };
  80     /* Default behaviour for tooltips on links with a title attribute,
  81      * or other tags with the "tooltip" class.
  82      * The title (or data-html) attribute is appended to body and removed
  83      * from DOM after being hidden (inline: false).
  84      */
  85     $popup
  86         .popup({
  87             variation: 'inverted',
  88             inline: false
  89         })
  90     ;
  91     /* Position right on the main accordion menu.
  92      */
  93     $menuPopupRight
  94         .popup({
  95             position: 'right center',
  96             variation: 'inverted',
  97             delay: {
  98                 show: 300
  99             }
 100         })
 101     ;
 102     /* Position bottom on the top fixed menu.
 103      */
 104     $menuPopupBottom
 105         .popup({
 106             position: 'center bottom',
 107             variation: 'inverted'
 108         })
 109     ;
 110     /* Position left on the top right language dropdown menu.
 111      */
 112     $menuPopupLeft
 113         .popup({
 114             position: 'left center',
 115             variation: 'inverted',
 116             delay: {
 117                 show: 300
 118             }
 119         })
 120     ;
 121 }
 122
 123 /* Required for keyboard navigation accessibility.
 124  */
 125 var _keyboardNavigation = function() {
 126     // Accordion menus
 127     var _folds = document.querySelectorAll('[data-fold^="fold-"]');
 128     _folds.forEach(item => {
 129         item.addEventListener('keydown', event => {
 130             if (event.keyCode == 13) {
 131                 event.target.click();
 132             }
 133         })
 134     });
 135     // Mobile menu trigger
 136     var _mobile_menu_trigger = document.querySelector('#top-navbar a.toc.item');
 137     _mobile_menu_trigger.addEventListener('keydown', event => {
 138         if (event.keyCode == 13) {
 139             // Open mobile menu
 140             event.target.click();
 141             // Jump to mobile menu
 142             var url = location.href;
 143             location.href = "#sidebarmenu";
 144             history.replaceState(null,null,url);
 145         }
 146     });
 147 }
 148
 149 /* Required for keyboard accessibility on simple dropdowns with autosubmit.
 150  */
 151 var _bindDropdownsAutosubmit = function() {
 152     $('.ui.dropdown.autosubmit').dropdown({
 153         action: function(text, value, element) {
 154             var element = element.parentElement !== undefined ? element : element[0];
 155             var dropdown = element.closest('.ui.dropdown');
 156             var form = element.closest('form');
 157             $(dropdown).dropdown('set value', value);
 158             $(dropdown).dropdown('hide');
 159             $(form).trigger('submit');
 160         }
 161     });
 162 }
 163
 164 var _bind_check = function(boxelt) {
 165     if (typeof(boxelt) == 'undefined') {
 166         boxelt = 'entries_sel'
 167     }
 168     var _is_checked = true;
 169     $('.checkall').click(function(){
 170         $('table.listing :checkbox[name="' + boxelt + '[]"]').each(function(){
 171             this.checked = _is_checked;
 172         });
 173         _is_checked = !_is_checked;
 174         return false;
 175     });
 176     $('.checkinvert').click(function(){
 177         var _haschecked = false;
 178         $('table.listing :checkbox[name="' + boxelt + '[]"]').each(function(){
 179             if ($(this).is(':checked')) {
 180                 this.checked = false;
 181             } else {
 182                 this.checked = true;
 183                 _haschecked = true;
 184             }
 185         });
 186         if (!_haschecked) {
 187             _is_checked = true;
 188         } else {
 189             _is_checked = false;
 190         }
 191         return false;
 192     });
 193 };
 194
 195 /* Display tables legends in Fomantic UI modal */
 196 var _bind_legend = function() {
 197     $('.show_legend').click(function(e){
 198         $('#legende').modal('show');
 199     });
 200 }
 201
 202 $(function() {
 203     $('.nojs').removeClass('nojs').addClass('jsenabled');
 204     /* Display/enable elements required only when javascript is active */
 205     $('.jsenabled .jsonly.displaynone').removeClass('displaynone');
 206     $('.jsenabled .jsonly.disabled').removeClass('disabled');
 207     $('.jsenabled .jsonly.read-only').removeClass('read-only');
 208     $('.jsenabled .jsonly.search-dropdown').removeClass('search-dropdown').addClass('search clearable selection dropdown');
 209
 210     $('#login').focus();
 211
 212     _bindFomanticComponents();
 213
 214     _bindDropdownsAutosubmit();
 215
 216     _keyboardNavigation();
 217
 218     var _back2Top = document.getElementById("back2top");
 219     document.body.addEventListener('scroll', function() {
 220         if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
 221             _back2Top.style.display = "block";
 222         } else {
 223             _back2Top.style.display = "none";
 224         }
 225     });
 226     _back2Top.onclick = function(event){
 227         event.preventDefault();
 228         document.body.scrollTop = 0;
 229         document.documentElement.scrollTop = 0;
 230     }
 231 });