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           summary.push(Drupal.t('Modals'));
  66         }
  67         if ($context.find('input[name="popover_enabled"]').is(':checked')) {
  68           summary.push(Drupal.t('Popovers'));
  69         }
  70         if ($context.find('input[name="tooltip_enabled"]').is(':checked')) {
  71           summary.push(Drupal.t('Tooltips'));
  72         }
  73         return summary.join(', ');
  74       });
  75
  76       // Advanced.
  77       $context.find('#edit-advanced').drupalSetSummary(function () {
  78         var summary = [];
  79         var $cdnProvider = $context.find('select[name="cdn_provider"] :selected');
  80         var cdnProvider = $cdnProvider.val();
  81         if ($cdnProvider.length && cdnProvider.length) {
  82           summary.push(Drupal.t('CDN provider: %provider', { '%provider': $cdnProvider.text() }));
  83
  84           // jsDelivr CDN.
  85           if (cdnProvider === 'jsdelivr') {
  86             var $jsDelivrVersion = $context.find('select[name="cdn_jsdelivr_version"] :selected');
  87             if ($jsDelivrVersion.length && $jsDelivrVersion.val().length) {
  88               summary.push($jsDelivrVersion.text());
  89             }
  90             var $jsDelivrTheme = $context.find('select[name="cdn_jsdelivr_theme"] :selected');
  91             if ($jsDelivrTheme.length && $jsDelivrTheme.val() !== 'bootstrap') {
  92               summary.push($jsDelivrTheme.text());
  93             }
  94           }
  95         }
  96         return summary.join(', ');
  97       });
  98     }
  99   };
 100
 101   /**
 102    * Provide Bootstrap Bootswatch preview.
 103    */
 104   Drupal.behaviors.bootstrapBootswatchPreview = {
 105     attach: function (context) {
 106       var $context = $(context);
 107       var $preview = $context.find('#bootstrap-theme-preview');
 108       $preview.once('bootstrap-theme-preview').each(function () {
 109         // Construct the "Bootstrap Theme" preview here since it's not actually
 110         // a Bootswatch theme, but rather one provided by Bootstrap itself.
 111         // Unfortunately getbootstrap.com does not have HTTPS enabled, so the
 112         // preview image cannot be protocol relative.
 113         // @todo Make protocol relative if/when Bootstrap enables HTTPS.
 114         $preview.append('<a id="bootstrap-theme-preview-bootstrap_theme" class="bootswatch-preview element-invisible" href="http://getbootstrap.com/examples/theme/" target="_blank"><img class="img-responsive" src="http://getbootstrap.com/examples/screenshots/theme.jpg" alt="' + Drupal.t('Preview of the Bootstrap theme') + '" /></a>');
 115
 116         // Retrieve the Bootswatch theme preview images.
 117         // @todo This should be moved into PHP.
 118         $.ajax({
 119           url: 'https://bootswatch.com/api/3.json',
 120           dataType: 'json',
 121           success: function (json) {
 122             var themes = json.themes;
 123             for (var i = 0, len = themes.length; i < len; i++) {
 124               $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>');
 125             }
 126           },
 127           complete: function () {
 128             $preview.parent().find('select[name="cdn_jsdelivr_theme"]').bind('change', function () {
 129               $preview.find('.bootswatch-preview').addClass('visually-hidden');
 130               if ($(this).val().length) {
 131                 $preview.find('#bootstrap-theme-preview-' + $(this).val()).removeClass('visually-hidden');
 132               }
 133             }).change();
 134           }
 135         });
 136       });
 137     }
 138   };
 139
 140   /**
 141    * Provide Bootstrap navbar preview.
 142    */
 143   Drupal.behaviors.bootstrapContainerPreview = {
 144     attach: function (context) {
 145       var $context = $(context);
 146       var $container = $context.find('#edit-container');
 147       $container.once('container-preview').each(function () {
 148         $container.find('[name="fluid_container"]').on('change.bootstrap', function () {
 149           if ($(this).is(':checked')) {
 150             $context.find('.container').removeClass('container').addClass('container-fluid');
 151           }
 152           else {
 153             $context.find('.container-fluid').removeClass('container-fluid').addClass('container');
 154           }
 155         });
 156       });
 157     }
 158   };
 159
 160   /**
 161    * Provide Bootstrap navbar preview.
 162    */
 163   Drupal.behaviors.bootstrapNavbarPreview = {
 164     attach: function (context) {
 165       var $context = $(context);
 166       var $preview = $context.find('#edit-navbar');
 167       $preview.once('navbar').each(function () {
 168         var $body = $context.find('body');
 169         var $navbar = $context.find('#navbar.navbar');
 170         $preview.find('select[name="navbar_position"]').bind('change', function () {
 171           var $position = $(this).find(':selected').val();
 172           $navbar.removeClass('navbar-fixed-bottom navbar-fixed-top navbar-static-top container');
 173           if ($position.length) {
 174             $navbar.addClass('navbar-'+ $position);
 175           }
 176           else {
 177             $navbar.addClass('container');
 178           }
 179           // Apply appropriate classes to body.
 180           $body.removeClass('navbar-is-fixed-top navbar-is-fixed-bottom navbar-is-static-top');
 181           switch ($position) {
 182             case 'fixed-top':
 183               $body.addClass('navbar-is-fixed-top');
 184               break;
 185
 186             case 'fixed-bottom':
 187               $body.addClass('navbar-is-fixed-bottom');
 188               break;
 189
 190             case 'static-top':
 191               $body.addClass('navbar-is-static-top');
 192               break;
 193           }
 194         });
 195         $preview.find('input[name="navbar_inverse"]').bind('change', function () {
 196           $navbar.toggleClass('navbar-inverse navbar-default');
 197         });
 198       });
 199     }
 200   };
 201
 202 })(jQuery, Drupal);