www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/blazy/js/blazy.admin.js

   1 /**
   2  * @file
   3  * Provides admin utilities.
   4  */
   5
   6 (function ($, Drupal) {
   7
   8   'use strict';
   9
  10   /**
  11    * Blazy admin utility functions.
  12    *
  13    * @param {int} i
  14    *   The index of the current element.
  15    * @param {HTMLElement} form
  16    *   The Blazy form wrapper HTML element.
  17    */
  18   function blazyForm(i, form) {
  19     var t = $(form);
  20
  21     $('.details-legend-prefix', t).removeClass('element-invisible');
  22
  23     t[$('.form-checkbox--vanilla', t).prop('checked') ? 'addClass' : 'removeClass']('form--vanilla-on');
  24
  25     t.on('click', '.form-checkbox', function () {
  26       var $input = $(this);
  27       $input[$input.prop('checked') ? 'addClass' : 'removeClass']('on');
  28
  29       if ($input.hasClass('form-checkbox--vanilla')) {
  30         t[$input.prop('checked') ? 'addClass' : 'removeClass']('form--vanilla-on');
  31       }
  32     });
  33
  34     $('select[name$="[style]"]', t).on('change', function () {
  35       var $select = $(this);
  36
  37       t.removeClass(function (index, css) {
  38         return (css.match(/(^|\s)form--style-\S+/g) || []).join(' ');
  39       });
  40
  41       if ($select.val() === '') {
  42         t.addClass('form--style-off');
  43       }
  44       else {
  45         t.addClass('form--style-on form--style-' + $select.val());
  46       }
  47     }).change();
  48
  49     $('select[name$="[responsive_image_style]"]', t).on('change', function () {
  50       var $select = $(this);
  51       t[$select.val() === '' ? 'removeClass' : 'addClass']('form--responsive-image-on');
  52     }).change();
  53
  54     $('select[name$="[media_switch]"]', t).on('change', function () {
  55       var $select = $(this);
  56
  57       t.removeClass(function (index, css) {
  58         return (css.match(/(^|\s)form--media-switch-\S+/g) || []).join(' ');
  59       });
  60
  61       t[$select.val() === '' ? 'removeClass' : 'addClass']('form--media-switch-' + $select.val());
  62     }).change();
  63
  64     t.on('mouseenter touchstart', '.hint', function () {
  65       $(this).closest('.form-item').addClass('is-hovered');
  66     });
  67
  68     t.on('mouseleave touchend', '.hint', function () {
  69       $(this).closest('.form-item').removeClass('is-hovered');
  70     });
  71
  72     t.on('click', '.hint', function () {
  73       $('.form-item.is-selected', t).removeClass('is-selected');
  74       $(this).parent().toggleClass('is-selected');
  75     });
  76
  77     t.on('click', '.description', function () {
  78       $(this).closest('.is-selected').removeClass('is-selected');
  79     });
  80
  81     t.on('focus', '.js-expandable', function () {
  82       $(this).parent().addClass('is-focused');
  83     });
  84
  85     t.on('blur', '.js-expandable', function () {
  86       $(this).parent().removeClass('is-focused');
  87     });
  88   }
  89
  90   /**
  91    * Blazy admin tooltip function.
  92    *
  93    * @param {int} i
  94    *   The index of the current element.
  95    * @param {HTMLElement} elm
  96    *   The Blazy form item description HTML element.
  97    */
  98   function blazyTooltip(i, elm) {
  99     var $tip = $(elm);
 100
 101     if (!$tip.siblings('.hint').length) {
 102       $tip.closest('.form-item').append('<span class="hint">?</span>');
 103     }
 104   }
 105
 106   /**
 107    * Attaches Blazy form behavior to HTML element.
 108    *
 109    * @type {Drupal~behavior}
 110    */
 111   Drupal.behaviors.blazyAdmin = {
 112     attach: function (context) {
 113       var $form = $('.form--slick', context);
 114
 115       $('.description', $form).once('blazy-tooltip').each(blazyTooltip);
 116
 117       $form.once('blazy-admin').each(blazyForm);
 118     }
 119   };
 120
 121 })(jQuery, Drupal);