123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- (function ($, Drupal) {
- /*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('#edit-general').drupalSetSummary(function () {
- var summary = [];
- // Buttons.
- var size = $context.find('select[name="bootstrap_button_size"] :selected');
- if (size.val()) {
- summary.push(Drupal.t('@size Buttons', {
- '@size': size.text()
- }));
- }
- // Images.
- var shape = $context.find('select[name="bootstrap_image_shape"] :selected');
- if (shape.val()) {
- summary.push(Drupal.t('@shape Images', {
- '@shape': shape.text()
- }));
- }
- if ($context.find(':input[name="bootstrap_image_responsive"]').is(':checked')) {
- summary.push(Drupal.t('Responsive Images'));
- }
- // Tables.
- if ($context.find(':input[name="bootstrap_table_responsive"]').is(':checked')) {
- summary.push(Drupal.t('Responsive Tables'));
- }
- return summary.join(', ');
- });
- // Components.
- $context.find('#edit-components').drupalSetSummary(function () {
- var summary = [];
- // Breadcrumbs.
- var breadcrumb = parseInt($context.find('select[name="bootstrap_breadcrumb"]').val(), 10);
- if (breadcrumb) {
- summary.push(Drupal.t('Breadcrumbs'));
- }
- // Navbar.
- var navbar = 'Navbar: ' + $context.find('select[name="bootstrap_navbar_position"] :selected').text();
- if ($context.find('input[name="bootstrap_navbar_inverse"]').is(':checked')) {
- navbar += ' (' + Drupal.t('Inverse') + ')';
- }
- summary.push(navbar);
- return summary.join(', ');
- });
- // Javascript.
- $context.find('#edit-javascript').drupalSetSummary(function () {
- var summary = [];
- if ($context.find('input[name="bootstrap_anchors_fix"]').is(':checked')) {
- summary.push(Drupal.t('Anchors'));
- }
- if ($context.find('input[name="bootstrap_popover_enabled"]').is(':checked')) {
- summary.push(Drupal.t('Popovers'));
- }
- if ($context.find('input[name="bootstrap_tooltip_enabled"]').is(':checked')) {
- summary.push(Drupal.t('Tooltips'));
- }
- return summary.join(', ');
- });
- // Advanced.
- $context.find('#edit-advanced').drupalSetSummary(function () {
- var summary = [];
- var $cdnProvider = $context.find('select[name="bootstrap_cdn_provider"] :selected');
- var cdnProvider = $cdnProvider.val();
- if ($cdnProvider.length && cdnProvider.length) {
- summary.push(Drupal.t('CDN provider: %provider', { '%provider': $cdnProvider.text() }));
- // jsDelivr CDN.
- if (cdnProvider === 'jsdelivr') {
- var $jsDelivrVersion = $context.find('select[name="bootstrap_cdn_jsdelivr_version"] :selected');
- if ($jsDelivrVersion.length && $jsDelivrVersion.val().length) {
- summary.push($jsDelivrVersion.text());
- }
- var $jsDelivrTheme = $context.find('select[name="bootstrap_cdn_jsdelivr_theme"] :selected');
- if ($jsDelivrTheme.length && $jsDelivrTheme.val() !== 'bootstrap') {
- summary.push($jsDelivrTheme.text());
- }
- }
- }
- return summary.join(', ');
- });
- }
- };
- /**
- * Provide BootstrapCDN (via jsDelivr) theme preview.
- */
- Drupal.behaviors.bootstrapThemePreview = {
- attach: function (context) {
- var $context = $(context);
- var $preview = $context.find('#bootstrap-theme-preview');
- $preview.once('bootstrap-theme-preview', 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.3/examples/theme/" target="_blank"><img class="img-responsive" src="https://getbootstrap.com/docs/3.3/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="bootstrap_cdn_jsdelivr_theme"]').bind('change', function () {
- $preview.find('.bootswatch-preview').addClass('element-invisible');
- if ($(this).val().length) {
- $preview.find('#bootstrap-theme-preview-' + $(this).val()).removeClass('element-invisible');
- }
- }).change();
- }
- });
- });
- }
- };
- /**
- * Provide Bootstrap navbar preview.
- */
- Drupal.behaviors.bootstrapNavbarPreview = {
- attach: function (context) {
- var $context = $(context);
- var $preview = $context.find('#edit-navbar');
- $preview.once('navbar', function () {
- var $body = $context.find('body');
- var $navbar = $context.find('#navbar.navbar');
- $preview.find('select[name="bootstrap_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="bootstrap_navbar_inverse"]').bind('change', function () {
- $navbar.toggleClass('navbar-inverse navbar-default');
- });
- });
- }
- };
- })(jQuery, Drupal);
|