bootstrap.admin.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. (function ($, Drupal) {
  2. /*global jQuery:false */
  3. /*global Drupal:false */
  4. "use strict";
  5. /**
  6. * Provide vertical tab summaries for Bootstrap settings.
  7. */
  8. Drupal.behaviors.bootstrapSettingSummaries = {
  9. attach: function (context) {
  10. var $context = $(context);
  11. // General.
  12. $context.find('#edit-general').drupalSetSummary(function () {
  13. var summary = [];
  14. // Buttons.
  15. var size = $context.find('select[name="bootstrap_button_size"] :selected');
  16. if (size.val()) {
  17. summary.push(Drupal.t('@size Buttons', {
  18. '@size': size.text()
  19. }));
  20. }
  21. // Images.
  22. var shape = $context.find('select[name="bootstrap_image_shape"] :selected');
  23. if (shape.val()) {
  24. summary.push(Drupal.t('@shape Images', {
  25. '@shape': shape.text()
  26. }));
  27. }
  28. if ($context.find(':input[name="bootstrap_image_responsive"]').is(':checked')) {
  29. summary.push(Drupal.t('Responsive Images'));
  30. }
  31. // Tables.
  32. if ($context.find(':input[name="bootstrap_table_responsive"]').is(':checked')) {
  33. summary.push(Drupal.t('Responsive Tables'));
  34. }
  35. return summary.join(', ');
  36. });
  37. // Components.
  38. $context.find('#edit-components').drupalSetSummary(function () {
  39. var summary = [];
  40. // Breadcrumbs.
  41. var breadcrumb = parseInt($context.find('select[name="bootstrap_breadcrumb"]').val(), 10);
  42. if (breadcrumb) {
  43. summary.push(Drupal.t('Breadcrumbs'));
  44. }
  45. // Navbar.
  46. var navbar = 'Navbar: ' + $context.find('select[name="bootstrap_navbar_position"] :selected').text();
  47. if ($context.find('input[name="bootstrap_navbar_inverse"]').is(':checked')) {
  48. navbar += ' (' + Drupal.t('Inverse') + ')';
  49. }
  50. summary.push(navbar);
  51. return summary.join(', ');
  52. });
  53. // Javascript.
  54. $context.find('#edit-javascript').drupalSetSummary(function () {
  55. var summary = [];
  56. if ($context.find('input[name="bootstrap_anchors_fix"]').is(':checked')) {
  57. summary.push(Drupal.t('Anchors'));
  58. }
  59. if ($context.find('input[name="bootstrap_popover_enabled"]').is(':checked')) {
  60. summary.push(Drupal.t('Popovers'));
  61. }
  62. if ($context.find('input[name="bootstrap_tooltip_enabled"]').is(':checked')) {
  63. summary.push(Drupal.t('Tooltips'));
  64. }
  65. return summary.join(', ');
  66. });
  67. // Advanced.
  68. $context.find('#edit-advanced').drupalSetSummary(function () {
  69. var summary = [];
  70. var $cdnProvider = $context.find('select[name="bootstrap_cdn_provider"] :selected');
  71. var cdnProvider = $cdnProvider.val();
  72. if ($cdnProvider.length && cdnProvider.length) {
  73. summary.push(Drupal.t('CDN provider: %provider', { '%provider': $cdnProvider.text() }));
  74. // jsDelivr CDN.
  75. if (cdnProvider === 'jsdelivr') {
  76. var $jsDelivrVersion = $context.find('select[name="bootstrap_cdn_jsdelivr_version"] :selected');
  77. if ($jsDelivrVersion.length && $jsDelivrVersion.val().length) {
  78. summary.push($jsDelivrVersion.text());
  79. }
  80. var $jsDelivrTheme = $context.find('select[name="bootstrap_cdn_jsdelivr_theme"] :selected');
  81. if ($jsDelivrTheme.length && $jsDelivrTheme.val() !== 'bootstrap') {
  82. summary.push($jsDelivrTheme.text());
  83. }
  84. }
  85. }
  86. return summary.join(', ');
  87. });
  88. }
  89. };
  90. /**
  91. * Provide BootstrapCDN (via jsDelivr) theme preview.
  92. */
  93. Drupal.behaviors.bootstrapThemePreview = {
  94. attach: function (context) {
  95. var $context = $(context);
  96. var $preview = $context.find('#bootstrap-theme-preview');
  97. $preview.once('bootstrap-theme-preview', function () {
  98. // Construct the "Bootstrap Theme" preview here since it's not actually
  99. // a Bootswatch theme, but rather one provided by Bootstrap itself.
  100. // Unfortunately getbootstrap.com does not have HTTPS enabled, so the
  101. // preview image cannot be protocol relative.
  102. // @todo Make protocol relative if/when Bootstrap enables HTTPS.
  103. $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>');
  104. // Retrieve the Bootswatch theme preview images.
  105. // @todo This should be moved into PHP.
  106. $.ajax({
  107. url: 'https://bootswatch.com/api/3.json',
  108. dataType: 'json',
  109. success: function (json) {
  110. var themes = json.themes;
  111. for (var i = 0, len = themes.length; i < len; i++) {
  112. $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>');
  113. }
  114. },
  115. complete: function () {
  116. $preview.parent().find('select[name="bootstrap_cdn_jsdelivr_theme"]').bind('change', function () {
  117. $preview.find('.bootswatch-preview').addClass('element-invisible');
  118. if ($(this).val().length) {
  119. $preview.find('#bootstrap-theme-preview-' + $(this).val()).removeClass('element-invisible');
  120. }
  121. }).change();
  122. }
  123. });
  124. });
  125. }
  126. };
  127. /**
  128. * Provide Bootstrap navbar preview.
  129. */
  130. Drupal.behaviors.bootstrapNavbarPreview = {
  131. attach: function (context) {
  132. var $context = $(context);
  133. var $preview = $context.find('#edit-navbar');
  134. $preview.once('navbar', function () {
  135. var $body = $context.find('body');
  136. var $navbar = $context.find('#navbar.navbar');
  137. $preview.find('select[name="bootstrap_navbar_position"]').bind('change', function () {
  138. var $position = $(this).find(':selected').val();
  139. $navbar.removeClass('navbar-fixed-bottom navbar-fixed-top navbar-static-top container');
  140. if ($position.length) {
  141. $navbar.addClass('navbar-'+ $position);
  142. }
  143. else {
  144. $navbar.addClass('container');
  145. }
  146. // Apply appropriate classes to body.
  147. $body.removeClass('navbar-is-fixed-top navbar-is-fixed-bottom navbar-is-static-top');
  148. switch ($position) {
  149. case 'fixed-top':
  150. $body.addClass('navbar-is-fixed-top');
  151. break;
  152. case 'fixed-bottom':
  153. $body.addClass('navbar-is-fixed-bottom');
  154. break;
  155. case 'static-top':
  156. $body.addClass('navbar-is-static-top');
  157. break;
  158. }
  159. });
  160. $preview.find('input[name="bootstrap_navbar_inverse"]').bind('change', function () {
  161. $navbar.toggleClass('navbar-inverse navbar-default');
  162. });
  163. });
  164. }
  165. };
  166. })(jQuery, Drupal);