Good afternoon,
I'm making an InAppBrowser in my app and i want to add CSS to it by a file in the project. So, I made this code:
let browser = new InAppBrowser('http://usefashion.com/', '_blank', 'location=no, zoom=no');
browser.on('loadstart').subscribe((e)=>{
console.log('Carregando nova página.');
SpinnerDialog.show('Carregando');
});
browser.on('loadstop').subscribe((e)=>{
console.log('Página carregada.');
SpinnerDialog.hide();
browser.insertCss({
file: 'assets/portalstyles.css'
}).then((e)=>{ console.log('CSS adicionado.'); }).catch((e)=>{ console.log('Erro ao adicionar CSS. '+e); });
});
Although, the file are't added to page and in console I'm getting this message:
TypeError: Cannot read property 'apply' of undefined
Can somebody help me?
Thks, Lucas.
Related
I have an issue where I want to extract all my components out into a separate repository but I want to load them in via composer instead of npm (business decision).
This was all working fine. Add it as a dependancy in the composer.json file and then add the following to the webpack.mix.js file;
mix.webpackConfig({
resolve: {
alias: {
'#ui' : path.resolve(__dirname, 'vendor/companyname/ui/src'),
}
}
});
And then use the following to import them in;
import PrimaryButton from "#ui/buttons/primary";
Which all worked fine!
Until I wanted to use slots. If I include a slot I get the following error;
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nodeName')
at new create (svg.js?1929:3616)
at globalRef.SVG (svg.js?1929:31)
at Proxy.mounted (Editor.vue?721f:63)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2909)
at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:357)
at flushJobs (runtime-core.esm-bundler.js?5c40:393)
In this example the component looks like this;
<template>
<button #click="click">
<slot></slot>
</button>
</template>
<script>
export default {
emits: ['click'],
methods: {
click() {
this.$emit('click')
}
}
}
</script>
Now, if I copy this component into the project repository and load it in that way, there is no error and works as intended!
Can anyone point me in the direction of where I am going wrong please.
Update
I have removed other components from view I'm rendering and now have a new error;
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')
at renderSlot (runtime-core.esm-bundler.js?c099:5832)
at Proxy.render (primary.vue?f782:3)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1166)
at componentEffect (runtime-core.esm-bundler.js?5c40:5201)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5154)
at mountComponent (runtime-core.esm-bundler.js?5c40:5113)
at processComponent (runtime-core.esm-bundler.js?5c40:5071)
at patch (runtime-core.esm-bundler.js?5c40:4673)
Update
This is not the answer but the reason for this, from what I can tell is that there were two instances of Vue in play, one from the library and one in my application. I have no idea how to stop this but if I push the contents up to a repo and pull it in via npm then it works normally. Still would like to know how to get this running locally without using npm.
I have been using Expo to develop a react-native app, The functionality I am currently trying to implement is to share a link with friends on platforms such as fb messenger/whatapp or even normal texts and when they click this link it will launch my app to a specific page using the parameters.
After extensive research online - I’ve come to a blocker, following expo’s documentation I defined a scheme for my app - when I press share everything works correctly a message is created and I’m able to share content but only as string.
I am using react-natives Share library to share to an app and I’m using Expo to provide me with the link.
Ideally my first goal is to get the app opening using the Expo Link before I explore further into adding more functionality to the link.
Share.share({
message: "Click Here to View More! " + Linking.makeUrl( ' ' , { postkey : "7a5d6w2x9d6s3a28d8d});
url: Linking.makeUrl( ' ' , { pkey : gkey });
title: 'This post is amazing',
})
.then((result) =>{
console.log(result)
if(result === 'dismissedAction'){
return
}
})
.catch((error) => console.log(error))
In the root of my app I have also defined the event handlers: App.js
_handleRedirect=(event)=> {
let {path,queryParams} = Linking.parse(event);
Alert.alert(`queryparams : ${event} path : ${path} `)
this.props.navigation.navigate("Post_Detail",{key:queryParams.postkey})
}
}
componentDidMount() {
let scheme = 'nxet'
Linking.getInitialURL()
.then(url => {
console.log("App.js getInitialURL Triggered")
// this.handleOpenURL({ url });
})
.catch(error => console.error(error));
Linking.addEventListener('url', ({url}) => this._handleRedirect(url));;
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
When I share the link to Whatsapp, Facebook Messenger or even just messages or notes it appears as myapplink://, I try to enter this into the browser and instead of asking me to open my app - it does a google search.
Please note I am attempting to have this working on Android Device and facing this issue
Is there something I am doing incorrectly?
Any help is much appreciated. Thanks.
You can not open external links, means other than http, https on Android. But you can on iOS. In order to be able to open your expo links, you need proper anchor tags on android. You can create html mails and give it a try, you will see it is gonna work on Android as well.
Update : see edit at the end
Follow up of my previous question here : Include Vue.js component in Wordpress plugin without CDN
The very pertinent answer from Okba is causing me headaches. How do I build something with Vue.js that I can use in wordpress ?
I work with Vue-cli. I have tried to build my project as a library using this command line :
vue-cli-service build --target lib --name myVueLibrary ./src/main.js
And then importing the dist/* files in wordpress :
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('myVueLibrary', './vue-plugin/myVueLibrary.common.js', [], '0.1.0');
where my-plugin.js looks like this (I am using shortcodes to replace a <div> content with whatever my plugin puts there) :
var elements = document.querySelectorAll('[my-plugin-atts]');
elements.forEach(function (element) {
var atts = JSON.parse(element.getAttribute('my-plugin-atts'));
var vm = new Vue({
el: element,
created: function () {
this.atts = atts;
},
template: '<div class="plugin-container">{{atts.id}}</div>'
});
});
And I get the following error :
Uncaught ReferenceError: Vue is not defined
But ! If I replace my vueBaoViz.common.js import by a Vue CDN import, my wordpress plugin displays what I want it to display.
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js', [], '2.5.16');
My guess is my Vue build is not ok, how do I build something I can use like that, and that packs Vue.js within itself ?
So, turns out i'm an idiot, I forgot to add plugin_dir_url(__FILE__) before the path when loading a local file. This solved my problem.
1 - You can use vue js - non spa, from cdn or with webpack look at the https://v2.vuejs.org/v2/guide/#Composing-with-Components for how you will use vue js in regular js files.
2- You can use vue-cli like a standart spa project with wordpress rest api : https://developer.wordpress.org/rest-api/
I try to use vr view for the web in localhost. https://developers.google.com/vr/develop/web/vrview-web
My code is :
<script>
window.addEventListener('load', onVrViewLoad)
function onVrViewLoad(){
var view = new VRView.Player('#vrview', { image : 'img.jpg', is_stereo: false, width: 857, height: 297});
}
</script>
<div id='vrview'></div>
My error is :
Render: unable to load texture from "file: ... img.jpg"
I already read every posts on this problem.
I try to use the cardboard camera converter but I have already an equirectangular-panoramic image and it says :
"Conversion error: no valid right eye image found in the XMP metadata.
This might not be a valid Cardboard Camera image."
I don't know why it doesn't work.
Can you help me ?
PS : sorry for my english...
I am running Meteor release METEOR#1.4.2.3
I recently installed a social media share package via Atmosphere.
meteor add ellisonleao:sharerjs.
More information about the package can also be found at:
http://www.ellison.rocks/sharer.js/
My template event handler looks like this:
Template.detail.events({
"click .sharer": function() {
//add new buttons with share behaviour
$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);
window.Sharer.init();
}
});
Find below the template in code:
<template name="detail">
<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >
</template>
when I run click on the Share on Facebook link. I see this error message in my browser:
Uncaught TypeError: Cannot read property 'init' of undefined
Any help on how to resolve the issue would be great!
Thanks in advance
You should try the other repo listed on the atmosphere page of this lib: https://github.com/okmttdhr/sharer.npm.js
Also, I don't think you need to append the share button with jquery. Just add the button to your template, and on the click listener, instead of calling window.Sharer, you add the event parameter to the listener function then instantiate a new sharer, like this:
import Sharer from 'sharer.npm.js';
// ...
Template.detail.events({
"click .sharer": function(event) {
const sharer = new Sharer(event.target);
sharer.share();
}
});