data-show-gt enhancement

.stylelintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     "no-descending-specificity": null,
     "length-zero-no-unit": null,
     "function-comma-space-after": null,
-    "number-leading-zero": null
+    "number-leading-zero": null,
+    "font-family-no-missing-generic-family-keyword": null
   },
 }

README.md

@@ -33,7 +33,7 @@ This means any files in the repo are accessible via the [jsDelivr CDN](https://w
 
 For example, to load the latest version of the loader script you can use:
 
-https://cdn.jsdelivr.net/gh/squizlabs/bootstrap-content-templates@latest/dist/bct-loader.js
+https://cdn.jsdelivr.net/gh/squizlabs/bootstrap-content-templates/dist/bct-loader.js
 
 ### Local files
 
@@ -51,17 +51,43 @@ var bctJsMin = 'path/to/bct.min.js';
 In order to use this extension on a CT, simply include the `bct-loader.js` file to the end of your SEL:
 
 ```html
-<script src="/path/to/bct-loader.js"></script>
+<script>
+!function(){if(window.runBct)runBct();else{const t=document.createElement(`script`);
+t.src=`/path/to/bct-loader.js`,
+document.head.appendChild(t)}}();
+</script>
 ```
 
 This will automatically load the following libraries into your Admin or Edit+ interface when this CT is used on a page:
 
+- jQuery 3.6.0 (if not already available)
 - Bootstrap 4.4.1 
 - Font Awesome 5.5.0
 - BCT core CSS & JS
 
 The loader script will ensure that these additional CSS and JS files are only loaded once, so it's fine if you have multiple CTs on a page that all reference the same loader script.
 
+## Recommended usage
+The recommended way to use the BCT plugin is to use the latest CDN version and have a single place where you are referencing the BCT loading script.
+
+For example, create a standard page with a single component set to code. Inside that code area, add the script to load the CDN version of the plugin:
+
+```html
+<script>
+!function(){if(window.runBct)runBct();else{const t=document.createElement(`script`);
+t.src=`https://cdn.jsdelivr.net/gh/squizlabs/bootstrap-content-templates/dist/bct-loader.js`,
+document.head.appendChild(t)}}();
+</script>
+```
+
+Then at the bottom of your SEL, simply use a global keyword to nest the code from the standard page:
+
+```html
+%globals_asset_contents_raw:<asset ID of standard page>%
+```
+
+That way, you can use the exact same reference on any custom component you choose to use it on and update the BCT loading script in a single place.
+
 ### Using Bootstrap classes
 
 Bootstrap is prefixed with the `.mbs` class, so you just need to wrap any HTML elements that use Boostrap in an element with that class on it. For example:
@@ -265,3 +291,5 @@ Anyone is welcome to contribute bug fixes, features, and improvements.
 The code is available under the [MIT license](LICENSE).
 
 This repo is based on [https://github.com/ericalli/static-site-boilerplate](https://github.com/ericalli/static-site-boilerplate).
+
+

dist/bct-loader.js

@@ -1,90 +1,118 @@
 /*!
-  * Bootstrap Content Templates vmatrix6-beta
+  * Bootstrap Content Templates (master)
+  * Matrix 6: 2.0.14 (tag)
+  * Matrix 5: 1.0.8 (tag)
   */
 
 /* global bctInit */
 
 //bct plugin vars
 var matrixVersion = 6;
-var bctCssMin =           'https://cdn.jsdelivr.net/gh/squizlabs/bootstrap-content-templates@matrix6-beta/dist/bct.min.css';
+var bctCssMin =           'https://cdn.jsdelivr.net/gh/squizlabs/bootstrap-content-templates@2.0.14/dist/bct.min.css';
 var bctCssFontawesome =   'https://use.fontawesome.com/releases/v5.5.0/css/all.css';
-var bctJsMin =            'https://cdn.jsdelivr.net/gh/squizlabs/bootstrap-content-templates@matrix6-beta/dist/bct.min.js';
+var bctJsMin =            'https://cdn.jsdelivr.net/gh/squizlabs/bootstrap-content-templates@2.0.14/dist/bct.min.js';
 
 //matrix 5
-var m5_bctCssMin =       'https://cdn.jsdelivr.net/gh/squizlabs/[email protected].7/dist/bct.min.css';
-var m5_bctJsMin =        'https://cdn.jsdelivr.net/gh/squizlabs/[email protected].7/dist/bct.min.js';
+var m5_bctCssMin =       'https://cdn.jsdelivr.net/gh/squizlabs/[email protected].8/dist/bct.min.css';
+var m5_bctJsMin =        'https://cdn.jsdelivr.net/gh/squizlabs/[email protected].8/dist/bct.min.js';
 
 //check what version of matrix we are in
-if(document.head.querySelector('link[href*="/frontend/dist/css/main.min.css"]')){
-    //matrix 6
-    matrixVersion = 6;
-}else{
+if(document.head.querySelectorAll('link[href*="__lib/web/css/reset.css"], link[href*="__data/ees/easyedit.min.css"]').length){
     //matrix 5
     matrixVersion = 5;
     bctCssMin = m5_bctCssMin;
     bctJsMin = m5_bctJsMin;
+}else{
+    //matrix 6
 }
-$('body').addClass('matrix' + matrixVersion);
-
-//function for initialising the bct plugin
-function iniBctWrappers(){
-    //find all bct wrappers on the screen and initialise them with the bct plugin
-    $('.bct-wrapper').not('.initialised').each(function(){
-        bctInit(this);
-    });
-    //add class to the body to indicate that we have initialised the bct plugin
-    $('body').addClass('bct');
+
+//check if jquery is available, if not, we need to load it
+if(!window.jQuery){
+  var jqueryScript = document.createElement('script');
+  jqueryScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js';
+  document.getElementsByTagName('head')[0].appendChild(jqueryScript);
+  //then run the bct plugin once the dom content has finished loading
+  document.addEventListener("DOMContentLoaded", function() {
+      runBct();
+  });
+}else{
+  //if jquery is available, we can just run the bct plugin straight away
+  runBct();
 }
 
-//load the required CSS and JS into the head if we haven't done it yet
-if(!$('body').hasClass('bct-files-loaded')){
+function runBct(){
 
-    //load the CSS files
-    document.head.insertAdjacentHTML('beforeend', '\
-        <link rel="stylesheet" href="'+ bctCssMin +'">\
-        <link rel="stylesheet" href="'+ bctCssFontawesome +'" id="fa_stylesheet">\
-    ');
+  $('body').addClass('matrix' + matrixVersion);
 
-    //load the JS files
-    $.getScript(bctJsMin)
-        .done(function() {
-            setTimeout(function(){
-                iniBctWrappers();
-            }, 100);
-        }
-    );
+  //check if we are in inline edit
+  if(window.location.href.indexOf('/_edit') > -1){
+      $('body').addClass('inline-edit');
+  }
 
-    //add class to body to indicate that we've loaded all the files
-    $('body').addClass('bct-files-loaded');
+  //function for initialising the bct plugin
+  function iniBctWrappers(){
+      //find all bct wrappers on the screen and initialise them with the bct plugin
+      $('.bct-wrapper').not('.initialised').each(function(){
+          bctInit(this);
+      });
+      //add class to the body to indicate that we have initialised the bct plugin
+      $('body').addClass('bct');
+  }
 
-}else{
-    //we've already loaded the files, so we just need to initialise the plugin
-
-    if(window.location.href.indexOf('_admin') > -1) {
-        //if we are in admin mode, we need to reload some of the scripts
-        if(!$('#main_form').hasClass('bct-admin-loaded')){
-            //in admin we need to reload this CSS file into the body tag because of a weird bug
-            document.body.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="'+ bctCssMin +'">');
-            //reload the JS files using a promise, when all are completed, we can call the bct ini function again
-            $.when(
-                $.getScript(bctJsMin),
-                $.Deferred(function( deferred ){
-                    $( deferred.resolve );
-                }),
-                //add class to the main admin form tag to indicate we've reloaded the scripts in admin
-                $('#main_form').addClass('bct-admin-loaded')
-            ).done(function(){
-                iniBctWrappers();
-            });
-        }
-    }else{
-        //if we're in Edit+, we can just call the ini function again
-        setTimeout(function(){
-            if($('body').hasClass('bct')){
-                iniBctWrappers();
-            }
-        }, 100);
-    }
-}
+  //put everything in a tiny deferred load to give the overall UI a chance to load everything
+  setTimeout(function(){
 
+      //load the required CSS and JS into the head if we haven't done it yet
+      if(!$('body').hasClass('bct-files-loaded')){
 
+          //load the CSS files
+          document.head.insertAdjacentHTML('beforeend', '\
+              <link rel="stylesheet" href="'+ bctCssMin +'">\
+              <link rel="stylesheet" href="'+ bctCssFontawesome +'" id="fa_stylesheet">\
+          ');
+
+          //load the JS files
+          $.getScript(bctJsMin)
+              .done(function() {
+                  setTimeout(function(){
+                      iniBctWrappers();
+                  }, 100);
+              }
+          );
+
+          //add class to body to indicate that we've loaded all the files
+          $('body').addClass('bct-files-loaded');
+
+      }else{
+          //we've already loaded the files, so we just need to initialise the plugin
+
+          if(window.location.href.indexOf('_admin') > -1) {
+              //if we are in admin mode, we need to reload some of the scripts
+              if(!$('#main_form').hasClass('bct-admin-loaded')){
+                  //in admin we need to reload this CSS file into the body tag because of a weird bug
+                  document.body.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="'+ bctCssMin +'">');
+                  //reload the JS files using a promise, when all are completed, we can call the bct ini function again
+                  $.when(
+                      $.getScript(bctJsMin),
+                      $.Deferred(function( deferred ){
+                          $( deferred.resolve );
+                      }),
+                      //add class to the main admin form tag to indicate we've reloaded the scripts in admin
+                      $('#main_form').addClass('bct-admin-loaded')
+                  ).done(function(){
+                      iniBctWrappers();
+                  });
+              }
+          }else{
+              //if we're in /_edit, we can just call the ini function again
+              setTimeout(function(){
+                  if($('body').hasClass('bct')){
+                      iniBctWrappers();
+                  }
+              }, 100);
+          }
+      }
+
+  }, 100);
+
+}

item.json

@@ -3,7 +3,7 @@
     "download":         "https://gitlab.squiz.net/marketplace/internal/bootstrap-content-templates#installation",
     "repo":             "https://gitlab.squiz.net/marketplace/internal/bootstrap-content-templates",
     "description":      "An extension for Squiz Matrix that enables the ability to easily create enhanced and more user intuitive Content Templates using Bootstrap 4 and FontAwesome 5.",
-    "version":          "1.0.1",
+    "version":          "2.0.7",
     "owner":            "@bbanda",
     "product_versions": {
         "matrix":       "5.5.0.0"