User:Zhaofeng Li/Scratchpad.js

// Scratchpad - A sandbox in your browser // by Zhaofeng Li // Code is very ugly, I know. :D

var scratch_var_curtab = ''; // contains a guid // from http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript function scratch_guid_s4 { return Math.floor((1 + Math.random) * 0x10000) .toString(16) .substring(1); }; function scratch_guid { return scratch_guid_s4 + scratch_guid_s4 + '-' + scratch_guid_s4 + '-' + scratch_guid_s4 + '-' + scratch_guid_s4 + '-' + scratch_guid_s4 + scratch_guid_s4 + scratch_guid_s4; } function scratch_ui_setup { // call scratch_setup instead $( "#mw-content-text" ).prepend( "\ \   \       \          x\          \       \       \       \           +\           ?\           fork\           preview\           rename</li>\       </ul>\    \ <div id='scratch-body' style='padding:10px;border:1px solid rgba(0,0,0,0.2);border-radius:5px;background:rgba(0,0,0,0.2);min-height:100px;'>\ <textarea id='scratch-textarea' style='min-height:500px;border:0;border-radius:3px;'> \ \ \   " );    var height = $( "#scratch" ).height;    $( "#scratch" ).css( { 'opacity':'0', 'height':'0' } ); // hide it from view for now    $( ".scratch-controls li" ).css( { 'cursor':'pointer', 'display':'inline', 'background':'#999', 'border-radius':'3px', 'padding':'2px 5px' } );    $( ".scratch-controls li a" ).css( { 'color':'white' } );    $( "#scratch-top a" ).css( { 'color':'rgba(0,0,0,0.8)' } )    $( "#scratch-teardown" ).click( scratch_teardown );    $( "#scratch-prefs" ).click( function {        $( "#scratch-body" ).append( " Preferences <button id='scratch-prefs-close'>Close <button id='scratch-prefs-reset'>Reset Scratchpad " );        scratch_ui_scrollTo( "#scratch-prefs-area" );        $( "#scratch-prefs-close" ).click( function {            $( "#scratch-prefs-area" ).remove;            scratch_ui_scrollTo( "#scratch" );        } );        $( "#scratch-prefs-reset" ).click( function { // remove everything if( confirm( "Doing this will delete all tabs by clearing the Scratchpad storage. This is *irreversible*! Do you want to continue?" ) ) {               scratch_teardown; var del = 0; for ( var i = localStorage.length - 1; i >= 0; i-- ) { if ( localStorage.key( i ).substring( 0, 8 ) == "scratch_" ) { console.log( "Removed " + localStorage.key( i ) ); localStorage.removeItem( localStorage.key( i ) ); del++; }               }                alert( "Reset complete. " + del + " items removed from localStorage. Click the toolbox link to start a fresh Scratchpad." ); }       } );    } );    $( "#scratch-newtab" ).click( function {        scratch_storage_newTab( scratch_guid, "New tab", "" );        scratch_ui_refreshTabs;    } ); $( "#scratch-help" ).click( function{       var guid = scratch_guid;        scratch_storage_newTab( guid, "Help", "\

Basic wikitext
\n\ italic bold strike insert \n\ link caption\n\ \n\ \n\

Scratchpad
\n\
 * [+]: Create a new tab\n\
 * [?]: Show help information\n\
 * [fork]: Create a new tab with current page's source\n\
 * [preview]: Preview the tab\n\

Welcome to Scratchpad!
\n\ Want to try out a new template quickly without sandboxes? Want to keep a track of your patrol progress? Want to have a lot of sandboxes but don't want get your userspace messy? Scratchpad is the answer!\n\n\ Scratchpad is a sandbox which resides entirely in your browser, saved automatically as you type. Changes are echoed between multiple pages with Scratchpad opened in your browser. You can create multiple tabs, experiment with wikitext, preview and delete them, without making any changes to the actual wiki.\n\

Try it out!
\n\ Everything you expect from a normal sandbox is here. Italic, bold, strike, links and all other magic works on Scratchpad. Hit Preview and see it for yourself!\n\ \n\n\ You can even use template subsitutions and signatures! Try them out!\n\n\ Open another browser tab, fire up Scratchpad and change this line - does the other one reflect the changes?\n\n\

Before you continue...
\n\ Remember that your Scratchpad is visible to all other scripts and sent to the server every time you use preview. It's not completely private.\n\

Any suggestions?
\n\ If you have any suggestions, please send them to User talk:Zhaofeng Li, Scratchpad's maker.\n\ \n\ Enjoy Scratchpad!\n\ " );   }    scratch_ui_refreshTabs;    // listen for storage changes    $( window ).bind( 'storage', scratch_storage_listener ); } function scratch_storage_listener( event ) { // storage update event    console.log( "Storage event catched!" );    event = event.originalEvent; // remove jquery's wrapper    key = event.key.substring( 8 ); // get the part after "scratch_"    if ( key == "tabs" ) { // the tablist has changed        scratch_ui_refreshTabs;    } else { // one of the tabs has changed        guid = key.substring( 4 ); // get the part after "tab_"        if ( guid == scratch_var_curtab ) { // that's what we are looking at as well!            scratch_ui_selectTab( guid ); // refresh the tab content        }    } } function scratch_setup {    $( scratch_var_portlet ).hide;    scratch_ui_setup;    console.log( "Scratchpad is starting..." );    if ( typeof( localStorage ) == "undefined" ) { console.log( "No Web Storage support! Aborting..." ); $( "#scratch-body" ).append( "Failed to initialize storage! Scratchpad needs HTML5 Web Storage support to work, try changing to a newer browser. Sorry about that." ); return; }   scratch_storage_init; } function scratch_teardown { console.log( "Scratchpad is closing down..." ); // remove listeners $( window ).unbind( 'storage', scratch_storage_listener ); scratch_ui_teardown; // remove the ui   $( scratch_var_portlet ).show; }

// Add portlet link var scratch_var_portlet = mw.util.addPortletLink( "p-tb", "#", "Scratchpad"); $( scratch_var_portlet ).click( scratch_setup );