Earlier I was using OpenWeatherAPI and for my icon code it would look something like:
const { icon, description } = data.weather[0];
&
document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + ".png";
now I am trying to do the same for weatherapi.com, my code looks like this:
const { icon } = data.current.condition.icon;
&
document.querySelector(".icon").src = "//cdn.weatherapi.com/weather/64x64/" + icon + "/113.png"
but this doesn;t work. I believe I am accessing the data correctly from the source, see http://api.weatherapi.com/v1/forecast.json?key=c014ca23bca74b9f82f130128222406&q=seattle&days=1&aqi=no&alerts=no for an example json file
but maybe the queryselector line is wrong. Not sure how to fix it.
Related
I am using docusaurus 1.14.4
I need to create embedded mode for each document which remove header, footer and left navigation.
Page url look like this http://localhost:3000/...../?mode=emb
I figure out a way by adding this piece of script to each md file
<script>
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
var mode = getParameterByName('mode');
if (mode === 'emb') {
setTimeout(()=>{
let list = ['fixedHeaderContainer', 'docsNavContainer', 'nav-footer', 'docs-prevnext'];
for (var itemClassName of list) {
var item = document.getElementsByClassName(itemClassName)[0]
item.parentNode.removeChild(item)
}
document.getElementsByClassName('navPusher')[0].style.paddingTop = 0;
document.getElementsByClassName('mainContainer')[0].style.paddingTop = 0;
}, 0)
}
</script>
It work but does not look like a proper way. Can anyone suggest a better way?
Docusaurus maintainer here. There's no supported way of doing this. May I know what your motivations for doing this are?
I have a utilities plugin for Nuxt.js that I created with a method to parse hashtags and mentions and replace them with <nuxt-link>. I am then using v-html to inject the converted data back into the template. My issue is that the <nuxt-link> are not being parsed with v-html.
import Vue from 'vue';
Vue.mixin({
methods: {
replaceMentions(data) {
// Tags
const tagRegEx = /\[#tag:[a-zA-Z0-9_-]*\]/g;
let tagMatch;
while ((tagMatch = tagRegEx.exec(data)) !== null) {
const tag = Array.from(tagMatch[0].matchAll(/\[#tag:(.*?)\]/g));
data = data.replace(tag[0][0], '<nuxt-link to="/search?q=' + tag[0][1] + '">#' + tag[0][1] + '</a>');
};
// Users
const userRegEx = /\[#user:[a-zA-Z0-9_-]*\]/g;
let userMatch;
while ((userMatch = userRegEx.exec(data)) !== null) {
const user = Array.from(userMatch[0].matchAll(/\[#user:(.*?)\]/g));
data = data.replace(user[0][0], '<nuxt-link to="/users/' + user[0][1] + '">#' + user[0][1] + '</>');
};
return data;
}
}
});
Does anyone have any tips for how I could make these work as proper nuxt compatible links? I already tried using <a> and it works fine, I would just prefer to utilize proper nuxt compatible links.
I think the discussion here basically answers the question: https://github.com/nuxt-community/modules/issues/185
Summarized, there are two options:
Render the HTML with a full Vue build and then attach the rendered node.
(Preferred) Find the links in the HTML and make them call router push instead of their default action.
I'm looking to make a fetch request to an API, in my code I added a text input:
constructor(props) {
super(props)
this.state = {
UserInput: '',
}
}
<TextInput onChangeText={(UserInput) =>
this.setState({UserInput})} value={this.state.UserInput} />
I can definitely see UserInput variable if I render <Text>{this.state.UserInput}</Text> in my view, however I'm trying to use that variable to generate a dynamic url path for my api request.
The url looks like that https://api.trading.com/1.0/stock/msft/company msft is what I have to change by UserInput
In pure javascript, I usually do something like this:
const userstock = UserInput;
const path = "https://api.trading.com/1.0/stock/";
const end = "/company";
const url = path + userstock + end;
I changed var by const because it's react native but it's still not working,
Can't find variable: UserInput
I also tried https://api.trading.com/1.0/stock/${UserInput}/company can someone help on this please? Thanks
As you write,it works if you render <Text>{this.state.UserInput}</Text>!
Why not write like this:
const userstock = this.state.UserInput;
or :
"https://api.trading.com/1.0/stock/"+ this.state.UserInput +"/company"
I suggest you should read official document and learn more about props and state!
I have a small problem.
I have index.js
var loc = require('location');
function doClick (){
loc.doIt();
}
in location.js I have these
var dee = 12;
exports.doIt = function() {
alert(dee);
};
Which means that when I click on the button I can get the alert, however, I want to reach these information without a need of click - onLoad - besides I want to return two values not only one.
How I can fix this maybe it has really an easy solution but because I have been working for a while my mind stopped working :)
regards
you should move your location.js to inside app/lib (as module). for example :
// app/lib/helper.js
exports.callAlert = function(text) {
alert('hello'+ text);
}
and then call it in your controller like this :
var helper = require("helper"); // call helper without path and .js extension
helper.callAlert('Titanium');
and your problem should be solved :)
I tried to change the image (icon) of the wait dialog from the "Gear" icon to a different one but i failed though I follow a lot of articles and examples in books:
RESOURCE DIALOG r_progressdlg_container_wait_dialog1
{
flags = EAknWaitNoteFlags;
buttons = R_AVKON_SOFTKEYS_CANCEL;
items =
{
DLG_LINE
{
id = EProgressdlgContainerViewWaitDialog1;
type = EAknCtNote;
control = AVKON_NOTE
{
layout = EWaitLayout;
singular_label = STR_progressdlgContainerView_10;
animation = R_QGN_GRAF_WAIT_BAR_ANIM;
};
},
DLG_LINE
{
id = EProgressdlgContainerViewWaitDialog1;
type=EEikCtImage;
control = IMAGE
{
horiz_align=EEikLabelAlignHRight;
vert_align=EEikLabelAlignVTop;
bmpfile = "\\resource\\apps\\progressdlg.mbm";
bmpid = EMbmProgressdlgList_icon;
bmpmask = EMbmProgressdlgList_icon_mask;
extension=0;
};
}
};
}
here is my updated code based on your supported information but,
The dialog still shows the default icon "Gear", So what is wrong in code ?
I'm using Carbide.C++ 2.7, S60 5th Ed SDK, Testing on Nokia E7 (Symbian^3)
You can replace the image a bit like this:
// CONSTANTS
#define AVKON_BMPFILE_NAME "\\resource\\apps\\avkon2.mbm"
...
RESOURCE DIALOG r_my_progress_note
{
flags = EAknProgressNoteFlags;
buttons = r_my_softkeys_cancel;
items =
{
DLG_LINE
{
type = EAknCtNote;
id = EMyCtrlIdProgressNote;
control = AVKON_NOTE
{
layout = EProgressLayout;
singular_label = STRING_r_exnt_progress_singular;
plural_label = STRING_r_exnt_progress_plural;
imagefile = AVKON_BMPFILE_NAME;
imageid = EMbmAvkonQgn_note_progress;
imagemask = EMbmAvkonQgn_note_progress_mask;
};
}
};
}
The Note example application has lots of examples of replaced images in different dialogs. On the S60 5th edition SDK, you'll find it under:
C:\S60\devices\S60_5th_Edition_SDK_v1.0\S60CppExamples\Note
There could also be a problem with your .mbm or indices, so try first with avkon2.mbm.
Looks to me like the code you have posted applies to the progress bar animation, rather than the icon. I would guess you need something like
DLG_LINE {
id=EDlgListBoxViewWaitDialog1;
type=EEikCtImage;
control = IMAGE
{
bmpfile = "example.mbm"; // Replace with your .mbm file
bmpid = mbmID; // // The id of the image
};
}
or just set it in code?