I'm looking at an example by substack of using hyperscript, main-loop, and hyperx.
I'd like to recreate this example using hyperscript-helpers to get code similar to Elm. That module says it supports both hyperscript and virtual-hyperscript, so I'm trying virtual-hyperscript.
My code looks like this:
var vdom = require('virtual-dom')
var vh = require('virtual-hyperscript');
var hh = require('hyperscript-helpers')(vh);
var main = require('main-loop')
var div = hh.div;
var span = hh.span;
var h1 = hh.h1;
var loop = main({ times: 0 }, render, vdom)
document.querySelector('#content').appendChild(loop.target)
function render(state) {
return h1('title');
}
And it gives me an error:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
What's going wrong? I assume something's not wired up correctly because
console.log(loop.target) //null
If it helps, I can post my html and the browserify build command I'm using
virtual-hyperscript is moved to https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript
See README at https://github.com/Raynos/virtual-hyperscript
The virtual-dom/h is just a new version of virtual-hyperscript.
Related
I am using wkhtmltopdf version 0.12.2.1 (with patched qt) to render my reactJs app! It worked fine, until I added the react-pdf-js lib to render the pdf generated inside my app. I followed the code described on react-pdf-js documentation (see https://www.npmjs.com/package/react-pdf-js) to make it work.
The pdf is rendered inside my page, and it looks pretty cool indeed. But when I try to run wkhtmltopdf again, to generate a pdf of any page of my app, the following error is returned:
desenv01#desenv01-PC:~$ wkhtmltopdf -O Landscape --print-media-type --debug-javascript http://localhost:3000/report/1 report.pdfLoading pages (1/6)
Warning: undefined:0 ReferenceError: Can't find variable: Float64Array
Warning: http://localhost:3000/assets/js/app.js:46789 SyntaxError: Parse error
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done
Then, I went to my app.js to see what's on line 46789:
set href(href) {
clear.call(this);
parse.call(this, href);
},
get protocol() {
return this._scheme + ':';
},
set protocol(protocol) {
if (this._isInvalid)
return;
parse.call(this, protocol + ':', 'scheme start');
},
The error happens on the line that says parse.call(this, href);, which is part of pdf.combined.js script.
I could not find any solution online so I wondered if there is anyone who might know if I did something wrong or a way to work around it.
Thanks..
I ran into this using wkthmltopdf 12.3 and 12.4 because I have my IDE set to nag me for using var instead of let. The problem is the older Qt engine powering those versions of the program doesn't recognize new-style, ES6 keywords. Not sure if you can down-convert React. Otherwise you can try the bleeding edge versions which use a newer Qt.
I have same problem. I fixed it by modify some code that i think it is new in JS. let keyword (ES5) and template literals (ES6).
generateRandomColor= function () {
let maxVal = 0xFFFFFF; // 16777215
let randomNumber = Math.random() * maxVal;
randomNumber = Math.floor(randomNumber);
randomNumber = randomNumber.toString(16);
let randColor = randomNumber.padStart(6, 0);
return `#${randColor.toUpperCase()}`
}
I modify above code into below
generateRandomColor = function () {
var maxVal = 0xFFFFFF;
var randomNumber = Math.random() * maxVal;
randomNumber = Math.floor(randomNumber);
randomNumber = randomNumber.toString(16);
var randColor = randomNumber.padStart(6, 0);
return "#" + randColor.toUpperCase();
}
I have been trying to figure out how to pan/zoom using onMouseDrag, and onMouseDown in paperjs.
The only reference I have seen has been in coffescript, and does not use the paperjs tools.
This took me longer than it should have to figure out.
var toolZoomIn = new paper.Tool();
toolZoomIn.onMouseDrag = function (event) {
var a = event.downPoint.subtract(event.point);
a = a.add(paper.view.center);
paper.view.center = a;
}
you can simplify Sam P's method some more:
var toolPan = new paper.Tool();
toolPan.onMouseDrag = function (event) {
var offset = event.downPoint - event.point;
paper.view.center = paper.view.center + offset;
};
the event object already has a variable with the start point called downPoint.
i have put together a quick sketch to test this.
Unfortunately you can't rely on event.downPoint to get the previous point while you're changing the view transform. You have to save it yourself in view coordinates (as pointed out here by Jürg Lehni, developer of Paper.js).
Here's a version that works (also in this sketch):
let oldPointViewCoords;
function onMouseDown(e) {
oldPointViewCoords = view.projectToView(e.point);
}
function onMouseDrag(e) {
const delta = e.point.subtract(view.viewToProject(oldPointViewCoords));
oldPointViewCoords = view.projectToView(e.point);
view.translate(delta);
}
view.translate(view.center);
new Path.Circle({radius: 100, fillColor: 'red'});
I went through different answers on forums but could not find a solution. So I have an array like this:
var valuesArray = ["negative", "underweight", "neutral", "overweight", "positive"];
I have two variables:
var previousRating and var currentRating which dynamically get assigned with one of the values from valuesArray.
I am trying to find index of previousRating and currentRating in valuesArray like this:
var prevRatingCounter = valuesArray.indexOf(previousRating.toLowerCase());
var curRatingCouter = valuesArray.indexOf(currentRating.toLowerCase());
previousRating and curRating are string values but still I am getting error:
Object doesn't support this property or method
Can someone please help me figure this out. Thank you.
As explained in this answer, the version of ECMAScript used by server side JScript for writing classic ASP, is only 3.0 - the method indexOf() of arrays was introduced only in version 5.0 of ECMAScript as far as I can tell, hence it simply does not exist.
Writing such method isn't that hard, here is a working code sample:
<%
function IndexOf(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == item) {
return i;
}
}
return -1;
}
%>
Then change the code to use it, e.g.
var prevRatingCounter = IndexOf(valuesArray, previousRating.toLowerCase());
If you need to use it in many different files, you can put the function in a file named e.g. "Common.asp" then include it wherever you need it.
I think that you have a problem with the inizialization.
This works fine:
var valuesArray = ["negative", "underweight", "neutral", "overweight", "positive"];
var previousRating = "underweight";
var currentRating = "neutral";
var valuesArray = ["negative", "underweight", "neutral", "overweight", "positive"];
var prevRatingCounter = valuesArray.indexOf(previousRating.toLowerCase());
var curRatingCouter = valuesArray.indexOf(currentRating.toLowerCase());
document.write(prevRatingCounter+" "+curRatingCouter);
I'm adding a template in a tree () with:
var $monitor = $("ul#u-my-monitors");
var liData = {...};
Blaze.renderWithData(Template.uTreeLi, liData, $monitor[0], $monitor.find("li:last")[0]);
and then later on I remove it with:
Blaze.remove(Blaze.getView($("#u-monitors").find("li[data-target='" + $element.attr("id") + "']")[0]));
//$("#u-monitors li[data-target='" + $element.attr("id") + "']").remove();
Blaze.remove doesn't work but the jQuery version does.
am I missing something?
Recently I bumped into this problem too. Instead of
var view = Blaze.getView($("#some-id");
Blaze.remove(view);
I did this:
var view = Blaze.getView($("#some-id"))[0];
Blaze.remove(view);
If you
console.log($("#some-id"));
, it returns an array. Hope this helps.
I want to add a label in flex to display m/s2 (read meters per second square). I would need to use superscripting for this.
I have tried out the following code which is giving me a compilation error.
var richtxt1:RichText = new RichText();
richtxt1.text="m/s";
var richtxt2:RichText = new RichText();
var span:SpanElement = new SpanElement();
span.text = "2";
span.baselineShift = "superscript";
richtxt2.addChild(span);
richtxt1.text=rixhtxt1.txt + richtxt2.text
I am getting a compilation error for the line richtxt2.addChild(span)
The error is
Implicit coercion of a value of type flashX.textLayout.elements.SpanElement
to unrelated type flash.Display.DisplayObject
I think you've to do something like this
var xmlText:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>" +
"m/s <span baselineShift='superscript'>2</span>" +
"</TextFlow>";
var txtFlow:TextFlow = TextFlowUtil.importFromXML(xmlText);
var richTxt:RichText = new RichText();
richtxt.textFlow = txtFlow;
I've not tested it so please excuse me of any compilation errors.
This is the code I used in my iPad app to accomplish the above:
var xmlText:String = "m/s <span baselineShift='superscript'>2</span>";
var txtFlow:TextFlow = TextFlowUtil.importFromString(xmlText);
var richTxt:RichText = new RichText();
richTxt.textFlow = txtFlow;
this.addElement(richTxt);
It is based on kaychaks and information I found from Adobe's website. The differences are
I took out the TextFlow markup but left in the HTML;
importFromString rather than importFromXML; and
I added this.addElement(richText) to display the element.