I am developing a web hosting app for the LG/TV WebOS.
I know that the web hosting app is basically running inside a browser engine (webkit?).
When the user is about to make the payment (I am using Paypal because I don't like PaymentWall), the app directs the user to the paypal confirmation page where there is no mean for the user to click on the CORFIRM PURCHASE button. I don't see the "mouse" cursor and there is no documentation I could find about the theme.
So, I was thinking if I could launch that payment page on the tv's browser.
That browser has a cursor that moves when I click the arrows.
Any way to do that? To launch an URL from the app into the television browser? or to make the cursor appear inside the app?
I used this approach.
openLink(url: string): void {
webOS.service.request("luna://com.webos.applicationManager", {
method: "launch",
parameters: {
id: "com.webos.app.browser",
params: {
target: url,
},
},
onSuccess: (res: any): void => {
console.log("Browser open success. ", res);
},
onFailure: (res: any): void => {
console.log("Browser open fail. ", res);
},
});
}
It requires webOS.js or webOSTV.js library.
Personally, I use the following library to enhance navigation for web based applications.
https://github.com/luke-chang/js-spatial-navigation
It creates fluid navigation between UI elements using just the arrow buttons.
The user experience is basically identical to that of native applications like Netflix.
Related
I am trying to develop a simple web extension/addon under Safari, which is using the tabs onUpdated event. I used the Safari XCRUN converter: https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari
What I am trying to do is :
Open new tab on Google Scholar with set prefs params, from "options.js" script (Options page code below)
Listen for this tab to be updated and ready (e.g. tab status is complete)
Then, inject a content script that will simulate the user click on save button (i.e. on GScholar page)
Then remove the listener, and wait 1,5s (for GS tab to reload and finish saving) in order to finally close this tab.
// Detect browser language
const gsUrl = currentBrowser.i18n.getUILanguage().includes("fr")
? GSCHOLAR_SET_PREFS_FR_URL
: GSCHOLAR_SET_PREFS_COM_URL;
// Listener to detect when the GS tab has finished loading
const gsTabListener = (tabId, changeInfo, tabInfo) => {
if (changeInfo.url && changeInfo.url.startsWith(GSCHOLAR_HOST)) {
currentBrowser.tabs.executeScript(
tabId,
{
code: `document.getElementsByName("save")[0].click();`,
},
() => {
currentBrowser.tabs.onUpdated.removeListener(gsTabListener);
setTimeout(() => currentBrowser.tabs.remove(tabId), 1500);
}
);
}
};
currentBrowser.tabs.onUpdated.addListener(gsTabListener); // Add tab listener
currentBrowser.tabs.create({
url: `${gsUrl}?inst=${gScholarInstIdList.join("&inst=")}&save=#2`,
active: false,
}); // Open GS tab according to browser language
The problem is that it works well on Chrome/Edge/Firefox (on MacOS), but not on Safari : the GS tab is opended but isn't closed and nothing happens :-/
PS:
It seems tabs onUpdated event is well supported on Safari according to MDN.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated
I have also tried webNavigation onCompleted event, but same !
Developing on : MacBookAir under MacOS Monterey 12.4, Safari 15.4 (17613.2.7.18), XCode 13.3.1 (13E500a), extension is bundled with Webpack 5.68.0 (e.g. building all assets files).
I really don't see what I am doing wrong and why wouldn't this tab event be intercepted ?
Thanks for your feedback.
After debugging I finally sloved this by noticing that in fact the events were triggered, but missed because of the availability and values of parameters passed into callabck (changeInfo, details) depending on the browser we're on.
So I switched from onUpdated to webNavigation.onCompleted API, which is better suited to our need (tab page fully loaded) and whose parameter is simple and consistent across browsers :-)
const uiLanguage = currentBrowser.i18n.getUILanguage().includes("fr")
? "fr"
: "com"; // Detect browser language
const gsUrl = `${GSCHOLAR_SETTINGS_HOST}.${uiLanguage}`;
// Listener to detect when the GS tab has finished loading
const gsTabListener = (details) => {
if (details && details.url && details.tabId) {
if (details.url.startsWith(`${gsUrl}/scholar_settings?`)) {
currentBrowser.tabs.executeScript(details.tabId, {
code: `document.getElementsByName("save")[0].click();`,
});
} else if (details.url.startsWith(`${gsUrl}/scholar?`)) {
currentBrowser.webNavigation.onCompleted.removeListener(
gsTabListener
);
currentBrowser.tabs.remove(details.tabId);
}
}
};
currentBrowser.webNavigation.onCompleted.addListener(gsTabListener); // Add GS tab listener
currentBrowser.tabs.create({
url: `${gsUrl}/scholar_settings?inst=${gScholarInstIdList.join(
"&inst="
)}&save=#2`,
active: false,
}); // Open GS tab according to browser language
useEffect(() => {
window.addEventListener('beforeunload', leaveEvent)
return () => {
window.removeEventListener('beforeunload', leaveEvent)
}
}, [data])
the initialized microsoftTeams.initialize(); the above code works fine in browser, but not in teams.
You can register a before unload handler to detect/handle when Teams is going to unload your tab with latest Teams SDK. The rules can vary depending on the type of client (mobile versus webapp, versus desktop).
microsoftTeams.registerBeforeUnloadHandler()
https://github.com/OfficeDev/microsoft-teams-library-js/blob/1478c384cf4131d7755d8edfc9876acc5160dd8e/test/public/publicAPIs.spec.ts#L869
I used SAPCAI (SAP Conversational AI is a French development platform like Azure Bot Service) to build my chatbot, but I'm using the Bot-Framework Webchat on my web app. Therefore, I don't have any C# or JS code. The problem is SAPCAI quick replies are displayed as "attachments". How can I fix that?
Expected
Got
What you want is the Quick replies type.
Quick replies: Same purpose as buttons, but disappear once clicked. Great if you don’t want the user to have to scroll up the conversation and click on a button again.
There is information about how to create click replies on this page. It seems to be in the format of:
{
"type": "quickReplies",
"content": {
"title": "TITLE",
"buttons": [
{
"title": "BUTTON_TITLE",
"value": "BUTTON_VALUE"
}
]
}
}
The important part would be "type": "quickReplies". Since you haven't provided any code I'm not sure if you know how to get to the stage where you enter/edit this JSON. From the documentation on the first page that I linked it would seem that you get to this via:
On the Actions tab of a skill (or on the Requirements tab), you can choose among other things to send messages.
Under the send message button you will be displayed a list of message types to send, quick replies is one of these types. See my screenshots here.
I hope this helps.
I'm not entirely sure how SAPCAI works, but if you are receiving a card in Web Chat, you can use a custom middleware store to convert the card's title to text and its buttons to suggested actions. Then you can add them to the activity in place of the attachment. Note, the store middleware below will convert all card to suggested actions, so you may want to add some additional logic if you do intend to use other cards in your dialog. Also, if the card is an AdaptiveCard, you will need to do some more modifications as well since those tend to more complex than rich cards.
Middleware
const store = createStore(
{},
({ dispatch}) => next => async action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
const { attachments, from: { role }} = action.payload.activity;
if (role === 'bot' && attachments) {
const text = attachments.map(({ content: { title }}) => title).join(' ');
const actions = attachments.map(({content: { buttons }}) => buttons).flat();
action.payload.activity.text = text;
action.payload.activity.attachments = [];
action.payload.activity.suggestedActions = { actions };
}
}
return next(action)
}
);
renderWebChat({
directLine,
store,
}, document.getElementById('webchat'));
Screenshot
Hope this helps!
Hi I am using the example application with navigation list but I want to create a login page on top of it in which once I click login button and after authentication i have to route the application to main page.
I tried below code but nothing happened.
oj.Router.rootInstance.go('login');
please help.
Application : Oracle JET distribution
Code:
function (oj, ko, app) { // this callback gets executed when all required modules are loaded
$(function() {
function init() {
oj.Router.sync().then(
function () {
// Bind your ViewModel for the content of the whole page body.
ko.applyBindings(app, document.getElementById('globalBody'));
// navigate the user to login or wherever you want them to be now
oj.Router.rootInstance.go('login');
},
function (error) {
oj.Logger.error('Error in root start: ' + error.message);
}
);
}
You'll want to move your router go() commands out of the main.js and into a viewModel that backs the login page and only runs if and when the user passes your authentication test by entering the right username/password.
If login is the default page you want them to see, change the router.configure and navData setup in appController.js to make that the default page:
self.router.configure({
'login': {label: 'Login', isDefault: true},
...
Have a look at the FixItFast sample code for an example of a login page and the structure that supports it. FixItFast is a much more involved example than the standard Starter templates because it assumes mobile-first, but the signin.html view and signin.js viewModel might give you good ideas.
First you make your login page as default page.
Then (in your login.html) on button click you can call a function (function in login.js) where validation of your username and password takes .
self.signIn = function()
{
//your validation
if (login==success)
{
oj.Router.rootInstance.go('dashboard');
}
else
{
alert("check your details");
}
};
Make sure that you have add your dashboard page in router config
self.router.configure({
'dashboard': {label: 'Dashboard'},
'login': {label: '',isDefault: true}
});
I just started using the FireFox Builder to build a simple addon. I realised that I cannot get direct access to the window object.
What I want to do is to get the window object and pollute it with some classes and functions so I can call them from the page itself.
Below is the current code:
// This is an active module of the ritcoder Add-on
require("widget").Widget({
id: "widgetID1",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(evt){
var tabs = require("tabs");
var activeTab = tabs.activeTab;
var notifications = require("notifications");
notifications.notify({
title: "Jabberwocky",
text: "'Twas brillig, and the slithy toves",
data: "did gyre and gimble in the wabe",
onClick: function (data) {
console.log(data);
// console.log(this.data) would produce the same result.
}
});
activeTab.window.a=20; //this fails
context.alert('yesx');
}
});
How do I do this? Inject some code into the active page so that it can be called.
regards,
You need to use tab.attach() to run a content script in the tab's context, and then use unsafeWindow to add properties the page's script can see. (You should also read the introduction to Content Scripts.)
The Addon SDK doesn't provide a direct access (without the content script) to the page from the add-on's code because it tries to be forward compatible with the plans to make web pages run in processes separate from the browser's and the add-on's process.