I want to embed cal.com on a website build with SvelteKit, but I can't make it work with vanilla javascript instruction from the official documentation.
I followed official documentation for vanilla javascript. I've tried version for Next.js, and It worked flawless, but for some reason I can't make it done in svelte.
Last line Cal("init") throws error "Cannot find name 'Cal'." And on a server I'm getting "500 Internal Error"
<script>
(function (C, A, L) {
let p = function (a, ar) {
a.q.push(ar);
};
let d = C.document;
C.Cal =
C.Cal ||
function () {
let cal = C.Cal;
let ar = arguments;
if (!cal.loaded) {
cal.ns = {};
cal.q = cal.q || [];
d.head.appendChild(d.createElement("script")).src = A;
cal.loaded = true;
}
if (ar[0] === L) {
const api = function () {
p(api, arguments);
};
const namespace = ar[1];
api.q = api.q || [];
typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar);
return;
}
p(cal, ar);
};
})(window, "https://cal.com/embed.js", "init");
Cal("init")
</script>
So I figured it out by myself, that I was trying to paste this script in +page.svelte file. To make it work You need to put it in the head tag in the app.html file.
Related
vue Version: 2.1.1
I am getting following error, only in production setup:
TypeError: Cannot read property 'length' of undefined
at s.updated (vue.common.js:6077)
at we (vue.common.js:2754)
at De (vue.common.js:2831)
at Array. (vue.common.js:473)
at e (vue.common.js:422)
This works perfectly in the local setup, but only in production I get this error. When I go to s.updated (vue.common.js:6077) line from chrome console, I get following code:
var TransitionGroup = {
props: props,
render: function render (h) {
var tag = this.tag || this.$vnode.data.tag || 'span';
var map = Object.create(null);
var prevChildren = this.prevChildren = this.children;
var rawChildren = this.$slots.default || [];
var children = this.children = [];
var transitionData = extractTransitionData(this);
for (var i = 0; i < rawChildren.length; i++) {
var c = rawChildren[i];
if (c.tag) {
if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
children.push(c);
map[c.key] = c
;(c.data || (c.data = {})).transition = transitionData;
} else if (process.env.NODE_ENV !== 'production') {
var opts = c.componentOptions;
var name = opts
? (opts.Ctor.options.name || opts.tag)
: c.tag;
warn(("<transition-group> children must be keyed: <" + name + ">"));
}
}
}
if (prevChildren) {
var kept = [];
var removed = [];
for (var i$1 = 0; i$1 < prevChildren.length; i$1++) {
var c$1 = prevChildren[i$1];
c$1.data.transition = transitionData;
c$1.data.pos = c$1.elm.getBoundingClientRect();
if (map[c$1.key]) {
kept.push(c$1);
} else {
removed.push(c$1);
}
}
this.kept = h(tag, null, kept);
this.removed = removed;
}
return h(tag, null, children)
},
beforeUpdate: function beforeUpdate () {
// force removing pass
this.__patch__(
this._vnode,
this.kept,
false, // hydrating
true // removeOnly (!important, avoids unnecessary moves)
);
this._vnode = this.kept;
},
updated: function updated () {
var children = this.prevChildren;
var moveClass = this.moveClass || ((this.name || 'v') + '-move');
if (!children.length || !this.hasMove(children[0].elm, moveClass)) { // <=== This is the line throwing error
return
}
I have lot of code in the repo with involvement of multiple components so not sure what code to put here which can help the community debug.
Code requested:
I am only using transition-group in one of the component, which is being used just before navigating to this page:
<transition-group tag="ul" name="prod-covered" class="prod-box">
<li :key="index" v-for="(prod, index) in prods" v-if="prod" class="prod">{{prod}}</li>
</transition-group>
Here prods is static data which is being passed as props to that component.
For me, I had accidentally ended up with 1 child in a transition-group, and this would cause the error. I only used transition-group if there was more than one child in it, and that solved the problem.
The error would only show up once we tried to go to a different page, triggering an update().
I upgraded to latest version: 2.2.1 and not seeing that error after upgradation, seems they might have fixed in it this version.
Make sure children exist before accessing the length.
Change
if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
to
if (!children || !children.length || !this.hasMove(children[0].elm, moveClass)) {
I have a config.js file which I believe is JSON which is called when the application first starts:
var config={};
config.user = [
{id:'JSMITH', priceModify:'true'},
{id:'JBLOGGS', priceModify:'false'},
]
config.price = [
{id:"price01", name:"priceName01", primary:"57.25", secondary:"34.54"},
{id:"price02", name:"priceName02", primary:"98.26", secondary:"139.45"},
{id:"price03", name:"priceName03", primary:"13.87", secondary:"29.13"}
]
To pull / push data I just use the following:
// Read
var curPrice = config.price[0].primary;
// Write
config.price[0].primary = "98.24";
How do I go about exporting the config file with the new value so that it will load next time the application is opened? I can use the file system object to write the file, I just don't understand how I would export everything (and preferably keep the same format).
I originally thought about reading the whole config file into a variable, cycling through to find the required block, id, and key and replacing the value, then writing the whole thing back, but I can't seem to figure out how to replace that specific value only.
Any help would be greatly appreciated
Edit Apologies, I forgot to mention that this application is completely offline and uses local directories
Solution
I stumbled across a few solutions to different issues which, when combined, gave me the perfect solution. First we cycle the Javascript object, building an array of the detail and then converting the array to a string:
vMethod.convertToText = function(obj) {
var string = [];
var output = '';
var count= 0;
var countTotal = 0;
if (typeof(obj) == "object" && (obj.join == undefined)) {
count= 0;
countTotal = 0;
string.push("{");
for (prop in obj) {
countTotal++;
}
for (prop in obj) {
if(count==countTotal - 1) {
string.push(prop, ": ", vMethod.convertToText(obj[prop]),'}\r\n');
} else {
string.push(prop, ": ", vMethod.convertToText(obj[prop]), ",");
}
count++;
};
} else if (typeof(obj) == "object" && !(obj.join == undefined)) {
count= 0;
countTotal = 0;
string.push("[\r\n")
for (prop in obj) {
countTotal++;
}
for(prop in obj) {
if(count==countTotal - 1) {
string.push(vMethod.convertToText(obj[prop]),'];\r\n');
} else {
string.push(vMethod.convertToText(obj[prop]), ",");
}
count++;
}
} else if (typeof(obj) == "function") {
string.push(obj.toString())
} else {
string.push(JSON.stringify(obj))
}
output = string.join("").toString();
//output = output.slice(1, -1);
return output;
}
Then we clean the array (neccessary for me to remove excess characters)
vMethod.cleanConfigText = function() {
var outputText = vMethod.convertToText(config);
outputText = outputText.slice(1, -1);
outputText = 'var config = {};\r\n'+outputText;
outputText = outputText.replace('user:','config.user =');
outputText = outputText.replace(',price:','config.price =');
outputText = outputText.slice(0, -2);
outputText = outputText.replace(/"/g, "'")
return outputText;
}
Finally a function to export the object into my config.js file:
vMethod.writeToConfig = function() {
vObject.fileSystem = new ActiveXObject('Scripting.FileSystemObject');
vObject.fileSystemFile = vObject.fileSystem.CreateTextFile('source\\js\\config.js',true);
vObject.fileSystemFile.Write(vMethod.cleanConfigText());
vObject.fileSystemFile.Close();
delete vObject.fileSystemFile;
delete vObject.fileSystem;
}
So when I want to export a change in the config, I just call:
vMethod.writeToConfig();
The only difference in the file format is that the commas appear at the start of a trailing line rather than the end of a preceding line but I can live with that!
Edit Turns out I'm anally retentive and the commas were bugging me
Added these to the clean up function and now the config is identical to before but without the indent
outputText = outputText.replace(/[\n\r]/g, '_');
outputText = outputText.replace(/__,/g, ',\r\n');
outputText = outputText.replace(/__/g, '\r\n');
Thank you to those that looked at the question and tried to help, very much appreciated.
Edit
DO NOT READ THE SOLUTION ABOVE, IT IS IN THE WRONG PLACE AND THERFORE IS NOT A VALID ANSWER. YOU'VE BEEN WARNED.
You can use a very popular npm package: https://www.npmjs.com/package/jsonfile . There are many but I've choosen this one.
Usually config stuff should be in json or .env files.
Now, all you have to do is use jsonfile's API to read/write JSON and parse (the package does the serialization/deserialization) it at the beginning when the application starts.
Example:
var jsonfile = require('jsonfile');
var util = require('util');
var config = null;
var file = './config.json';
// Reading
jsonfile.readFile(file, function(err, obj) {
config = obj;
});
// Writing
// Edit your config blah blah
config.user = [
{id:'JSMITH', priceModify:'true'},
{id:'JBLOGGS', priceModify:'false'},
];
config.price = [
{id:"price01", name:"priceName01", primary:"57.25", secondary:"34.54"},
{id:"price02", name:"priceName02", primary:"98.26", secondary:"139.45"},
{id:"price03", name:"priceName03", primary:"13.87", secondary:"29.13"}
];
jsonfile.writeFile(file, config, function (err) {
if(err) return err;
console.log('Config saved to file!');
});
I have a design document written in javascript (someone else wrote this function) for a Cloudant database. This function is created to update a document. Within this document I want to first make a call to JSON.minify which I have found some code for online at https://www.npmjs.com/package/jsonminify
The code for the update function is below.. and I want to know how to make a call to JSON.minify from the code as suggested within the link provided: JSON.parse(JSON.minify(str));
Where I currently have _ref = JSON.parse(reqBody) I want to use _ref = JSON.prase(JSON.minify(reqBody));
Can someone tell me how I can call this external code from a design doc in Cloudant. (Cloudant works very similar to CouchDB in most cases, so I think it may be the same answer)
Thanks in advance!
function(doc, req) {
if (!doc) {
return [doc, JSON.stringify({ status: 'failed' })];
}
var reqBody=req.body;
_ref = JSON.parse(reqBody);
for (k in _ref) {
v = _ref[k];
if (k[0] === '/'){
nestedDoc = doc;
nestedKeys = k.split('/');
_ref1 = nestedKeys.slice(1, -1);
for (_i = 0, _len = _ref1.length; _i < _len; _i++){
nestedKey = _ref1[_i];
nestedDoc = ((_ref2 = nestedDoc[nestedKey]) != null ? _ref2 : nestedDoc[nestedKey] = {});
}
k = nestedKeys.slice(-1)[0];
if (v === '__delete__'){
delete nestedDoc[k];
}
continue;
}
if (v === '__delete__'){ delete doc[k]; }
else{ doc[k] = v; } }
return [ doc, JSON.stringify({ status: 'success' }) ];
}
You should be able to either include the source code at the top of your update function, or load it as a CommonJS module.
Have you tried either one?
I am trying to parse HTML element by class on Google Sites, my code is:
function doGet(){
var html = UrlFetchApp.fetch ('http://indicadoresdeldia.cl/').getContentText();
var doc = XmlService.parse(html);
var html = doc.getRootElement();
var menu = getElementsByClassName(html, 'span3 utm')[0];
var output = XmlService.getRawFormat().format(menu);
return HtmlService.createHtmlOutput(output);
}
Ween i run the code appear the nexte error message ReferenceError: "getElementsByClassName" is not defined.
i am trying to deploy the example for the next page: https://sites.google.com/site/scriptsexamples/learn-by-example/parsing-html
Any ideas?
THanks in advance for your help.
According to that site, you should directly copy those functions to your project (source code available there) and then call them. That would alleviate each and every one of your problems.
Source: https://sites.google.com/site/scriptsexamples/learn-by-example/parsing-html
function getElementsByClassName(element, classToFind) {
var data = [];
var descendants = element.getDescendants();
descendants.push(element);
for(i in descendants) {
var elt = descendants[i].asElement();
if(elt != null) {
var classes = elt.getAttribute('class');
if(classes != null) {
classes = classes.getValue();
if(classes == classToFind) data.push(elt);
else {
classes = classes.split(' ');
for(j in classes) {
if(classes[j] == classToFind) {
data.push(elt);
break;
}
}
}
}
}
}
return data;
}
Hi i'm quite confused on some parts of the Print Plugin or the Phonegap plugin. See i was able to implement the code even created my own plugin but i was no returning values from objective-c (xcode) back to javascript so it was safe to say that it was easy to understand.
On this code:
https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/PrintPlugin/PrintPlugin.js
On this block of code:
PrintPlugin.prototype.callbackMap = {};
PrintPlugin.prototype.callbackIdx = 0;
PrintPlugin.prototype.print = function(printHTML, success, fail, options) {
if (typeof printHTML != 'string'){
console.log("Print function requires an HTML string. Not an object");
return;
}
//var printHTML = "";
var dialogLeftPos = 0;
var dialogTopPos = 0;
if (options){
if (options.dialogOffset){
if (options.dialogOffset.left){
dialogLeftPos = options.dialogOffset.left;
if (isNaN(dialogLeftPos)){
dialogLeftPos = 0;
}
}
if (options.dialogOffset.top){
dialogTopPos = options.dialogOffset.top;
if (isNaN(dialogTopPos)){
dialogTopPos = 0;
}
}
}
}
var key = 'print' + this.callbackIdx++;
window.plugins.printPlugin.callbackMap[key] = {
success: function(result) {
delete window.plugins.printPlugin.callbackMap[key];
success(result);
},
fail: function(result) {
delete window.plugins.printPlugin.callbackMap[key];
fail(result);
},
};
var callbackPrefix = 'window.plugins.printPlugin.callbackMap.' + key;
return PhoneGap.exec("PrintPlugin.print", printHTML, callbackPrefix + '.success', callbackPrefix + '.fail', dialogLeftPos, dialogTopPos);
};
Especially this lines of code:
PrintPlugin.prototype.callbackMap = {};
PrintPlugin.prototype.callbackIdx = 0;
I'm confused by what that two lines of code does and why it is somehow important to incorporate or follow when you want to return values from xcode to javascript (NOTE: by me saying why it is somehow important to incorporate or follow when you want to return values from xcode to javascript i'm saying this based on what I've understood so far)
Can somebody explain how the two lines of code works and what are their purpose? Thank you.