').append(element).html(),
css: css,
width: width,
height: height,
base_url: window.location.href
};
$element.trigger('shutterbug-asyouwere');
callback(html_content);
});
};
ShutterbugWorker.prototype.getDomSnapshot = function() {
this.enableIframeCommunication(); // !!!
// Start timer.
var self = this;
var time = 0;
var counter = $("");
counter.html(time);
$(self.imgDst).html("creating snapshot: ").append(counter);
this.timer = setInterval(function(t) {
time = time + 1;
counter.html(time);
}, 1000);
var tagName = $(this.element).prop("tagName");
switch(tagName) {
case "CANVAS":
this.canvasSnapshot();
break;
default:
this.basicSnapshot();
break;
}
};
ShutterbugWorker.prototype.canvasSnapshot = function() {
if (!BIN_DATA_SUPPORTED) {
return this.basicSnapshot();
}
var self = this;
$.ajax({
type: 'GET',
url: this.server + '/img_upload_url?format=' + this.imageFormat
}).done(function(data) {
self.directUpload(data);
}).fail(function() {
// Use basic snapshot as a fallback.
// Direct upload is not supported on server side (e.g. due to used storage).
self.basicSnapshot();
});
};
ShutterbugWorker.prototype.directUpload = function(options) {
var $canvas = $(this.element);
var dataURL = $canvas[0].toDataURL('image/' + this.imageFormat, this.imageQuality)
var blob = htmlTools.dataURLtoBlob(dataURL);
var self = this;
$.ajax({
type: 'PUT',
url: options.put_url,
data: blob,
processData: false,
contentType: false
}).done(function(data) {
self._successHandler("![](" + options.get_url + ")
");
}).fail(function(jqXHR, textStatus, errorThrown) {
self._failHandler(jqXHR, textStatus, errorThrown)
}).always(function() {
self._alwaysHandler();
});
}
ShutterbugWorker.prototype.basicSnapshot = function() {
var self = this;
// Ask for HTML fragment and render it on server.
this.getHtmlFragment(function(html_data) {
html_data.format = self.imageFormat;
html_data.quality = self.imageQuality;
$.ajax({
url: self.server + '/make_snapshot',
type: 'POST',
data: html_data
}).done(function(msg) {
self._successHandler(msg)
}).fail(function(jqXHR, textStatus, errorThrown) {
self._failHandler(jqXHR, textStatus, errorThrown);
}).always(function() {
self._alwaysHandler();
});
});
};
ShutterbugWorker.prototype._successHandler = function(imageTag) {
if (this.imgDst) {
$(this.imgDst).html(imageTag);
}
if (this.callback) {
// Extract the url out of the returned html fragment.
var imgUrl = imageTag.match(/src=['"]([^'"]*)['"]/)[1];
this.callback(imgUrl);
}
};
ShutterbugWorker.prototype._failHandler = function(jqXHR, textStatus, errorThrown) {
if (this.imgDst) {
$(this.imgDst).html("snapshot failed");
}
if (this.failCallback) {
this.failCallback(jqXHR, textStatus, errorThrown);
}
}
ShutterbugWorker.prototype._alwaysHandler = function() {
clearInterval(this.timer);
this.disableIframeCommunication(); // !!!
if (this.alwaysCallback) {
this.alwaysCallback();
}
};
ShutterbugWorker.prototype.htmlSnap = function() {
this.getHtmlFragment(function callback(fragment) {
// FIXME btoa is not intended to encode text it is for for 8bit per char strings
// so if you send it a UTF8 string with a special char in it, it will fail
// this SO has a note about handling this:
// http://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript
// also note that btoa is only available in IE10+
var encodedContent = btoa(htmlTools.generateFullHtmlFromFragment(fragment));
window.open("data:text/html;base64," + encodedContent);
});
};
ShutterbugWorker.prototype.imageSnap = function() {
var oldImgDst = this.imgDst,
oldCallback = this.callback,
self = this;
this.imgDst = null;
this.callback = function (imgUrl) {
window.open(imgUrl);
self.imgDst = oldImgDst;
self.callback = oldCallback;
}
this.getDomSnapshot();
};
// ### Iframe-iframe communication related methods ###
// Basic post message handler.
ShutterbugWorker.prototype._postMessageHandler = function(message) {
function handleMessage(message, type, handler) {
var data = message.data;
if (typeof data === 'string') {
try {
data = JSON.parse(data);
if (data.type === type) {
handler(data, message.source);
}
} catch(e) {
// Not a json message. Ignore it. We only speak json.
}
}
}
handleMessage(message, 'htmlFragRequest', this._htmlFragRequestHandler.bind(this));
handleMessage(message, 'htmlFragResponse', this._htmlFragResponseHandler.bind(this));
};
// Iframe receives question about its content.
ShutterbugWorker.prototype._htmlFragRequestHandler = function(data, source) {
// Update timeout. When we receive a request from parent, we have to finish nested iframes
// rendering in that time. Otherwise parent rendering will timeout.
// Backward compatibility: Shutterbug v0.1.x don't send iframeReqTimeout.
this.iframeReqTimeout = data.iframeReqTimeout != null ? data.iframeReqTimeout : MAX_TIMEOUT;
this.getHtmlFragment(function(html) {
var response = {
type: 'htmlFragResponse',
value: html,
iframeReqId: data.iframeReqId,
id: data.id // return to sender only
};
source.postMessage(JSON.stringify(response), "*");
});
};
// Parent receives content from iframes.
ShutterbugWorker.prototype._htmlFragResponseHandler = function(data) {
if (data.id === this.id) {
// Backward compatibility: Shutterbug v0.1.x don't send iframeReqId.
var iframeReqId = data.iframeReqId != null ? data.iframeReqId : 0;
this._iframeContentRequests[iframeReqId].resolve(data.value);
}
};
// Parent asks iframes about their content.
ShutterbugWorker.prototype._postHtmlFragRequestToIframe = function(iframeElem, iframeId) {
var message = {
type: 'htmlFragRequest',
id: this.id,
iframeReqId: iframeId,
// We have to provide smaller timeout while sending message to nested iframes.
// Otherwise, when one of the nested iframes timeouts, then all will do the
// same and we won't render anything - even iframes that support Shutterbug.
iframeReqTimeout: this.iframeReqTimeout * 0.6
};
iframeElem.contentWindow.postMessage(JSON.stringify(message), "*");
var requestDeffered = new $.Deferred();
this._iframeContentRequests[iframeId] = requestDeffered;
setTimeout(function() {
// It handles a situation in which iframe doesn't support Shutterbug.
// When we doesn't receive answer for some time, assume that we can't
// render this particular iframe (provide null as iframe description).
if (requestDeffered.state() !== "resolved") {
requestDeffered.resolve(null);
}
}, this.iframeReqTimeout);
};
// ###
module.exports = ShutterbugWorker;
});
require.register("scripts/shutterbug", function(exports, require, module) {
var ShutterbugWorker = require('scripts/shutterbug-worker');
function parseSnapshotArguments(arguments) {
var selector;
var doneCallback;
var dstSelector;
var options = {};
function assignSecondArgument(arg) {
if (typeof arg === 'string') { dstSelector = arg; }
else if (typeof arg === 'function') { doneCallback = arg; }
else if (typeof arg === 'object') { options = arg; }
}
if (arguments.length === 3) {
options = arguments[2];
assignSecondArgument(arguments[1]);
selector = arguments[0];
} else if (arguments.length === 2) {
assignSecondArgument(arguments[1]);
selector = arguments[0];
} else if (arguments.length === 1) {
options = arguments[0];
}
if (selector) { options.selector = selector; }
if (doneCallback) { options.done = doneCallback; }
if (dstSelector) { options.dstSelector = dstSelector; }
return options;
}
module.exports = {
snapshot: function() {
var options = parseSnapshotArguments(arguments);
var worker = new ShutterbugWorker(options);
worker.getDomSnapshot();
},
enable: function(selector) {
this.disable();
selector = selector || 'body';
this._iframeWorker = new ShutterbugWorker({selector: selector});
this._iframeWorker.enableIframeCommunication();
},
disable: function() {
if (this._iframeWorker) {
this._iframeWorker.disableIframeCommunication();
}
}
};
});
// Do not force users to call require() manually, export Shutterbug constructor.
// See: https://github.com/brunch/brunch/issues/712
window.Shutterbug = require('scripts/shutterbug');