How to scroll a down a website and take screenshot using protractor.I have attached the code I have tried.
function writeScreenShot(data: string, filename: string) {
var stream = fs.createWriteStream(filename);
stream.write(new Buffer(data, 'base64'));
stream.end();
}
// var foo = element(by.id('foo'));
//of element
//foo.takeScreenshot().then((png) => {
//writeScreenShot(png, 'foo.png');
//});
browser.executeScript('window.scrollTo(0,document.body.scrollHeight)');
//of entire page in viewport
browser.takeScreenshot().then((png) => {
writeScreenShot(png, 'foo.png');
});
Related
I'm trying to take a screen shot of a map that uses dash-leaflet. When the screen shot it taken with html2canvas, the overlay on the map is moved upward and to the left. I have been trying to correct this but the html2canvas documentation is pretty sparse, and I'm not sure what will correct the issue.
$(document).ready(function () {
$(document).on('click', "#btn-frame-download", function () {
var element = document.getElementById("graph-collection"); // global variable
if (element == null) {
element = document.getElementById("prob-graph"); // global variable
if (element == null) {
element = document.getElementById("was-graph"); // global variable
}
}
getCanvas(element);
});
});
function getCanvas(element) {
html2canvas(element, {
scrollX: 0,
scrollY: 0,
allowTaint: true,
useCORS: true,
async: false,
width: element.clientWidth,
height: element.clientHeight,
logging: true,
imageTimeout: 0,
}).then(function (canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
}
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
download-img.js [+]
Original
Output by html2canvas
Above you can see the how the screen looks in it's original format, and then what is output by html2canvas. Any tips would be greatly appreciated.
I am paginating an array that I am loading page per page when I scroll to the bottom of my page. Unfortunately it seems that some chunks of my array keep coming back instead of having the newly loaded bit of array. Any idea what this is happening ??
This is my infinite_scroll_controller.js
import Rails from '#rails/ujs';
export default class extends Controller {
static targets = ["entries", "pagination"]
scroll(){
let next_page = this.paginationTarget.querySelector("a[rel='next']")
if (next_page == null) { return }
let url = next_page.href
var body = document.body,
html = document.documentElement
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
if (window.pageYOffset >= height - window.innerHeight - 100) {
console.log("bottom")
this.loadMore(url)
}
}
loadMore(url){
Rails.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: (data) => {
console.log(data)
this.entriesTarget.insertAdjacentHTML('beforeend', data.entries)
this.paginationTarget.innerHTML = data.pagination
}
})
}
}```
This is in my listing controller
``` #listings = Listing.all.sort_by { |listing| listing.created_at }.reverse!
#pagy_a, #loaded_listings = pagy_array(#listings)
respond_to do |format|
format.html
format.json {
render json: { entries: render_to_string(partial: "listings", formats: [:html]), pagination: view_context.pagy_nav(#pagy_a) }
}
end```
I would like to insert a watermark into a Word document using Office.js. I am able to insert the watermark DRAFT using the sample code from: https://github.com/OfficeDev/Word-Add-in-JS-Watermark/blob/master/WatermarksManagerWeb/Home.js. The sample code places the watermark all on pages.
I am interested in a simpler solution than the one below that places the watermark only on the first page. Thank you.
(function () {
"use strict";
var messageBanner;
// The initialize function must be run each time a new page is loaded.
Office.initialize = function (reason) {
$(document).ready(function () {
$('#createWM').click(insertWaterMark);
$('#deleteWM').click(removeWM);
$('#txtWM').val("DRAFT");
});
};
function insertWaterMark() {
Word.run(function (ctx) {
var mySections = ctx.document.sections;
ctx.load(mySections);
// ctx.document.body.insertOoxml(mywatermark, "end");
return ctx.sync().then(function () {
var myWatermark = getWM($('#txtWM').val());
var myHeader = mySections.items[0].getHeader("primary");
var myRange = myHeader.insertOoxml(myWatermark, "replace");
var myCC = myRange.insertContentControl();
myCC.title = "myTempCC";
myCC.appearance = "hidden";
return ctx.sync();
});
}).catch(function (e) {
app.showNotification(e.message, e.description);
});
}
function getWM(text) {
var mywatermark = "<?xml version=\"1.0\" standalone=\"yes\"?>\r\n<?mso-application progid=\"Word.Document\"?>\r\n<pkg:package xmlns:pkg=\"http://schemas.microsoft.com/office/2006/xmlPackage\"> ... THE REST OF THE OPENXML content for watermark ...</pkg:package>\r\n";
return (mywatermark.replace("CONFIDENTIAL", text));
}
Update: I think I have an idea how to get the watermark on the first page. I implemented the solution, but it doesn't show the watermark. Please look at my code and let me know if you see anything wrong with it.
var mySections = ctx.document.sections;
ctx.load(mySections);
return ctx.sync().then(function () {
var myWatermark = getWM("DRAFT");
var myHeader = mySections.items[0].getHeader(Word.HeaderFooterType.firstPage);
mySections.items[0].headerFooterFirstPageDifferent = true;
var myRange = myHeader.insertOoxml(myWatermark, "replace");
var myCC = myRange.insertContentControl();
myCC.title = "myTempCC";
myCC.appearance = "hidden";
return ctx.sync();
I looked in the documentation, here on stackoverflow, on github and in several places but I couldn't find any solution that would help me to insert a watermark in the page header.
But after a few days of difficulty, I was testing all possible methods and combinations of use until I managed to understand how to insert the watermark. And it's simpler than I thought. Too bad this isn't in Microsoft Docs.
return Word.run( (context) => {
context.document.sections.getFirst().getHeader().insertParagraph('WaterMark', Word.InsertLocation.start);
context.sync();
});
I figured out how to insert a real watermark into the body of a document.
private async insertWatermark(): void {
await Word.run(async (context) => {
const paragraphs = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary).paragraphs;
paragraphs.load("$none");
await context.sync();
const newParagraph = paragraphs.getLastOrNullObject();
let contentControl = newParagraph.insertContentControl();
contentControl.insertOoxml(this.addWatermarkText("My Watermark Text"), Word.InsertLocation.end);
await context.sync();
}
private addWatermarkText(text: string = "My Watermark"): string {
const watermark: string = 'Watermark Content HERE';
return watermark.replace("WATERMARK", text);
}
Get Watermark content in this link for replace this code snippet 'Watermark Content HERE'
as title says, when i wanna update TextDocumentContentProvider with different query params by calling update method provideTextDocumentContent is not called...
only way i managed to get it working was with same URI as in calling
vscode.commands.executeCommand('vscode.previewHtml', URI, 2, 'Storybook');
relevant part of code:
// calculates uri based on editor state - depends on actual caret position
// all uris will start with 'storybook://preview'
function getPreviewUri(editor: vscode.TextEditor): vscode.Uri;
// transforms uri, so web server will understand
// ex: 'storybook://preview?name=fred' -> 'http://localhost:12345/preview/fred?full=1'
function transformUri(uri: vscode.Uri): vscode.Uri;
class StorybookContentProvider implements vscode.TextDocumentContentProvider
{
provideTextDocumentContent(uri: vscode.Uri): string {
var httpUri = transformUri(uri);
return `<iframe src="${httpUri}" />`;
}
onDidChange = new vscode.EventEmitter<vscode.Uri>();
update(uri: vscode.Uri) {
this.onDidChange(uri);
}
}
export function activate(context: vscode.ExtensionContext)
{
vscode.workspace.onDidChangeTextDocument(
(e: vscode.TextDocumentChangeEvent) => {
if (e.document === vscode.window.activeTextEditor.document) {
const previewUri = getPreviewUri(vscode.window.activeTextEditor);
provider.update(previewUri);
}
}
);
vscode.window.onDidChangeTextEditorSelection(
(e: vscode.TextEditorSelectionChangeEvent) => {
if (e.textEditor === vscode.window.activeTextEditor) {
const previewUri = getPreviewUri(vscode.window.activeTextEditor);
provider.update(previewUri);
}
}
);
const provider = new StorybookContentProvider();
context.subscriptions.push(
vscode.commands.registerCommand('extension.showStorybook', () => {
vscode.commands.executeCommand('vscode.previewHtml', vscode.Uri.parse('storybook://preview'), 2, 'Storybook')
}),
vscode.workspace.registerTextDocumentContentProvider('storybook', provider)
);
}
I'm using fancy tree viewer. https://github.com/mar10/fancytree
How to change the icon of a node dynamically based on an event.
The below code will loop through all child nodes after a lazy load, and change the child's icon (if the child is a node and not a folder). The renderTitle() is important here, as this tells the node to be redrawn and show the new icon. This can be applied to any other event type.
$("#tree").fancytree({
source: {
url: "/your/source/url"
},
lazyLoad: function(event, data) {
data.result = {
url: "/your/lazyload/url"
};
},
loadChildren: function(event, data) {
var children = data.node.getChildren();
for (var i = 0; i < children.length; i++) {
if (!children[i].isFolder()) {
children[i].data.icon = "/your/icon.png";
children[i].renderTitle();
}
}
}
});