Skip to content

Instantly share code, notes, and snippets.

@theluk

theluk/loader.js

Last active December 26, 2015 10:19
Show Gist options
  • Save theluk/7135416 to your computer and use it in GitHub Desktop.
Save theluk/7135416 to your computer and use it in GitHub Desktop.
Download ZIP
we are migrating, just a few tips for our content writers.
Raw
readme.md

Dieses Tool ermöglicht euch Stellen zu markieren, die mit dem neuen Style eventuell nicht kompatibel sind. Generell ist das Problem die Headings. Nicht nur dass sie SEO technisch schlecht sind, sondern sie werden auch im neuen Style teilweise riesig dargestellt.

Es gibt Stellen, bei denen das Script rät, Headings auszutauschen. Wenn diese aber vom System generiert werden, braucht ihr euch nicht darum zu kümmern.

Ihr könnt zwischen WARNING und ERROR unterscheiden (braun und rot).

Um das script nutzen zu können würde es sich empfehlen

  1. Legt einen neuen Bookmark an und benennt ihn z.B. nach "Migration Info"
  2. als URL gibt ihr nicht einen link ein, sondern folgendes Script
    javascript:(function(){var ht = document.createElement('script');ht.type='text/javascript';ht.src = 'https://gist.github.com/theluk/7135416/raw/d33a0bde05eeab38ebbfedf09328a8d07d4123e5/main.js';var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ht, s);})();
  1. Danach einfach auf irgendeine miBaby Seite gehen (Landingpages)
  2. Wenn die Seite geladen hat, auf den neu erstellten Bookmark klicken!
Raw
loader.js
(function(){
var ht = document.createElement('script');
ht.type='text/javascript';
ht.src = 'https://gist.github.com/theluk/7135416/raw/d33a0bde05eeab38ebbfedf09328a8d07d4123e5/main.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ht, s);
})();
Raw
main.js
(function() {
var definitions = [
{
finder : "h1 > strong, h2 > strong, h3 > strong, h4 > strong, h5 > strong",
focus : function($el) { return $el.parent(); },
caption : function($el) { return "Heading (" + $el.get(0).tagName + ") has a <strong> Tag!" },
state : "warning"
},
{
finder : ".contentBox h1, .contentBox h2",
focus : function($el) {return $el},
caption : function($el) {return "It is generally better not to use H1 and H2. Change it where you can."}
},
{
finder : "h1:not(:first)",
focus : function($el) {return $el},
caption : function($el) {return "Use only ONE H1 per page"},
state : "error"
},
{
finder : "h1.journal, h2.journal, h3.journal, h1 .journal, h2 .journal, h3 .journal",
focus : function($el) {return $el},
caption : function($el) {return "Try not to use Journal H1, H2, H3 as they will be huge..."},
state : "warning"
},
{
finder : ".col_4x4 h1, .col_4x4 h2, .col_4x4 h3",
focus : function($el) {return $el},
caption : function($el) {return "DONT use h1,h2,h3 in slim columns!"},
state : "error"
},
{
finder : function() {
return $('p').filter(function() {
var $this = $(this);
if($this.html().replace(/\s|&nbsp;|\<br\>|\<br\/\>/g, '').length == 0)
return true;
return false;
});
},
focus : function($el) {return $el},
caption : function() {return "Empty Paragraph (new styles will get extra margin to paragraphs)"},
state : "warning"
},
{
finder : ".col_4x4 .list.list-normal",
focus : function($el) {return $el},
caption : function($el) {return "Remove class 'list-normal' in slim columns from UL as it looks better"},
state : "warning"
}
];
//execute
run();
function run() {
var i=0,
len = definitions.length,
definition,
$els,
elementsWithErrors = [];
for (;i < len;i++) {
definition = definitions[i];
$els = $.isFunction(definition.finder) ? definition.finder() : $(definition.finder);
$els.each(function() {
var focused = definition.focus($(this));
var obj = null;
if (elementsWithErrors.indexOf(focused.get(0)) == -1) {
obj = {errors : []};
focused.data("migration-errors", obj);
elementsWithErrors.push(focused.get(0));
} else {
obj = focused.data("migration-errors");
}
obj.errors.push({state : definition.state, message : definition.caption(focused)});
});
}
renderAll(elementsWithErrors);
}
function renderAll(elements) {
var i=0,len=elements.length;
for (;i<len;i++) {
var $el = $(elements[i]);
var data = $el.data("migration-errors").errors;
for (var i2=0;i2<data.length;i2++) {
render($el, data[i2].state, data[i2].message);
}
}
}
function render($target, state, message) {
var color = state == "warning" ? "brown" : "red;"
$target.css("border", "1px solid red");
$('<div style="background-color:'+color+';color:white;font:9px Verdana;">')
.css("maxWidth", (parseInt($target.outerWidth(true)) + "px"))
.css("margin", "1px 0")
.insertAfter($target)
.text(message)
.position({
my : "left top",
at : "left top",
of : $target
});
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment