I am studying at the Open Universiteit in the Netherlands and today they have launched a new website.
The order of the tiles is not how I would like to have them, so let’s fix that…
—
See the old layout
and the all shiny new layout .
—
I have created the following userscript, so if you want to use it enjoy.
// ==UserScript==
// @name Shuffle tiles
// @namespace http://tampermonkey.net/
// @version 0.1
// @description shuffle tiles
// @author simonbosman@gmail.com
// @match https://mijn.ou.nl/web/ou/home
// @grant none
// ==/UserScript==
var bootstrap = function ( evt ){
if ( evt . target . readyState === " complete " ) { setTimeout ( shuffle , 1000 ); }
};
document . addEventListener ( ' readystatechange ' , bootstrap , false );
function shuffle () {
var tiles = document . getElementsByClassName ( ' v-gridlayout-slot ' );
var tileFirstOrg = Array . prototype . filter . call ( tiles , function ( tile ) {
return tile . innerHTML === ' <div class="v-ddwrapper v-widget v-has-width" style="width: 100%;"><div class="v-link v-widget"><a href="http://oustatus.nl/" target="_target"><img class="v-icon" src="https://mijn.ou.nl/html/VAADIN/themes/usertiles/img/oustatus.png"><span></span></a></div></div> ' ;
});
var tileSecondOrg = Array . prototype . filter . call ( tiles , function ( tile ) {
return tile . innerHTML === ' <div class="v-ddwrapper v-widget v-has-width" style="width: 100%;"><div class="v-link v-widget"><a href="http://studieplaza.ou.nl" target="_target"><img class="v-icon" src="https://mijn.ou.nl/html/VAADIN/themes/usertiles/img/studieplaza.png"><span></span></a></div></div> ' ;
});
var tileThirthOrg = Array . prototype . filter . call ( tiles , function ( tile ) {
return tile . innerHTML === ' <div class="v-ddwrapper v-widget v-has-width" style="width: 100%;"><div class="v-link v-widget"><a href="https://www.ou.nl/" target="_target"><img class="v-icon" src="https://mijn.ou.nl/html/VAADIN/themes/usertiles/img/ou.png"><span></span></a></div></div> ' ;
});
var tileFirstNew = Array . prototype . filter . call ( tiles , function ( tile ) {
return tile . innerHTML === ' <div class="v-ddwrapper v-widget v-has-width" style="width: 100%;"><div class="v-link v-widget"><a href="https://youlearn.ou.nl/c/portal/login" target="_blank"><img class="v-icon" src="https://mijn.ou.nl/html/VAADIN/themes/usertiles/img/youlearn.png"><span></span></a></div></div> ' ;
});
var tileSecondNew = Array . prototype . filter . call ( tiles , function ( tile ) {
return tile . innerHTML === ' <div class="v-ddwrapper v-widget v-has-width" style="width: 100%;"><div class="v-link v-widget"><a href="https://studienet.ou.nl" target="_blank"><img class="v-icon" src="https://mijn.ou.nl/html/VAADIN/themes/usertiles/img/studienet.png"><span></span></a></div></div> ' ;
});
var tileThirthNew = Array . prototype . filter . call ( tiles , function ( tile ) {
return tile . innerHTML === ' <div class="v-ddwrapper v-widget v-has-width" style="width: 100%;"><div class="v-link v-widget"><a href="https://login.ou.nl/SSO/user/StudiemailSelect" target="_blank"><img class="v-icon" src="https://mijn.ou.nl/html/VAADIN/themes/usertiles/img/studiemail.png"><span></span></a></div></div> ' ;
});
try {
var swap1 = tileFirstOrg [ 0 ]. innerHTML ;
var swap2 = tileSecondOrg [ 0 ]. innerHTML ;
var swap3 = tileThirthOrg [ 0 ]. innerHTML ;
tileFirstOrg [ 0 ]. innerHTML = tileFirstNew [ 0 ]. innerHTML ;
tileSecondOrg [ 0 ]. innerHTML = tileSecondNew [ 0 ]. innerHTML ;
tileThirthOrg [ 0 ]. innerHTML = tileThirthNew [ 0 ]. innerHTML ;
tileFirstNew [ 0 ]. innerHTML = swap1 ;
tileSecondNew [ 0 ]. innerHTML = swap2 ;
tileThirthNew [ 0 ]. innerHTML = swap3 ;
var notify = document . querySelector ( " div.v-verticallayout.v-layout.v-vertical.v-widget.dashboard.v-verticallayout-dashboard.v-has-width " );
notify . style . display = ' none ' ;
}
catch ( e ) {
console . log ( e );
}
}