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