Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/CSS-Tricks/The-Printliminator.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMottie <wowmotty@gmail.com>2015-09-01 20:20:21 +0300
committerMottie <wowmotty@gmail.com>2015-09-01 20:20:21 +0300
commit25cf7a8142dab5e612268a824a72be2236927943 (patch)
treeb9a718dfac8010827a4aef3ad6c774614710d8b7
parentc399bf2ae30dccf46a5ae782e7fc74e71cf15bf2 (diff)
Remove jQuery dependency; add drag & keyboardv3.1.0
I know, this is a bad all-in-one commit. I did try to test the heck out of it!
-rw-r--r--Gruntfile.js10
-rw-r--r--README.md20
-rw-r--r--demo/images/screenshot.pngbin5870 -> 16101 bytes
-rw-r--r--index.html11
-rw-r--r--package.json6
-rw-r--r--printliminator.min.js2
-rw-r--r--printliminator.pngbin9840 -> 0 bytes
-rw-r--r--src/bookmarklet.js14
-rw-r--r--src/index.html7
-rw-r--r--src/printliminator.js921
-rw-r--r--src/printliminator.pngbin0 -> 1852 bytes
11 files changed, 773 insertions, 218 deletions
diff --git a/Gruntfile.js b/Gruntfile.js
index 9468751..e307ff9 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -15,11 +15,9 @@ module.exports = function( grunt ) {
// bookmarklet builder URLs
indexHtml : 'index.html',
production : {
- jQuery : '//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
printliminator : '//css-tricks.github.io/The-Printliminator/printliminator.min.js'
},
dev : {
- jQuery : 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js',
printliminator : 'src/printliminator.js'
},
@@ -46,10 +44,8 @@ module.exports = function( grunt ) {
globals: {
'<%= config.printliminatorFunctionName %>': false
},
- 'loopfunc': true,
- 'jquery': true,
- 'browser': true,
- 'undef': true
+ browser: true,
+ undef: true
},
files: {
src: [
@@ -102,8 +98,6 @@ module.exports = function( grunt ) {
modFile = function( mode ) {
var file = content
- // replace URLs in javascript, depending on mode
- .replace( /\{jQuery\}/, config[ mode ].jQuery )
.replace( /\{printliminator\}/, config[ mode ].printliminator )
.replace( /\"/g, "'" )
// not using encodeURI because it changes "{}" into "%7B%7D"
diff --git a/README.md b/README.md
index a3ae966..a05247c 100644
--- a/README.md
+++ b/README.md
@@ -2,23 +2,34 @@ The Printliminator is a bookmarklet with some simple tools you can use to makes
One click to activate, and then click to remove elements from the page, remove graphics, and apply better
print styling.
-![screenshot](https://cloud.githubusercontent.com/assets/136959/9445926/649cb622-4a54-11e5-9971-0782ae009a30.png)
+![screenshot](//cloud.githubusercontent.com/assets/136959/9610695/cb3e4a4c-50a0-11e5-96cb-e3e54a9c88d5.png)
[Get the Bookmarklet here](//css-tricks.github.io/The-Printliminator/)
### To Do
-* [ ] Add keyboard commands to alter the targeted element. For example:
+* [x] Add keyboard commands to alter the targeted element. For example:
* <kbd>pageUp</kbd> to select parent of hovered element
* <kbd>pageDown</kbd> to select child of hovered element (not sure what to do if the mouse moves though)
* <kbd>Enter</kbd> to hide outlined element.
* <kbd>Esc</kbd> to cancel.
-* [ ] Make Printliminator window draggable.
+* [x] Make Printliminator window draggable.
+* [x] Remove jQuery dependency.
* [ ] Add documentation to the wiki pages.
-* [ ] Remove jQuery dependency.
### Recent Changes
+#### Version 3.1.0 (9/1/2015)
+
+* Change design of popup (design by Chris Coyier); see screenshot!
+* Removed jQuery dependency; lots of internal structural changes made.
+* Add keyboard commands. See screenshot for the complete list.
+* Make popup draggable.
+* Note:
+ * This bookmarklet may still not work on some sites that have a strict Content Security directive.
+ * We are working on making this bookmarklet into a browser extension!
+ * It might be best to include both in this repository; use the bookmarklet for older browsers, or in browsers where an extension has not yet been made.
+
#### Version 3.0.0 (8/24/2015)
* Reformat code (clean up mixed tabs & spaces).
@@ -40,5 +51,6 @@ print styling.
### Credits
* By [Chris Coyier](http://chriscoyier.net) and [Devon Govett](http://devongovett.wordpress.com/).
+* Some contributions by [Rob Garrison](http://wowmotty.blogspot.com/).
* Icons by [Function](http://wefunction.com/2008/07/function-free-icon-set/).
* Print stylesheet based on [Hartija](http://code.google.com/p/hartija/).
diff --git a/demo/images/screenshot.png b/demo/images/screenshot.png
index a36e785..2797122 100644
--- a/demo/images/screenshot.png
+++ b/demo/images/screenshot.png
Binary files differ
diff --git a/index.html b/index.html
index 53327ce..b09b80c 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@ To make changes, modify the "src/index.html"
Here is the bookmarklet:</p>
<p>
- <a href="javascript:/*PRINTLIMINATOR*/!function(){function%20a(a,b){var%20c=document.createElement('script'),d=document.getElementsByTagName('head')[0],e=!1;c.type='text/javascript',c.src=a,c.onload=c.onreadystatechange=function(){e||this.readyState&&'loaded'!=this.readyState&&'complete'!=this.readyState||(e=!0,b())},d.appendChild(c)}a('//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',function(){var%20b=jQuery.noConflict();a('//css-tricks.github.io/The-Printliminator/printliminator.min.js',function(){csstricksPrintliminator(b)})})}();" id="bookmarklet" class="bookmarklet">Printliminator</a>
+ <a href="javascript:/*PRINTLIMINATOR*/!function(){function%20a(a,b){var%20c=document.createElement('script'),d=document.getElementsByTagName('head')[0],e=!1;c.type='text/javascript',c.src=a,c.onload=c.onreadystatechange=function(){e||this.readyState&&'loaded'!=this.readyState&&'complete'!=this.readyState||(e=!0,b())},d.appendChild(c)}a('//css-tricks.github.io/The-Printliminator/printliminator.min.js',function(){csstricksPrintliminator()})}();" id="bookmarklet" class="bookmarklet">Printliminator</a>
<span class="drag-arrow"><strong>&larr;</strong> drag to your bookmarks bar</span>
</p>
@@ -48,9 +48,12 @@ To make changes, modify the "src/index.html"
<h2>Credits</h2>
- <p>By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>.
+ <p>
+ By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>.
+ Some contributions by <a href="http://wowmotty.blogspot.com/">Rob Garrison</a>.
Icons by <a href="http://wefunction.com/2008/07/function-free-icon-set/">Function</a>.
- Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>.</p>
+ Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>.
+ </p>
</div>
@@ -59,7 +62,7 @@ To make changes, modify the "src/index.html"
( function() {
if ( window.location.origin === 'file://' ) {
var link = document.getElementById( 'bookmarklet' );
- link.href = "javascript:/*PRINTLIMINATOR*/!function(){function%20a(a,b){var%20c=document.createElement('script'),d=document.getElementsByTagName('head')[0],e=!1;c.type='text/javascript',c.src=a,c.onload=c.onreadystatechange=function(){e||this.readyState&&'loaded'!=this.readyState&&'complete'!=this.readyState||(e=!0,b())},d.appendChild(c)}a('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js',function(){var%20b=jQuery.noConflict();a('src/printliminator.js',function(){csstricksPrintliminator(b)})})}();";
+ link.href = "javascript:/*PRINTLIMINATOR*/!function(){function%20a(a,b){var%20c=document.createElement('script'),d=document.getElementsByTagName('head')[0],e=!1;c.type='text/javascript',c.src=a,c.onload=c.onreadystatechange=function(){e||this.readyState&&'loaded'!=this.readyState&&'complete'!=this.readyState||(e=!0,b())},d.appendChild(c)}a('src/printliminator.js',function(){csstricksPrintliminator()})}();";
document.getElementById('dev-mode').textContent = '(Dev Mode)';
}
})();
diff --git a/package.json b/package.json
index d69657b..a836162 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "printliminator",
"title": "Printliminator",
- "version": "3.0.0",
+ "version": "3.1.0",
"description": "The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.",
"author": {
"name": "Chris Coyier",
@@ -23,9 +23,7 @@
"bugs": "https://github.com/CSS-Tricks/The-Printliminator/issues",
"docs": "https://github.com/CSS-Tricks/The-Printliminator/wiki",
"demo": "https://css-tricks.github.io/The-Printliminator",
- "dependencies": {
- "jquery": "1.3.2"
- },
+ "dependencies": {},
"keywords": [
"print",
""
diff --git a/printliminator.min.js b/printliminator.min.js
index 9c85bfd..feb5e23 100644
--- a/printliminator.min.js
+++ b/printliminator.min.js
@@ -1 +1 @@
-function csstricksPrintliminator(a){var b=a.noConflict(),c=[],d={},e=("file://"===window.location.origin?"":"//css-tricks.github.io/The-Printliminator/")+"printliminator.png",f="._print_controls { position: fixed; top: 25px; right: 25px; width: 162px; height: 182px; z-index: 10000;-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;background: url("+e+") no-repeat; }._print_controls_close { position: absolute; top: -20px; right: -20px; width: 33px; height: 33px;background: url("+e+") -222px -3px no-repeat; }._print_controls_close:hover { background-position: -222px -39px; }._print_controls_remove_graphics, ._print_controls_print, ._print_controls_undo, ._print_controls_stylize {position: absolute; height: 74px; width: 74px;background: url("+e+") no-repeat; }._print_controls_remove_graphics { top: 6px; left: 6px; background-position: 0px -182px; }._print_controls_remove_graphics:hover { background-position: 0 -256px; }._print_controls_remove_graphics.active { background-position: 0 -330px; }._print_controls_print { top: 83px; left: 83px; background-position: -74px -182px; }._print_controls_print:hover { background-position: -74px -256px; }._print_controls_print.active { background-position: -74px -330px; }._print_controls_undo { top: 83px; left: 6px; background-position: -148px -182px; }._print_controls_undo:hover { background-position: -148px -256px; }._print_controls_undo.active { background-position: -148px -330px; }._print_controls_stylize { top: 6px; left: 83px; background-position: -222px -182px; }._print_controls_stylize:hover { background-position: -222px -256px; }._print_controls_stylize.active { background-position: -222px -330px; }._print_removed { display: none !important; }._printliminator_highlight { outline: 3px solid red; }@media print{ ._print_controls { display: none; } }",g='@media print, screen {body { margin:0; padding:0; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt;font-family: Garamond, "Times New Roman", serif; color: #000; background: none; font-size: 12pt; }h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; }h1 { font-size: 19pt; }h2 { font-size: 17pt; }h3 { font-size: 15pt; }h4, h5, h6 { font-size: 12pt; }code { font: 10pt Courier, monospace; }blockquote { margin: 1.3em; padding: 1em; font-size: 10pt; }hr { background-color: #ccc; }img { float: left; margin: 1em 1.5em 1.5em 0; }a img { border: none; }table { margin: 1px; text-align: left; border-collapse: collapse; }th { border: 1px solid #333; font-weight: bold; }td { border: 1px solid #333; }th, td { padding: 4px 10px; }tfoot { font-style: italic; }caption { background: #fff; margin-bottom: 20px; text-align: left; }thead {display: table-header-group; }tr { page-break-inside: avoid; }} @media screen { body { padding: 20px; } }';b('<style id="_print_controls_styles">').text(f).appendTo("head"),b("body *:not(._print_controls, ._print_controls *)").live("click",function(a){a.preventDefault();var d,e=b(this);d=a.altKey?b("body *").not("._print_controls, ._print_controls *, style").not(e.parents().andSelf()).not(e.find("*")).addClass("_print_removed"):e,d.addClass("_print_removed"),c.push(d)}).live("mouseover",function(){b(this).addClass("_printliminator_highlight")}).live("mouseout",function(){b(this).removeClass("_printliminator_highlight")});var h=b('<div class="_print_controls">').appendTo("body");"fixed"!==h.css("position")&&h.css("position","absolute"),b('<div class="_print_controls_remove_graphics">').click(function(){if(!d.removeGraphics){var a,e,f,g=[],h=b("img, iframe, object, embed, input[type=image], ins"),i=b("body *:not(._print_controls, ._print_controls *)"),j=i.length;for(a=0;j>a;a++)e=i.eq(a),f=e.css("background-image"),"none"!==f&&(g.push([e,f]),e.css("background-image","none"));h.addClass("_print_removed"),d.removeGraphics=!0,c.push(function(){d.removeGraphics=!1,h.removeClass("_print_removed");var b,c=g.length;for(a=0;c>a;a++)b=g[a][0],b.css("background-image",g[a][1])})}}).appendTo(h),b('<div class="_print_controls_stylize">').click(function(){window.print()}).appendTo(h),b('<div class="_print_controls_print">').click(function(){if(!d.stylize){var a=b('link[rel="stylesheet"], style:not(#_print_controls_styles)').remove(),e=b("body *:not(._print_controls, ._print_controls > *, ._print_removed)").map(function(){var a=b(this),c=a.attr("style");return a.attr("style",""),{el:this,style:c}}),f=b('<style id="_print_controls_printstylesheet">').text(g).appendTo("head");d.stylize=!0,c.push(function(){d.stylize=!1,f.remove(),a.appendTo("head"),e.each(function(){b(this.el).attr("style",this.style)})})}}).appendTo(h),b('<div class="_print_controls_close">').click(function(){b("._print_controls, #_print_controls_styles").remove()}).appendTo(h),b('<div class="_print_controls_undo">').click(function(){var a=c.pop();a&&("function"!=typeof a?a.removeClass("_print_removed"):a.call())}).appendTo(h),b("._print_controls_remove_graphics, ._print_controls_print, ._print_controls_undo, ._print_controls_stylize").bind("mousedown",function(){b(this).addClass("active")}).bind("mouseleave mouseup",function(){b(this).removeClass("active")})} \ No newline at end of file
+!function(){"use strict";var a={version:"3.1.0",css:{hilite:"_printliminator_highlight",fullWidth:"_printliminator_full_width",hidden:"_printliminator_hidden",stylized:"_printliminator_stylized",noSelection:"_printliminator_noSelection",stylesheet:"_print_controls_styles",controls:"_print_controls",icon:"_print_controls_icon",wrap:"_print_controls_wrap",noGraphics:"_print_controls_remove_graphics",stylize:"_print_controls_stylize",print:"_print_controls_print",close:"_print_controls_close",undo:"_print_controls_undo",drag:"_print_controls_icon_drag",keyboard:"_print_controls_keyboard"},keys:{parent1:33,parent2:38,child1:34,child2:40,nextSib:39,prevSib:37,hide:13,undo:8,fontUp:107,fontDown:109,fontReset:106,print:44,abort:27,opposite:"altKey",fullWidth:"shiftKey"},noGraphicsSelectors:"img, iframe:not(._print_controls), object, embed, audio, video, input[type=image], svg",ignoredElm:/^(br|meta|style|link|script)$/i,keyboardOpen:630,keyboardClosed:220,drag:{el:null,pos:[0,0],elm:[0,0]},init:function(){var b=document.querySelector("body");"undefined"==typeof window.csstricksPrintliminatorVars&&(window.csstricksPrintliminatorVars={history:[],flags:{}},a.addStyles()),a.addControls(),a.addEvent(b,"click",a.bodyClick),a.addEvent(b,"mouseover",a.bodyMouseover),a.addEvent(b,"mouseout",a.removeHighlight),a.addEvent(document,"keyup",a.bodyKeyUp),a.addEvent(document,"keydown",a.bodyKeyDown),a.addEvent(document,"mouseup",a.docMouseUp),a.addEvent(document,"mousemove",a.docMouseMove)},addStyles:function(){var b,c=(document.querySelector("body"),"body."+a.css.stylized+" "),d="!important;",e="@media print{ ."+a.css.wrap+"{ display: none; } }@media print, screen {"+c+'{ margin: 0; padding: 0; line-height: 1.4;word-spacing: 1.1pt; letter-spacing: 0.2pt; font-size: 12pt;font-family: Garamond, "Times New Roman", serif; color: #000; background: none; }'+c+"h1,"+c+"h2,"+c+"h3,"+c+"h4,"+c+"h5,"+c+"h6{ font-family: Helvetica, Arial, sans-serif; }"+c+"h1 { font-size: 19pt; }"+c+"h2 { font-size: 17pt; }"+c+"h3 { font-size: 15pt; }"+c+"h4, "+c+"h5,"+c+"h6 { font-size: 12pt; }"+c+"code { font: 10pt Courier, monospace; }"+c+"blockquote { margin: 1.3em; padding: 1em; font-size: 10pt; }"+c+"hr { background-color: #ccc; }"+c+"img { float: left; margin: 1em 1.5em 1.5em 0; }"+c+"a img { border: none; }"+c+"table { margin: 1px; text-align:left; border-collapse: collapse; }"+c+"th { border: 1px solid #333; font-weight: bold; }"+c+"td { border: 1px solid #333; }"+c+"th, "+c+" td { padding: 4px 10px; }"+c+"tfoot { font-style: italic; }"+c+"caption { background: #fff; margin-bottom: 20px; text-align:left; }"+c+"thead { display: table-header-group; }"+c+"tr { page-break-inside: avoid; }."+a.css.hidden+" { display: none"+d+"}."+a.css.fullWidth+" { width: 100%"+d+" min-width: 100%"+d+" max-width: 100%"+d+"margin: 0"+d+"}} @media screen {"+c+"{ padding: 20px; }."+a.css.wrap+"{ width: 375px"+d+" height: "+a.keyboardClosed+"px; position: fixed"+d+"top: 0; right: 0; z-index: 999999"+d+" border: #000 1px solid"+d+"}."+a.css.drag+"{ width: 28px"+d+"height: 20px"+d+"position: absolute"+d+" top: 0"+d+" left: 0"+d+"cursor: move"+d+"}."+a.css.wrap+" iframe { width: 375px"+d+" height: "+a.keyboardClosed+"px; border: 0"+d+"overflow-x: hidden"+d+" margin: 0"+d+" padding: 0"+d+"}body."+a.css.noSelection+",."+a.css.hilite+",."+a.css.wrap+",."+a.css.drag+",."+a.css.wrap+" iframe {-webkit-user-select: none"+d+"-moz-user-select: none"+d+" -ms-user-select: none"+d+" user-select: none"+d+"}."+a.css.hilite+"{ outline: 3px solid red"+d+"cursor: default"+d+"}."+a.css.hilite+"."+a.css.fullWidth+"{ outline-color: blue"+d+"}";b=document.createElement("style"),b.id=a.css.stylesheet,b.innerHTML=e,document.querySelector("head").appendChild(b)},addControls:function(){var b,c=document.querySelector("body"),d=document.createElement("div"),e=a.css.controls,f="."+e,g="_print_controls_button",h=a.css.icon,i="data:image/png;base64,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";c.appendChild(d),a.addClass(d,a.css.wrap),a.addClass(d,e),d.innerHTML='<iframe class="'+a.css.controls+'"></iframe><div class="'+a.css.controls+" "+a.css.drag+'"></div>',b=d.querySelector("iframe."+a.css.controls).contentWindow.document.body,b.innerHTML='<div class="'+e+'_header"><div class="'+a.css.close+" "+e+'_right">CLOSE <span class="'+h+" "+h+'_close"></span></div><div><span class="'+h+" "+a.css.drag+'"></span> DRAG</div></div><div class="'+e+'_top"><h1>The <strong>Printliminator</strong></h1><h3>Click highlighted boxes to delete</h3></div><div class="'+e+'_footer"><h3>Other Useful Superpowers</h3><ul><li class="'+g+" "+a.css.undo+'"><span class="'+h+" "+h+'_undo"></span>Undo<br>Last</li><li class="'+g+" "+a.css.stylize+'"><span class="'+h+" "+h+'_stylize"></span>Add Print<br>Styles</li><li class="'+g+" "+a.css.noGraphics+'"><span class="'+h+" "+h+'_nographics"></span>Remove<br>Graphics</li><li class="'+g+" "+a.css.print+'"><span class="'+h+" "+h+'_print"></span>Send to<br>print</li><li class="'+g+" "+a.css.keyboard+'"><span class="'+h+" "+h+'_keys"></span>Keyboard<br>Commands</li></ul><table id="'+a.css.keyboard+'" style="display:none"><thead><tr><th class="key">Key</th><th>Command</th></tr></thead><tbody><tr><td><kbd>PageUp</kbd> <span class="lower">or</span> <kbd class="bold" title="Up Arrow">&uarr;</kbd></td><td>Find wrapper of highlighted box</td></tr><tr><td><kbd>PageDown</kbd> <span class="lower">or</span> <kbd class="bold" title="Down Arrow">&darr;</kbd></td><td>Find content of highlighted box</td></tr><tr><td><kbd class="bold" title="Right Arrow">&rarr;</kbd></td><td>Find next box inside same wrapper</td></tr><tr><td><kbd class="bold" title="Left Arrow">&larr;</kbd></td><td>Find previous box inside same wrapper</td></tr><tr><td><kbd>Enter</kbd></td><td>Remove the highlighted box</td></tr><tr><td><kbd>Backspace</kbd></td><td>Undo last action</td></tr><tr><td><kbd title="Numpad Plus">Numpad <span class="bold">+</span></kbd></td><td>Increase font-size by 1</td></tr><tr><td><kbd title="Numpad Minus">NumPad <span class="bold">-</span></kbd></td><td>Decrease font-size by 1</td></tr><tr><td><kbd title="Numpad Asterisk (Multiply)">NumPad <span class="bold asterisk">*</span></kbd></td><td>Reset font-size</td></tr><tr><td><kbd>Alt</kbd> + <span class="'+h+" "+h+'_left_click" title="left-click on mouse"></span></td><td>Remove everything but highlighted box</td></tr><tr><td><kbd>Shift</kbd> + <span class="'+h+" "+h+'_left_click" title="left-click on mouse"></span></td><td>Set box width to 100% &amp; margins to zero (highlight turns blue)</td></tr><tr><td><kbd title="Print Screen">PrtScn</kbd></td><td>Print Page</td></tr><tr><td><kbd title="Escape">Esc</kbd></td><td>Disable Printliminator, but save undo history</td></tr></tbody></table></div><style>html { box-sizing: border-box; height: 100%; } *, *:before, *:after { box-sizing: inherit; }html,body { background: #eee; width: 375px; min-height: '+a.keyboardClosed+'px;font-size: 14px; margin: 0; padding: 0; cursor: default;font-family: Univers, Calibri, "Myriad Pro", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }'+f+"_top { background: #fff; }h1, h3 { margin: 0 0 0 10px; font-weight: normal;text-transform: uppercase; }h1 { font-size: 32px; }h3 { font-size: 19px; font-weight: bold; }"+f+"_top h3 { color: red; }."+a.css.icon+"{ display: inline-block; background: url("+i+") no-repeat;width: 25px; height: 25px; vertical-align: middle; }."+a.css.icon+"."+a.css.drag+" { background-position: 0 0; }."+a.css.icon+"_print { background-position: -25px 0; }."+a.css.icon+"_keys { background-position: -50px 0; }."+a.css.icon+"_close { background-position: -75px 0; width: 40px; cursor: pointer; }."+a.css.icon+"_undo { background-position: 0 -25px; }."+a.css.icon+"_nographics { background-position: -25px -25px; }."+a.css.icon+"_left_click { background-position: -50px -25px; }."+a.css.icon+"_stylize { background-position: -75px -25px; width: 35px; }"+f+"_header,"+f+"_button { background: #000; color: #fff;}"+f+"_header,"+f+"_header > div { height: 21px; }"+f+"_header > div,"+f+"_button { display: inline-block; }"+f+"_right { float: right; margin-right: 6px; }"+f+"_footer ul { margin: 2px; text-align: center; padding: 4px;list-style-type: none;}"+f+"_button { padding: 4px 8px 4px 4px; line-height: 18px; min-width: 90px; text-align: left;white-space: nowrap; margin: 2px; cursor: pointer; display: inline-block; }"+f+"_button:hover,"+f+"_button.active { background-color: #333; }"+f+"_button span { float: left; margin: 5px 5px 5px 0; text-align: left; }"+f+"_keyboard { width: 110px; }.key { width: 30%; }table { margin: 0 4px; }kbd { background: #fff; border: #000 1px solid; border-radius: 3px;padding: 1px 3px; }td { border-top: 1px solid #aaa; }</style>",a.addEvent(b.querySelector("."+a.css.noGraphics),"click",a.removeGraphics),a.addEvent(b.querySelector("."+a.css.print),"click",a.print),a.addEvent(b.querySelector("."+a.css.undo),"click",a.undo),a.addEvent(b.querySelector("."+a.css.stylize),"click",a.stylize),a.addEvent(b.querySelector("."+a.css.close),"click",a.abort),a.addEvent(b.querySelector("."+a.css.keyboard),"click",a.keyboard),a.addEvent(document.querySelector("."+a.css.drag),"mousedown",a.dragInit),a.addEvent(b,"mouseup",a.docMouseUp)},bodyClick:function(b){if(b.preventDefault(),b.stopImmediatePropagation(),"BODY"!==b.target.nodeName&&!a.hasClass(b.target,a.css.controls)){var c,d,e=document.querySelector("."+a.css.hilite);if(b[a.keys.opposite]){if(c=a.getOpposite(e),d=c.length,!d)return!1}else c=[e];a.hide(c),csstricksPrintliminatorVars.history.push(c),a.clearSelection()}},bodyMouseover:function(b){a.hasClass(b.target,a.css.controls)||a.addClass(b.target,a.css.hilite)},removeHighlight:function(){var b,c=document.querySelectorAll("."+a.css.hilite),d=c.length;for(b=0;d>b;b++)a.removeClass(c[b],a.css.hilite)},bodyKeyUp:function(b){b.preventDefault(),b.which===a.keys.print&&a.print()},bodyKeyDown:function(b){b.preventDefault();var c,d,e,f,g,h=document.querySelectorAll("body")[0],i=document.querySelectorAll("."+a.css.hilite)[0],j=a.css.hidden,k=a.css.hilite;if(i)switch(g="BODY"===i.nodeName,b.which){case a.keys.parent1:case a.keys.parent2:!g&&i.parentNode&&(a.removeClass(i,k),a.addClass(i.parentNode,k));break;case a.keys.child1:case a.keys.child2:f=Array.prototype.filter.call(i.children,a.filterElements),f.length&&(a.removeClass(i,k),a.addClass(f[0],k));break;case a.keys.nextSib:e=a.getNext(i),!g&&e&&(a.removeClass(i,k),a.addClass(e,k));break;case a.keys.prevSib:e=a.getPrev(i),!g&&e&&(a.removeClass(i,k),a.addClass(e,k));break;case a.keys.hide:g||(a.addClass(i,j),a.addClass(i.parentNode,k),csstricksPrintliminatorVars.history.push(i))}else i=b.target,a.addClass(i,k);switch(c=window.getComputedStyle(h,null).getPropertyValue("font-size"),d=c.match(/[a-z]+/i)[0],b.which){case a.keys.fontUp:h.style.fontSize=parseFloat(c)+1+d;break;case a.keys.fontDown:h.style.fontSize=parseFloat(c)-1+d;break;case a.keys.fontReset:h.style.fontSize="";break;case a.keys.undo:a.undo();break;case a.keys.abort:a.abort()}},dragInit:function(){var b=a.drag;b.el=document.querySelector("."+a.css.wrap),b.elm[0]=b.pos[0]-b.el.offsetLeft,b.elm[1]=b.pos[1]-b.el.offsetTop,a.toggleSelection(!0)},docMouseMove:function(b){var c=a.drag;c.pos[0]=document.all?window.event.clientX:b.pageX,c.pos[1]=document.all?window.event.clientY:b.pageY,null!==a.drag.el&&(c.el.style.left=c.pos[0]-c.elm[0]+"px",c.el.style.top=c.pos[1]-c.elm[1]+"px")},docMouseUp:function(){a.drag.el=null,a.toggleSelection()},stopSelection:function(){return!1},clearSelection:function(){var a=window.getSelection?window.getSelection():document.selection;a&&(a.removeAllRanges?a.removeAllRanges():a.empty&&a.empty())},toggleSelection:function(b){var c=document.querySelector("body");b?(a.savedUnsel=c.getAttribute("unselectable"),c.setAttribute("unselectable","on"),a.addClass(c,a.css.noSelection),a.addEvent(c,"onselectstart",a.stopSelection)):(a.savedUnsel&&c.setAttribute("unselectable",a.savedUnsel),a.removeClass(c,a.css.noSelection),a.removeEvent(c,"onselectstart",a.stopSelection)),a.clearSelection()},removeGraphics:function(){if(!csstricksPrintliminatorVars.flags.removeGraphics){var b,c,d=[],e=document.querySelector("body"),f=e.querySelectorAll(a.noGraphicsSelectors),g=e.querySelectorAll("*:not(."+a.css.controls+")"),h=g.length;for(b=0;h>b;b++)c=window.getComputedStyle(g[b]).getPropertyValue("background-image"),c&&"none"!==c&&(d.push([g[b],c]),g[b].style.backgroundImage="none");a.removeHighlight(),a.hide(f),csstricksPrintliminatorVars.flags.removeGraphics=!0,csstricksPrintliminatorVars.history.push(function(){for(csstricksPrintliminatorVars.flags.removeGraphics=!1,a.show(f),h=d.length,b=0;h>b;b++)d[b][0].style.backgroundImage=d[b][1]})}},stylize:function(){if(!csstricksPrintliminatorVars.flags.stylize){var b,c=[],d=document.querySelector("body"),e=document.querySelectorAll('link[rel="stylesheet"], style'),f=document.querySelectorAll("body *:not(."+a.css.hidden+"):not(."+a.css.controls+")"),g=e.length;for(b=0;g>b;b++)e[b].id!==a.css.stylesheet&&(e[b].disabled=!0);Array.prototype.filter.call(f,function(a){var b=a.getAttribute("style");null!==b&&(a.removeAttribute("style"),c.push({el:a,style:b}))}),a.addClass(d,a.css.stylized),a.removeHighlight(),csstricksPrintliminatorVars.flags.stylize=!0,csstricksPrintliminatorVars.history.push(function(){csstricksPrintliminatorVars.flags.stylize=!1,a.removeClass(d,a.css.stylized);var b,f=e.length;for(b=0;f>b;b++)e[b].disabled=!1;for(f=c.length,b=0;f>b;b++)c[b].el.setAttribute("style",c[b].style)})}},print:function(){a.removeHighlight(),window.print()},undo:function(){var b=csstricksPrintliminatorVars.history.pop();b&&(a.removeHighlight(),"function"!=typeof b?a.show(b):b.call())},keyboard:function(){var b=document.querySelector("."+a.css.wrap),c=b.querySelector("iframe."+a.css.controls),d=c.contentWindow.document.body,e=d.querySelector("#"+a.css.keyboard),f=d.querySelector("."+a.css.keyboard),g=e.style.display,h="none"===g;a[h?"addClass":"removeClass"](f,"active"),e.style.display=h?"":"none",b.style.height=(h?a.keyboardOpen:a.keyboardClosed)+5+"px",c.style.height=(h?a.keyboardOpen:a.keyboardClosed)+5+"px",d.style.height=(h?a.keyboardOpen:a.keyboardClosed)+"px"},abort:function(){var b=document.querySelector("body");a.removeHighlight(),a.removeEvent(b,"click",a.bodyClick),a.removeEvent(b,"mouseover",a.bodyMouseover),a.removeEvent(b,"mouseout",a.removeHighlight),a.removeEvent(document,"keyup",a.bodyKeyUp),a.removeEvent(document,"keydown",a.bodyKeyDown),a.removeEvent(document,"mouseup",a.docMouseUp),a.removeEvent(document,"mousemove",a.docMouseMove),b.removeChild(document.querySelector("."+a.css.wrap))},filterElements:function(b){return b&&1===b.nodeType&&!a.ignoredElm.test(b.nodeName)&&!a.hasClass(b,a.css.controls)&&!(a.hasClass(b,a.css.hidden)||"none"===b.style.display)},getOpposite:function(b){for(var c,d=[];"BODY"!==b.nodeName;)c=a.getSiblings(b),d=d.concat(c),b=b.parentNode;return d},getSiblings:function(b){for(var c=[],d=b.parentNode.firstChild;d;d=d.nextSibling)d!==b&&a.filterElements(d)&&c.push(d);return c},getNext:function(b){for(;b=b.nextSibling;)if(b&&a.filterElements(b))return b;return null},getPrev:function(b){for(;b=b.previousSibling;)if(b&&a.filterElements(b))return b;return null},hide:function(b){if(b){var c,d=b.length;if("undefined"!=typeof d)for(c=0;d>c;c++)a.addClass(b[c],a.css.hidden);else a.addClass(b,a.css.hidden)}},show:function(b){if(b){var c,d=b.length;if("undefined"!=typeof d)for(c=0;d>c;c++)a.removeClass(b[c],a.css.hidden);else a.removeClass(b,a.css.hidden)}},addClass:function(b,c){b.classList?b.classList.add(c):a.hasClass(b,c)||(b.className+=" "+c)},removeClass:function(a,b){a.classList?a.classList.remove(b):a.className=a.className.replace(new RegExp("\\b"+b+"\\b","g"),"")},hasClass:function(a,b){return a.classList?a.classList.contains(b):new RegExp("\\b"+b+"\\b").test(a.className)},addEvent:function(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener(b,c)},removeEvent:function(a,b,c){a.detachEvent?a.detachEvent("on"+b,c):a.removeEventListener(b,c)}};window.csstricksPrintliminator=function(){a.init()}}(); \ No newline at end of file
diff --git a/printliminator.png b/printliminator.png
deleted file mode 100644
index d117275..0000000
--- a/printliminator.png
+++ /dev/null
Binary files differ
diff --git a/src/bookmarklet.js b/src/bookmarklet.js
index 7185f8c..08ff42d 100644
--- a/src/bookmarklet.js
+++ b/src/bookmarklet.js
@@ -14,14 +14,10 @@
};
head.appendChild(script);
}
- // dev = http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
- // production = //ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
- loadScript('{jQuery}', function() {
- var jQ132 = jQuery.noConflict();
- // dev = src/printliminator.js
- // production = //css-tricks.github.io/The-Printliminator/printliminator.min.js
- loadScript('{printliminator}', function() {
- csstricksPrintliminator( jQ132 );
- });
+ // dev = src/printliminator.js
+ // production = //css-tricks.github.io/The-Printliminator/printliminator.min.js
+ loadScript('{printliminator}', function() {
+ csstricksPrintliminator();
});
+
})();
diff --git a/src/index.html b/src/index.html
index abcc8e3..913e53e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -41,9 +41,12 @@
<h2>Credits</h2>
- <p>By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>.
+ <p>
+ By <a href="http://chriscoyier.net">Chris Coyier</a> and <a href="http://devongovett.wordpress.com/">Devon Govett</a>.
+ Some contributions by <a href="http://wowmotty.blogspot.com/">Rob Garrison</a>.
Icons by <a href="http://wefunction.com/2008/07/function-free-icon-set/">Function</a>.
- Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>.</p>
+ Print stylesheet based on <a href="http://code.google.com/p/hartija/">Hartija</a>.
+ </p>
</div>
diff --git a/src/printliminator.js b/src/printliminator.js
index 91403fb..5d7f201 100644
--- a/src/printliminator.js
+++ b/src/printliminator.js
@@ -1,199 +1,748 @@
-/* Printliminator */
-function csstricksPrintliminator( jQ ) {
- // remove conflicts with other javascript libraries
- var $ = jQ.noConflict(),
- history = [],
- flags = {},
- // if local, load local sprite image
- sprite = ( window.location.origin === 'file://' ? '' : '//css-tricks.github.io/The-Printliminator/' ) +
- 'printliminator.png',
- // programmically added stylesheets
- styles = '' +
- '._print_controls { position: fixed; top: 25px; right: 25px; width: 162px; height: 182px; z-index: 10000;' +
- '-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;' +
- 'background: url(' + sprite + ') no-repeat; }' +
- '._print_controls_close { position: absolute; top: -20px; right: -20px; width: 33px; height: 33px;' +
- 'background: url(' + sprite + ') -222px -3px no-repeat; }' +
- '._print_controls_close:hover { background-position: -222px -39px; }' +
- '._print_controls_remove_graphics, ._print_controls_print, ._print_controls_undo, ._print_controls_stylize {' +
- 'position: absolute; height: 74px; width: 74px;' +
- 'background: url(' + sprite + ') no-repeat; }' +
- '._print_controls_remove_graphics { top: 6px; left: 6px; background-position: 0px -182px; }' +
- '._print_controls_remove_graphics:hover { background-position: 0 -256px; }' +
- '._print_controls_remove_graphics.active { background-position: 0 -330px; }' +
- '._print_controls_print { top: 83px; left: 83px; background-position: -74px -182px; }' +
- '._print_controls_print:hover { background-position: -74px -256px; }' +
- '._print_controls_print.active { background-position: -74px -330px; }' +
- '._print_controls_undo { top: 83px; left: 6px; background-position: -148px -182px; }' +
- '._print_controls_undo:hover { background-position: -148px -256px; }' +
- '._print_controls_undo.active { background-position: -148px -330px; }' +
- '._print_controls_stylize { top: 6px; left: 83px; background-position: -222px -182px; }' +
- '._print_controls_stylize:hover { background-position: -222px -256px; }' +
- '._print_controls_stylize.active { background-position: -222px -330px; }' +
- '._print_removed { display: none !important; }' +
- '._printliminator_highlight { outline: 3px solid red; }' +
- '@media print{ ._print_controls { display: none; } }',
-
- printstylesheet = '@media print, screen {' +
- 'body { margin:0; padding:0; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt;' +
- 'font-family: Garamond, "Times New Roman", serif; color: #000; background: none; font-size: 12pt; }' +
- 'h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; }' +
- 'h1 { font-size: 19pt; }' +
- 'h2 { font-size: 17pt; }' +
- 'h3 { font-size: 15pt; }' +
- 'h4, h5, h6 { font-size: 12pt; }' +
- 'code { font: 10pt Courier, monospace; }' +
- 'blockquote { margin: 1.3em; padding: 1em; font-size: 10pt; }' +
- 'hr { background-color: #ccc; }' +
- 'img { float: left; margin: 1em 1.5em 1.5em 0; }' +
- 'a img { border: none; }' +
- 'table { margin: 1px; text-align: left; border-collapse: collapse; }' +
- 'th { border: 1px solid #333; font-weight: bold; }' +
- 'td { border: 1px solid #333; }' +
- 'th, td { padding: 4px 10px; }' +
- 'tfoot { font-style: italic; }' +
- 'caption { background: #fff; margin-bottom: 20px; text-align: left; }' +
- 'thead {display: table-header-group; }' +
- 'tr { page-break-inside: avoid; }' +
- '} @media screen { body { padding: 20px; } }';
-
- $( '<style id="_print_controls_styles">' )
- .text( styles )
- .appendTo( 'head' );
-
- $( 'body *:not(._print_controls, ._print_controls *)' )
- .live( 'click', function( e ) {
- e.preventDefault();
- var $done,
- $this = $( this );
- if ( e.altKey ) {
- $done = $( 'body *' )
- .not( '._print_controls, ._print_controls *, style' )
- .not( $this.parents().andSelf() )
- .not( $this.find( '*' ) )
- .addClass( '_print_removed' );
+/* Printliminator v3.1.0 */
+/* jshint expr:false */
+/* global csstricksPrintliminatorVars */
+;( function() {
+'use strict';
+var pl = {
+
+ version : '3.1.0',
+
+ css : {
+ hilite : '_printliminator_highlight',
+ fullWidth : '_printliminator_full_width',
+ hidden : '_printliminator_hidden',
+ stylized : '_printliminator_stylized', // class name added to body
+ noSelection: '_printliminator_noSelection', // class on body while dragging
+
+ // printliminator
+ stylesheet : '_print_controls_styles', // stylesheet ID
+ controls : '_print_controls',
+ icon : '_print_controls_icon',
+ wrap : '_print_controls_wrap',
+ noGraphics : '_print_controls_remove_graphics',
+ stylize : '_print_controls_stylize',
+ print : '_print_controls_print',
+ close : '_print_controls_close',
+ undo : '_print_controls_undo',
+ drag : '_print_controls_icon_drag',
+ keyboard : '_print_controls_keyboard'
+ },
+
+ keys : {
+ parent1 : 33, // pageUp
+ parent2 : 38, // up arrow
+ child1 : 34, // pageDown
+ child2 : 40, // down arrow
+ nextSib : 39, // right arrow
+ prevSib : 37, // left arrow
+ hide : 13, // enter
+ undo : 8, // backspace
+ fontUp : 107, // Numpad +
+ fontDown : 109, // Numpad -
+ fontReset : 106, // Numpad *
+ print : 44, // PrtScn (keyup only)
+ abort : 27, // Esc
+ // use event key below
+ opposite : 'altKey', // alt + click
+ fullWidth : 'shiftKey' // shift + click
+ },
+
+ // elements hidden when "remove graphics" is selected
+ noGraphicsSelectors : 'img, iframe:not(._print_controls), object, embed, audio, video, input[type=image], svg',
+ // elements to ignore while traversing
+ ignoredElm : /^(br|meta|style|link|script)$/i,
+
+ // iframe height with keyboard open/closed
+ keyboardOpen : 630,
+ keyboardClosed : 220,
+
+ // dragging parameters stored here
+ drag : {
+ el : null,
+ pos : [ 0, 0 ],
+ elm : [ 0, 0 ]
+ },
+
+ init : function() {
+
+ var body = document.querySelector( 'body' );
+
+ // need a global variable to store history & flags
+ if ( typeof window.csstricksPrintliminatorVars === 'undefined' ) {
+ // use object separate from pl, otherwise these values get lost
+ // upon javascript injection a second time (after uses presses Esc)
+ window.csstricksPrintliminatorVars = {
+ history : [],
+ // flags to prevent multiple applications of same action
+ flags : {}
+ };
+
+ pl.addStyles();
+
+ }
+
+ pl.addControls();
+
+ // highlighting elements & keyboard binding
+ pl.addEvent( body, 'click', pl.bodyClick );
+ pl.addEvent( body, 'mouseover', pl.bodyMouseover );
+ pl.addEvent( body, 'mouseout', pl.removeHighlight );
+ pl.addEvent( document, 'keyup', pl.bodyKeyUp );
+ pl.addEvent( document, 'keydown', pl.bodyKeyDown );
+
+ // drag
+ pl.addEvent( document, 'mouseup', pl.docMouseUp );
+ pl.addEvent( document, 'mousemove', pl.docMouseMove );
+
+ },
+
+ addStyles : function(){
+ var el,
+ body = document.querySelector( 'body' ),
+ prefix = 'body.' + pl.css.stylized + ' ',
+ impt = '!important;',
+
+ // programmically added stylesheets
+ styles = '' +
+ // hide printliminator controls from print
+ '@media print{ .' + pl.css.wrap + '{ display: none; } }' +
+
+ // print stylesheet
+ '@media print, screen {' +
+ prefix + '{ margin: 0; padding: 0; line-height: 1.4;' +
+ 'word-spacing: 1.1pt; letter-spacing: 0.2pt; font-size: 12pt;' +
+ 'font-family: Garamond, "Times New Roman", serif; color: #000; background: none; }' +
+ prefix + 'h1,' + prefix + 'h2,' + prefix + 'h3,' +
+ prefix + 'h4,' + prefix +'h5,' + prefix +'h6' +
+ '{ font-family: Helvetica, Arial, sans-serif; }' +
+ prefix + 'h1 { font-size: 19pt; }' +
+ prefix + 'h2 { font-size: 17pt; }' +
+ prefix + 'h3 { font-size: 15pt; }' +
+ prefix + 'h4, ' + prefix +'h5,' + prefix + 'h6 { font-size: 12pt; }' +
+ prefix + 'code { font: 10pt Courier, monospace; }' +
+ prefix + 'blockquote { margin: 1.3em; padding: 1em; font-size: 10pt; }' +
+ prefix + 'hr { background-color: #ccc; }' +
+ prefix + 'img { float: left; margin: 1em 1.5em 1.5em 0; }' +
+ prefix + 'a img { border: none; }' +
+ prefix + 'table { margin: 1px; text-align:left; border-collapse: collapse; }' +
+ prefix + 'th { border: 1px solid #333; font-weight: bold; }' +
+ prefix + 'td { border: 1px solid #333; }' +
+ prefix + 'th, ' + prefix +' td { padding: 4px 10px; }' +
+ prefix + 'tfoot { font-style: italic; }' +
+ prefix + 'caption { background: #fff; margin-bottom: 20px; text-align:left; }' +
+ prefix + 'thead { display: table-header-group; }' +
+ prefix + 'tr { page-break-inside: avoid; }' +
+
+ // elements hidden by Printliminator
+ '.' + pl.css.hidden + ' { display: none' + impt + '}' +
+ // elements set to full width/no margins
+ '.' + pl.css.fullWidth + ' { width: 100%' + impt + ' min-width: 100%' + impt + ' max-width: 100%' + impt +
+ 'margin: 0' + impt + '}' +
+
+ '} @media screen {' +
+ prefix + '{ padding: 20px; }' +
+
+ // printliminator controls
+ '.' + pl.css.wrap + '{ width: 375px' + impt + ' height: ' + pl.keyboardClosed + 'px; position: fixed' + impt +
+ 'top: 0; right: 0; z-index: 999999' + impt + ' border: #000 1px solid' + impt + '}' +
+ '.' + pl.css.drag + '{ width: 28px' + impt + 'height: 20px' + impt + 'position: absolute' + impt +
+ ' top: 0' + impt + ' left: 0' + impt + 'cursor: move' + impt + '}' +
+ '.' + pl.css.wrap + ' iframe { width: 375px' + impt + ' height: ' + pl.keyboardClosed + 'px; border: 0' + impt +
+ 'overflow-x: hidden' + impt + ' margin: 0' + impt + ' padding: 0' + impt + '}' +
+
+ // prevent selection
+ 'body.' + pl.css.noSelection + ',.' + pl.css.hilite + ',.' + pl.css.wrap + ',.' + pl.css.drag + ',.' + pl.css.wrap + ' iframe {' +
+ '-webkit-user-select: none' + impt + '-moz-user-select: none' + impt + ' -ms-user-select: none' + impt +
+ ' user-select: none' + impt + '}' +
+
+ // box highlighting
+ '.' + pl.css.hilite + '{ outline: 3px solid red' + impt + 'cursor: default' + impt + '}' +
+ '.' + pl.css.hilite + '.' + pl.css.fullWidth + '{ outline-color: blue' + impt + '}';
+
+ // add print stylesheet
+ el = document.createElement( 'style' );
+ el.id = pl.css.stylesheet;
+ el.innerHTML = styles;
+ document.querySelector( 'head' ).appendChild( el );
+
+ },
+
+ // create popup
+ addControls : function(){
+ var frame,
+ body = document.querySelector( 'body' ),
+ el = document.createElement( 'div' ),
+
+ controls = pl.css.controls,
+ prefix = '.' + controls,
+ button = '_print_controls_button',
+ icon = pl.css.icon,
+
+ sprite = 'data:image/png;base64,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';
+
+ body.appendChild( el );
+ pl.addClass( el, pl.css.wrap );
+ pl.addClass( el, controls );
+
+ el.innerHTML = '<iframe class="' + pl.css.controls + '"></iframe>' +
+ '<div class="' + pl.css.controls + ' ' + pl.css.drag + '"></div>';
+
+ frame = el.querySelector( 'iframe.' + pl.css.controls ).contentWindow.document.body;
+ frame.innerHTML = '<div class="' + controls + '_header">' +
+ '<div class="' + pl.css.close + ' ' + controls + '_right">CLOSE <span class="' + icon + ' ' + icon + '_close"></span></div>' +
+ '<div><span class="' + icon + ' ' + pl.css.drag + '"></span> DRAG</div>' +
+ '</div>' +
+ '<div class="' + controls + '_top">' +
+ '<h1>The <strong>Printliminator</strong></h1>' +
+ '<h3>Click highlighted boxes to delete</h3>' +
+ '</div>' +
+ '<div class="' + controls + '_footer">' +
+ '<h3>Other Useful Superpowers</h3>' +
+ '<ul>' +
+ '<li class="' + button + ' ' + pl.css.undo + '"><span class="' + icon + ' ' + icon + '_undo"></span>Undo<br>Last</li>' +
+ '<li class="' + button + ' ' + pl.css.stylize + '"><span class="' + icon + ' ' + icon + '_stylize"></span>Add Print<br>Styles</li>' +
+ '<li class="' + button + ' ' + pl.css.noGraphics + '"><span class="' + icon + ' ' + icon + '_nographics"></span>Remove<br>Graphics</li>' +
+ '<li class="' + button + ' ' + pl.css.print + '"><span class="' + icon + ' ' + icon + '_print"></span>Send to<br>print</li>' +
+ '<li class="' + button + ' ' + pl.css.keyboard + '"><span class="' + icon + ' ' + icon + '_keys"></span>Keyboard<br>Commands</li>' +
+ '</ul>' +
+ '<table id="' + pl.css.keyboard + '" style="display:none">' +
+ '<thead>' +
+ '<tr><th class="key">Key</th><th>Command</th></tr>' +
+ '</thead>' +
+ '<tbody>' +
+ '<tr><td><kbd>PageUp</kbd> <span class="lower">or</span> <kbd class="bold" title="Up Arrow">&uarr;</kbd></td><td>Find wrapper of highlighted box</td></tr>' +
+ '<tr><td><kbd>PageDown</kbd> <span class="lower">or</span> <kbd class="bold" title="Down Arrow">&darr;</kbd></td><td>Find content of highlighted box</td></tr>' +
+ '<tr><td><kbd class="bold" title="Right Arrow">&rarr;</kbd></td><td>Find next box inside same wrapper</td></tr>' +
+ '<tr><td><kbd class="bold" title="Left Arrow">&larr;</kbd></td><td>Find previous box inside same wrapper</td></tr>' +
+ '<tr><td><kbd>Enter</kbd></td><td>Remove the highlighted box</td></tr>' +
+ '<tr><td><kbd>Backspace</kbd></td><td>Undo last action</td></tr>' +
+ '<tr><td><kbd title="Numpad Plus">Numpad <span class="bold">+</span></kbd></td><td>Increase font-size by 1</td></tr>' +
+ '<tr><td><kbd title="Numpad Minus">NumPad <span class="bold">-</span></kbd></td><td>Decrease font-size by 1</td></tr>' +
+ '<tr><td><kbd title="Numpad Asterisk (Multiply)">NumPad <span class="bold asterisk">*</span></kbd></td><td>Reset font-size</td></tr>' +
+ '<tr><td><kbd>Alt</kbd> + <span class="' + icon + ' ' + icon + '_left_click" title="left-click on mouse"></span></td>' +
+ '<td>Remove everything but highlighted box</td></tr>' +
+ '<tr><td><kbd>Shift</kbd> + <span class="' + icon + ' ' + icon + '_left_click" title="left-click on mouse"></span></td>' +
+ '<td>Set box width to 100% &amp; margins to zero (highlight turns blue)</td></tr>' +
+ '<tr><td><kbd title="Print Screen">PrtScn</kbd></td><td>Print Page</td></tr>' +
+ '<tr><td><kbd title="Escape">Esc</kbd></td><td>Disable Printliminator, but save undo history</td></tr>' +
+ '</tbody></table></div>' +
+ '<style>' +
+ 'html { box-sizing: border-box; height: 100%; } *, *:before, *:after { box-sizing: inherit; }' +
+ 'html,body { background: #eee; width: 375px; min-height: ' + pl.keyboardClosed + 'px;' +
+ 'font-size: 14px; margin: 0; padding: 0; cursor: default;' +
+ 'font-family: Univers, Calibri, "Myriad Pro", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;' +
+ '-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }' +
+ prefix + '_top { background: #fff; }' +
+ 'h1, h3 { margin: 0 0 0 10px; font-weight: normal;' +
+ 'text-transform: uppercase; }' +
+ 'h1 { font-size: 32px; }' +
+ 'h3 { font-size: 19px; font-weight: bold; }' +
+ prefix + '_top h3 { color: red; }' +
+ '.' + pl.css.icon + '{ display: inline-block; background: url(' + sprite + ') no-repeat;' +
+ 'width: 25px; height: 25px; vertical-align: middle; }' +
+ '.' + pl.css.icon + '.' + pl.css.drag + ' { background-position: 0 0; }' +
+ '.' + pl.css.icon + '_print { background-position: -25px 0; }' +
+ '.' + pl.css.icon + '_keys { background-position: -50px 0; }' +
+ '.' + pl.css.icon + '_close { background-position: -75px 0; width: 40px; cursor: pointer; }' +
+ '.' + pl.css.icon + '_undo { background-position: 0 -25px; }' +
+ '.' + pl.css.icon + '_nographics { background-position: -25px -25px; }' +
+ '.' + pl.css.icon + '_left_click { background-position: -50px -25px; }' +
+ '.' + pl.css.icon + '_stylize { background-position: -75px -25px; width: 35px; }' +
+ prefix + '_header,' + prefix + '_button { background: #000; color: #fff;}' +
+ prefix + '_header,' + prefix + '_header > div { height: 21px; }' +
+ prefix + '_header > div,' + prefix + '_button { display: inline-block; }' +
+ prefix + '_right { float: right; margin-right: 6px; }' +
+ prefix + '_footer ul { margin: 2px; text-align: center; padding: 4px;' +
+ 'list-style-type: none;}' +
+ prefix + '_button { padding: 4px 8px 4px 4px; line-height: 18px; min-width: 90px; text-align: left;' +
+ 'white-space: nowrap; margin: 2px; cursor: pointer; display: inline-block; }' +
+ prefix + '_button:hover,' + prefix + '_button.active { background-color: #333; }' +
+ prefix + '_button span { float: left; margin: 5px 5px 5px 0; text-align: left; }' +
+ prefix + '_keyboard { width: 110px; }' +
+ '.key { width: 30%; }' +
+ 'table { margin: 0 4px; }' +
+ 'kbd { background: #fff; border: #000 1px solid; border-radius: 3px;' +
+ 'padding: 1px 3px; }' +
+ 'td { border-top: 1px solid #aaa; }' +
+ '</style>';
+
+ pl.addEvent( frame.querySelector( '.' + pl.css.noGraphics ), 'click', pl.removeGraphics );
+ pl.addEvent( frame.querySelector( '.' + pl.css.print ), 'click', pl.print );
+ pl.addEvent( frame.querySelector( '.' + pl.css.undo ), 'click', pl.undo );
+ pl.addEvent( frame.querySelector( '.' + pl.css.stylize ), 'click', pl.stylize );
+ pl.addEvent( frame.querySelector( '.' + pl.css.close ), 'click', pl.abort );
+ pl.addEvent( frame.querySelector( '.' + pl.css.keyboard ), 'click', pl.keyboard );
+ // can't drag from within the iframe - the mouse coordinates would be within it
+ pl.addEvent( document.querySelector( '.' + pl.css.drag ), 'mousedown', pl.dragInit );
+ // include mouseup inside frame to stop the drag
+ pl.addEvent( frame, 'mouseup', pl.docMouseUp );
+
+ },
+
+ bodyClick : function( event ) {
+ event.preventDefault();
+ event.stopImmediatePropagation();
+
+ if ( event.target.nodeName !== 'BODY' && !pl.hasClass( event.target, pl.css.controls ) ) {
+ var done, sel,
+ hilite = document.querySelector( '.' + pl.css.hilite );
+
+ // show opposite (Alt + click)
+ if ( event[ pl.keys.opposite ] ) {
+ done = pl.getOpposite( hilite );
+ sel = done.length;
+ if ( !sel ) {
+ // nothing left to remove
+ return false;
+ }
} else {
- $done = $this;
+ // hide clicked element
+ done = [ hilite ];
}
- $done.addClass( '_print_removed' );
- history.push( $done );
- })
- .live( 'mouseover', function() {
- $(this).addClass( '_printliminator_highlight' );
- })
- .live( 'mouseout', function() {
- $(this).removeClass( '_printliminator_highlight' );
- });
-
- var $controls = $( '<div class="_print_controls">' )
- .appendTo( 'body' );
-
- // fix IE6, which doesn't support position: fixed
- if ( $controls.css( 'position' ) !== 'fixed' ) {
- $controls.css( 'position', 'absolute' );
- }
- // Remove Graphics
- $( '<div class="_print_controls_remove_graphics">' )
- .click( function() {
- if ( !flags.removeGraphics ) {
- var indx, $el, bkgd,
- bkgds = [],
- $done = $( 'img, iframe, object, embed, input[type=image], ins' ),
- $item = $( 'body *:not(._print_controls, ._print_controls *)' ),
- len = $item.length;
- for ( indx = 0; indx < len; indx++ ) {
- $el = $item.eq( indx );
- bkgd = $el.css( 'background-image' );
- if ( bkgd !== 'none' ) {
- bkgds.push( [ $el, bkgd ] );
- $el.css( 'background-image', 'none' );
+ pl.hide( done );
+ csstricksPrintliminatorVars.history.push( done );
+
+ // remove any text selection
+ pl.clearSelection();
+
+ }
+ },
+
+ bodyMouseover : function( event ) {
+ if ( !pl.hasClass( event.target, pl.css.controls ) ) {
+ pl.addClass( event.target, pl.css.hilite );
+ }
+ },
+
+ removeHighlight : function() {
+ // remove all highlight class names, just in case
+ var indx,
+ // include body as it might also get the highlight class
+ hilite = document.querySelectorAll( '.' + pl.css.hilite ),
+ len = hilite.length;
+ for ( indx = 0; indx < len; indx++ ) {
+ pl.removeClass( hilite[ indx ], pl.css.hilite );
+ }
+ },
+
+ bodyKeyUp : function( event ) {
+ event.preventDefault();
+ // PrntScrn only works on keyup
+ if ( event.which === pl.keys.print ) {
+ pl.print();
+ }
+ },
+
+ bodyKeyDown : function( event ) {
+ event.preventDefault();
+ var n, suffix, elm, els, isBody,
+ body = document.querySelectorAll( 'body' )[ 0 ],
+ el = document.querySelectorAll( '.' + pl.css.hilite )[ 0 ],
+ hidden = pl.css.hidden,
+ highlight = pl.css.hilite;
+
+ if ( el ) {
+ isBody = el.nodeName === 'BODY';
+
+ switch ( event.which ) {
+ case pl.keys.parent1 : // pageUp
+ case pl.keys.parent2 : // up arrow
+ if ( !isBody && el.parentNode ) {
+ pl.removeClass( el, highlight );
+ pl.addClass( el.parentNode, highlight );
}
- }
- $done.addClass( '_print_removed' );
- flags.removeGraphics = true;
-
- history.push( function() {
- flags.removeGraphics = false;
- $done.removeClass( '_print_removed' );
- var $el,
- len = bkgds.length;
- for ( indx = 0; indx < len; indx++ ) {
- $el = bkgds[ indx ][ 0 ];
- $el.css( 'background-image', bkgds[ indx ][ 1 ] );
+ break;
+
+ case pl.keys.child1 : // pageDown
+ case pl.keys.child2 : // down arrow
+ els = Array.prototype.filter.call( el.children, pl.filterElements );
+ if ( els.length ) {
+ pl.removeClass( el, highlight );
+ pl.addClass( els[0], highlight );
+ }
+ break;
+
+ case pl.keys.nextSib : // right arrow (siblings)
+ elm = pl.getNext( el );
+ if ( !isBody && elm ) {
+ pl.removeClass( el, highlight );
+ pl.addClass( elm, highlight );
+ }
+ break;
+
+ case pl.keys.prevSib : // left arrow (siblings)
+ elm = pl.getPrev( el );
+ if ( !isBody && elm ) {
+ pl.removeClass( el, highlight );
+ pl.addClass( elm, highlight );
+ }
+ break;
+
+ case pl.keys.hide : // enter
+ if ( !isBody ) {
+ pl.addClass( el, hidden );
+ pl.addClass( el.parentNode, highlight );
+ csstricksPrintliminatorVars.history.push( el );
}
- });
+ break;
+
}
- })
- .appendTo( $controls );
-
- // Print Stylize
- $( '<div class="_print_controls_stylize">' )
- .click( function() {
- window.print();
- })
- .appendTo( $controls );
-
- // Print
- $( '<div class="_print_controls_print">' )
- .click( function() {
- if ( !flags.stylize ) {
- var links = $( 'link[rel="stylesheet"], style:not(#_print_controls_styles)' ).remove(),
- // cache and remove inline styles
- inline = $( 'body *:not(._print_controls, ._print_controls > *, ._print_removed)' ).map( function() {
- var $this = $( this ),
- style = $this.attr( 'style' );
- $this.attr( 'style', '' );
- return {
- el: this,
+ } else {
+ el = event.target;
+ pl.addClass( el, highlight );
+ }
+
+ n = window.getComputedStyle( body, null ).getPropertyValue( 'font-size' );
+ suffix = n.match( /[a-z]+/i )[0];
+
+ switch ( event.which ) {
+ case pl.keys.fontUp : // Numpad + = Increase font size
+ body.style.fontSize = ( parseFloat( n ) + 1 ) + suffix;
+ break;
+
+ case pl.keys.fontDown : // Numpad - = Decrease font size
+ body.style.fontSize = ( parseFloat( n ) - 1 ) + suffix;
+ break;
+
+ case pl.keys.fontReset : // Numpad * = reset font-size
+ body.style.fontSize = '';
+ break;
+
+ case pl.keys.undo : // backspace
+ pl.undo();
+ break;
+
+ case pl.keys.abort : // Esc
+ pl.abort();
+ break;
+
+ }
+ },
+
+ // drag code adapted from http://jsfiddle.net/tovic/Xcb8d/light/
+ dragInit : function() {
+ var drag = pl.drag;
+ drag.el = document.querySelector( '.' + pl.css.wrap );
+ drag.elm[0] = drag.pos[0] - drag.el.offsetLeft;
+ drag.elm[1] = drag.pos[1] - drag.el.offsetTop;
+ // prevent selecting content while dragging
+ pl.toggleSelection( true );
+
+ },
+
+ docMouseMove : function( event ) {
+ var drag = pl.drag;
+ drag.pos[0] = document.all ? window.event.clientX : event.pageX;
+ drag.pos[1] = document.all ? window.event.clientY : event.pageY;
+ if ( pl.drag.el !== null ) {
+ drag.el.style.left = ( drag.pos[0] - drag.elm[0] ) + 'px';
+ drag.el.style.top = ( drag.pos[1] - drag.elm[1] ) + 'px';
+ }
+ },
+
+ docMouseUp : function() {
+ pl.drag.el = null;
+ pl.toggleSelection();
+ },
+
+ stopSelection : function() {
+ return false;
+ },
+
+ clearSelection : function() {
+ // remove text selection - http://stackoverflow.com/a/3171348/145346
+ var sel = window.getSelection ? window.getSelection() : document.selection;
+ if ( sel ) {
+ if ( sel.removeAllRanges ) {
+ sel.removeAllRanges();
+ } else if ( sel.empty ) {
+ sel.empty();
+ }
+ }
+ },
+
+ toggleSelection : function( disable ) {
+ var body = document.querySelector( 'body' );
+ if ( disable ) {
+ // save current "unselectable" value
+ pl.savedUnsel = body.getAttribute( 'unselectable' );
+ body.setAttribute( 'unselectable', 'on' );
+ pl.addClass( body, pl.css.noSelection );
+ pl.addEvent( body, 'onselectstart', pl.stopSelection );
+ } else {
+ if ( pl.savedUnsel ) {
+ body.setAttribute( 'unselectable', pl.savedUnsel );
+ }
+ pl.removeClass( body, pl.css.noSelection );
+ pl.removeEvent( body, 'onselectstart', pl.stopSelection );
+ }
+ // clear any selections
+ pl.clearSelection();
+ },
+
+ removeGraphics : function() {
+ if ( !csstricksPrintliminatorVars.flags.removeGraphics ) {
+ var indx, bkgd,
+ bkgds = [],
+ body = document.querySelector( 'body' ),
+ done = body.querySelectorAll( pl.noGraphicsSelectors ),
+ items = body.querySelectorAll( '*:not(.' + pl.css.controls + ')' ),
+ len = items.length;
+
+ for ( indx = 0; indx < len; indx++ ) {
+ bkgd = window.getComputedStyle( items[ indx ] ).getPropertyValue( 'background-image' );
+ if ( bkgd && bkgd !== 'none' ) {
+ bkgds.push( [ items[ indx ], bkgd ] );
+ items[ indx ].style.backgroundImage = 'none';
+ }
+ }
+
+ pl.removeHighlight();
+ pl.hide( done );
+ csstricksPrintliminatorVars.flags.removeGraphics = true;
+
+ csstricksPrintliminatorVars.history.push( function() {
+ csstricksPrintliminatorVars.flags.removeGraphics = false;
+ pl.show( done );
+ len = bkgds.length;
+ for ( indx = 0; indx < len; indx++ ) {
+ bkgds[ indx ][ 0 ].style.backgroundImage = bkgds[ indx ][ 1 ];
+ }
+ });
+ }
+ },
+
+ // Add print style
+ stylize : function() {
+ if ( !csstricksPrintliminatorVars.flags.stylize ) {
+ var indx,
+ inline = [],
+ body = document.querySelector( 'body' ),
+ links = document.querySelectorAll( 'link[rel="stylesheet"], style' ),
+ visibleElms = document.querySelectorAll( 'body *:not(.' + pl.css.hidden + '):not(.' + pl.css.controls + ')' ),
+ len = links.length;
+
+ for ( indx = 0; indx < len; indx++ ) {
+ if ( links[ indx ].id !== pl.css.stylesheet ) {
+ links[ indx ].disabled = true;
+ }
+ }
+
+ // cache and remove inline styles
+ Array.prototype.filter.call( visibleElms, function( elm ) {
+ var style = elm.getAttribute( 'style' );
+ if ( style !== null ) {
+ elm.removeAttribute( 'style' );
+ inline.push({
+ el: elm,
style: style
- };
- }),
- print = $( '<style id="_print_controls_printstylesheet">' )
- .text( printstylesheet )
- .appendTo( 'head' );
- flags.stylize = true;
-
- history.push( function() {
- flags.stylize = false;
- print.remove();
- links.appendTo( 'head' );
- inline.each( function() {
- $( this.el ).attr( 'style', this.style );
});
- });
- }
- })
- .appendTo( $controls );
+ }
+ });
+
+ pl.addClass( body, pl.css.stylized );
+ pl.removeHighlight();
+ csstricksPrintliminatorVars.flags.stylize = true;
+
+ csstricksPrintliminatorVars.history.push( function() {
+ csstricksPrintliminatorVars.flags.stylize = false;
+ pl.removeClass( body, pl.css.stylized );
+ var indx,
+ len = links.length;
+ for ( indx = 0; indx < len; indx++ ) {
+ links[ indx ].disabled = false;
+ }
+ len = inline.length;
+ for ( indx = 0; indx < len; indx++ ) {
+ inline[ indx ].el.setAttribute( 'style', inline[ indx ].style );
+ }
+ });
+ }
+ },
- // Close
- $( '<div class="_print_controls_close">' )
- .click( function() {
- $( '._print_controls' ).remove();
- })
- .appendTo( $controls );
+ print : function() {
+ pl.removeHighlight();
+ window.print();
+ },
// Undo
- $( '<div class="_print_controls_undo">' )
- .click( function() {
- var last = history.pop();
- if ( last ) {
- if ( typeof last !== 'function' ) {
- last.removeClass( '_print_removed' );
- } else {
- last.call();
+ undo : function() {
+ var last = csstricksPrintliminatorVars.history.pop();
+ if ( last ) {
+ pl.removeHighlight();
+ if ( typeof last !== 'function' ) {
+ pl.show( last );
+ } else {
+ last.call();
+ }
+ }
+ },
+
+ keyboard : function() {
+ var wrap = document.querySelector( '.' + pl.css.wrap ),
+ iframe = wrap.querySelector( 'iframe.' + pl.css.controls ),
+ ibody = iframe.contentWindow.document.body,
+ kb = ibody.querySelector( '#' + pl.css.keyboard ),
+ button = ibody.querySelector( '.' + pl.css.keyboard ),
+ disply = kb.style.display,
+ makeVisible = disply === 'none';
+ pl[ makeVisible ? 'addClass' : 'removeClass' ]( button, 'active' );
+ kb.style.display = makeVisible ? '' : 'none';
+ wrap.style.height = ( makeVisible ? pl.keyboardOpen : pl.keyboardClosed ) + 5 + 'px';
+ // iframe needs to be a tiny bit taller than the body inside
+ iframe.style.height = ( makeVisible ? pl.keyboardOpen : pl.keyboardClosed ) + 5 + 'px';
+ ibody.style.height = ( makeVisible ? pl.keyboardOpen : pl.keyboardClosed ) + 'px';
+ },
+
+ abort : function() {
+ var body = document.querySelector( 'body' );
+ pl.removeHighlight();
+ pl.removeEvent( body, 'click', pl.bodyClick );
+ pl.removeEvent( body, 'mouseover', pl.bodyMouseover );
+ pl.removeEvent( body, 'mouseout', pl.removeHighlight );
+ pl.removeEvent( document,'keyup', pl.bodyKeyUp );
+ pl.removeEvent( document, 'keydown', pl.bodyKeyDown );
+ // drag
+ pl.removeEvent( document, 'mouseup', pl.docMouseUp );
+ pl.removeEvent( document, 'mousemove', pl.docMouseMove );
+
+ body.removeChild( document.querySelector( '.' + pl.css.wrap ) );
+
+ },
+
+ filterElements : function( elm ) {
+ return elm &&
+ // element node
+ elm.nodeType === 1 &&
+ // not an ignored element
+ !pl.ignoredElm.test( elm.nodeName ) &&
+ // not controls
+ !pl.hasClass( elm, pl.css.controls ) &&
+ // not hidden
+ !( pl.hasClass( elm, pl.css.hidden ) || elm.style.display === 'none' );
+ },
+
+ getOpposite : function( el ) {
+ var sibs,
+ done = [];
+ // method: start from highlighted element
+ // get siblings & hide them; then go to parent, get siblings & hide them...
+ // rinse & repeat until we hit the body element
+ while ( el.nodeName !== 'BODY' ) {
+ sibs = pl.getSiblings( el );
+ done = done.concat( sibs );
+ el = el.parentNode;
+ }
+ return done;
+ },
+
+ // modified from
+ // https://plainjs.com/javascript/traversing/get-siblings-of-an-element-40/
+ getSiblings : function ( el ) {
+ var siblings = [],
+ sibling = el.parentNode.firstChild;
+ for ( ; sibling; sibling = sibling.nextSibling ) {
+ if ( sibling !== el && pl.filterElements( sibling ) ) {
+ siblings.push( sibling );
+ }
+ }
+ return siblings;
+ },
+
+ // modified from
+ // https://plainjs.com/javascript/traversing/get-siblings-of-an-element-40/
+ getNext : function ( el ) {
+ while ( el = el.nextSibling ) { // jshint ignore:line
+ if ( el && pl.filterElements( el ) ) {
+ return el;
+ }
+ }
+ return null;
+ },
+
+ // modified from
+ // https://plainjs.com/javascript/traversing/get-siblings-of-an-element-40/
+ getPrev : function( el ) {
+ while ( el = el.previousSibling ) { // jshint ignore:line
+ if ( el && pl.filterElements( el ) ) {
+ return el;
+ }
+ }
+ return null;
+ },
+
+ hide : function ( els ) {
+ if ( els ) {
+ var indx,
+ len = els.length;
+ // single elements have undefined length
+ if ( typeof len !== 'undefined' ) {
+ for ( indx = 0; indx < len; indx++ ) {
+ pl.addClass( els[ indx ], pl.css.hidden );
}
+ } else {
+ pl.addClass( els, pl.css.hidden );
+ }
+ }
+ },
+
+ show : function ( els ) {
+ if ( els ) {
+ var indx,
+ len = els.length;
+ if ( typeof len !== 'undefined' ) {
+ for ( indx = 0; indx < len; indx++ ) {
+ pl.removeClass( els[ indx ], pl.css.hidden );
+ }
+ } else {
+ pl.removeClass( els, pl.css.hidden );
}
- })
- .appendTo( $controls );
-
- // active state
- $( '._print_controls_remove_graphics, ._print_controls_print, ._print_controls_undo, ._print_controls_stylize' )
- .bind( 'mousedown', function() {
- $( this ).addClass( 'active' );
- })
- .bind( 'mouseleave mouseup', function() {
- $( this ).removeClass( 'active' );
- });
-
-}
+ }
+ },
+
+ addClass : function( el, name ) {
+ if ( el.classList ) {
+ el.classList.add( name );
+ } else if ( !pl.hasClass( el, name ) ) {
+ el.className += ' ' + name;
+ }
+ },
+
+ removeClass : function( el, name ) {
+ if ( el.classList ) {
+ el.classList.remove( name );
+ } else {
+ el.className = el.className.replace( new RegExp( '\\b' + name + '\\b', 'g' ), '' );
+ }
+ },
+
+ hasClass : function( el, name ) {
+ return el.classList ?
+ el.classList.contains( name ) :
+ new RegExp( '\\b' + name + '\\b' ).test( el.className );
+ },
+
+ addEvent : function( el, type, handler ) {
+ if ( el.attachEvent ) {
+ el.attachEvent( 'on' + type, handler );
+ } else {
+ el.addEventListener( type, handler );
+ }
+ },
+
+ removeEvent : function( el, type, handler ) {
+ if ( el.detachEvent ) {
+ el.detachEvent( 'on' + type, handler );
+ } else {
+ el.removeEventListener( type, handler );
+ }
+ }
+
+};
+
+window.csstricksPrintliminator = function() {
+ pl.init();
+};
+
+})();
diff --git a/src/printliminator.png b/src/printliminator.png
new file mode 100644
index 0000000..51e80cb
--- /dev/null
+++ b/src/printliminator.png
Binary files differ