SU LayoutCreator

By Onyxstone Last update Sep 1, 2009 — Installed 3,004 times. Daily Installs: 0, 1, 0, 1, 1, 2, 2, 8, 3, 1, 3, 6, 0, 7, 0, 5, 0, 0, 0, 1, 6, 0, 1, 4, 10, 7, 2, 2, 3, 2, 3, 5

There are 6 previous versions of this script.

// ==UserScript==
// @name           SU LayoutCreator
// @version        1.0.0
// @namespace      http://onyxstone.stumbleupon.com/
// @description    Adds backgrounds to your stumbleupon page
// @include        http://*.stumbleupon.com/*
// @author         Onyxstone
// @license        (c)Onyxstone
// @resource css_file http://www.freewebs.com/onyxstone/Scripts/SULayoutCreator/lc_1_0_0.css
// @require   http://www.freewebs.com/onyxstone/Scripts/SULayoutCreator/lc_updater_1_0_0.js
// @require   http://www.freewebs.com/onyxstone/Scripts/SULayoutCreator/lc_ui_1_0_0.js
// @require   http://www.freewebs.com/onyxstone/Scripts/SULayoutCreator/lc_controls_1_0_0.js
// @require   http://www.freewebs.com/onyxstone/Scripts/SULayoutCreator/lc_layer_1_0_0.js


// ==/UserScript==

var $ = window.wrappedJSObject.$;
var Layers = [];
var Current_layer = null;
var z_index_start = -3;
var preset = '<ul class="submenu" style="top:0%;bottom:0%;right:0%;border:none !important;width:100%;height:900%;opacity:1.0;background: black url(\'http://i557.photobucket.com/albums/ss14/onyxstone2/gradients/Untitled.png\') repeat-y top center;z-index:-11;"></ul><ul class="submenu" style="top:0%;bottom:0%;right:0%;border:none !important;width:100%;height:900%;opacity:0.3;background: transparent url(\'http://i557.photobucket.com/albums/ss14/onyxstone2/patterns/wp_damask_257.gif\') repeat top left;z-index:-10;"></ul><br /><br /><font size="1"><a href="http://onyxstone.stumbleupon.com/review/32710977/">The Silent Room</a> by <a href="http://onyxstone.stumbleupon.com/">OnyxStone</a>|<a rel="nofollow" href="http://www.theinspirationgallery.com/">The Inspiration Gallery.</a></font>';

if( $('#blogContent')[0] && window.wrappedJSObject.stumbler ) init();

function showLC( ){
$('#layout_creator_base').toggle('slow');
}



function init() {

var h_ = $('.subnav .wrapperFlex > ul > li').attr('innerHTML');
var li_ = $('<li class="lc_li">');
li_.html( h_ );
$('.subnav .wrapperFlex > ul' ).append( li_ );
$('a', li_).html('Background').bind('click',null,showLC)[0].removeAttribute('href');



var bgcolor = window.getComputedStyle(document.body,'').backgroundColor;
var css2 = GM_getResourceText( 'css_file' );



GM_addStyle(css2)









$( document.body ).prepend( '<div id="layout_creator_base"><div id="lc_wrapper"><div id="pastetext"><textarea id="paste"></textarea><br><button id="parse_code">Submit</button></div><div id="layer_controls" class="container"></div><div id="main_controls"><div id="layer_container" class="container"></div><div id="button_container" class="container"><button id="add_layer">Add layer</button><button id="preview_code">Preview</button><button id="load_preset">Preset</button><button id="enter_preset">New Preset</button><button id="check_update">Check Updates</button><button id="submit_code">Done!</button></div></div><div class="clear" /></div></div>');

$('#layout_creator_base').hide();
 $('#pastetext').hide();
 
$('#button_container button').addClass( 'btnGreenSm' ); 

$( '#blogEntries' ).prepend('<div id="layout_creator_preview"></div>');

$( '#add_layer' ).bind('click', null, event_add_layer);
$( '#preview_code' ).bind('click', null, preview_code );
$( '#submit_code' ).bind('click', null, submit_code );
$( '#load_preset' ).bind('click', null, load_preset );
$( '#enter_preset' ).bind('click', null, enter_preset );
$( '#parse_code' ).bind('click', null, parse_code );
$( '#check_update' )[0].addEventListener('click', update, false );

LayerControls.init();

}



function update() {
  CheckVersion();
}

function enter_preset( e ) {
$('#pastetext').toggle();
}

function parse_code( e ) {
   text = $('#paste').attr('value');
   
   match = text.match(/\[\/ul\]/g );
   
   
   if( match && match.length > 0 ) 
    text = text.replace(/\]/g, '>').replace(/\[/g, '<')
   

   load_preset( e , text );
   $('#pastetext').hide('fast');
}


function preset_sort( a , b )  {
    a = a.zIndex;
    b = b.zIndex;
    return ( b - a )
}



function load_preset( e , Preset ) {
   var base = $('<div />');
    if( Preset ) base.html( Preset );
    else base.html( preset );
    
    var uls = $( 'ul.submenu' , base );

    Layers = new Array();
    
    for(var i=0;i<uls.length;i++) {
      l = new Layer( i );
      l.setHTML( uls[i] );
      Layers.push( l );
    }
    //Layers.reverse();
    Layers.sort( preset_sort );
    refresh_layers();
    LayerControls.load( Layers[0] );
    preview_code();

}

function event_add_layer () {
  var t = new Layer( Layers.length );
  Layers.reverse();
  Layers.push( t );
  Layers.reverse();
  
  Current_layer = t;
  LayerControls.main.show();
  LayerControls.load( t );
   $('#pastetext').hide();
}
function generate_code ( key ) {

  var code = '';
  
  for( i=0;i<Layers.length;i++ ) {
    code += generate_layer_code( Layers[i] , key );
  }
  
  return code;
}

function submit_code() {
  prev_value = $('#blogContent').attr('value');
  code = generate_code();
  code2 = code.replace(/\</g,'[').replace(/\>/g,']' );
  prev_value+= '\n'+code+'\n'+code2;


  $('#blogContent').attr('value', prev_value );
  $('#submit_buttom').click();

}


function preview_code() {
//GM_log( 'preview' )

  $( '#layout_creator_preview').html( generate_code ('preview') );

}

function generate_layer_code( Layer , key ) {
  
 var s = '<ul class="submenu" style="top:0%;bottom:0%;right:0%;width:100%;border:none !important;';
 
 
 
 if(key) 
  if( !Layer.visible ) s+='display:none;'
 
 
 s+='height:'+Layer.height+';';
 
 
 if( Layer.opacity < 1.00 ) s+='opacity:'+ Layer.opacity+';';
 
 background = "";
 //color
 background+= " " + Layer.bgcolor + " ";
 
 
 if( Layer.imgURL ) background += 'url(\'' + Layer.imgURL + '\') ';


  var repeat = '';
  
  if( Layer.tiling_x )  repeat = 'repeat-x'
  if( Layer.tiling_y )  repeat = 'repeat-y'
  if( Layer.tiling_x && Layer.tiling_y )  repeat = 'repeat'
  if( !Layer.tiling_x && !Layer.tiling_y ) repeat = 'no-repeat' 
  
   s+= 
   'background:' + background + ' '+ repeat + ' top ' + Layer.position + ' ;';
  
 z = -3 - Layers.indexOf( Layer );
 s+='z-index:'+ z +';'; 
 
 s+= '" ></ul>'
 

 

 
  return s;
  
}

function getHTML( node ) {
  var div = $('<div />');
  div.append(node);
  return div.attr('innerHTML');

}





function select_layer( e ) {

 for( i=0;i<Layers.length;i++) {
  if( Layers[i].id == e.data.id ) {
    Current_layer = Layers[i];
    LayerControls.main.toggle();
    LayerControls.load( Current_layer );
    $('#pastetext').hide();
    break;
    }
  }
}

function delete_layer( e ) {
  var i = Layers.indexOf( e.data );
  Layers.splice( i , 1 );
  e.data = null;
  refresh_layers();
}


function refresh_layers() {
  $('#layer_container').html('');

  for( i=0;i<Layers.length;i++) {
    if( Layers[i] )Layers[i].append( '#layer_container' );
    else  $('#layer_container').append( '<span>Layer '+ i + '  error</span>')
  }
  preview_code();
}