From f7ad5e1649f38abec82eb64521f630aba02eed9d Mon Sep 17 00:00:00 2001
From: salihsagdilek <salihsagdilek@gmail.com>
Date: Thu, 26 Nov 2015 10:52:31 +0200
Subject: [PATCH] responsive screenshot example

---
 examples/responsive-screenshot.js | 181 ++++++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 examples/responsive-screenshot.js

diff --git a/examples/responsive-screenshot.js b/examples/responsive-screenshot.js
new file mode 100644
index 000000000..35aac605f
--- /dev/null
+++ b/examples/responsive-screenshot.js
@@ -0,0 +1,181 @@
+/**
+ * Captures the full height document even if it's not showing on the screen or captures with the provided range of screen sizes.
+ *
+ * A basic example for taking a screen shot using phantomjs which is sampled for https://nodejs-dersleri.github.io/
+ *
+ * usage : phantomjs responsive-screenshot.js {url} [output format] [doClipping]
+ *
+ * examples >
+ *      phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/
+ *      phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/ pdf
+ *      phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/ true
+ *      phantomjs responsive-screenshot.js https://nodejs-dersleri.github.io/ png true
+ *
+ * @author Salih sagdilek <salihsagdilek@gmail.com>
+ */
+
+/**
+ * http://phantomjs.org/api/system/property/args.html
+ *
+ * Queries and returns a list of the command-line arguments.
+ * The first one is always the script name, which is then followed by the subsequent arguments.
+ */
+var args = require('system').args;
+/**
+ * http://phantomjs.org/api/fs/
+ *
+ * file system api
+ */
+var fs = require('fs');
+
+/**
+ * http://phantomjs.org/api/webpage/
+ *
+ * Web page api
+ */
+var page = new WebPage();
+
+/**
+ * if url address does not exist, exit phantom
+ */
+if ( 1 === args.length ) {
+    console.log('Url address is required');
+    phantom.exit();
+}
+
+/**
+ *  setup url address (second argument);
+ */
+var urlAddress = args[1].toLowerCase();
+
+
+/**
+ * set output extension format
+ * @type {*}
+ */
+var ext = getFileExtension();
+
+/**
+ * set if clipping ?
+ * @type {boolean}
+ */
+var clipping = getClipping();
+
+/**
+ * setup viewports
+ */
+var viewports = [
+    {
+        width : 1200,
+        height : 800
+    },
+    {
+        width : 1024,
+        height : 768
+    },
+    {
+        width : 768,
+        height : 1024
+    },
+    {
+        width : 480,
+        height : 640
+    },
+    {
+        width : 320,
+        height : 480
+    }
+];
+
+page.open(urlAddress, function (status) {
+    if ( 'success' !== status ) {
+        console.log('Unable to load the url address!');
+    } else {
+        var folder = urlToDir(urlAddress);
+        var output, key;
+
+        function render(n) {
+            if ( !!n ) {
+                key = n - 1;
+                page.viewportSize = viewports[key];
+                if ( clipping ) {
+                    page.clipRect = viewports[key];
+                }
+                output = folder + "/" + getFileName(viewports[key]);
+                console.log('Saving ' + output);
+                page.render(output);
+                render(key);
+            }
+        }
+
+        render(viewports.length);
+    }
+    phantom.exit();
+});
+
+/**
+ * filename generator helper
+ * @param viewport
+ * @returns {string}
+ */
+function getFileName(viewport) {
+    var d = new Date();
+    var date = [
+        d.getUTCFullYear(),
+        d.getUTCMonth() + 1,
+        d.getUTCDate()
+    ];
+    var time = [
+        d.getHours() <= 9 ? '0' + d.getHours() : d.getHours(),
+        d.getMinutes() <= 9 ? '0' + d.getMinutes() : d.getMinutes(),
+        d.getSeconds() <= 9 ? '0' + d.getSeconds() : d.getSeconds(),
+        d.getMilliseconds()
+    ];
+    var resolution = viewport.width + (clipping ? "x" + viewport.height : '');
+
+    return date.join('-') + '_' + time.join('-') + "_" + resolution + ext;
+}
+
+/**
+ * output extension format helper
+ *
+ * @returns {*}
+ */
+function getFileExtension() {
+    if ( 'true' != args[2] && !!args[2] ) {
+        return '.' + args[2];
+    }
+    return '.png';
+}
+
+/**
+ * check if clipping
+ *
+ * @returns {boolean}
+ */
+function getClipping() {
+    if ( 'true' == args[3] ) {
+        return !!args[3];
+    } else if ( 'true' == args[2] ) {
+        return !!args[2];
+    }
+    return false;
+}
+
+/**
+ * url to directory helper
+ *
+ * @param url
+ * @returns {string}
+ */
+function urlToDir(url) {
+    var dir = url
+        .replace(/^(http|https):\/\//, '')
+        .replace(/\/$/, '');
+
+    if ( !fs.makeTree(dir) ) {
+        console.log('"' + dir + '" is NOT created.');
+        phantom.exit();
+    }
+    return dir;
+}