screenshotter.DOM.js

/*
 *  Screenshoterest based on:
 *
 *  Blipshot
 *  Screenshotter.DOM.js
 *  Half of the screenshotter algorithm. See Screenshotter.js for the other half.
 *
 *  ==========================================================================================
 *  
 *  Copyright (c) 2010-2012, Davide Casali.
 *  All rights reserved.
 *  
 *  Redistribution and use in source and binary forms, with or without modification, are 
 *  permitted provided that the following conditions are met:
 *  
 *  Redistributions of source code must retain the above copyright notice, this list of 
 *  conditions and the following disclaimer.
 *  Redistributions in binary form must reproduce the above copyright notice, this list of 
 *  conditions and the following disclaimer in the documentation and/or other materials 
 *  provided with the distribution.
 *  Neither the name of the Baker Framework nor the names of its contributors may be used to 
 *  endorse or promote products derived from this software without specific prior written 
 *  permission.
 *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 *  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 
 *  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT 
 *  SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, 
 *  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
 *  PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
 *  INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT 
 *  LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 
 *  OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 */

(function() {
  
  var shared = {},
      disableJS = {},
      totalHeight = 0,
      steps = 0,
      actualStep = 0,
      currentStep = 0,
      maxSteps = 10,
      res = [],
      bodyOverflowX;
  
  // ****************************************************************************************** SCREENSHOT SEQUENCE
  
  // 1
  function screenshotBegin(shared) {
    res = [];
    bodyOverflowX = $("body").css("overflow-x");
    enableFixedPosition(false);
    currentStep = 0;
      
    shared.originalScrollTop = window.document.body.scrollTop; // ->[] save user scrollTop
    shared.tab.hasVscrollbar = (window.innerHeight < window.document.body.scrollHeight);
    window.document.body.scrollTop = 0;
    setTimeout(function() { screenshotVisibleArea(shared); }, 100);

  }
  
  // 2
  function screenshotVisibleArea(shared) { 
    enableFixedPosition(false);
      
    setTimeout(function(){
        chrome.extension.sendMessage({ action: 'screenshotVisibleArea', shared: shared }); 

        var body = document.body,
        html = document.documentElement;

        totalHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );

        ++currentStep;
    },100);
  }
    
  /**-- deal with fixed elements --**/
// Copyright (c) 2010 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// http://code.google.com/p/chrome-screen-capture/
function enableFixedPosition(enableFlag) {
//    
    // Get fixed elements
    //alert($('*').filter(function(){ return this.style && this.style.position === 'fixed' }));//.css("position","absolute");
    $("*").each(function(){
        if ($(this).css("position") === "fixed") {
            isFixed = true;
            res.push($(this));
            $(this).css({"position": "absolute"});
        }
    });
    
    $("body").css({"overflow-x": "hidden"});
}
function restoreFixedElements() {
//    alert(res.length);
    for(i=0; i < res.length; ++i){
//        alert(res[i].attr("class"));
        res[i].css({"position": "fixed"});
    }
    $("body").css({"overflow-x": bodyOverflowX});
}
    
  // 3
  function screenshotScroll(shared) {
    var scrollTopCurrent = window.document.body.scrollTop;
    
    //TODO: bug: doesn't screenshot correctly
    window.document.body.scrollTop += window.innerHeight; // scroll!
    
    if (window.document.body.scrollTop == scrollTopCurrent || currentStep > maxSteps) {
      // END ||
      restoreFixedElements();
        
        var cut = scrollTopCurrent % window.document.documentElement.clientHeight;
//      shared.imageDirtyCutAt.push(cut);
//      shared.imageDirtyCutAtArray.push(shared.imageDirtyCutAt);
      window.document.body.scrollTop = shared.originalScrollTop; // <-[] restore user scrollTop
      screenshotEnd(shared,cut);
    } else {
      // LOOP >>
      setTimeout(function() { screenshotVisibleArea(shared); }, 100);
    }
  }
  
  // 4
  function screenshotEnd(shared,cut) { chrome.extension.sendMessage({ action: 'screenshotEnd', shared: shared, cut: cut }); }
  
  // 5
  function screenshotReturn(shared) {
    function pad2(str) { if ((str + "").length == 1) return "0" + str; return "" + str; }
    
    var d = new Date();
    var timestamp = '' + d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDay()) + '-' + pad2(d.getHours()) + '' + pad2(d.getMinutes()) + '';
    var filename = "pageshot of '" + normalizeFileName(shared.tab.title) + "' @ " + timestamp;
    var blobURL = dataToBlobURL(shared.imageDataURL);
    
    // ****** Add DOM Elements to Page
    var div = window.document.createElement('div');
    div.id = "screenshoterest";
    div.innerHTML = '<div id="screenshoterest-dim" style="position: fixed !important; height: ' + window.document.body.scrollHeight + 'px !important; width: 100% !important; top: 0px !important; left: 0px !important; background: #000000 !important; opacity: 0.66 !important; z-index: 6666666 !important;"> </div>';
    div.innerHTML += '<p style="-webkit-box-shadow: 0px 5px 10px #000000; margin: 20px; background: #ffffff; position: fixed; top: 0; right: 0; z-index: 6666667 !important;"><img id="screenshoterest-img" alt="' + filename + '" src="' +  blobURL + '" width= "400" /></p>';
    window.document.body.appendChild(div);
    
    // ****** Add Event Listeners
    function actionRemoveDiv() {
      // Closes the extension overlays.
      var screenshoterestdiv = window.document.getElementById('screenshoterest');
      if (screenshoterestdiv) screenshoterestdiv.parentElement.removeChild(screenshoterestdiv);
      
      chrome.extension.sendMessage({ action: 'removeDiv'});

      // Cleanup
      window.webkitURL.revokeObjectURL(blobURL);
    }
    function actionDrag(e) {
      e.dataTransfer.setData("DownloadURL", "image/png:" + filename + ".png:" + blobURL);
    }
    window.document.getElementById('screenshoterest-dim').addEventListener("click", actionRemoveDiv);
    window.document.getElementById('screenshoterest-img').addEventListener("dragstart", actionDrag);
  }
  
  // ****************************************************************************************** EVENT MANAGER / HALF
  function eventManagerInit() {
    /****************************************************************************************************
     * This function prepares the internal plugin callbacks to bounce between the plugin and DOM side.
     * It's initialized right after declaration.
     */
    var self = this;
    chrome.extension.onMessage.addListener(function(e) {
        switch (e.action) {
          case "screenshotBegin": screenshotBegin(e.shared); break;
          case "screenshotScroll": screenshotScroll(e.shared); break;
          case "screenshotReturn": screenshotReturn(e.shared); break;
        }
    });
  }
  eventManagerInit(); // Init
  
  // ****************************************************************************************** SUPPORT
  function dataToBlobURL(dataURL) {
    /****************************************************************************************************
     * Converts a data:// URL (i.e. `canvas.toDataURL("image/png")`) to a blob:// URL.
     * This allows a shorter URL and a simple management of big data objects.
     * 
     * Contributor: Ben Ellis <https://github.com/ble>
     */
    var parts = dataURL.match(/data:([^;]*)(;base64)?,([0-9A-Za-z+/]+)/);
    
    // Assume base64 encoding
    var binStr = atob(parts[3]);
    
    // Convert to binary in ArrayBuffer
    var buf = new ArrayBuffer(binStr.length);
    var view = new Uint8Array(buf);
    for(var i = 0; i < view.length; i++)
      view[i] = binStr.charCodeAt(i);

    // Create blob with mime type, create URL for it
    var blob = new Blob([view], {'type': parts[1]});
    var URL = webkitURL.createObjectURL(blob)
    
    return URL;
  }
  
  function normalizeFileName(string) {
    out = string;
    //out = out.replace(/"/, '\''); // To avoid collision with DOM attribute
    //out = out.replace(/\/\?<>\\:\*\|/, '-'); // Windows safe
    out = out.replace(/[^a-zA-Z0-9_\-+,;'!?$£@&%()\[\]=]/g, " ").replace(/ +/g, " "); // Hard replace
    return out;
  }
})();