galette/webroot/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  * @version   SVN: $Id$
  26  * @link      http://galette.tuxfamily.org
  27  * @since     Available since 0.7dev - 2007-10-06
  28  */
  29
  30 //set up fieldsets spindowns
  31 //the function will spin the element just after legend, and will update the icon
  32 $.fn.spinDown = function() {
  33
  34     return this.click(function() {
  35         var $this = $(this);
  36
  37         $this.parent('legend').next().slideToggle(100);
  38         var __i = $this.find('i');
  39         __i.toggleClass('fa-arrow-alt-circle-down').toggleClass('fa-arrow-alt-circle-right');
  40
  41         return false;
  42     });
  43
  44 };
  45
  46 //make fieldsets collapsibles. This requires a legend and all the following elements to be grouped (for example in a div element)
  47 //The function will 'hide'
  48 var _collapsibleFieldsets = function(){
  49     $('legend').each(function(){
  50         var _collapse = $('<a href="#" class="collapsible tooltip"><i class="fas fa-arrow-alt-circle-down"></i> <span class="sr-only">Collapse/Expand</span></a>');
  51         $(this).prepend(_collapse);
  52         _collapse.spinDown();
  53     });
  54 }
  55
  56 var _fieldsInSortable = function(){
  57     //so our forms elements continue to work as expected
  58     $('.fields_list input, .fields_list select').bind(
  59         'click.sortable mousedown.sortable',
  60         function(ev) {
  61             ev.stopPropagation();
  62             ev.target.focus();
  63         }
  64     );
  65 }
  66
  67 var _initSortable = function(){
  68     $('.fields_list').sortable({
  69         items: 'li:not(.listing)'
  70     }).disableSelection();
  71
  72     _fieldsInSortable();
  73
  74     $('#members_tab').sortable({
  75         items: 'fieldset'
  76     });
  77 }
  78
  79 /* On document ready
  80 -------------------------------------------------------- */
  81
  82 var _messagesEffects = function(){
  83     /**
  84     * Errorbox animation
  85     */
  86     $('#errorbox').backgroundFade({sColor:'#ffffff',eColor:'#ff9999',steps:50},function() {
  87         $(this).backgroundFade({sColor:'#ff9999',eColor:'#ffffff'});
  88     });
  89     $('#warningbox').backgroundFade({sColor:'#ffffff',eColor:'#FFB619',steps:50},function() {
  90         $(this).backgroundFade({sColor:'#FFB619',eColor:'#ffffff'});
  91     });
  92     $('#infobox, #successbox').backgroundFade({sColor:'#ffffff',eColor:'#99FF99',steps:50},function() {
  93         $(this).backgroundFade({sColor:'#99FF99',eColor:'#ffffff'});
  94     });
  95 }
  96
  97 var _bind_check = function(boxelt){
  98     if (typeof(boxelt) == 'undefined') {
  99         boxelt = 'member_sel'
 100     }
 101     var _is_checked = true;
 102     $('.checkall').click(function(){
 103         $('table.listing :checkbox[name="' + boxelt + '[]"]').each(function(){
 104             this.checked = _is_checked;
 105         });
 106         _is_checked = !_is_checked;
 107         return false;
 108     });
 109     $('.checkinvert').click(function(){
 110         $('table.listing :checkbox[name="' + boxelt + '[]"]').each(function(){
 111             this.checked = !$(this).is(':checked');
 112         });
 113         return false;
 114     });
 115 };
 116
 117 var _bind_legend = function() {
 118     $('#legende h1').remove();
 119     $('#legende').dialog({
 120         autoOpen: false,
 121         modal: true,
 122         hide: 'fold',
 123         width: '40%',
 124         create: function (event, ui) {
 125             if ($(window ).width() < 767) {
 126                 $(this).dialog('option', {
 127                         'width': '95%',
 128                         'draggable': false
 129                 });
 130             }
 131         }
 132     }).dialog('close');
 133
 134     $('.show_legend').click(function(e){
 135         e.preventDefault();
 136         $('#legende').dialog('open');
 137     });
 138 }
 139
 140
 141 var _initTooltips = function(selector) {
 142     if (typeof(selector) == 'undefined') {
 143         selector = '';
 144     } else {
 145         selector = selector + ' ';
 146     }
 147
 148     //for tootltips
 149     //first, we hide tooltips in the page
 150     $(selector + '.tip').hide();
 151     $(selector + ' label.tooltip, ' + selector + ' span.bline.tooltip').each(function() {
 152         var __i = $('<i class="fas fa-exclamation-circle"></i>')
 153         $(this).append(__i);
 154     });
 155     //and then, we show them on rollover
 156     $(document).tooltip({
 157         items: selector + ".tooltip, a[title]",
 158         content: function(event, ui) {
 159             var _this = $(this);
 160             var _content;
 161
 162             //first, value from @class=tip element
 163             var _next = _this.nextAll('.tip');
 164             if (_next.length > 0) {
 165                 _content = _next.html();
 166             }
 167
 168             //and finally, value from @class=sr-only element
 169             if (typeof _content == 'undefined') {
 170                 var _sronly = _this.find('.sr-only');
 171                 if (_sronly.length > 0) {
 172                     _content = _sronly.html();
 173                 }
 174             }
 175
 176             //second, value from @title
 177             if (typeof _content == 'undefined') {
 178                 var _title = _this.attr('title');
 179                 if (typeof _title != 'undefined') {
 180                     _content = _title;
 181                 }
 182             }
 183
 184             return _content;
 185         }
 186     });
 187 }
 188
 189 $(function() {
 190     _messagesEffects();
 191     $('.debuginfos span').hide();
 192     /** TODO: find a way to translate this message ==> ajax ? */
 193     $('.debuginfos').attr('title', 'Click to get more details.');
 194     $('.debuginfos').click(function(){
 195         $('.debuginfos span').slideToggle('slow');
 196     });
 197
 198     $('#login').focus();
 199
 200     _initTooltips();
 201     $('select:not(.nochosen)').selectize({
 202         maxItems: 1
 203     });
 204
 205     $('.nojs').removeClass('nojs');
 206     $('#menu h1').each(function(){
 207         $(this).html('<a href="#">' + $(this).text() + '</a>');
 208     });
 209
 210     if( $('#menu').size() > 0 ) {
 211         $('#menu').accordion({
 212             header: 'h1:not(#logo)',
 213             heightStyle: 'content',
 214             active: $('#menu ul li[class*="selected"]').parent('ul').prevAll('ul').size()
 215         });
 216     }
 217
 218     $('input:submit, .button, input:reset, button:submit' ).button({
 219         create: function(event, ui) {
 220             if ( $(event.target).hasClass('disabled') ) {
 221                 $(event.target).button('disable');
 222             }
 223         }
 224     });
 225     $('.selected').addClass('ui-state-disabled');
 226
 227     if ( $('#back2top').length > 0 ) {
 228         if (!$('#wrapper').scrollTop() && !$('html').scrollTop() ) {
 229             $('#back2top').fadeOut();
 230         }
 231         $(window).scroll(function() {
 232             if ($(this).scrollTop()) {
 233                 $('#back2top').fadeIn();
 234             } else {
 235                 $('#back2top').fadeOut();
 236             }
 237         });
 238     }
 239
 240     $('select#lang_selector').change(function() {
 241         this.form.submit();
 242     });
 243
 244     /* Language selector.
 245      * Works per default with CSS only, use javascript to replace with a click event,
 246      * which is required because of the current way the menu is hidden on mobile devices.
 247      */
 248     $('#plang_selector').removeClass('onhover');
 249     var _langs = $('#plang_selector ul');
 250     _langs.hide();
 251
 252     $('#plang_selector > a').on('click', function(event) {
 253         event.preventDefault();
 254         var _this = $(this);
 255         var _open = _this.attr('aria-expanded');
 256         _this.attr('aria-expanded', !open);
 257         console.log(_open);
 258         _langs.toggle();
 259     });
 260 });