Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add bar mode for the clippy haters. JSHintd code.
  • Loading branch information
rixth committed Mar 20, 2011
1 parent 8b4b2b3 commit f117eb2
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 27 deletions.
9 changes: 7 additions & 2 deletions README.md
@@ -1,7 +1,12 @@
Install it, and bask in His glory.

## [Click here to install](https://github.com/downloads/rixth/jsbeautify-for-chrome/jsbeautify-for-chrome.crx)
* [Click here to install with Clippy](https://github.com/downloads/rixth/jsbeautify-for-chrome/jsbeautify-for-chrome-with-clippy.crx)
* [Click here to install without Clippy](https://github.com/downloads/rixth/jsbeautify-for-chrome/jsbeautify-for-chrome-without-clippy.crx)

![screenshot](http://i.imgur.com/rJEg1.png)
![screenshot with clippy](http://i.imgur.com/rJEg1.png)

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).
57 changes: 54 additions & 3 deletions css/application.css
@@ -1,3 +1,7 @@
/**
* CSS for Clippy mode
*/

#jsb4c-clippy {
background-color: transparent;
background-repeat: no-repeat;
Expand All @@ -15,7 +19,7 @@
right: 10px;
}

#jsb4c-yes, #jsb4c-no {
#jsb4c-clippy #jsb4c-yes, #jsb4c-clippy #jsb4c-no {
font-size: 13px;
font-family: "Arial", sans-serif;
display: block;
Expand All @@ -28,12 +32,59 @@
cursor: pointer;
}

#jsb4c-yes {
#jsb4c-clippy #jsb4c-yes {
margin-left: 10px;
width: 90px;
}

#jsb4c-no {
#jsb4c-clippy #jsb4c-no {
margin-left: 13px;
width: 95px;
}

/**
* CSS for bar mode
*/

#jsb4c-bar {
height: 22px;
position: fixed;
top: -40px;
left: 0;
width: 100%;

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(250,233,167)),
color-stop(1, rgb(254,243,197))
);
border-bottom: 1px solid #8e8e8e;

-webkit-transition-property: top;
-webkit-transition-duration: 0.5s;

padding-top: 10px;
padding-left: 10px;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 12px;
}

#jsb4c-bar.jsb4c-visible {
top: 0;
}

#jsb4c-bar #jsb4c-no {
display: block;
height: 32px;
width: 32px;
float: right;
text-indent: -9999px;

margin: -10px 10px 0 0;

background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
}
Binary file added img/close-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 42 additions & 22 deletions js/application.js
@@ -1,55 +1,75 @@
/*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*/

(function () {
if (!location.href.match(/\.js(?:\?|$)/)) {
if (!location.href.match(/\.js(?:\?|$)/) || document.body.querySelectorAll('*').length !== 1) {
return;
}

var clippy = document.createElement('div'),
yes = document.createElement('a'),
var notification = document.createElement('div'),
no = document.createElement('a'),
autoHideInterval,
secondsTillHide = 4;
secondsTillHide = 4,
useClippy = true,
formatConfirmElement,
yes;

clippy.id = 'jsb4c-clippy';
clippy.style.backgroundImage = 'url(' + chrome.extension.getURL("img/its-clippy-motherfuckers.png") + ')';

yes.id = 'jsb4c-yes';
yes.appendChild(document.createTextNode('Yes'));
notification.id = 'jsb4c-' + (useClippy ? 'clippy' : 'bar');

no.id = 'jsb4c-no';
no.appendChild(document.createTextNode('No (' + secondsTillHide + ')'));

clippy.appendChild(yes);
clippy.appendChild(no);
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);

document.body.appendChild(clippy);

setTimeout(function () {
clippy.className = 'jsb4c-visible';
}, 350);

no.addEventListener('click', function (event) {
clippy.className = '';
gtfoClippy();
event.preventDefault();
event.stopPropagation();
}, false);

yes.addEventListener('click', function (event) {
formatConfirmElement.addEventListener('click', function (event) {
var code = document.getElementsByTagName('pre')[0];
code.textContent = js_beautify(code.textContent);

clippy.className = '';
gtfoClippy();
event.preventDefault();
event.stopPropagation();
}, false);

function gtfoClippy() {
notification.className = '';
setTimeout(function () {
notification.parentNode.removeChild(notification);
}, 1000);
}

setTimeout(function () {
notification.className = 'jsb4c-visible';
}, 350);

// Auto timer to make clippy go away
autoHideInterval = setInterval(function () {
if (secondsTillHide <= 0) {
clippy.className = '';
gtfoClippy();
clearInterval(autoHideInterval);
} else {
no.innerHTML = no.innerHTML.replace(/\d/, secondsTillHide);
}
secondsTillHide--;
}, 1000);
}());
}());

0 comments on commit f117eb2

Please sign in to comment.