Talk:Tutorials: Difference between revisions

From GreaseSpot Wiki
Jump to navigationJump to search
mNo edit summary
No edit summary
Line 13: Line 13:


:::: Another common term for "recipes" in this instance would be "snippets". I'm all for snippets / recipes, especially covering those that the manual missed (GM_xmlhttpRequest is especially missing snippets).
:::: Another common term for "recipes" in this instance would be "snippets". I'm all for snippets / recipes, especially covering those that the manual missed (GM_xmlhttpRequest is especially missing snippets).
// ==UserScript==
// @name          artharry Emote Plurk v.murezz 1
// @namespace      http://userscripts.org/scripts/show/39120
// @description    Easy to insert custom smiley (or emote) on Plurk.
// @include        http://www.plurk.com/*
// ==/UserScript==
// ==About Source==
// Originally from Emote Plurk v.murezz
// author: Muhammad Reza
// Email: murezz@gmail.com
// ********** Main Script ***********
var smileData = [];
smileData.push([
'jo di Emot',
'http://www.artharry.com/emoticons/',
[
'171.gif',
'172.gif',
'173.gif',
'174.gif',
'175.gif',
'176.gif',
'177.gif',
'178.gif',
'179.gif',
'180.gif',
'181.gif',
'182.gif',
'183.gif',
'184.gif',
'185.gif',
'186.gif',
'187.gif',
'188.gif',
'189.gif',
'190.gif',
'191.gif',
'192.gif',
'193.gif',
'194.gif',
'195.gif',
'196.gif',
'197.gif',
'199.gif',
'200.gif',
'201.gif',
'202.gif',
'203.gif',
'204.gif',
'205.gif',
'206.gif',
'207.gif',
'208.gif',
'209.gif',
'210.gif',
'211.gif',
'212.gif',
'213.gif',
'214.gif',
'215.gif',
'216.gif',
'217.gif',
'218.gif',
'219.gif',
'220.gif',
'221.gif',
'222.gif',
'223.gif',
'224.gif',
'225.gif'
]
]);
var isinit = false;
var currInput = null;
var rplreg = /\[(\d+) (\d+)\]/g;
var pageState = location.href.split('/')[3];
window.addEventListener('load', function()
{
    setTimeout(function()
    {
        var selImgs = document.getElementsByClassName('smily_holder');
        // bind key up event
        if(pageState == 'p')
            getById('input_permalink').addEventListener('keyup', replaceSmile, false);
        else
        {
            getById('input_big').addEventListener('keyup', replaceSmile, false);
            getById('input_small').addEventListener('keyup', replaceSmile, false);
        }
        // create tabs
        for(var i=0; i<selImgs.length; i++)
        {
            selImgs[i].setAttribute('ref', selImgs.length - i);
            selImgs[i].addEventListener('click', function()
            {
                isinit || setTimeout(init, 1000);
                currInput = pageState != 'p' ? this.getAttribute('ref') == 2 ? getById('input_big') : getById('input_small') : getById('input_permalink');
            }, false);
        }
    }, 2000);
}, false);
// init
function init()
{
    isinit = true;
    // init contents
    for(var i=0; i<smileData.length; i++)
    {
        addTab(i, smileData[i]);
    }
    // init css
    getById('emoticons_show').style.width  = '100%';
    getById('emoticons_show').style.height = '150px';
    getById('emoticons_show').style.overflow = 'auto';
}
function replaceSmile()
{
    if(rplreg.test(this.value))
        this.value = this.value.replace(rplreg, doReplace);
}
function doReplace(str, datid, smileid)
{
    arr = smileData[datid];
    if (typeof(arr) != 'undefined')
    {
        if(typeof(arr[2][smileid]) != 'undefined')
            str = ' ' + smileData[datid][1] + smileData[datid][2][smileid] + ' ';
    }
    return str;
}
function addTab(id, data)
{
    var myli = document.createElement('li');
    myli.className = 'emoticon_selecter';
    myli.innerHTML = '<a href="javascript:void 0;">'+data[0]+'</a>';
    myli.addEventListener('click', function()
    {
        addImages(this, id);
    }, false);
    getById('emoticons_tabs').getElementsByTagName('ul')[0].appendChild(myli);
}
function addImages(obj, ind)
{
    var showDiv = getById('emoticons_show');
    var lis = getById('emoticons_tabs').getElementsByTagName('li');
    for(var i=0; i<lis.length; i++)
        lis[i].className = 'emoticon_selecter';
    obj.className += ' current';
    var data = smileData[ind];
    var baseUrl = data[1];
    var str = '<div>';
str += 'by <a href="http://www.artharry.com/" target"_blank">artharry.com</a>';
    str += '</div>';
    str += '<div>';
    for(var i=0, dat = data[2], _url; i<dat.length; i++)
    {
        _url = baseUrl + dat[i];
        str += '<a href="javascript:void 0;"><img src="'+_url+'" alt="'+dat[i]+'" title="['+ind+' '+i+']"/></a>';
    }
    str += '</div>';
    showDiv.innerHTML = str;
   
    var imgs = showDiv.getElementsByTagName('img');
    for(var i=0; i<imgs.length; i++)
    {
        imgs[i].addEventListener('click', function()
        {
            currInput.value += ' ' + this.src + ' ';
            currInput.focus();
        }, false);
    }
}
function getById(oid)
{
    return document.getElementById(oid);
}

Revision as of 11:58, 16 May 2010

Perhaps we could add some "recipes", like in Dive into Greasemonkey. Stuff like "Doing something with every X". Or should we have a separate "recipes" page? --81.230.12.10 08:49, 28 March 2007 (EDT)

IMO there should be a dedicated page, if not an entire section of the site for that. Arantius 21:59, 29 March 2007 (EDT)

So you (Arantius) propose this page (Tutorials) should be strictly for linking to tutorials elsewhere, with any Recipes in another section? --81.230.12.10 04:50, 30 March 2007 (EDT)

Tutorial != Recipe. I'd love to have a tutorial on the wiki, and also recipes, but the two things are different. --Ldrhcp 10:54, 30 March 2007 (EDT)
Could you explain the difference? --81.230.12.10 12:07, 30 March 2007 (EDT)
A tutorial teaches how to write user scripts. Recipes show how to accomplish specific tasks. By this definition, I'd say the "common patterns" section of Dive Into Greasemonkey is pretty much a collection of recipes. It's a matter of general vs. specific, and the two things have different pedagogic purposes. --Ldrhcp 00:58, 31 March 2007 (EDT)
Another common term for "recipes" in this instance would be "snippets". I'm all for snippets / recipes, especially covering those that the manual missed (GM_xmlhttpRequest is especially missing snippets).

// ==UserScript== // @name artharry Emote Plurk v.murezz 1 // @namespace http://userscripts.org/scripts/show/39120 // @description Easy to insert custom smiley (or emote) on Plurk. // @include http://www.plurk.com/* // ==/UserScript==

// ==About Source== // Originally from Emote Plurk v.murezz // author: Muhammad Reza // Email: murezz@gmail.com

// ********** Main Script *********** var smileData = [];

smileData.push([ 'jo di Emot', 'http://www.artharry.com/emoticons/', [ '171.gif', '172.gif', '173.gif', '174.gif', '175.gif', '176.gif', '177.gif', '178.gif', '179.gif', '180.gif', '181.gif', '182.gif', '183.gif', '184.gif', '185.gif', '186.gif', '187.gif', '188.gif', '189.gif', '190.gif', '191.gif', '192.gif', '193.gif', '194.gif', '195.gif', '196.gif', '197.gif', '199.gif', '200.gif', '201.gif', '202.gif', '203.gif', '204.gif', '205.gif', '206.gif', '207.gif', '208.gif', '209.gif', '210.gif', '211.gif', '212.gif', '213.gif', '214.gif', '215.gif', '216.gif', '217.gif', '218.gif', '219.gif', '220.gif', '221.gif', '222.gif', '223.gif', '224.gif', '225.gif' ] ]);

var isinit = false; var currInput = null; var rplreg = /\[(\d+) (\d+)\]/g; var pageState = location.href.split('/')[3];

window.addEventListener('load', function() {

   setTimeout(function()
   {
       var selImgs = document.getElementsByClassName('smily_holder');
       // bind key up event
       if(pageState == 'p')
           getById('input_permalink').addEventListener('keyup', replaceSmile, false);
       else
       {
           getById('input_big').addEventListener('keyup', replaceSmile, false);
           getById('input_small').addEventListener('keyup', replaceSmile, false);
       }
       // create tabs
       for(var i=0; i<selImgs.length; i++)
       {
           selImgs[i].setAttribute('ref', selImgs.length - i);
           selImgs[i].addEventListener('click', function()
           {
               isinit || setTimeout(init, 1000);
               currInput = pageState != 'p' ? this.getAttribute('ref') == 2 ? getById('input_big') : getById('input_small') : getById('input_permalink');
           }, false);
       }
   }, 2000);

}, false);


// init function init() {

   isinit = true;
   // init contents
   for(var i=0; i<smileData.length; i++)
   {
       addTab(i, smileData[i]);
   }
   // init css
   getById('emoticons_show').style.width  = '100%';
   getById('emoticons_show').style.height = '150px';
   getById('emoticons_show').style.overflow = 'auto';

}

function replaceSmile() {

   if(rplreg.test(this.value))
       this.value = this.value.replace(rplreg, doReplace);

}

function doReplace(str, datid, smileid) {

   arr = smileData[datid];
   if (typeof(arr) != 'undefined')
   {
       if(typeof(arr[2][smileid]) != 'undefined')
           str = ' ' + smileData[datid][1] + smileData[datid][2][smileid] + ' ';
   }
   return str;

}

function addTab(id, data) {

   var myli = document.createElement('li');
   myli.className = 'emoticon_selecter';
   myli.innerHTML = '<a href="javascript:void 0;">'+data[0]+'</a>';
   myli.addEventListener('click', function()
   {
       addImages(this, id);
   }, false);
   getById('emoticons_tabs').getElementsByTagName('ul')[0].appendChild(myli);

}

function addImages(obj, ind) {

   var showDiv = getById('emoticons_show');
   var lis = getById('emoticons_tabs').getElementsByTagName('li');
   for(var i=0; i<lis.length; i++)
       lis[i].className = 'emoticon_selecter';
   obj.className += ' current';
   var data = smileData[ind];
   var baseUrl = data[1];

var str = '

';

str += 'by <a href="http://www.artharry.com/" target"_blank">artharry.com</a>';

str += '

'; str += '

';
   for(var i=0, dat = data[2], _url; i<dat.length; i++)
   {
       _url = baseUrl + dat[i];
       str += '<a href="javascript:void 0;"><img src="'+_url+'" alt="'+dat[i]+'" title="['+ind+' '+i+']"/></a>';
   }
str += '

';

   showDiv.innerHTML = str;
   
   var imgs = showDiv.getElementsByTagName('img');
   for(var i=0; i<imgs.length; i++)
   {
       imgs[i].addEventListener('click', function()
       {
           currInput.value += ' ' + this.src + ' ';
           currInput.focus();
       }, false);
   }

}

function getById(oid) {

   return document.getElementById(oid);

}