I would like to modify the language text on the extenstion library's name picker buttons.
I found this tip http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_Extension_Library but it did not work for me with 8.53 and IE8.
Does anyone have a work around ?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>Groupe</title>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Ojcore.css&2Ojdojo.css&2OldefaultTheme.css&2OldojoTheme.css&#Da&#Ib&#Th&#Ti&#Tj.css">
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js" djConfig="locale: 'fr-ca', parseOnLoad: true"></script>
<script type="text/javascript">dojo.registerModulePath('extlib', '/xsp/.ibmxspres/.extlib');</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.fr-ca/#EOb&#EOf&#Ek&#Eya.js"></script>
<link rel="stylesheet" type="text/css" href="/EIJ%20852.nsf/Required.css">
</head>
<body class="xsp lotusui tundra">
<form id="view:_id1" method="post" action="/EIJ%20852.nsf/xAdminGestionAccesGroupeDetails.xsp" class="lotusForm" enctype="multipart/form-data">
<script>[| dojo.provide("yn.dijit.PickerName");
dojo.declare(
"yn.dijit.PickerName", [extlib.dijit.OneUIPickerName], {
postMixInProperties: function() {
this.inherited(arguments);
var t = this.templateString;
// change text in HTML
t = t.replace(/Search for/, 'Rechercher pour');
// change button labels, add ">" in regex to make sure to select a button and nothing else
// the "g" option in the regex leads to javascript errors at runtime
t = t.replace(/>Search/, '>Rechercher');
t = t.replace(/>Add/, '>Ajouter');
t = t.replace(/>Remove/, '>Retirer');
t = t.replace(/>Remove All/, '>Retirer tout');
t = t.replace(/>Cancel/, '>Annuler');
this.templateString = t;
}
}); ]</script><script>[| var ynXSPSelectValue = XSP.selectValue;
XSP.selectValue = function(t, vars) {
if (t == "extlib.dijit.OneUIPickerName") {
ynXSPSelectValue("yn.dijit.PickerName", vars);
} else {
ynXSPSelectValue(t, vars);
}
} ]</script><br>
The labels on the dialog are automatically changed according to the language that is used in the browser. Julian's solution still works for me.
If you want to have it in a more elegant way, you have to do a little Java to not only use the browser language but let the user change the language
This can be done using a variable resolver. The trick is to set the "locale" on the view root at every change or reload of the page. This one http://hasselba.ch/blog/?p=649 should give you an idea, how this will look like.
I have some problems with the extLib from OpenNTF. Some of the localization packages seems not to be implemented correct. So I still see english labels even if I choose a different language. But this is a known issue and has been fixed in the upgrade pack.
Related
documentation aint too clear on how to style custom CAF receiver(if at all possible). even when adding styling to head, styling is not applied. in chrome inspector, it is clear the styling is never applied.
const context = cast.framework.CastReceiverContext.getInstance()
const playerManager = context.getPlayerManager();
// unrelated code
// end
/***
* start player
* */
context.start()
body {
--playback-logo-image: url('res/logo.png');
}
cast-media-player {
--theme-hue: 180;
--progress-color: rgb(255, 255, 255);
--splash-image: url('res/background-2.png');
--splash-size: cover;
}
<html>
<head>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
<link rel="stylesheet" href="css/receiver.css" media="screen" />
</head>
<body>
<cast-media-player id="player"></cast-media-player>
<script type="text/javascript"
src="js/receiver.js">
</script>
</body>
</html>
I am still new at this so someone please correct me if I am wrong.
I think the "styling" is used when modifying the basic receiver that is available. If you are creating a custom receiver you must do so from scratch.
Since you are using the cast-media-player element I feel like you are looking to customize the ui appearance of the basic receiver.
It appears (from looking at the documentation) that you are missing this code in the js file.
from: https://developers.google.com/cast/docs/caf_receiver/customize_ui
// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');
Edit: Sorry after looking back at it that is for changing the style using Javascript as apposed to CSS.
I am learning svg and would like to compare displaying svg items on different browsers. My code works fine on firefox, chrome, edge, safari etc, but cannot work on ie11. Unfortunately application I develop needs to support ie11 so I need to force my code to work correctly.
Here is fiddle: https://jsbin.com/hemawaboqa/1/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js"></script>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="svg-canvas"></div>
</div>
</body>
</html>
JS
var draw = SVG().addTo('#svg-canvas').size(400, 400)
var rect = draw.rect(100, 100)
Why that code is not working on ie11?
I have created a sample using the SVG.js 3.0 version with your code, it will show the "Object doesn't support property or method 'from'" in IE11 browser, perhaps the issue is related to the svg.js version, and it is a plugin issue, you could feedback this issue to SVG.js forum.
Besides, I suggest you could refer to the following code, to use the old version of SVG.js:
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<title>TEST</title>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="drawing">
</div>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js></script>
<script>
(function () {
'use strict';
// Add title as first child of SVG element:
var createTitle = function (svgObject, text) {
var fragment = document.createDocumentFragment();
var titleElement = document.createElement('TITLE');
fragment.appendChild(titleElement);
titleElement.innerHTML = text;
svgObject.node.insertAdjacentElement('afterbegin', titleElement);
};
SVG.extend(SVG.Doc, {
namespace: function () {
return this
.attr({xmlns: 'http://www.w3.org/2000/svg', version: '1.1'})
.attr('xmlns:xlink', SVG.xlink, SVG.xmlns);
}
});
var draw = new SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({fill: '#f06'});
// Add title to SVG element
createTitle(draw, 'Rectangle');
}());
</script>
</body>
</html>
The result as below:
The library you are using has ECMA 6 elements that are not understood in IE.
If you need your project to work in IE, you will have to use another library or find out how to change it so it allows for older browsers (as suggested here: https://svgjs.dev/docs/3.0/compatibility/)
How does one use NightwatchJs to automate clicking a specific part of an image? My naive approach is to select the coords attribute that matches the specific area of the image I'd like to trigger; but it doesn't work.
<img src="..." usemap="#example">
<map name="example" id="example">
<area shape="rect" coords="336,10,401,32" href="...">
<area shape="rect" coords="25,171,97,198" href="...">
...
</map>
Anyone encounter this issue or know of a work around? Thanks!
If I were you, I would play with the position of area elements inside the map element using CSS selectors like :first-child or :first-of-type. Here is a minimal working example:
PNG (map.png)
HTML/JS (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nightwatch</title>
</head>
<body>
<img src="map.png" usemap="#map">
<map name="map">
<area shape="circle" coords="51,51,29">
</map>
<script>
// When the red area is clicked, we should display an alert.
var area = document.querySelector('area');
area.addEventListener('click', function () {
alert('OK');
}, false);
</script>
</body>
</html>
Nightwatch (script.js)
module.exports = {
'Clickable image map': function (browser) {
browser
.url('http://localhost:8000/index.html')
.waitForElementPresent('map', 1000)
.click('map > area:first-child');
// ...
},
};
Command
If your environment is properly set up, you can run the script with nightwatch -t tests/script.js. You will see the alert, meaning that the red area has been clicked by Nightwatch.
I trying to create main page (part of node.js and mongoDB application) that includes login form.
To add view part I included js files with function that returns HTML, but as I can see much better is using template engine.
Everything is OK until I including one compiled swig part inside another one.
The output of main page is OK, but login part outputs like text on the page.
How is possible to output the login HTML as HTML instead of plain text?
Does more information needed to understand the issue?
Thank you in advance.
var swig = require('swig');
var mainPage_tpl = swig.compileFile(__dirname+'/../views/mainpage_tpl.html');
var formLogin_tpl = swig.compileFile(__dirname+'/../views/login_tpl.html');
var loginOutput = formLogin_tpl();
var mainPageOutput = mainPage_tpl({
title: 'Sometitle',
pagetitle: 'Somepagetitle',
content: loginOutput
});
exports.get = function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(mainPageOutput);
res.end();
}
mainpage_tpl.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/assets/reset.css" />
<link rel="stylesheet" href="/assets/style.css" />
<script type="text/javascript" src="/assets/jquery-2.0.0.js"></script>
<script type="text/javascript" src="/assets/script.js"></script>
</head>
<body id="login_page">
<h1>{{pagetitle}}</h1>
<div id="content">{{content}}</div>
</body>
</html>
If you want to include literal HTML, you need to tell Swig to not escape it using the safe filter:
...
<div id="content">{{ content|safe }}</div>
...
I am trying to learn how to use Google Local Search API. I am unable to set the local search center point to Pakistan. Please guide me. Thanks.
The line in code with the problem is:
localSearch.setCenterPoint("Pakistan, PAK");
The fiddle showing that results from NewYork are being displayed is here.
The whole code is,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Hello World - Google Web Search API Sample</title>
<script src="https://www.google.com/jsapi"
type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
//google.load('search', '1');
google.load("search", "1", {"nocss" : true});
function OnLoad() {
// Create a search control
var searchControl = new google.search.SearchControl();
// Add in a full set of searchers
var localSearch = new google.search.LocalSearch();
searchControl.addSearcher(new google.search.NewsSearch());
// Set the Local Search center point
localSearch.setCenterPoint("Pakistan, PAK");
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute("Facebook");
}
google.setOnLoadCallback(OnLoad);
//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading</div>
</body>
</html>
I believe you need to know what the latitude and longitude of PAK is for it to find it.
setCenter(latlng:LatLng);