☰

Shuttle SEO Master

Adds automatic h1, h2 and h3 tag conversion from custom styles in Shuttle Data WYSIWYG-editors

  1. //
  2. // Written by Glenn Wiking
  3. // Script Version: 0.2.45
  4. //
  5. //
  6. // ==UserScript==
  7. // @name        Shuttle SEO Master
  8. // @namespace   SSM
  9. // @description Adds automatic h1, h2 and h3 tag conversion from custom styles in Shuttle Data WYSIWYG-editors
  10. // @version     0.2.45
  11. // @icon        https://dlw0tascjxd4x.cloudfront.net/assets/img/symbol.svg
  12. // @license			MIT
  13.  
  14. // @include     *.shuttle.be/admin/*
  15. // @include			*app.shuttle.be/*
  16. // @require			https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js 
  17. // @require			https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
  18.  
  19.  
  20. // ==/UserScript==
  21.  
  22. $(window).on("load", function() {
  23.   // Documentation
  24.   let documentation =
  25.   "<p>SEO Master is a tool that lets you more easily control <strong>SEO essentials</strong> within Shuttle. Its features are documented in more detail below.</p>"
  26.   +
  27.   "<p>The primary feature of SEO Master is the <strong>SEO button</strong>. When enabled, this button will appear in a WYSIWYG editors throughout Shuttle. Its behavior can be mapped in settings.</p>"
  28.   +
  29.   "<p>You can also map this behavior to selecting an item from the Styles dropdown menu.</p>"
  30.   +
  31.   "<br><p><img src='https://shuttle-storage.s3.amazonaws.com/addons/Flavor/SEO-Button-Doc1.png'></p>"
  32.   +
  33.   "<p>It's also possible to disable the SEO button, in which case the mapped behavior will be automatically applied to all WYSIWYG fields when a data entry or text editor in pages is opened. If you want per-context control, the SEO button is what you're after.</p>"
  34.   +
  35.   "<p>Currently supported features:</p>"
  36.   +
  37. 	"<ul>"
  38.   +
  39.   "<li>Replacing <code>span.custom-style-h<em>x</em></code> with <code>h<em>x</em>.custom-style-h<em>x</em></code> in the current editor.</li>"
  40.   +
  41.   "</ul>"
  42.   +
  43.   "<br>"
  44.   +
  45.   "<p>More features coming soon!</p>"
  46.   
  47.   
  48.   // Apply CKE
  49.   function apply(cke) {
  50.   	console.log( cke );
  51. 		cke.addClass("affected");
  52.     
  53.     // Appearance
  54.     cke.find(".cke_top").append("<span id='cke_seo' class='cke_toolbar' role='toolbar'></span>");
  55.     cke.find("#cke_seo").append("<span class='cke_toolbar_start'></span><span class='cke_toolgroup hidden'></span><span class='cke_toolbar_end'></span>");
  56.     cke.find("#cke_seo .cke_toolgroup").append("<a id='cke_seo_button' class='cke_button cke_button_seo cke_button_off' title='SEO' tabindex='-1' hideonfocus='true' role='button' onkeypress='return false;'></a>");
  57.     cke.find("#cke_seo_button").append("<span class='cke_button_icon cke_button__seo_icon'></span>");
  58.     cke.find("#cke_seo_button").append("<span class='cke_button_label cke_button__seo_label'></span>");
  59.     cke.find(".cke_button__seo_label").text("SEO");
  60.     
  61.     if ( localStorage.getItem("SEO-button-active") == null ) {
  62.       localStorage.setItem("SEO-button-active", true);
  63.     } else {
  64.     	if ( localStorage.getItem("SEO-button-active") == "true" ) {
  65.       	$(".cke_button_seo").parent().removeClass("hidden");
  66.       }
  67.     }
  68.     
  69.     console.log( "GG" );
  70.     // Headings Clean (SEO Button)
  71.     function clean() {
  72.       cke.find(".cke_wysiwyg_frame").contents().find("span[class^='custom-style-h']").each( function() {
  73.         let classes = $(this).attr("class").split(" ");
  74.         let h;
  75.         let content;
  76.         for ( i = 0; i < classes.length; i++ ) {
  77.           console.log( classes[i] );
  78.           if ( classes[i].includes("custom-style-h") ) {
  79.             h = classes[i].replace("custom-style-h","");
  80.             content = $(this).html();
  81.           }
  82.         }
  83.         //$(this).parent().prepend("<h"+ h +" class='" + classes.toString().replace(/,/g," ") + "'>"+ content +"</h"+ h +">");
  84.         $(this).parent("p").before("<h"+ h +" class='" + classes.toString().replace(/,/g," ") + "'>"+ content +"</h"+ h +">");
  85.         //$(this).addClass("gg");
  86.         console.log( classes.toString().replace(/,/g," ") );
  87.         console.log( $(this).parent() );
  88.         $(this).parent("p").remove();
  89.       });
  90.     }
  91.     if ( localStorage.getItem("SEO-button-active") != null ) { 
  92.     	if ( localStorage.getItem("SEO-button-active") == "false" ) { clean(); };
  93.     };
  94.     console.log("G");
  95.     cke.find("#cke_seo_button").on("click", clean);
  96.     cke.find(".cke_toolbar a.cke_combo_button[aria-haspopup]").on("click", function() {
  97.      	cke.addClass("style-open");
  98.     	console.log("Styles");
  99.       
  100.     });
  101.   };
  102.   /*let applyOnStyles = setInterval( function() {
  103.     $(".cke_combopanel[style*='z-index: 10001']").on("click", function() {
  104.       if ( localStorage.getItem("SEO-style-apply-active") != null ) { 
  105.         if ( localStorage.getItem("SEO-style-apply-active") == "false" ) {
  106.           setTimeout( function() {
  107.             clean();
  108.           }, 200);
  109.         };
  110.       };
  111.     });
  112.     $(".cke_combopanel[style*='z-index: 10001']").attr("g","gg");
  113.     $("[g]").on("click", function() {
  114.     	console.log("GGG");
  115.     });
  116.     if ( $(".cke_combopanel[style*='z-index: 10001'].affected").length == 1 ) { clearInterval(applyOnStyles) }
  117.    	console.log( $(".cke_combopanel[style*='z-index: 10001']:not(.affected)") );
  118.     //$(".cke_combopanel[style*='z-index: 10001']").addClass("affected");
  119.   }, 500);*/
  120.   
  121.   // Apply Settings
  122.   let iconCog = "<svg viewBox='410.9 287.6 20 20'><path d='M429,297.6c0-1.2,0.8-2.2,1.9-2.9c-0.2-0.7-0.5-1.4-0.8-2c-1.3,0.3-2.3-0.2-3.2-1.1c-0.9-0.9-1.2-1.9-0.8-3.2c-0.6-0.3-1.3-0.6-2-0.8c-0.7,1.2-1.9,1.9-3.1,1.9 c-1.2,0-2.5-0.8-3.1-1.9c-0.7,0.2-1.4,0.5-2,0.8c0.3,1.3,0.1,2.3-0.8,3.2 c-0.9,0.9-1.9,1.4-3.2,1.1c-0.3,0.6-0.6,1.3-0.8,2c1.2,0.7,1.9,1.7,1.9,2.9c0,1.2-0.8,2.5-1.9,3.1c0.2,0.7,0.5,1.4,0.8,2 c1.3-0.3,2.3-0.1,3.2,0.8c0.9,0.9,1.2,1.9,0.8,3.2c0.6,0.3,1.3,0.6,2,0.8c0.7-1.2,1.9-1.9,3.1-1.9c1.2,0,2.5,0.8,3.1,1.9 c0.7-0.2,1.4-0.5,2-0.8c-0.3-1.3-0.1-2.3,0.8-3.2c0.9-0.9,1.9-1.4,3.2-1.1c0.3-0.6,0.6-1.3,0.8-2C429.8,299.9,429,298.9,429,297.6z M420.9,302c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3c2.4,0,4.3,1.9,4.3,4.3C425.3,300,423.3,302,420.9,302z'></path></svg>"
  123.   let iconLog = "<svg viewBox='0 0 20 20'><g><path d='M16.3,8.6H8c-0.8,0-0.9,0.6-0.9,1.4s0.1,1.4,0.9,1.4h8.3c0.8,0,0.9-0.6,0.9-1.4S17.1,8.6,16.3,8.6z M19.1,15.7H8 c-0.8,0-0.9,0.6-0.9,1.4s0.1,1.4,0.9,1.4h11.1c0.8,0,0.9-0.6,0.9-1.4S19.9,15.7,19.1,15.7z M8,4.3h11.1c0.8,0,0.9-0.6,0.9-1.4 s-0.1-1.4-0.9-1.4H8c-0.8,0-0.9,0.6-0.9,1.4S7.2,4.3,8,4.3z M3.4,8.6H0.9C0.1,8.6,0,9.2,0,10s0.1,1.4,0.9,1.4h2.6 c0.8,0,0.9-0.6,0.9-1.4S4.2,8.6,3.4,8.6z M3.4,15.7H0.9c-0.8,0-0.9,0.6-0.9,1.4s0.1,1.4,0.9,1.4h2.6c0.8,0,0.9-0.6,0.9-1.4 S4.2,15.7,3.4,15.7z M3.4,1.4H0.9C0.1,1.4,0,2.1,0,2.9s0.1,1.4,0.9,1.4h2.6c0.8,0,0.9-0.6,0.9-1.4S4.2,1.4,3.4,1.4z'></path></g></svg>"
  124.   let iconPage = "<svg viewBox='0 0 384 512'><path d='M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z'/></svg>"
  125.   let iconImport = "<svg viewBox='0 0 20 20'><path d='M15,7h-3V1H8v6H5l5,5L15,7z M19.338,13.532c-0.21-0.224-1.611-1.723-2.011-2.114C17.062,11.159,16.683,11,16.285,11h-1.757 l3.064,2.994h-3.544c-0.102,0-0.194,0.052-0.24,0.133L12.992,16H7.008l-0.816-1.873c-0.046-0.081-0.139-0.133-0.24-0.133H2.408 L5.471,11H3.715c-0.397,0-0.776,0.159-1.042,0.418c-0.4,0.392-1.801,1.891-2.011,2.114c-0.489,0.521-0.758,0.936-0.63,1.449 l0.561,3.074c0.128,0.514,0.691,0.936,1.252,0.936h16.312c0.561,0,1.124-0.422,1.252-0.936l0.561-3.074 C20.096,14.468,19.828,14.053,19.338,13.532z'></path></svg>"
  126.   let iconHelp = "<svg x='0px' y='0px' viewBox='0 0 20 20' xml:space='preserve'><g><path d='M19,10c0,5-4,9-9,9c-5,0-9-4-9-9c0-5,4-9,9-9C15,1,19,5,19,10z M14.1,7.4c0-2.2-1.9-3.8-4.1-3.8c-2.2,0-3.8,1.9-3.8,1.9 L7.8,7c0,0,1.1-1.1,2.2-1.1s1.9,0.8,1.9,1.5c0,1.5-3,1.5-3,3.8v0.7h2.3v-0.4C11.1,10.4,14.1,10.4,14.1,7.4z M11.5,15.3 c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5c0,0.8,0.7,1.5,1.5,1.5S11.5,16.1,11.5,15.3z'></path></g></svg>";
  127.   function settings() {
  128.  		let panel = $("a[data-active-id='cookies']").closest(".shuttle-Panel-inner");
  129.     panel.append("<div class='shuttle-SubNav shuttle-SubNav--alt heading-addons'></div>");
  130.     panel.find(".heading-addons").append("<div class='shuttle-SubNav-title'>Add-ons</div>");
  131.     panel.find(".heading-addons").append("<ul class='shuttle-SubNav-wrapItems Nav Nav--stacked'></ul>");
  132.   }
  133.   function settingsSEO() {
  134.    	let panel = $("a[data-active-id='cookies']").closest(".shuttle-Panel-inner");
  135.     let menuItems = [];
  136.     menuItems.push({"label":"Settings", "icon":iconCog}, {"label":"Documentation", "icon":iconPage}, {"label":"Changelog", "icon":iconLog}, {"label":"Import/export Settings", "icon":iconImport});
  137.   	$(".heading-addons ul").append("<li class='shuttle-SubNav-item'><a class='shuttle-SubNav-itemTarget settings-seo' href=''><div class='Icon'></div>SEO Master</a></li>");
  138.     $(".heading-addons .settings-seo .Icon").append( iconCog );
  139.     $(".settings-seo").on("click", function() {
  140.     	if ( $(".panel-seo").length == 0 ) {
  141.         $(".shuttle-Panel--mainNav").nextAll(".shuttle-Panels:visible").append("<div class='shuttle-Panels shuttle-Panels--nested panel-seo' style='margin-left: 250px; top: 0px;'></div>")
  142.         $(".panel-seo").append("<div class='shuttle-Panel shuttle-Panel--withTabs'></div>");
  143.         $(".panel-seo > .shuttle-Panel").append("<div class='shuttle-Panel-inner' style='top: 115px; bottom: 0px;'></div>");
  144.         $(".panel-seo > .shuttle-Panel").append("<div class='shuttle-Panel-header'></div>");
  145.       } else {
  146.       	$(".panel-seo").parent().find("> .shuttle-Panels--nested:not(.panel-seo)").hide();
  147.       }
  148.       
  149.       // Open Settings
  150.       panel.find(".is-selected:visible").removeClass("is-selected");
  151.       $(this).addClass("is-selected");
  152.       // Fill with Appliccable Settings
  153.       if ( $(".panel-seo.affected").length == 0 ) {
  154.         $(".panel-seo .shuttle-Panel-header").append("<div class='shuttle-Panel-title u-textTruncate'>SEO Master</div>");
  155.         $(".panel-seo .shuttle-Panel-header").append("<div class='shuttle-Panel-toolbar'></div>");
  156.         $(".panel-seo .shuttle-Panel-header").append("<ul class='PanelNav Nav'></ul>");
  157.         for ( i = 0; i < menuItems.length; i++ ) {
  158.           let menuLabel = menuItems[i].label;
  159.           let menuIcon = menuItems[i].icon;
  160.           $(".panel-seo .shuttle-Panel-header ul").append("<li class='PanelNav-item'><a class='PanelNav-itemTarget' href='' data-tab='"+ menuLabel +"'><div class='Icon'>" + menuIcon + "</div>"+ menuLabel +"</a></li>");
  161.         }
  162.         $(".panel-seo .shuttle-Panel-header ul a").on("click", function(e) {
  163. 					e.preventDefault();
  164.        		$(".panel-seo .shuttle-Panel-header ul a").removeClass("is-selected");
  165.           $(this).addClass("is-selected");
  166.         });
  167.     		
  168.         $(".panel-seo").addClass("affected");
  169.       }
  170.       // Settings Menus
  171.       $(".PanelNav-itemTarget").on("click", function() {
  172.       	let which = $(this).attr("data-tab");
  173.         function addPanel() { // Clean up and Add Panel
  174.           $(".panel-seo .shuttle-SEO, .panel-seo .Form-item--actions").remove();
  175.           $(".panel-seo .shuttle-Panel-inner").append("<div class='shuttle-SEO'></div>");
  176.         };
  177.         console.log(which);
  178.         
  179.         // Settings
  180.         if ( which == "Settings" ) {
  181.         	addPanel();
  182.          	$(".shuttle-SEO").parent().parent().append("<div class='Form-item Form-item--actions'><div class='Form-controls'><input class='Button Button--primary' type='submit' value='Save'></div></div>");
  183.           
  184.           // Show SEO Button
  185.           $(".shuttle-SEO").append("<div class='Form-item'><label for='seo-button-toggler' class='Form-label'>Show SEO Button</label> <div class='Form-controls'> <span class='switchery switchery-default seo-button-toggler'><small></small></span> </div> </div>");
  186.           $(".shuttle-SEO label[for='seo-button-toggler']").append( "<span class='Form-help-icon' data-toggle='tooltip' data-original-title='Disabling the SEO Button will cause the selected behavior to apply automatically to all open WYSIWYG-editors'></span>" );
  187.           $(".shuttle-SEO label[for='seo-button-toggler'] .Form-help-icon").append( iconHelp );
  188.           
  189.           $(".shuttle-SEO .seo-button-toggler").on("click", function() {
  190.           	$(this).toggleClass("on");
  191.             if ( $(this).hasClass("on") ) {
  192.             	localStorage.setItem("SEO-button-active",true);
  193.             } else {
  194.               localStorage.setItem("SEO-button-active",false);
  195.             }
  196.           });
  197.           
  198.           if ( localStorage.getItem("SEO-button-active") == null ) {
  199.             localStorage.setItem("SEO-button-active", true);
  200.           } else {
  201.             if ( localStorage.getItem("SEO-button-active") == "true" ) {
  202.               $(".seo-button-toggler").addClass("on");
  203.             }
  204.           };
  205.           // Apply on Style Change Button
  206.           $(".shuttle-SEO").append("<div class='Form-item'><label for='seo-style-apply-toggler' class='Form-label'>Apply on style choice</label> <div class='Form-controls'> <span class='switchery switchery-default seo-style-apply-toggler'><small></small></span> </div> </div>");
  207.           $(".shuttle-SEO label[for='seo-style-apply-toggler']").append( "<span class='Form-help-icon' data-toggle='tooltip' data-original-title='Immediately applies the selected feature to all appropriate elements in the open editor when selecting a Header style from the Styles dropdown'></span>" );
  208.           $(".shuttle-SEO label[for='seo-style-apply-toggler'] .Form-help-icon").append( iconHelp );
  209.           
  210.           $(".shuttle-SEO .seo-style-apply-toggler").on("click", function() {
  211.           	$(this).toggleClass("on");
  212.             if ( $(this).hasClass("on") ) {
  213.             	localStorage.setItem("SEO-style-apply-active",true);
  214.             } else {
  215.               localStorage.setItem("SEO-style-apply-active",false);
  216.             }
  217.           });
  218.           
  219.           if ( localStorage.getItem("SEO-style-apply-active") == null ) {
  220.             localStorage.setItem("SEO-apply-active-active", true);
  221.           } else {
  222.             if ( localStorage.getItem("SEO-style-apply-active") == "true" ) {
  223.               $(".seo-style-apply-toggler").addClass("on");
  224.             }
  225.           };
  226.           // Enable character limit visualizer
  227.           $(".shuttle-SEO").append("<div class='Form-item'><label for='seo-limit-toggler' class='Form-label'>Enable character limit visualizer</label> <div class='Form-controls'> <span class='switchery switchery-default seo-limit-toggler'><small></small></span> </div> </div>");
  228.           $(".shuttle-SEO label[for='seo-limit-toggler']").append( "<span class='Form-help-icon' data-toggle='tooltip' data-original-title='Shows character limits in a number of relevant input and textarea elements'></span>" );
  229.           $(".shuttle-SEO label[for='seo-limit-toggler'] .Form-help-icon").append( iconHelp );
  230.           
  231.           $(".shuttle-SEO .seo-limit-toggler").on("click", function() {
  232.           	$(this).toggleClass("on");
  233.             if ( $(this).hasClass("on") ) {
  234.             	localStorage.setItem("SEO-limit-active",true);
  235.             } else {
  236.               localStorage.setItem("SEO-limit-active",false);
  237.             }
  238.           });
  239.           
  240.           if ( localStorage.getItem("SEO-limit-active") == null ) {
  241.             localStorage.setItem("SEO-limit-active", true);
  242.           } else {
  243.             if ( localStorage.getItem("SEO-limit-active") == "true" ) {
  244.               $(".seo-limit-toggler").addClass("on");
  245.             }
  246.           };
  247.           
  248.           $(".shuttle-SEO .Form-help-icon").on("mouseenter", function() {
  249.             let tooltipContent = $(this).attr("data-original-title");
  250.             let oTop = $(this).offset().top;
  251.             let oLeft = $(this).offset().left;
  252.           	$("body").append("<div class='Tooltip fade in Tooltip--top Tooltip-seo'> <div class='Tooltip-item'>"+ tooltipContent +"</div> </div>");
  253.             $(".Tooltip-seo").css({"top": oTop, "left": oLeft});
  254.           });
  255.           $(".shuttle-SEO .Form-help-icon").on("mouseleave", function() {
  256.           	$(".Tooltip").remove();
  257.           });
  258.           $(".shuttle-SEO .switchery, .shuttle-SEO .switchery small").addClass("animatable");
  259.           
  260.         }
  261.         // Documentation
  262.         if ( which == "Documentation" ) {
  263.        		addPanel();
  264.           $(".shuttle-SEO").append("<div class='shuttle-Panel-title full-width no-float'>Documentation</div><div class='doc-text'>"+ documentation +"</div>");
  265.         }
  266.         // Changelog
  267.         if ( which == "Changelog" ) {
  268.         	addPanel();
  269.           $(".shuttle-SEO").append("<div class='shuttle-Panel-title full-width no-float'>Changelog</div><div class='doc-text'> Coming soon! </div>");
  270.         }
  271.         // Import/Export
  272.         if ( which == "Import/export Settings" ) {
  273.        		addPanel();
  274.           $(".shuttle-SEO").append("<div class='shuttle-Panel-title full-width no-float'>Import / Export settings</div><div class='doc-text'> Coming soon! </div>");
  275.         }
  276.       });
  277.       $(".panel-seo .PanelNav-itemTarget[data-tab='Settings']").trigger("click");
  278.     });
  279.   };
  280.   function settingsClose() {
  281.   	let panel = $("a[data-active-id='cookies']").closest(".shuttle-Panel-inner");
  282.    	let otherLink = panel.find(".shuttle-SubNav:not(.heading-addons) .shuttle-SubNav-wrapItems .shuttle-SubNav-itemTarget");
  283.     otherLink.off("click");
  284.     otherLink.on("click", function() {
  285.       $(".heading-addons a").removeClass("is-selected");
  286.       $(".panel-seo").remove();
  287.     });
  288.     $(".shuttle-Panel--mainNav li a").off("click");
  289.     $(".shuttle-Panel--mainNav li a").on("click", function() {
  290.    		$(".heading-addons a").removeClass("is-selected");
  291.       if ( $(this).attr("data-active-id") == "settings" && $(this).hasClass("is-selected") == false ) {
  292.         console.log("Settings clicked while inactive");
  293.       	if ( $(".panel-seo").length ) {
  294.           console.log("SEO Panel existed");
  295.           setTimeout( function() {
  296.         	$(".shuttle-SubNav-itemTarget").removeClass("is-selected");
  297.           $(".settings-seo").addClass("is-selected");
  298.           }, 150);
  299.         }
  300.       }
  301.     });
  302.   };
  303.   
  304.   setInterval( function() {
  305.     if ( $(".cke:not(.affected):not([style*='z-index: 10001']):visible").length ) {
  306.   		apply( $(".cke:not(.affected):not([style*='z-index: 10001']):visible") );
  307.     }
  308.     if ( $("a[data-active-id='settings'].is-selected").length && $("a[data-active-id='cookies']").length && $(".heading-addons").length == 0 ) {
  309.       settings();
  310.     }
  311.     if ( $(".heading-addons").length && $(".settings-seo").length == 0 ) {
  312.       settingsSEO();
  313.       settingsClose();
  314.     }
  315.   }, 1000);
  316.   
  317.   
  318.   // SEO Form Element Characters
  319.   setInterval( function() {
  320.     let descs = $("textarea[name*='meta_description']:not(.affected), textarea[id^='languages']:not(.affected), input#og_description:not(.affected), input[name*='meta_title']:not(.affected), input[name*='og_title']:not(.affected), input[name*='seo_titel']:not(.affected), textarea[name*='seo_omschrijving']:not(.affected)");
  321.     descs.each( function() {
  322.       $(this).parent().attr("limit", 150);
  323.       if ( $(this).closest("form").find("input#key").length ) {
  324.         if ( $(this).closest("form").find("input#key").val().includes("title") ) {
  325.         	$(this).parent().attr("limit", 60);
  326.         }
  327.       }
  328.       if ( $(this).attr("name").includes("meta_title") || $(this).attr("name").includes("og_title") || $(this).attr("name").includes("seo_titel") ) {
  329.         $(this).parent().attr("limit", 60);
  330.       }
  331.     });
  332.     $(".seo-parent[limit='150']").attr("lowerlimit",50);
  333.     
  334.     function check() {
  335.       if ( localStorage.getItem("SEO-limit-active") == null ) {
  336.         localStorage.setItem("SEO-limit-active", true);
  337.       } else {
  338.         if ( localStorage.getItem("SEO-limit-active") == "true" ) {
  339.           $(".seo-check-toggler").addClass("on");
  340.           
  341.           const limit = parseInt( $(this).parent().attr("limit") );
  342.           const lowerLimit = parseInt( $(this).parent().attr("lowerlimit") );
  343.           $(this).parent().attr("length", $(this).val().length );
  344.           $(this).parent().addClass("seo-parent");
  345.           if ( $(this).val().includes("@") ) {
  346.             console.log("Dynamic");
  347.             $(this).closest(".seo-parent").addClass("dyn");
  348.             if ( ! $(this).val().includes("truncate(") ) {
  349.               console.log("Not Truncated");
  350.               $(this).parent().addClass("unknown").removeClass("known");
  351.             } else {
  352.               //console.log("Truncated");
  353.               //let trimmed = parseInt( $(this).val().split("truncate(")[1].substr(0,5) ); // 2 Characters Over, Should Be: ") "
  354.               let trimmed = 0;
  355.               let totalTrunc = 0;
  356.               let truncations = 0;
  357.               $(this).val().split(" ").forEach( function(val, i) {
  358.                 if ( val.substr(0,1) == "@" ) {
  359.                   //console.log( "%c" + val, "color:#B66" );
  360.                   let trunc = parseInt( val.split("truncate(")[1].substr(0,5) );
  361.                   trimmed = trimmed + trunc;
  362.                   totalTrunc = totalTrunc + trunc;
  363.                   if ( val.includes("truncate(") ) {
  364.                     truncations = truncations + 1;
  365.                   }
  366.                 } else {
  367.                   //console.log( "%c" + val, "color:#66B" );
  368.                   trimmed = trimmed + val.length;
  369.                 }
  370.                 //console.log(truncations);
  371.               });
  372.               trimmed = trimmed + ( $(this).val().split(" ").length - 1 )
  373.               $(this).parent().attr("remainder", trimmed - totalTrunc).attr("trunc", totalTrunc);
  374.               console.log( trimmed );
  375.               $(this).parent().attr("length", trimmed);
  376.               $(this).parent().removeClass("unknown").addClass("known");
  377.               if ( truncations > 1 ) { $(this).parent().addClass("multi") } else { $(this).parent().removeClass("multi") }
  378.               //if ( remainder == 0 ) { $(this).parent().removeAttr("remainder") }
  379.             }
  380.           } else {
  381.             $(this).closest(".seo-parent").removeClass("dyn known unknown");
  382.           }
  383.           if ( $(this).val().length == 0 ) { $(this).closest(".seo-parent").addClass("empty") } else { $(this).closest(".seo-parent").removeClass("empty") }
  384.  
  385.           console.log( $(this).val() );
  386.           let length = parseInt( $(this).parent().attr("length") );
  387.  
  388.           if ( length > limit ) {
  389.             $(this).parent().removeClass("tooshort").addClass("toolong");
  390.           } else if ( length < lowerLimit ) {
  391.             $(this).parent().removeClass("toolong").addClass("tooshort");
  392.           } else {
  393.             $(this).parent().removeClass("toolong tooshort");
  394.           }
  395.           console.log( $(this) );
  396.           console.log( parseInt( $(this).parent().attr("length") ) + " | " + $(this).val().length + " - " + limit + " | " +  lowerLimit );
  397.           $(this).addClass("affected");
  398.           //$(this).closest(".seo-parent.dyn[length='NaN']").removeclass("known");
  399.         }
  400.       };
  401.       
  402.     }
  403. 		descs.off("click change input");
  404.     descs.on("click change input", check);
  405.     descs.each(check);
  406. 	}, 1000);
  407.   
  408.   
  409.   let css =
  410.   ".seo-avail {border: 1px solid #7d03ab !important}"
  411.   +
  412.   ".cke_top .cke_seo .cke_button__source_icon {background-position: 0 -624px !important;}"
  413.   +
  414.   ".cke_top .cke_seo .cke_button {width: 46px !important;}"
  415.   +
  416.   ".cke_combo__styles {margin-right: 6px !important}"
  417.   +
  418.   ".cke_button_seo {width: 46px !important}"
  419.   +
  420.   ".cke_button__seo_label {display: block !important}"
  421.   +
  422.   "#cke_seo_button .cke_button__seo_icon {background: url(https://shuttle-assets-new.s3.amazonaws.com/assets/js/vendor/ckeditor/skins/moono/icons.png) no-repeat 0 -624px !important;}"
  423.   +
  424.   '.full-width {width: 100%}'
  425.   +
  426.   '.cke_toolgroup.hidden {height: 0; width: 0; opacity: 0; pointer-events: none;}'
  427.   +
  428.   '.no-float {float: unset !important}'
  429.   +
  430.   '.doc-text {margin-top: 10px; max-width: 720px; width: 60vw !important;}'
  431.   +
  432.   ".doc-text code {background: #444445; padding: 4px 6px; border: 1px solid #537488; border-radius: 4px; margin: 0 3px;}"
  433.   +
  434.   ".doc-text code em {color: #77c3f4; font-weight: 600;}"
  435.   +
  436.   ".switchery {background-color: #E2E2E2;}"
  437.   +
  438.   ".switchery.on {background-color: #359FE3 !important; border-color: #5ca1e8 !important;}"
  439.   +
  440.   ".animatable {transition: all 200ms ease-in-out 0s;}"
  441.   +
  442.   ".switchery.on small {margin-left: 20px;}"
  443.   +
  444.   ".Form-help-icon svg {height: 18px; width: 20px;}"
  445.   +
  446.   ".Tooltip-seo {transform: translateX( calc(-50% + 10px)) translateY(-100%);}"
  447.   +
  448.   '.seo-parent::after {content: attr(length) " / " attr(limit); position: absolute; bottom: 0; left: 0; transform: translateY(100%); font-size: 15px;}'
  449.   +
  450.   '.seo-parent.toolong::after, .seo-parent.tooshort:not(.unknown)::after, .seo-parent.empty[lowerlimit]::after, .seo-parent.empty[length="0"] {color: #F14949;}'
  451.   +
  452.   '.seo-parent.unknown::after {content: "? / " attr(limit)}'
  453.   +
  454.   '.seo-parent.known::after, .seo-parent.known.multi[trunc="NaN"]::after {content: "Truncated to: " attr(length) " / " attr(limit)}'
  455.   +
  456.   '.seo-parent.known.multi::after {content: "Truncated to " attr(trunc) " (+" attr(remainder) ") : " attr(length) " / " attr(limit)}'
  457.   +
  458.   '.seo-parent.known:not(.multi):not([remainder="0"])::after {content: "Truncated to " attr(trunc) " (+" attr(remainder) ") : " attr(length) " / " attr(limit)}'
  459.   +
  460.   '.seo-parent.unknown[length="NaN"]::after, .seo-parent.known[length="NaN"]::after, .seo-parent.dyn:not(.known)::after, .seo-parent.dyn.known[length="NaN"] {content: "? / " attr(limit) !important;}'
  461.   +
  462.   '.seo-parent.unknown:not([length="NaN"]):not(.dyn)::after {content: attr(length) " / " attr(limit) !important;}';
  463.   
  464.   
  465.   $("head").append("<style class='seo-master' type='text/css'></style>");
  466.   $(".seo-master").html( css );
  467. });
  468.