Setting paperSize for PDF printing in Casper - casperjs

In generating PDFs in Phantom, I can set the paper size like this:
page.paperSize = {
height: '8.5in',
width: '11in',
orientation: 'landscape',
border: '0.4in'
};
then the page.render(output) function generates a PDF properly. In other words, the size is correct and it has many pages of that size.
I can't get this to work in Casper (and I'm not sure if it is supported). So for example, the following:
var casper = require('casper').create({
paperSize: {
height: '8.5in',
width: '11in',
orientation: 'landscape',
border: '0.4in'
},
logLevel: 'debug',
verbose: true
});
....this.capture('print.pdf'); ...
creates a PDF with a single, very long page. Setting viewportSize does not fix the problem.
Is there any way to access the pageSize object from within Casperjs?

You can access paperSize through casper.page.paperSize, however you will need to set this after calling casper.start(), otherwise casper.page will be equal to null.
Here's an example:
var casper = require("casper").create();
casper.start();
casper.page.paperSize = {
width: '11in',
height: '8.5in',
orientation: 'landscape',
border: '0.4in'
};
casper.thenOpen('http://www.facebook.com/', function() {
this.capture('test.pdf');
this.echo('created pdf.');
});
casper.run();

Related

How to Show 30 days in Day View with Horizontal Scrollbar in Dhtmlx Scheduler?

I want to show 30 days in Day View Scheduler with Horizontal Scrollbar. Currently, Horizontal Scrollbar is available only for Timeline View but I want it for Day View as well as Month View.
For Timeline View with Horizontal Scrollbar code:
scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_date: "%H:%i",
x_step: 30,
x_size: 24*7,
x_start: 16,
x_length: 48,
y_unit: sections,
y_property: "section_id",
render: "bar",
scrollable: true,
column_width: 70,
scroll_position:new Date(2018, 0, 15) });
Please share your ideas and Sample links
Thanks in Advance
Try using Custom View. You can remove the default Day view and display your own instead, with the number of days you want to display. This can be done like this:
First in scheduler.config.header set tab "thirty_days" instead of "day":
scheduler.config.header = [
"thirty_days",
"week",
"month",
"date",
"prev",
"today",
"next"
];
The label for the view is set as in:
scheduler.locale.labels.thirty_days_tab = "Days";
Next, set the start date of the viewing interval, as well as viewing templates. It's better to create the custom view in the onTemplatesReady event handler function so that your custom view templates are ready before the scheduler is initialized:
scheduler.attachEvent("onTemplatesReady", () => {
scheduler.date.thirty_days_start = function(date) {
const ndate = new Date(date.valueOf());
ndate.setDate(Math.floor(date.getDate()/10)*10+1);
return this.date_part(ndate);
}
scheduler.date.add_thirty_days = function(date,inc) {
return scheduler.date.add(date,inc*30,"day");
}
const format = scheduler.date.date_to_str(scheduler.config.month_day);
scheduler.templates.thirty_days_date = scheduler.templates.week_date;
scheduler.templates.thirty_days_scale_date = function(date) {
return format(date);
};
});
To add horizontal scrolling to the view, you can place the scheduler inside the scrollable element and give the scheduler the width required to display all columns. You'll need to hide a default navigation panel of the scheduler and create a custom one with HTML, so it would have a correct width and won't be affected by scrolling:
scheduler.xy.nav_height = 0;
scheduler.attachEvent("onSchedulerReady", function () {
const navBar = scheduler.$container.querySelector(".dhx_cal_navline").cloneNode(true);
navBar.style.width = "100%";
document.querySelector(".custom-scheduler-header").appendChild(navBar);
document.querySelectorAll(".custom-scheduler-header .dhx_cal_tab").forEach(function (tab) {
tab.onclick = function () {
const name = tab.getAttribute("name");
const view = name.substr(0, name.length - 4);
scheduler.setCurrentView(null, view);
};
});
document.querySelector(".custom-scheduler-header .dhx_cal_prev_button").onclick = function () {
const state = scheduler.getState();
scheduler.setCurrentView(scheduler.date.add(state.date, -1, state.mode));
};
document.querySelector(".custom-scheduler-header .dhx_cal_next_button").onclick = function () {
const state = scheduler.getState();
scheduler.setCurrentView(scheduler.date.add(state.date, 1, state.mode));
};
document.querySelector(".custom-scheduler-header .dhx_cal_today_button").onclick = function () {
scheduler.setCurrentView(new Date());
};
scheduler.attachEvent("onBeforeViewChange", (oldView, oldDate, newView, newDate) => {
const innerContainer = document.getElementById("scheduler_here");
if (newView === "thirty_days") {
innerContainer.style.width = "3000px";
} else {
innerContainer.style.width = "100%";
}
return true;
});
scheduler.attachEvent("onViewChange", function (view, date) {
const dateLabel = document.querySelector(".custom-scheduler-header .dhx_cal_date");
const state = scheduler.getState();
dateLabel.innerHTML = scheduler.templates[view + "_date"](state.min_date, state.max_date);
document.querySelectorAll(".custom-scheduler-header .dhx_cal_tab").forEach(function(tab) {
tab.classList.remove("active");
});
const activeTab = document.querySelector(".custom-scheduler-header ." + view + "_tab");
if (activeTab) {
activeTab.classList.add("active");
}
});
});
Styles that you will need:
.custom-scheduler-header .dhx_cal_navline{
display: block !important;
height: 60px !important;
}
.custom-scheduler-header .dhx_cal_navline.dhx_cal_navline_flex{
display: flex !important;
}
.dhx-scheduler {
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
background-color: #fff;
font-family: Roboto, Arial;
font-size: 14px;
}
.dhx_cal_container .dhx_cal_navline {
display: none;
}
Please see an example: https://snippet.dhtmlx.com/znd7ffiv
You may need to fix the hour scale so that it remains visible when scrolling horizontally on the calendar. I did not implement this in the example, I think that this can be done in the same way as for the navigation panel. If you need, write to me and I will send an update in a few working days.
As for the "Month" view, the approach is the same as for the "Day" view.

c3.js - hide tooltip for specific data sets

I have a c3.js chart which has 4 datasets. Is it possible to set the tooltop only to display for 1 set of data?
From the code below I only want the tooltip to display for data4.
var chart = c3.generate({
bindto: '#chart3',
data: {
//x: 'x1',
xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
xs: {
'data1': 'x1',
'data2': 'x2',
'data3': 'x3',
'data4': 'x4'
},
columns: [
x1data,
y1data,
x2data,
y2data,
x3data,
y3data,
x4data,
y4data,
],
types: {
data1: 'area',
},
},
legend: {
show: false
}
});
There is the tooltip option for show:false but that disables them all.
Can it display for just 1 dataset?
The tooltip.position() function can be used to control the position of the tooltip, and we can set the tooltip position way off the canvas as a quick hack to hide it when we do not want to see it. However, I do not know how to return the default which is not documented - maybe someone else can elaborate on that.
tooltip: {
grouped: false,
position: (data, width, height, element) => {
if (data[0].id === 'data2'){ // <- change this value to suit your needs
return { top: 40, left: 0 };
}
return { top: -1000, left: 0 };
}
}
EDIT: After digging around for a solution I found that Billboard.js (a fork of C3.js on github) provides a tooltip.onshow() function that the API docs say is 'a callback that will be invoked before the tooltip is shown'. So it would appear that Billboard.js already has the a potential solution where you could intercept the data and hide the tooltip.

Cannot read property 'slice' of undefined on Run in Titanium

I'm writing an simple Ajax communications in Javascript in Titanium. Yesterday night this application is worked correctly, but now, it thrown for me an error:
[INFO] : JavaScript files need to be encrypted
2016-06-02T10:27:22.859Z | ERROR | An uncaught exception was thrown!
Cannot read property 'slice' of undefined 2016-06-02T10:27:22.860Z |
ERROR | Cannot read property 'slice' of undefined
Here is my code:
var valasz = "";
var ajax = Ti.Network.createHTTPClient({
onerror: function(e) {
alert('Error!');
},
onload : function(e) {
valasz = this.responseText;
if (valasz.length > 0) {
var Gyartosorok = valasz.split("\t");
var win = Titanium.UI.createWindow({
title : "Termékkereső",
backgroundColor: "#ddd",
exitOnClose: true
});
var gyartosor_picker = Titanium.UI.createPicker({
top: 4,
height: 36,
backgroundColor: "#000",
width: "75%",
selectionIndicator: true
});
var GyartosorData = [];
var GyartosorDataIndex = 0;
if (Gyartosorok.length > 1) {
GyartosorData[0] = Titanium.UI.createPickerRow({ title: "Összes sor", val: "0" });
GyartosorDataIndex++;
}
for (i = 0; i < Gyartosorok.length; i++) {
GyartosorData[GyartosorDataIndex] = Titanium.UI.createPickerRow({ title: Gyartosorok[i], val: Gyartosorok[i] });
GyartosorDataIndex++;
}
gyartosor_picker.add(GyartosorData);
var keresendoInput = Titanium.UI.createTextField({
top: 42,
height: 36,
width: "75%",
backgroundColor: "#fff",
borderColor: "#000",
color: "#000",
borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText: "Termékkód (részlet)"
});
var keresesGomb = Titanium.UI.createButton({
title: "Keresés",
width: "60%",
top: 80
});
win.add(gyartosor_picker);
win.add(keresendoInput);
win.add(keresesGomb);
win.open();
} else {
alert("No data!");
}
},
timeout: 5000
});
ajax.open("POST", "http://xyz.hu/dir/dir/ajax.php");
ajax.send({
'mod' : 1
});
Please, help me. What is wrong!
Thanks for your help!
Ok, something was wrong in Titanium, because after I selected my all sourcecode, closed this project and opened a new project and paste my code to app.js, then this error is missed and my application is working successful!
Thanks for your patient!
Clean build : Clean the project and than build the project
in Appceletor studio go to project=>clean and than run make sure that in project drop-down menu build automatically is checked.

Wrap text on custom headers in handsontable

Is there a way to auto wrap text on colHeaders when given colWidths? It doesn't seem to work and even manually reducing the size of the columns is prohibited.
Relevant options:
hot = new Handsontable(container, {
data: items,
startRows: 1,
minSpareRows: 1,
colHeaders: ['aaaaaaaa', 'bbbbbbb', 'cccccccccccc'],
colWidths: [50,50,50]
manualColumnResize: true,
autoWrapRow: true
}
Maybe try add some CSS into your headers:
.handsontable table thead th {
white-space: pre-line;
max-width: /* enter here your max header width */
}
Try the following CSS:
.handsontable th {
white-space: normal!important;
}
Demo and source: http://jsfiddle.net/cyancscoutrfp/hqLbg3rt/

Kendo window disable maximize on double-click

Plunkr: http://plnkr.co/edit/LoMmQ3y4snPrELJz9ZSq?p=preview
Can anyone help me on how to disable maximization of the window by double-clicking on its title? I tried to disable the dblclick event with the following code, but it doesn't seem to work.
$(document).on('dblclick','.k-window-titlebar',function(e){
e.preventDefault();
console.log('dblclick');
return false;
});
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: [],
**resizable: false**
}).data("kendoWindow");
resizable: false - Will prevent from maximizing the window.
This is not a nice solution but might work, try toggling back to the previous size:
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: []
}).data("kendoWindow");
$(document).on('dblclick','.k-window-titlebar',function(e){
// Restore old size
win.toggleMaximization();
});
The following code worked for me:
// Window definition
var win = $("#win1").kendoWindow({
width: "300px",
height: "100px",
title: "Window 1",
actions: []
}).data("kendoWindow");
win.wrapper.children('.k-window-titlebar:first-child')
.dblclick(function (e) {
e.preventDefault();
return false;
});
Try this: http://plnkr.co/edit/kAhw2A?p=preview

Resources