Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Gumb za tiskanje lekcij na Zmaga.com
Avtor: sasko.123 | Objavljeno: dne 22. september 2012, 12:09
  Pokazal vam bom, kako z uporabo razširitve Tampermonkey v brskalniku Google Chrome dodati gumb za tiskanje lekcij na Zmaga.com.
 
 
1
  
 
Za dodajanje gumba bomo uporabili dodatek za Google Chrome Tampermonkey. Če ga še nimate si ga lahko prenesete iz Chrome Web Store.

Postopek za Greasemonkey bom povedal na koncu lekcije.
 
 
2
  
 
Kliknite na gumb razširitve in izberite Add a new script.
 
 
3
  
 
Odpre se vam novo okno v katerem je že nekaj kode. Ne potrebujemo je, zato jo izbrišite in prilepite to kodo:

// ==UserScript==
// @name        Zmaga.com natisni lekcijo test
// @version     1.0
// @description enter something useful
// @include     *zmaga.com/content.php*
// @include     *zmaga.si/content.php*
// @copyright   Keep-tube, sasko.123
// ==/UserScript==

var local_version = '1.0';

var vars = {};

var zmprintIcon = 'http://www.zmaga.com/slike/logotip.jpg';

var url = encodeURIComponent(document.URL);

var position = url.indexOf("id%3D");
   
var lekcija = position + 5;

var stevilo = url.slice(lekcija)

var printurl = 'http://www.zmaga.com/program_ucenje_print.php?id=' + stevilo;

addDownloadBox();;

function addDownloadLink(){
    var link =' [ <a href="' + printurl + '" title="Natisni lekcijo"><img src="' + zmprintIcon + '" alt="" valign="middle"/></a> ]';
    var title = document.getElementById("watch-headline-title").innerHTML.replace("</h1>",link+"</h1>");
    document.getElementById("watch-headline-title").innerHTML = title;
}

function addDownloadBox() {
   

    var styles = [
        '#zmprintBox {position: fixed; left: 5px; bottom: 5px; z-index: 1000;opacity: 0.95;}',
        '#zmprintBox a {font-size:11px;font-family:Verdana;font-weight:bold;color:#20464F !important;text-align:center;outline:none;background-color: #DFF1FD;border:1px solid #B6D9EE;padding:4px;display:block;text-decoration:none;}',
        '#zmprintBox a:hover {border:1px solid #003E4F;background-color:#006885;color:#FFFFFF !important;text-decoration:none;}',
        '#zmprintBox img, #zmprintBox a:hover img {background:none;margin:0px;padding:0px;border:none;vertical-align:middle}'
    ];
   
    GM_addStyle(styles.join("\r\n"));

    var downloadBox = document.createElement('div');
    document.body.appendChild(downloadBox);
   
    downloadBox.id = 'zmprintBox';
    downloadBox.innerHTML = '<a title="Natisni lekcijo" target="_blank" href="' + printurl + '"><img src="' + zmprintIcon + '" width="16" height="13" /> Natisni lekcijo</a>';
}
 
 
4
  
 
Sedaj jo še shranimo in že deluje!

Koda zaenkrat še ne deluje na zmaga.si, jo bom pa kmalu popravil da bo delovala in jo objavil na forumu.
 
 
5
  
 
Če uporabljate Mozilla Firefox si poglejte to lekcijo,
le da pri 4. koraku izbrišete vso kodo in prilepite zgornjo.
 
 
6
  
 
Prvotna koda je last Keep-Tube, jaz sem jo samo malo spremenil.
 
 
Komentiraj
  
 
 
 
 
22.9.2012, 13:32
Po postopku namestim, ampak po namestitvi mi normalno prikaže gumb, ko pa ga stisnem mi samo odpre nov zavihek z stranjo zmaga.com (home page). Uporabljam Google Chrome.
 
 
 
 
22.9.2012, 23:13
V kodi je bila malenkostna napaka, tako da je delovalo samo na http://zmaga.com, na http://www.zmaga.com pa skripta ni delovala.

Sedaj je koda popravljena, tako da deluje povsod.
 
 
 
 
25.9.2012, 14:28
Podtalje, hvala za popravek!
In še koda ki deluje na zmaga.si:
http://dl.dropbox.com/u/62253368/code.tx....

changed: sasko.123 (25.9.2012, 15:55)
 
 
 
 
27.9.2012, 19:29
Se opravičujem za dvojni post, ampak pravkar sem odkril napako in sicer koda ne deluje če klikneš na lekcijo ki je na dnu strani zraven oglasov.
 
 
 
 
27.9.2012, 20:20
Ja, problem je, ker je URL v tem primeru malenkost drugačen.

Drugače pa ni najboljša praksa, da se zanašaš na točno določen URL in na točno določeno mesto v URL-ju.
Precej boljša rešitev je, če dejansko v URL-ju poiščeš ID.

To se da v javascriptu zelo enostavno narediti z regularnimi izrazi na naslednji način:
var patt1 = /id=(.+)/;
id=str.match(patt1)[1];
 
 
 
 
27.9.2012, 21:00
Sem popravil in sedaj je na zgornjem linku koda ki preverjeno deluje na vseh povezavah.
 
 
 
 
28.9.2012, 12:39
Sem posodobil kodo tudi na strani lekcije.
 
 
 
 
14.12.2013, 11:11
Če kdo to uporablja pa sem sedaj kodo posodobil da se barve bolj skladajo z novo barvo http://userscripts.org/scripts/show/1861....
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com