diff options
Diffstat (limited to 'src/chrome')
-rw-r--r-- | src/chrome/manifest.json | 28 | ||||
-rw-r--r-- | src/chrome/popup.html | 155 | ||||
-rw-r--r-- | src/chrome/popup.js | 145 | ||||
-rw-r--r-- | src/chrome/popup.scss | 177 |
4 files changed, 505 insertions, 0 deletions
diff --git a/src/chrome/manifest.json b/src/chrome/manifest.json new file mode 100644 index 0000000..9627dd9 --- /dev/null +++ b/src/chrome/manifest.json @@ -0,0 +1,28 @@ +{ + "name": "__MSG_printliminatorName__", + "version": "4.0.1", + "manifest_version": 2, + "author": "Chris Coyier", + "description": "__MSG_printliminatorDescription__", + "homepage_url": "https://github.com/CSS-Tricks/The-Printliminator", + "default_locale": "en", + "icons": { + "16": "icon16.png", + "32": "icon32.png", + "48": "icon48.png", + "64": "icon64.png", + "128": "icon128.png" + }, + "browser_action": { + "default_icon": "icon-32.png", + "default_title": "__MSG_printliminatorName__", + "default_popup": "popup.html" + }, + "permissions": [ + "activeTab" + ], + "web_accessible_resources": [ + "printliminator.js", + "printliminator.css" + ] +}
\ No newline at end of file diff --git a/src/chrome/popup.html b/src/chrome/popup.html new file mode 100644 index 0000000..896ba5b --- /dev/null +++ b/src/chrome/popup.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title i18n-text="printliminatorName"></title> + <link href="popup.css" rel="stylesheet"> +</head> + +<body> + <header> + <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.4 8.7"> + <g> + <path d="M3,0.7H0.3C0.1,0.7,0,0.6,0,0.4c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3c0,0.2-0.1,0.3-0.3,0.3H3.6v7.6 + c0,0.2-0.1,0.3-0.3,0.3S3,8.4,3,8.3V0.7z"/> + <path d="M8.4,0.4c0-0.2,0.1-0.3,0.3-0.3S9,0.2,9,0.4V4h5.4V0.4c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.3,0.3v7.9 + c0,0.2-0.1,0.3-0.3,0.3c-0.2,0-0.3-0.1-0.3-0.3V4.6H9v3.7c0,0.2-0.1,0.3-0.3,0.3S8.4,8.4,8.4,8.3V0.4z"/> + <path d="M17.5,8.2V0.5c0-0.2,0.1-0.3,0.3-0.3h5.4c0.2,0,0.3,0.1,0.3,0.3c0,0.2-0.1,0.3-0.3,0.3h-5.1V4h4.6C22.9,4,23,4.1,23,4.3 + c0,0.2-0.1,0.3-0.3,0.3h-4.6V8h5.2c0.2,0,0.3,0.1,0.3,0.3c0,0.2-0.1,0.3-0.3,0.3h-5.5C17.7,8.5,17.5,8.4,17.5,8.2z"/> + <path d="M29,0.9c0-0.4,0.3-0.7,0.7-0.7h2.6c2,0,3.2,1.1,3.2,2.8v0c0,1.9-1.5,2.9-3.4,2.9h-1.7v2c0,0.4-0.3,0.7-0.7,0.7 + c-0.4,0-0.7-0.3-0.7-0.7V0.9z M32.2,4.5C33.3,4.5,34,3.9,34,3v0c0-1-0.7-1.5-1.8-1.5h-1.7v3H32.2z"/> + <path d="M37,0.9c0-0.4,0.3-0.7,0.7-0.7h3c1.1,0,1.9,0.3,2.4,0.8c0.4,0.5,0.7,1.1,0.7,1.8v0c0,1.3-0.8,2.2-1.9,2.5l1.6,2 + c0.1,0.2,0.2,0.3,0.2,0.6c0,0.4-0.3,0.7-0.7,0.7c-0.3,0-0.6-0.2-0.7-0.4l-2-2.6h-1.9v2.3c0,0.4-0.3,0.7-0.7,0.7 + c-0.4,0-0.7-0.3-0.7-0.7V0.9z M40.7,4.3c1.1,0,1.7-0.6,1.7-1.4v0c0-0.9-0.6-1.4-1.7-1.4h-2.1v2.8H40.7z"/> + <path d="M45.8,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/> + <path d="M49.5,0.8c0-0.4,0.3-0.7,0.7-0.7h0.2c0.4,0,0.6,0.2,0.8,0.4L55.4,6V0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1 + c0,0.4-0.3,0.7-0.7,0.7H56c-0.3,0-0.6-0.2-0.8-0.4L51,2.6v5.3c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/> + <path d="M61.1,1.5h-2c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h5.6c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-2.1v6.4 + c0,0.4-0.3,0.7-0.7,0.7s-0.7-0.3-0.7-0.7V1.5z"/> + <path d="M66.8,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v6.4H72c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-4.5 + c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/> + <path d="M74.3,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/> + <path d="M78,0.8c0-0.4,0.3-0.7,0.7-0.7h0.2c0.3,0,0.5,0.2,0.7,0.4l2.5,4l2.6-4c0.2-0.3,0.4-0.4,0.7-0.4h0.2c0.4,0,0.7,0.3,0.7,0.7 + v7c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-5l-2.1,3.1c-0.2,0.2-0.3,0.4-0.6,0.4c-0.3,0-0.5-0.1-0.6-0.4l-2-3.1v5 + c0,0.4-0.3,0.7-0.7,0.7S78,8.3,78,7.9V0.8z"/> + <path d="M88.5,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/> + <path d="M92.2,0.8c0-0.4,0.3-0.7,0.7-0.7h0.2c0.4,0,0.6,0.2,0.8,0.4L98.1,6V0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1 + c0,0.4-0.3,0.7-0.7,0.7h-0.1c-0.3,0-0.6-0.2-0.8-0.4l-4.3-5.6v5.3c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/> + <path d="M101.2,7.6l3.1-7c0.2-0.4,0.5-0.6,0.9-0.6h0.1c0.4,0,0.7,0.2,0.9,0.6l3.1,7c0.1,0.1,0.1,0.2,0.1,0.3c0,0.4-0.3,0.7-0.7,0.7 + c-0.3,0-0.6-0.2-0.7-0.5l-0.7-1.6h-4.1l-0.7,1.6c-0.1,0.3-0.4,0.5-0.7,0.5c-0.4,0-0.7-0.3-0.7-0.7C101.1,7.8,101.2,7.7,101.2,7.6z + M106.7,5.2l-1.5-3.4l-1.5,3.4H106.7z"/> + <path d="M112.1,1.5h-2c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h5.6c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-2.1v6.4 + c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V1.5z"/> + <path d="M117,4.4L117,4.4c0-2.4,1.8-4.4,4.4-4.4c2.6,0,4.4,2,4.4,4.3v0c0,2.4-1.8,4.3-4.4,4.3C118.8,8.7,117,6.7,117,4.4z + M124.2,4.4L124.2,4.4c0-1.7-1.2-3-2.9-3s-2.8,1.3-2.8,3v0c0,1.6,1.2,3,2.9,3S124.2,6,124.2,4.4z"/> + <path d="M127.5,0.9c0-0.4,0.3-0.7,0.7-0.7h3c1.1,0,1.9,0.3,2.4,0.8c0.4,0.5,0.7,1.1,0.7,1.8v0c0,1.3-0.8,2.2-1.9,2.5l1.6,2 + c0.1,0.2,0.2,0.3,0.2,0.6c0,0.4-0.3,0.7-0.7,0.7c-0.3,0-0.6-0.2-0.7-0.4l-2-2.6H129v2.3c0,0.4-0.3,0.7-0.7,0.7 + c-0.4,0-0.7-0.3-0.7-0.7V0.9z M131.2,4.3c1.1,0,1.7-0.6,1.7-1.4v0c0-0.9-0.6-1.4-1.7-1.4H129v2.8H131.2z"/> + </g> + </svg> + <h3><strong i18n-text="clickToRemove"></strong> <span i18n-text="altClickRemove"></span></h3> + </header> + <section> + <h3 i18n-text="commandButtons"></h3> + <ul> + <li class="<!-- @echo undo -->"> + <span class="<!-- @echo icon -->"></span> + <span i18n-text="undoLast"></span> + </li> + <li class="<!-- @echo stylize -->"> + <span class="<!-- @echo icon -->"></span> + <span i18n-text="addStylize"></span> + </li> + <li class="<!-- @echo noGraphics -->"> + <span class="<!-- @echo icon -->"></span> + <span i18n-text="removeGraphics"></span> + </li> + <li class="<!-- @echo print -->"> + <span class="<!-- @echo icon -->"></span> + <span i18n-text="sendToPrint"></span> + </li> + </ul> + <div class="commands-wrap"> + <p class="<!-- @echo toggle -->" i18n-text="viewKeyboardCommands"></p> + <table id="<!-- @echo keyboard -->" style="display:none"> + <thead> + <tr> + <th class="key" i18n-text="keyColumn"></th> + <th i18n-text="descriptionColumn"></th> + </tr> + </thead> + <tbody> + <tr> + <td> + <kbd i18n-text="keyPageUp"></kbd> <span class="lower" i18n-text="orText"></span> <kbd class="bold" i18n-title="keyUpArrow">↑</kbd> + </td> + <td i18n-text="upDescription"></td> + </tr> + <tr> + <td> + <kbd i18n-text="keyPageDown"></kbd> <span class="lower" i18n-text="orText"></span> <kbd class="bold" i18n-title="keyDownArrow">↓</kbd> + </td> + <td i18n-text="downDescription"></td> + </tr> + <tr> + <td><kbd class="bold" i18n-title="keyRightArrow">→</kbd></td> + <td i18n-text="rightDescription"></td> + </tr> + <tr> + <td><kbd class="bold" i18n-title="keyLeftArrow">←</kbd></td> + <td i18n-text="leftDescription"></td> + </tr> + <tr> + <td><kbd i18n-text="keyEnter"></kbd></td> + <td i18n-text="removeHighlight"></td> + </tr> + <tr> + <td><kbd i18n-text="keyBackspace"></kbd></td> + <td i18n-text="undoAction">n</td> + </tr> + <tr> + <td><kbd i18n-title="keyNumpadPlus"><span i18n-text="keyNumpad"></span> <span class="bold">+</span></kbd></td> + <td i18n-text="fontUp"></td> + </tr> + <tr> + <td><kbd i18n-title="keyNumpadMinus"><span i18n-text="keyNumpad"></span> <span class="bold">-</span></kbd></td> + <td i18n-text="fontDown"></td> + </tr> + <tr> + <td><kbd i18n-title="keyNumpadAsterisk"><span i18n-text="keyNumpad"></span> <span class="bold asterisk">*</span></kbd></td> + <td i18n-text="fontReset"></td> + </tr> + <tr> + <td> + <kbd i18n-text="keyAlt"></kbd> + <span class="<!-- @echo icon --> <!-- @echo leftClick -->" i18n-title="mouseLeftClick"></span> + </td> + <td i18n-text="removeOpposite"></td> + </tr> + <tr> + <td> + <kbd i18n-text="keyShift"></kbd> + <span class="<!-- @echo icon --> <!-- @echo leftClick -->" i18n-title="mouseLeftClick"></span> + </span> + </td> + <td i18n-text="fullWidth"></td> + </tr> +<!-- + <tr> + <td><kbd i18n-text="keyPS" i18n-title="keyPSTitle"></kbd></td> + <td i18n-text="printPage"></td> + </tr> + <tr> + <td><kbd i18n-text="keyEsc" i18n-title="keyEscTitle"></kbd></td> + <td i18n-text="abort"></td> + </tr> +--> + <tr> + <td><kbd i18n-text="keyF1" i18n-title="keyF1Title"></kbd></td> + <td i18n-text="toggleMessages"></td> + </tr> + </tbody> + </table> + </div> + </section> + <script src="popup.js"></script> +</body> +</html> diff --git a/src/chrome/popup.js b/src/chrome/popup.js new file mode 100644 index 0000000..a0d86cb --- /dev/null +++ b/src/chrome/popup.js @@ -0,0 +1,145 @@ +/*globals chrome */ +// inject printliminator from popup & control from there. +var commands = { + remove : function() { + chrome.tabs.executeScript( null, { + code: 'thePrintliminator.removeGraphics();' + }); + }, + print : function() { + document.querySelector( 'li.print' ).classList.add( '/* @echo busy */' ); + // ready state is delayed when a file on the page is not found + chrome.tabs.executeScript( null, { + code : 'document.readyState === "complete";' + }, function( result ) { + if ( result && result[ 0 ] === true ) { + window.close(); + chrome.tabs.executeScript( null, { + code : 'thePrintliminator.print();' + }); + } else { + // keep checking ready state for 20 seconds + // if still not ready, abort, but still call print function + var loopy = function( i ) { + setTimeout(function () { + chrome.tabs.executeScript( null, { + code : 'document.readyState === "complete";' + }, function( result ) { + if ( result && result[ 0 ] === true || i === 1 ) { + i = 0; + window.close(); + chrome.tabs.executeScript( null, { + code : 'thePrintliminator.print();' + }); + } + if ( --i > 0 ) { + loopy(i); + } + }); + }, 1000); + }; + // repeat 20 times (20 seconds), then just close the popup + loopy( 20 ); + } + }); + }, + stylize : function() { + chrome.tabs.executeScript( null, { + code : 'thePrintliminator.stylize();' + }); + }, + keyboard : function() { + var indx, + table = document.querySelector( '#/* @echo keyboard */' ), + mode = table.style.display === 'none'; + table.style.display = mode ? '' : 'none'; + this.innerHTML = ( mode ? 'Hide' : 'View' ) + ' Keyboard Commands'; + + }, + undo : function() { + chrome.tabs.executeScript( null, { + code : 'thePrintliminator.undo();' + }); + }, + setLanguage : function(){ + // update all text content + commands.getMsg( document.querySelectorAll( '[i18n-text]' ), true ); + commands.getMsg( document.querySelectorAll( '[i18n-title]' ), false ); + }, + getMsg : function( elms, isText ) { + var indx, msgKey, message, + len = elms.length; + for ( indx = 0; indx < len; indx++ ) { + msgKey = elms[ indx ].getAttribute( 'i18n-' + ( isText ? 'text' : 'title' ) ); + message = chrome.i18n.getMessage( msgKey ); + if ( isText ) { + elms[ indx ].innerHTML = message; + } else { + elms[ indx ].title = message; + } + } + } +}; + +chrome.windows.getCurrent( function( win ) { + chrome.tabs.query({ + windowId : win.id, + active : true + }, function( tabArray ) { + + // don't try to open a popup on chrome settings pages + if ( tabArray && /^chrome/.test( tabArray[ 0 ].url || '' ) ) { + return false; + } + + // inject css & js only on initial click + chrome.tabs.executeScript( null, { + code : 'document.querySelector( "body" ).classList.contains( "/* @echo enabled */" );', + matchAboutBlank : true + }, function( result ) { + if ( result && !result[ 0 ] ) { + chrome.tabs.insertCSS( null, { + file : 'printliminator.css', + matchAboutBlank : true + }); + + chrome.tabs.executeScript( null, { + file: 'printliminator.js', + matchAboutBlank : true + }, function() { + chrome.tabs.executeScript( null, { + code : 'thePrintliminator.init();' + }); + }); + } + // update Language + commands.setLanguage(); + }); + + // Remove graphics + var el = document.querySelector( './* @echo noGraphics */' ); + el.removeEventListener( 'click', commands.remove ); + el.addEventListener( 'click', commands.remove ); + + // Print + el = document.querySelector( './* @echo print */' ); + el.removeEventListener( 'click', commands.print ); + el.addEventListener( 'click', commands.print ); + + // Add print stylesheet + el = document.querySelector( './* @echo stylize */' ); + el.removeEventListener( 'click', commands.stylize ); + el.addEventListener( 'click', commands.stylize ); + + // Undo + el = document.querySelector( './* @echo undo */' ); + el.removeEventListener( 'click', commands.undo ); + el.addEventListener( 'click', commands.undo ); + + // keyboard + el = document.querySelector( './* @echo toggle */' ); + el.removeEventListener( 'click', commands.keyboard ); + el.addEventListener( 'click', commands.keyboard ); + + }); +}); diff --git a/src/chrome/popup.scss b/src/chrome/popup.scss new file mode 100644 index 0000000..bfff2a6 --- /dev/null +++ b/src/chrome/popup.scss @@ -0,0 +1,177 @@ +$icon : /* @echo icon */; +$print : /* @echo print */; +$close : /* @echo close */; +$undo : /* @echo undo */; +$noGraphics : /* @echo noGraphics */; +$stylize : /* @echo stylize */; +$busy : /* @echo busy */; +$leftClick : /* @echo leftClick */; +$toggle : /* @echo toggle */; + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + +html, body { + width: 450px; + min-height: 160px; + padding: 0; + margin: 0; + background: #eee; + font-size: 14px; + font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif; + overflow: hidden; +} +header { + background-color: #fff; + padding: 12px 10px 1px 10px; + + h3 { + color: #ccc; + margin: 0 0 10px; + } + h3 strong { + color: red; + margin: 0; + } +} + +header, section * { + cursor: default; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} +section { + padding: 2px 0; +} +.logo { + width: 225px; + height: 15px; + margin: 0; +} + +h3 { + text-transform: uppercase; + font-size: 10px; + font-weight: bold; + color: #000; + margin: 10px 12px; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + text-align: center; +} +li { + background: #000; + color: #fff; + display: inline-block; + font-size: 10px; + line-height: 12px; + text-align: left; + text-transform: uppercase; + vertical-align: middle; + padding: 4px 16px 4px 4px; + white-space: nowrap; + margin: 2px; + cursor: pointer; + + &:hover { + background: #444; + } + +} + +.#{$icon} { + display: inline-block; + background: url(printliminator.png) no-repeat; + width: 25px; + height: 25px; + margin: 0 8px 0 0; + vertical-align: middle; + float: left; +} + +.#{$print} .#{$icon} { background-position: -25px 0; } +.#{$undo} .#{$icon} { background-position: 0 -25px; } +.#{$noGraphics} .#{$icon} { background-position: -25px -25px; } +.#{$stylize} .#{$icon} { background-position: -75px -25px; width: 35px; } +.#{$leftClick} { background-position: -50px -25px; float: none; } +li.#{$busy} .#{$icon} { + background-position: -50px 0; + -webkit-animation:spin 2s linear infinite; + -moz-animation:spin 2s linear infinite; + animation:spin 2s linear infinite; +} + +@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } +@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } +@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } + +.hidden { + display: none; +} +.commands-wrap { + margin: 8px 0 0 0; + padding: 12px; + background: #ccc; +} +.#{$toggle} { + font-size: 12px; + margin: 0 0 5px 0; + cursor: pointer; +} +/* keyboard table */ +table { + font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif; + font-size: 12px; + text-transform: initial; + margin-top: 4px 0 0 0; + padding: 0; +} +tbody tr:hover td { + background: #ddd; +} +tbody tr:hover kbd { + background: #eee; +} +th { + text-align: left; + padding: 0 0 10px 0; +} +th.key { + width: 30%; +} +td { + text-align: left; + font-size: 12px; + vertical-align: top; + border-top: #aaa 1px solid; + padding: 5px; +} +td svg { + vertical-align: middle; +} +kbd { + background: #fff; + border-radius: 3px; + border: #333 1px solid; + padding: 2px 4px; +} +span.lower { + text-transform: lowercase; +} +span.small { + font-size: 0.7em; +} +/* center asterisk vertically inside of kbd */ +.asterisk { + position: relative; + top: 2px; +} |