Permalink
Browse files

Options page to allow users to enable/disable Clippy themselves.

  • Loading branch information...
1 parent 33f928a commit f565561a5fb2c1f0f655c8b8922bf92e266d4d39 @rixth committed Apr 24, 2011
Showing with 227 additions and 64 deletions.
  1. +3 −1 README.md
  2. +11 −0 background.html
  3. BIN img/jsb-logo-128.png
  4. BIN img/jsb-logo-48.png
  5. +67 −62 js/application.js
  6. +18 −0 js/background.js
  7. +7 −1 manifest.json
  8. +121 −0 options.html
View
@@ -9,4 +9,6 @@ If you haven't got the love for Clippy, you can use an alert bar instead.
![screenshot without clippy](http://i.imgur.com/ZhXnX.png)
-Uses [JSBeautify](http://jsbeautifier.org).
+Uses [JSBeautify](http://jsbeautifier.org).
+
+A big thanks to [Clement Ng](http://clmnt.com) for the logo.
View
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title></title>
+ <script src="js/background.js"></script>
+</head>
+<body>
+
+</body>
+</html>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,75 +1,80 @@
/*jshint browser: true, jquery: true, indent: 2, white: true, curly: true, forin: true, noarg: true, immed: true, newcap: false, noempty: true, nomen: true, eqeqeq: true, undef: true*/
-/*globals chrome, js_beautify*/
+/*globals chrome, js_beautify, localStorage*/
(function () {
if (!location.href.match(/\.js(?:\?|$)/) || document.body.querySelectorAll('*').length !== 1) {
return;
}
- var notification = document.createElement('div'),
- no = document.createElement('a'),
- autoHideInterval,
- secondsTillHide = 4,
- useClippy = true,
- formatConfirmElement,
- yes;
-
- notification.id = 'jsb4c-' + (useClippy ? 'clippy' : 'bar');
-
- no.id = 'jsb4c-no';
- no.appendChild(document.createTextNode('No (' + secondsTillHide + ')'));
-
- if (useClippy) {
- yes = document.createElement('a');
- yes.id = 'jsb4c-yes';
- yes.appendChild(document.createTextNode('Yes'));
-
- notification.style.backgroundImage = 'url(' + chrome.extension.getURL("img/its-clippy-motherfuckers.png") + ')';
- notification.appendChild(yes);
- formatConfirmElement = yes;
- } else {
- notification.appendChild(document.createTextNode('This looks like a JavaScript file. Click this bar to format it.'));
- no.style.backgroundImage = 'url(' + chrome.extension.getURL("img/close-icon.png") + ')';
- formatConfirmElement = notification;
- }
-
- notification.appendChild(no);
- document.body.appendChild(notification);
-
- no.addEventListener('click', function (event) {
- gtfoClippy();
- event.preventDefault();
- event.stopPropagation();
- }, false);
-
- formatConfirmElement.addEventListener('click', function (event) {
- var code = document.getElementsByTagName('pre')[0];
- code.textContent = js_beautify(code.textContent);
+ chrome.extension.sendRequest({method: "getOptions"}, function(options) {
+ console.log(options);
+ var notification = document.createElement('div'),
+ no = document.createElement('a'),
+ autoHideInterval,
+ secondsTillHide = 4,
+ useClippy = options.useClippy,
+ formatConfirmElement,
+ yes;
- gtfoClippy();
- event.preventDefault();
- event.stopPropagation();
- }, false);
-
- function gtfoClippy() {
- notification.className = '';
- setTimeout(function () {
- notification.parentNode.removeChild(notification);
- }, 1000);
- }
+ notification.id = 'jsb4c-' + (useClippy ? 'clippy' : 'bar');
+
+ no.id = 'jsb4c-no';
+ no.appendChild(document.createTextNode('No (' + secondsTillHide + ')'));
+
+ if (useClippy) {
+ yes = document.createElement('a');
+ yes.id = 'jsb4c-yes';
+ yes.appendChild(document.createTextNode('Yes'));
+
+ notification.style.backgroundImage = 'url(' + chrome.extension.getURL("img/its-clippy-motherfuckers.png") + ')';
+ notification.appendChild(yes);
+ formatConfirmElement = yes;
+ } else {
+ notification.appendChild(document.createTextNode('This looks like a JavaScript file. Click this bar to format it.'));
+ no.style.backgroundImage = 'url(' + chrome.extension.getURL("img/close-icon.png") + ')';
+ formatConfirmElement = notification;
+ }
+
+ notification.appendChild(no);
+ document.body.appendChild(notification);
+
+ no.addEventListener('click', function (event) {
+ gtfoClippy();
+ event.preventDefault();
+ event.stopPropagation();
+ }, false);
+
+ formatConfirmElement.addEventListener('click', function (event) {
+ var code = document.getElementsByTagName('pre')[0];
+ console.log(options.jsbeautify);
+ code.textContent = js_beautify(code.textContent, options.jsbeautify);
- setTimeout(function () {
- notification.className = 'jsb4c-visible';
- }, 350);
-
- // Auto timer to make clippy go away
- autoHideInterval = setInterval(function () {
- if (secondsTillHide <= 0) {
gtfoClippy();
+ event.preventDefault();
+ event.stopPropagation();
+ }, false);
+
+ function gtfoClippy() {
clearInterval(autoHideInterval);
- } else {
- no.innerHTML = no.innerHTML.replace(/\d/, secondsTillHide);
+ notification.className = '';
+ setTimeout(function () {
+ notification.parentNode.removeChild(notification);
+ }, 1000);
}
- secondsTillHide--;
- }, 1000);
+
+ setTimeout(function () {
+ notification.className = 'jsb4c-visible';
+ }, 350);
+
+ // Auto timer to make clippy go away
+ autoHideInterval = setInterval(function () {
+ if (secondsTillHide <= 0) {
+ gtfoClippy();
+ clearInterval(autoHideInterval);
+ } else {
+ no.innerHTML = no.innerHTML.replace(/\d/, secondsTillHide);
+ }
+ secondsTillHide--;
+ }, 1000);
+ });
}());
View
@@ -0,0 +1,18 @@
+var defaultOptionSet = {
+ useClippy: true,
+ jsbeautify: {
+ indent_size: 2,
+ indent_char: ' ',
+ preserve_newlines: true,
+ jslint_happy: true,
+ brace_style: 'collapse'
+ }
+};
+
+chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
+ if (request.method === 'getOptions') {
+ sendResponse(JSON.parse(localStorage.getItem('jsb4cOptions')) || defaultOptionSet);
+ } else if (request.method === 'setOptions') {
+ localStorage.setItem('jsb4cOptions', JSON.stringify(request.options));
+ }
+});
View
@@ -1,11 +1,17 @@
{
"name": "JSBeautify for Chrome",
"version": "1.0",
+ "options_page": "options.html",
+ "background_page": "background.html",
"content_scripts": [{
"js": ["js/beautify.js", "js/application.js"],
"css": ["css/application.css"],
"matches": [ "http://*/*.js*", "https://*/*.js*", "ftp://*/*.js", "file:///*.js" ],
"run_at": "document_end"
}],
- "description": "When you view a JavaScript file, Clippy will ask you if you want to format it."
+ "description": "When you view a JavaScript file, Clippy will ask you if you want to format it.",
+ "icons": {
+ "48": "img/jsb-logo-48.png",
+ "128": "img/jsb-logo-128.png"
+ }
}
View
@@ -0,0 +1,121 @@
+<html>
+<head>
+ <title>JS Beautifier options</title>
+ <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" />
+ <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
+ <style type="text/css">
+ body {
+ background: #f9f9f9;
+ }
+ .module {
+ padding: 0;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ background: white;
+ box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
+ margin: 0 auto;
+ width: 300px;
+ }
+ .module>.content {
+ padding: 10px;
+ }
+ .module .bottom{
+ background-color: #eee;
+ border-top: 1px solid #d2d2d2;
+ padding: 10px 15px;
+ font-weight: bold;
+ overflow: hidden;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ box-shadow: inset 0px 0px 0px 1px #fff;
+ }
+ .module>h1 {
+ font-size: 18px;
+ font-weight: bold;
+ margin: 10px 10px 0 10px;
+ padding: 0 0 10px 0;
+ }
+ .module>h1>img {
+ display:inline-block;
+ vertical-align:-15px;
+ margin-right:7px
+ }
+ </style>
+</head>
+<body style="padding:20px">
+
+<script type="text/javascript">
+
+var booleanSettings = ['useClippy', 'jslint_happy', 'preserve_newlines'];
+
+// Saves options to localStorage.
+function save_options() {
+ var options = {
+ useClippy: $('#useClippy').is(':checked'),
+ jsbeautify: {
+ indent_size: $('#tabsize').val(),
+ indent_char: ' ',
+ preserve_newlines: $('#preserve_newlines').is(':checked'),
+ jslint_happy: $('#jslint_happy').is(':checked'),
+ brace_style: 'collapse', //$('#brace_style').val()
+ }
+ };
+
+ if (options.jsbeautify.indent_size == 1) {
+ options.jsbeautify.indent_char = "\t";
+ }
+
+ console.dir(options);
+ chrome.extension.sendRequest({method: "setOptions", options: options});
+}
+
+// Restores select box state to saved value from localStorage.
+function restore_options() {
+ chrome.extension.sendRequest({method: "getOptions"}, function(options) {
+ $('#useClippy').attr('checked', options.useClippy);
+ $('#jslint_happy').attr('checked', options.jsbeautify.jslint_happy);
+ $('#preserve_newlines').attr('checked', options.jsbeautify.preserve_newlines);
+ // $('#brace_style').val(options.jsbeautify.brace_style);
+ $('#tabsize').val(options.jsbeautify.indent_size);
+ });
+}
+
+</script>
+
+<body onload="restore_options()">
+
+<div class="module">
+ <h1>
+ <img src="img/jsb-logo-48.png">
+ JSBeautifier for Chrome
+ </h1>
+ <div class="content">
+
+ <p>
+ <input type="checkbox" id="useClippy"> Use clippy
+ </p>
+
+ <h4>JS Beautify options</h4>
+ <input type="checkbox" id="jslint_happy"> JSLint happy<br>
+ <input type="checkbox" id="preserve_newlines"> Preserve newlines<br>
+ <select id="tabsize">
+ <option value="1">indent with a tab character</option>
+ <option value="2">indent with 2 spaces</option>
+ <option value="3">indent with 3 spaces</option>
+ <option value="4" selected="selected">indent with 4 spaces</option>
+ <option value="8">indent with 8 spaces</option>
+ </select>
+ <!-- <br>
+ <select id="brace_style">
+ <option value="collapse">Braces with control statement</option>
+ <option value="expand">Braces on own line</option>
+ <option value="end-expand">End braces on own line</option>
+ </select> -->
+ </div>
+ <div class="bottom">
+ <a href="#" onclick="save_options()">Save your settings</a>
+ </div>
+</div>
+
+</body>
+</html>

0 comments on commit f565561

Please sign in to comment.