Update carbon

demo-mjml.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="./stylesheets/tooltip.css">
     <link rel="stylesheet" href="./stylesheets/toastr.min.css">
     <link rel="stylesheet" href="./stylesheets/grapesjs-mjml.css">
-    <link rel="stylesheet" href="stylesheets/demos.css">
+    <link rel="stylesheet" href="stylesheets/demos.css?v2">
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="js/grapes.min.js?v0.14.57"></script>
@@ -144,9 +144,8 @@
 
 
     <div class="ad-cont">
-      <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom" id="_carbonads_js"></script> -->
       <div id="native-carbon"></div>
-      <script async type="text/javascript" src="./js/carbon.js"></script>
+      <script async type="text/javascript" src="./js/carbon.js?v2"></script>
     </div>
 
 

demo-newsletter-editor.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="stylesheets/tooltip.css">
     <link rel="stylesheet" href="stylesheets/toastr.min.css">
     <link rel="stylesheet" href="stylesheets/grapesjs-preset-newsletter.css?v=0.2.15">
-    <link rel="stylesheet" href="stylesheets/demos.css">
+    <link rel="stylesheet" href="stylesheets/demos.css?v2">
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="js/aviary.js"></script>
@@ -527,9 +527,8 @@
 
 
     <div class="ad-cont">
-      <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom" id="_carbonads_js"></script> -->
       <div id="native-carbon"></div>
-      <script async type="text/javascript" src="./js/carbon.js"></script>
+      <script async type="text/javascript" src="./js/carbon.js?v2"></script>
     </div>
 
 

demo.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css">
     <link rel="stylesheet" href="stylesheets/tooltip.css">
     <link rel="stylesheet" href="stylesheets/grapesjs-plugin-filestack.css">
-    <link rel="stylesheet" href="stylesheets/demos.css">
+    <link rel="stylesheet" href="stylesheets/demos.css?v2">
 
     <!-- <script src="//static.filestackapi.com/v3/filestack.js"></script> -->
     <!-- <script src="js/aviary.js"></script> old //feather.aviary.com/imaging/v3/editor.js -->
@@ -145,7 +145,7 @@
     <div class="ad-cont">
       <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom" id="_carbonads_js"></script> -->
       <div id="native-carbon"></div>
-      <script async type="text/javascript" src="./js/carbon.js"></script>
+      <script async type="text/javascript" src="./js/carbon.js?v2"></script>
     </div>
 
     <div id="gjs" style="height:0px; overflow:hidden">

index.html

@@ -100,7 +100,7 @@
       </div>
 
       <div id="native-carbon"></div>
-      <script async type="text/javascript" src="./js/carbon.js"></script>
+      <script async type="text/javascript" src="./js/carbon.js?v2"></script>
 
       <div class="bann-cont-c">
         <div class="bann-cont">

js/carbon.js

@@ -19,9 +19,23 @@ var loadAd = function() {
   }
 };
 
-(function(){
+var loadScript = function(src, clb) {
   var scr = document.createElement('script');
-  scr.src = '//m.servedby-buysellads.com/monetization.js';
-  scr.onload = loadAd;
+  scr.src = src;
+  clb && (scr.onload = clb);
   document.head.appendChild(scr);
-})();
+  return scr;
+};
+
+function BSANativeCallback (a) {
+  var total = a.ads.length;
+  if (!total) {
+    var script = loadScript('//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom');
+    script.setAttribute('id', '_carbonads_js');
+    var adCont = document.getElementById('native-carbon');
+    adCont && adCont.appendChild(script);
+    console.log({ script });
+  }
+}
+
+loadScript('//m.servedby-buysellads.com/monetization.js', loadAd);

stylesheets/demos.css

@@ -94,6 +94,7 @@ html {
 }
 
 #carbonads {
+  font: caption;
   padding: 20px 10px;
 }