Styles with Options

Hey Jason and everybody else,
I'm attempting something that can't yet be done (programmatically) with Stylish: updateable custom style building. I've gotten quite far with it and updated stylish-install.js to be far more modular (and to meet my needs).

However, I'm stuck. There are two missing features that prevent me from making this work, both of which I think would be quite simple to add.
1. A new event that Stylish responds to: stylishReset. This event would simply tell Stylish to process the page again as if it were new. In my scenario I would fire it each time the user changed the CSS.
2. A unique ID per style that is separate from parameters that are passed to it. The change I would propose would be something like this:
<link rel="stylish-update-url" href="http://localhost/customstyle/css.php"/> <!-- This would serve as the UID, exists. --> <link rel="stylish-params" href="?key=value&key=value"/> <!-- These would be appended onto the URL for any request: MD5, CSS, JS -->
Having added those two things the way some of the events fired on page load will need new conditions:
1. styleAlreadyInstalled will fire if all three of the URL, parameters, and MD5 values match.
2. styleCanBeInstalled will fire if the URL (UID) does not match an existing installed style.
3. styleCanBeUpdated will fire if the URL matches an existing installed style and either the parameters are different or the MD5 value is different.
4. The styleLoadCode event should probably be deprecated. The extension should handle querying the server for the CSS code specified by the URL (UID) and parameters. Additionally, in my implementation I plan to have this up to date at all times. This would also remove the need for #stylish-code as a link element.

Thoughts? I think this is the next step for Stylish, and I'd be glad to help it get there. (And I've lots of other ideas.)
Nathan Hammond


  • HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Custom Style</title> <link rel="stylish-code" href="#stylish-code"/> <link rel="stylish-description" href="#stylish-description"/> <link rel="stylish-md5-url" href="http://localhost/customstyle/md5.php"/> <link rel="stylish-update-url" href="http://localhost/customstyle/css.php"/> <link rel="stylish-install-ping-url" href="http://localhost/customstyle/ping.php"/> <link rel="userjs-install-url" href="http://localhost/customstyle/js.php" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="stylishInstall.js"></script> <noscript><style type="text/css">.stylebuilder { display: none; }</style></noscript> </head> <body> <h1>Custom Style</h1> <p>This is an approach to allow for customizing a style.</p> <noscript><div class="error">You must have JavaScript enabled to use this site.</div></noscript> <div class="stylebuilder"> <form id="install" action="" method="post"><div> </div></form> <div id="stylish-description">My Custom Style</div> <code id="stylish-code"><?php require_once('source.php'); echo $source; ?></ code> <p><a href="#" onclick="doSomething(); return false;">Do something that rebuilds the CSS.</a></p> </div> </body> </html>
    var stylish = { installed: false, state: '', message: '', output: function(init) { if (init) { if (!stylish.installed) { // Output userjs approach. } return; } if (stylish.state != 'nothingtodo') { // Create button $('form>div').html('<input type="button" class="action" value="'+stylish.state.substring(0,1).toUpperCase()+stylish.state.substring(1)+'" />'+stylish.message); } else { // Remove button $('form>div').html(stylish.message); } }, // Stylish will fire this after the user installs or updates. process: function() { stylish.stateNTD('This style has been ' + (stylish.state == 'install' ? 'installed' : 'updated') + ' in Stylish.'); }, // Stylish will fire these on load. stateUpdate: function() { stylish.installed = true; stylish.state = 'update'; stylish.message = 'This style can be updated in Stylish.'; stylish.output(); }, stateInstall: function() { stylish.installed = true; stylish.state = 'install'; stylish.message = 'This style can be installed in Stylish.'; stylish.output(); }, stateNTD: function(message) { stylish.installed = true; stylish.state = 'nothingtodo'; stylish.message = (typeof message == 'string' ? message : 'This style is installed and up to date.'); stylish.output(); }, /* Tell Stylish what to do. */ fireEvent: function(event) { // event = ['stylishReset', 'stylishUpdate', 'stylishInstall', 'stylishCodeLoaded']; var stylishEvent = document.createEvent("Events"); stylishEvent.initEvent(event, false, false, window, null); document.dispatchEvent(stylishEvent); } }; /* Add listeners for events fired by the Stylish Extension. */ if (document.addEventListener) { document.addEventListener("styleInstalled", stylish.process, false); document.addEventListener("styleAlreadyInstalled", stylish.stateNTD, false); document.addEventListener("styleCanBeInstalled", stylish.stateInstall, false); document.addEventListener("styleCanBeUpdated", stylish.stateUpdate, false); // Fire this immediately. We're keeping the code block up to date at all times. document.addEventListener("styleLoadCode", function() { stylish.fireEvent('stylishCodeLoaded'); }, false); } /* Safe to assign globally since it uses delegation. */ $('input.action').live('click', function() { stylish.fireEvent('stylish'+this.value); }); /* Call the output even if Stylish isn't installed. */ $(window).load(function() { stylish.output(true); }); function doSomething() { /* After this function gets called I want to be able to tell Stylish to check again. */ $('#stylish-code').html('This is an updated CSS file.'); stylish.fireEvent('stylishReset'); }
  • The page's URL is currently what's used to know if a style is installed, and the code is used to tell if it needs update. I could add support for an additional link element that would be used instead of the page's URL. I think this would be all you would need to make this work. The styleLoadCode function is just there so that people don't have to download the code twice - once to see it (via Show Code on the site) and once to install it.
  • Hey, so I'm an idiot. The easiest way to make this happen is going to be for me to send you a diff which meets my needs and then we can have a conversation. I'll build it and send it your way sometime soon.

Sign In or Register to comment.