yaffs.net Git - yaffs-website/blob - web/themes/contrib/bootstrap/js/theme-settings.js

   1 (function ($, Drupal) {
   2   /*global jQuery:false */
   3   /*global Drupal:false */
   4   "use strict";
   5
   6   /**
   7    * Provide vertical tab summaries for Bootstrap settings.
   8    */
   9   Drupal.behaviors.bootstrapSettingSummaries = {
  10     attach: function (context) {
  11       var $context = $(context);
  12
  13       // General.
  14       $context.find('#edit-general').drupalSetSummary(function () {
  15         var summary = [];
  16         // Buttons.
  17         var size = $context.find('select[name="button_size"] :selected');
  18         if (size.val()) {
  19           summary.push(Drupal.t('@size Buttons', {
  20             '@size': size.text()
  21           }));
  22         }
  23
  24         // Images.
  25         var shape = $context.find('select[name="image_shape"] :selected');
  26         if (shape.val()) {
  27           summary.push(Drupal.t('@shape Images', {
  28             '@shape': shape.text()
  29           }));
  30         }
  31         if ($context.find(':input[name="image_responsive"]').is(':checked')) {
  32           summary.push(Drupal.t('Responsive Images'));
  33         }
  34
  35         // Tables.
  36         if ($context.find(':input[name="table_responsive"]').is(':checked')) {
  37           summary.push(Drupal.t('Responsive Tables'));
  38         }
  39
  40         return summary.join(', ');
  41
  42       });
  43
  44       // Components.
  45       $context.find('#edit-components').drupalSetSummary(function () {
  46         var summary = [];
  47         // Breadcrumbs.
  48         var breadcrumb = parseInt($context.find('select[name="breadcrumb"]').val(), 10);
  49         if (breadcrumb) {
  50           summary.push(Drupal.t('Breadcrumbs'));
  51         }
  52         // Navbar.
  53         var navbar = 'Navbar: ' + $context.find('select[name="navbar_position"] :selected').text();
  54         if ($context.find('input[name="navbar_inverse"]').is(':checked')) {
  55           navbar += ' (' + Drupal.t('Inverse') + ')';
  56         }
  57         summary.push(navbar);
  58         return summary.join(', ');
  59       });
  60
  61       // JavaScript.
  62       $context.find('#edit-javascript').drupalSetSummary(function () {
  63         var summary = [];
  64         if ($context.find('input[name="modal_enabled"]').is(':checked')) {
  65           if ($context.find('input[name="modal_jquery_ui_bridge"]').is(':checked')) {
  66             summary.push(Drupal.t('Modals (Bridged)'));
  67           }
  68           else {
  69             summary.push(Drupal.t('Modals'));
  70           }
  71         }
  72         if ($context.find('input[name="popover_enabled"]').is(':checked')) {
  73           summary.push(Drupal.t('Popovers'));
  74         }
  75         if ($context.find('input[name="tooltip_enabled"]').is(':checked')) {
  76           summary.push(Drupal.t('Tooltips'));
  77         }
  78         return summary.join(', ');
  79       });
  80
  81       // Advanced.
  82       $context.find('#edit-advanced').drupalSetSummary(function () {
  83         var summary = [];
  84         var $cdnProvider = $context.find('select[name="cdn_provider"] :selected');
  85         var cdnProvider = $cdnProvider.val();
  86         if ($cdnProvider.length && cdnProvider.length) {
  87           summary.push(Drupal.t('CDN provider: %provider', { '%provider': $cdnProvider.text() }));
  88
  89           // jsDelivr CDN.
  90           if (cdnProvider === 'jsdelivr') {
  91             var $jsDelivrVersion = $context.find('select[name="cdn_jsdelivr_version"] :selected');
  92             if ($jsDelivrVersion.length && $jsDelivrVersion.val().length) {
  93               summary.push($jsDelivrVersion.text());
  94             }
  95             var $jsDelivrTheme = $context.find('select[name="cdn_jsdelivr_theme"] :selected');
  96             if ($jsDelivrTheme.length && $jsDelivrTheme.val() !== 'bootstrap') {
  97               summary.push($jsDelivrTheme.text());
  98             }
  99           }
 100         }
 101         return summary.join(', ');
 102       });
 103     }
 104   };
 105
 106   /**
 107    * Provide Bootstrap Bootswatch preview.
 108    */
 109   Drupal.behaviors.bootstrapBootswatchPreview = {
 110     attach: function (context) {
 111       var $context = $(context);
 112       var $preview = $context.find('#bootstrap-theme-preview');
 113       $preview.once('bootstrap-theme-preview').each(function () {
 114         // Construct the "Bootstrap Theme" preview here since it's not actually
 115         // a Bootswatch theme, but rather one provided by Bootstrap itself.
 116         // Unfortunately getbootstrap.com does not have HTTPS enabled, so the
 117         // preview image cannot be protocol relative.
 118         // @todo Make protocol relative if/when Bootstrap enables HTTPS.
 119         $preview.append('<a id="bootstrap-theme-preview-bootstrap_theme" class="bootswatch-preview element-invisible" href="https://getbootstrap.com/docs/3.3/examples/theme/" target="_blank"><img class="img-responsive" src="//getbootstrap.com/docs/3.3/examples/screenshots/theme.jpg" alt="' + Drupal.t('Preview of the Bootstrap theme') + '" /></a>');
 120
 121         // Retrieve the Bootswatch theme preview images.
 122         // @todo This should be moved into PHP.
 123         $.ajax({
 124           url: 'https://bootswatch.com/api/3.json',
 125           dataType: 'json',
 126           success: function (json) {
 127             var themes = json.themes;
 128             for (var i = 0, len = themes.length; i < len; i++) {
 129               $preview.append('<a id="bootstrap-theme-preview-' + themes[i].name.toLowerCase() + '" class="bootswatch-preview element-invisible" href="' + themes[i].preview + '" target="_blank"><img class="img-responsive" src="' + themes[i].thumbnail.replace(/^http:/, 'https:') + '" alt="' + Drupal.t('Preview of the @title Bootswatch theme', { '@title': themes[i].name }) + '" /></a>');
 130             }
 131           },
 132           complete: function () {
 133             $preview.parent().find('select[name="cdn_jsdelivr_theme"]').bind('change', function () {
 134               $preview.find('.bootswatch-preview').addClass('visually-hidden');
 135               if ($(this).val().length) {
 136                 $preview.find('#bootstrap-theme-preview-' + $(this).val()).removeClass('visually-hidden');
 137               }
 138             }).change();
 139           }
 140         });
 141       });
 142     }
 143   };
 144
 145   /**
 146    * Provide Bootstrap navbar preview.
 147    */
 148   Drupal.behaviors.bootstrapContainerPreview = {
 149     attach: function (context) {
 150       var $context = $(context);
 151       var $container = $context.find('#edit-container');
 152       $container.once('container-preview').each(function () {
 153         $container.find('[name="fluid_container"]').on('change.bootstrap', function () {
 154           if ($(this).is(':checked')) {
 155             $context.find('.container').removeClass('container').addClass('container-fluid');
 156           }
 157           else {
 158             $context.find('.container-fluid').removeClass('container-fluid').addClass('container');
 159           }
 160         });
 161       });
 162     }
 163   };
 164
 165   /**
 166    * Provide Bootstrap navbar preview.
 167    */
 168   Drupal.behaviors.bootstrapNavbarPreview = {
 169     attach: function (context) {
 170       var $context = $(context);
 171       var $preview = $context.find('#edit-navbar');
 172       $preview.once('navbar').each(function () {
 173         var $body = $context.find('body');
 174         var $navbar = $context.find('#navbar.navbar');
 175         $preview.find('select[name="navbar_position"]').bind('change', function () {
 176           var $position = $(this).find(':selected').val();
 177           $navbar.removeClass('navbar-fixed-bottom navbar-fixed-top navbar-static-top container');
 178           if ($position.length) {
 179             $navbar.addClass('navbar-'+ $position);
 180           }
 181           else {
 182             $navbar.addClass('container');
 183           }
 184           // Apply appropriate classes to body.
 185           $body.removeClass('navbar-is-fixed-top navbar-is-fixed-bottom navbar-is-static-top');
 186           switch ($position) {
 187             case 'fixed-top':
 188               $body.addClass('navbar-is-fixed-top');
 189               break;
 190
 191             case 'fixed-bottom':
 192               $body.addClass('navbar-is-fixed-bottom');
 193               break;
 194
 195             case 'static-top':
 196               $body.addClass('navbar-is-static-top');
 197               break;
 198           }
 199         });
 200         $preview.find('input[name="navbar_inverse"]').bind('change', function () {
 201           $navbar.toggleClass('navbar-inverse navbar-default');
 202         });
 203       });
 204     }
 205   };
 206
 207 })(jQuery, Drupal);