first commit

themes/bootstrap/js/theme-settings.js

@@ -0,0 +1,279 @@
+(function ($, Drupal, Bootstrap, once) {
+  /*global jQuery:false */
+  /*global Drupal:false */
+  "use strict";
+
+  /**
+   * Provide vertical tab summaries for Bootstrap settings.
+   */
+  Drupal.behaviors.bootstrapSettingSummaries = {
+    attach: function (context) {
+      var $context = $(context);
+
+      // General.
+      $context.find('[data-drupal-selector="edit-general"]').drupalSetSummary(function () {
+        var summary = [];
+        // Buttons.
+        var size = $context.find('select[name="button_size"] :selected');
+        if (size.val()) {
+          summary.push(Drupal.t('@size Buttons', {
+            '@size': size.text()
+          }));
+        }
+
+        // Images.
+        var shape = $context.find('select[name="image_shape"] :selected');
+        if (shape.val()) {
+          summary.push(Drupal.t('@shape Images', {
+            '@shape': shape.text()
+          }));
+        }
+        if ($context.find(':input[name="image_responsive"]').is(':checked')) {
+          summary.push(Drupal.t('Responsive Images'));
+        }
+
+        // Tables.
+        if ($context.find(':input[name="table_responsive"]').is(':checked')) {
+          summary.push(Drupal.t('Responsive Tables'));
+        }
+
+        return summary.join(', ');
+
+      });
+
+      // Components.
+      $context.find('[data-drupal-selector="edit-components"]').drupalSetSummary(function () {
+        var summary = [];
+        // Breadcrumbs.
+        var breadcrumb = parseInt($context.find('select[name="breadcrumb"]').val(), 10);
+        if (breadcrumb) {
+          summary.push(Drupal.t('Breadcrumbs'));
+        }
+        // Navbar.
+        var navbar = 'Navbar: ' + $context.find('select[name="navbar_position"] :selected').text();
+        if ($context.find('input[name="navbar_inverse"]').is(':checked')) {
+          navbar += ' (' + Drupal.t('Inverse') + ')';
+        }
+        summary.push(navbar);
+        return summary.join(', ');
+      });
+
+      // JavaScript.
+      var $jQueryUiBridge = $context.find('input[name="modal_jquery_ui_bridge"]');
+      $(once('bs.jquery.ui.dialog.bridge', 'input[name="modal_jquery_ui_bridge"]', context)).each(function () {
+        $jQueryUiBridge
+          .off('change.bs.jquery.ui.dialog.bridge')
+          .on('change.bs.jquery.ui.dialog.bridge', function (e) {
+            if ($jQueryUiBridge[0].checked) {
+              return;
+            }
+
+            var disable = false;
+            var title = Drupal.t('<p><strong>Warning: Disabling the jQuery UI Dialog bridge may have major consequences.</strong></p>');
+            var message = Drupal.t('<p>If you are unfamiliar with how to properly handle Bootstrap modals and jQuery UI dialogs together, it is highly recommended this remains <strong>enabled</strong>.</p> <p>Are you sure you want to disable this?</p>');
+            var callback = function () {
+              if (!disable) {
+                $jQueryUiBridge[0].checked = true;
+                $jQueryUiBridge.trigger('change');
+              }
+            };
+
+            if (!$.fn.dialog) {
+              disable = window.confirm(Bootstrap.stripHtml(title + ' ' + message));
+              callback();
+            }
+            else {
+              $('<div title="Disable jQuery UI Dialog Bridge?"><div class="alert alert-danger alert-sm">' + title + '</div>' + message + '</div>')
+                .appendTo('body')
+                .dialog({
+                  modal: true,
+                  close: callback,
+                  buttons: [
+                    {
+                      text: Drupal.t('Disable'),
+                      classes: {
+                        'ui-button': 'btn-danger',
+                      },
+                      click: function () {
+                        disable = true;
+                        $(this).dialog('close');
+                      }
+                    },
+                    {
+                      text: 'Cancel',
+                      primary: true,
+                      click: function () {
+                        $(this).dialog('close');
+                      }
+                    }
+                  ]
+                });
+            }
+          });
+      });
+
+      $context.find('[data-drupal-selector="edit-javascript"]').drupalSetSummary(function () {
+        var summary = [];
+        if ($context.find('input[name="modal_enabled"]').is(':checked')) {
+          if ($jQueryUiBridge.is(':checked')) {
+            summary.push(Drupal.t('Modals (Bridged)'));
+          }
+          else {
+            summary.push(Drupal.t('Modals'));
+          }
+        }
+        if ($context.find('input[name="popover_enabled"]').is(':checked')) {
+          summary.push(Drupal.t('Popovers'));
+        }
+        if ($context.find('input[name="tooltip_enabled"]').is(':checked')) {
+          summary.push(Drupal.t('Tooltips'));
+        }
+        return summary.join(', ');
+      });
+
+      // CDN.
+      $context.find('[data-drupal-selector="edit-cdn"]').drupalSetSummary(function () {
+        var summary = [];
+        var $cdnProvider = $context.find('select[name="cdn_provider"] :selected');
+        if ($cdnProvider.length) {
+          var provider = $cdnProvider.text();
+
+          var $version = $context.find('select[name="cdn_version"] :selected');
+          if ($version.length && $version.val().length) {
+            provider += ' - ' + $version.text();
+            var $theme = $context.find('select[name="cdn_theme"] :selected');
+            if ($theme.length) {
+              provider += ' (' + $theme.text() + ')';
+            }
+          }
+          else if ($cdnProvider.val() === 'custom') {
+            var $urls = $context.find('textarea[name="cdn_custom"]');
+            var urls = ($urls.val() + '').split(/\r\n|\n/).filter(Boolean);
+            provider += ' (' + Drupal.formatPlural(urls.length, '1 URL', '@count URLs') + ')';
+          }
+
+          summary.push(provider);
+        }
+        return summary.join(', ');
+      });
+
+
+      // Advanced.
+      $context.find('[data-drupal-selector="edit-advanced"]').drupalSetSummary(function () {
+        var summary = [];
+        var deprecations = [];
+        if ($context.find('input[name="include_deprecated"]').is(':checked')) {
+          deprecations.push(Drupal.t('Included'));
+        }
+        deprecations.push($context.find('input[name="suppress_deprecated_warnings"]').is(':checked') ? Drupal.t('Warnings Suppressed') : Drupal.t('Warnings Shown'));
+        summary.push(Drupal.t('Deprecations: @value', {
+          '@value': deprecations.join(', '),
+        }));
+        return summary.join(', ');
+      });
+    }
+  };
+
+  /**
+   * Provide Bootstrap Bootswatch preview.
+   */
+  Drupal.behaviors.bootstrapBootswatchPreview = {
+    attach: function (context) {
+      var $context = $(context);
+      var $preview = $context.find('#bootstrap-theme-preview');
+      $(once('bootstrap-theme-preview', '#bootstrap-theme-preview', context)).each(function () {
+        // Construct the "Bootstrap Theme" preview here since it's not actually
+        // a Bootswatch theme, but rather one provided by Bootstrap itself.
+        // Unfortunately getbootstrap.com does not have HTTPS enabled, so the
+        // preview image cannot be protocol relative.
+        // @todo Make protocol relative if/when Bootstrap enables HTTPS.
+        $preview.append('<a id="bootstrap-theme-preview-bootstrap_theme" class="bootswatch-preview element-invisible" href="https://getbootstrap.com/docs/3.4/examples/theme/" target="_blank"><img class="img-responsive" src="//getbootstrap.com/docs/3.4/examples/screenshots/theme.jpg" alt="' + Drupal.t('Preview of the Bootstrap theme') + '" /></a>');
+
+        // Retrieve the Bootswatch theme preview images.
+        // @todo This should be moved into PHP.
+        $.ajax({
+          url: 'https://bootswatch.com/api/3.json',
+          dataType: 'json',
+          success: function (json) {
+            var themes = json.themes;
+            for (var i = 0, len = themes.length; i < len; i++) {
+              $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>');
+            }
+          },
+          complete: function () {
+            $preview.parent().find('select[name="cdn_theme"]').bind('change', function () {
+              $preview.find('.bootswatch-preview').addClass('visually-hidden');
+              var theme = $(this).val();
+              if (theme && theme.length) {
+                $preview.find('#bootstrap-theme-preview-' + theme).removeClass('visually-hidden');
+              }
+            }).change();
+          }
+        });
+      });
+    }
+  };
+
+  /**
+   * Provide Bootstrap navbar preview.
+   */
+  Drupal.behaviors.bootstrapContainerPreview = {
+    attach: function (context) {
+      var $context = $(context);
+      var $container = $context.find('#edit-container');
+      $(once('container-preview', '#edit-container', context)).each(function () {
+        $container.find('[name="fluid_container"]').on('change.bootstrap', function () {
+          if ($(this).is(':checked')) {
+            $context.find('.container').removeClass('container').addClass('container-fluid');
+          }
+          else {
+            $context.find('.container-fluid').removeClass('container-fluid').addClass('container');
+          }
+        });
+      });
+    }
+  };
+
+  /**
+   * Provide Bootstrap navbar preview.
+   */
+  Drupal.behaviors.bootstrapNavbarPreview = {
+    attach: function (context) {
+      var $context = $(context);
+      var $preview = $context.find('#edit-navbar');
+      $(once('navbar', '#edit-navbar', context)).each(function () {
+        var $body = $context.find('body');
+        var $navbar = $context.find('#navbar.navbar');
+        $preview.find('select[name="navbar_position"]').bind('change', function () {
+          var $position = $(this).find(':selected').val();
+          $navbar.removeClass('navbar-fixed-bottom navbar-fixed-top navbar-static-top container');
+          if ($position.length) {
+            $navbar.addClass('navbar-'+ $position);
+          }
+          else {
+            $navbar.addClass('container');
+          }
+          // Apply appropriate classes to body.
+          $body.removeClass('navbar-is-fixed-top navbar-is-fixed-bottom navbar-is-static-top');
+          switch ($position) {
+            case 'fixed-top':
+              $body.addClass('navbar-is-fixed-top');
+              break;
+
+            case 'fixed-bottom':
+              $body.addClass('navbar-is-fixed-bottom');
+              break;
+
+            case 'static-top':
+              $body.addClass('navbar-is-static-top');
+              break;
+          }
+        });
+        $preview.find('input[name="navbar_inverse"]').bind('change', function () {
+          $navbar.toggleClass('navbar-inverse navbar-default');
+        });
+      });
+    }
+  };
+
+})(jQuery, Drupal, Drupal.bootstrap, once);