From 499adbd59e8958c1596b7ae60d410a733de7650a Mon Sep 17 00:00:00 2001 From: Mottie Date: Sat, 22 Aug 2015 18:22:14 -0500 Subject: Add grunt build process: 1) The "src/bookmarklet.js" file contains the uncompressed bookmarklet code. 2) In the build process, that file is minified & added into the "src/index.html" file in two places: a) The actual link href (default link). b) development bookmarklet link (inside js code which updates the link). 3) A new "index.html" and minified "printliminator.min.js" file are written to the root folder. 4) When the "index.html" in the root folder is loaded in the browser, and the js detects the origin is "file://", then the links in the "index.html" file get changed and to point to local files to make it easier for development. --- Gruntfile.js | 138 +++++++++++++++++++++++++++ README.markdown | 1 - README.md | 15 +++ demo/css/style.css | 6 ++ demo/images/printliminator2.png | Bin 9840 -> 0 bytes index.html | 32 ++++++- js/printliminator.js | 200 --------------------------------------- license.txt | 165 ++++++++++++++++++++++++++++++++ package.json | 45 +++++++++ printliminator.min.js | 1 + printliminator.png | Bin 0 -> 9840 bytes src/bookmarklet.js | 27 ++++++ src/index.html | 63 +++++++++++++ src/printliminator.js | 202 ++++++++++++++++++++++++++++++++++++++++ 14 files changed, 689 insertions(+), 206 deletions(-) create mode 100644 Gruntfile.js delete mode 100644 README.markdown create mode 100644 README.md delete mode 100644 demo/images/printliminator2.png delete mode 100644 js/printliminator.js create mode 100644 license.txt create mode 100644 package.json create mode 100644 printliminator.min.js create mode 100644 printliminator.png create mode 100644 src/bookmarklet.js create mode 100644 src/index.html create mode 100644 src/printliminator.js diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..9468751 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,138 @@ +/*global module:false*/ +module.exports = function( grunt ) { + 'use strict'; + + var pkg = grunt.file.readJSON( 'package.json' ), + + config = { + src : 'src/', + + bookmarkletJs : 'bookmarklet', + + printliminatorJs : 'printliminator', + printliminatorFunctionName : 'csstricksPrintliminator', + + // 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' + }, + + // note to add to dynamically created index.html in the root folder + note : '' + + }; + + grunt.file.defaultEncoding = 'utf8'; + grunt.file.preserveBOM = false; + + // Project configuration. + grunt.initConfig({ + pkg: pkg, + config: config, + + jshint: { + options: { + globals: { + '<%= config.printliminatorFunctionName %>': false + }, + 'loopfunc': true, + 'jquery': true, + 'browser': true, + 'undef': true + }, + files: { + src: [ + '<%= config.src %><%= config.printliminatorJs %>.js', '!<%= config.src %>*.min.js' + ] + } + }, + + uglify: { + options: { + report: 'gzip' + }, + main: { + files : { + '<%= config.printliminatorJs %>.min.js' : [ '<%= config.src %><%= config.printliminatorJs %>.js' ] + } + }, + mark: { + files : { + '<%= config.bookmarkletJs %>.min.js' : [ '<%= config.src %><%= config.bookmarkletJs %>.js' ] + } + } + }, + + clean: { + build: { + src: [ + config.indexHtml, + config.src + '*.min.js', + '*.min.js' + ] + }, + cleanup : { + src: [ config.bookmarkletJs + '.min.js' ] + } + } + + }); + + grunt.loadNpmTasks( 'grunt-contrib-clean' ); + grunt.loadNpmTasks( 'grunt-contrib-jshint' ); + grunt.loadNpmTasks( 'grunt-contrib-uglify' ); + + grunt.registerTask( 'writeBookmarklet', function(){ + // Add bookmarklet code for both production & development + // load bookmarket min file + var content = grunt.file.read( config.bookmarkletJs + '.min.js' ), + // load index.html template + baseHtml = grunt.file.read( config.src + config.indexHtml ), + + 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" + // and just makes the bookmarklet bigger & harder to read + .replace( /\x20/g, '%20' ); + // add javascript to HTML + baseHtml = baseHtml.replace( new RegExp('\\{' + mode + '\\}'), file ); + }; + + // update production & dev bookmarklet href + modFile( 'production' ); + modFile( 'dev' ); + + // add note so we don't mistakingly update the wrong index.html + // then lose all our changes when grunt is run! + baseHtml = baseHtml.replace( '', config.note ); + + // write modified index.html + grunt.file.write( config.indexHtml, baseHtml ); + }); + + grunt.registerTask( 'default', 'Default build', function() { + grunt.task.run([ + 'clean:build', + 'jshint', + 'uglify', + 'writeBookmarklet', + 'clean:cleanup' + ]); + }); + +}; diff --git a/README.markdown b/README.markdown deleted file mode 100644 index 6195be3..0000000 --- a/README.markdown +++ /dev/null @@ -1 +0,0 @@ -##Bookmarklet for cleaning up pages to make them print better \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..4863ed6 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +# The Printliminator + +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. + +![Screenshot](//css-tricks.github.io/The-Printliminator/images/screenshot.png) + +[Get the Bookmarklet here](//css-tricks.github.io/The-Printliminator/) + +## Credits + +* By [Chris Coyier](http://chriscoyier.net) and [Devon Govett](http://devongovett.wordpress.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/css/style.css b/demo/css/style.css index 2eb1f81..0616b30 100644 --- a/demo/css/style.css +++ b/demo/css/style.css @@ -24,6 +24,12 @@ h1 { letter-spacing: -2px; margin: 0 0 15px 0; } +#dev-mode { + margin-left: 20px; + vertical-align: middle; + font-size: 20px; + color: red; +} p { margin: 0 0 15px 0; } diff --git a/demo/images/printliminator2.png b/demo/images/printliminator2.png deleted file mode 100644 index d117275..0000000 Binary files a/demo/images/printliminator2.png and /dev/null differ diff --git a/index.html b/index.html index d0177f2..98fbb3c 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,20 @@ The Printliminator - + + + +

@@ -18,7 +28,7 @@
-

The Printliminator

+

The Printliminator

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 @@ -26,8 +36,9 @@ Here is the bookmarklet:

- Printliminator - < drag to your bookmarks bar + Printliminator + ← drag to your bookmarks bar +

Video Demo

@@ -43,6 +54,17 @@
+ + - \ No newline at end of file + diff --git a/js/printliminator.js b/js/printliminator.js deleted file mode 100644 index acce311..0000000 --- a/js/printliminator.js +++ /dev/null @@ -1,200 +0,0 @@ -/* Printliminator */ -function csstricksPrintliminator( jQ ) { - // remove conflicts with other javascript libraries - var $ = jQ.noConflict(), - history = [], - flags = {}, - dont = false, - // programmically added stylesheets - root = '', // '//css-tricks.com/examples/ThePrintliminator/'; - 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(' + root + 'images/printliminator2.png) no-repeat; }' + - '._print_controls_close { position: absolute; top: -20px; right: -20px; width: 33px; height: 33px;' + - 'background: url(' + root + 'images/printliminator2.png) -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(' + root + 'images/printliminator2.png) 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; } }'; - - $( '