How do I get those values? I see the example on the YUI page to do this but using a click event, and then calling the get('winWidth') method on the event target. But how can I get these values without the use of any event? Thanks
Simply
YAHOO.util.Dom.getViewportWidth();
YAHOO.util.Dom.getViewportHeight();
keep in mind you can reduce YUI namespace as shown bellow
(function() {
var Yutil = YAHOO.util,
Ydom = Ytil.Dom;
Ydom.getViewportWidth();
Ydom.getViewportHeight();
})();
Related
I'm trying to implement svg.js to make a map of a clickable floorplan.
But I cannot make this work properly, or this works but doesn't work like I expected:
const map = SVG.get('mysvg');
map.click(function( event ) {
this.fill({ color: '#000' });
console.log(this);
console.log(event.target);
});
When I try to click on some area on the map, instead of change fill color I get nothing.
Actually svgjs triggers 'create' as you can see in console with inspector.
Not sure what am I doing wrong here?
I would expect that the area will change fill color?
https://codepen.io/bobz-zg/pen/LdyXBe
You can use the select function as described here to create a Set. You'd then use the each() method from Set to iterate over each entry and apply the click event handler. For example:
const map = SVG.get("mysvg");
var restaurants = map.select('[id*="restaurant"]:not(g)'); // Create an svg.js Set, but do not capture the group in the set
restaurants.each(function() {
this.click(function(event) {
this.fill({ color: "#000" });
});
});
If you can edit the svg that you are using as an input, I would suggest adding a class to each of the clickable elements to use that as the reference for select. Otherwise, you'll have to do something like selecting all element id 'types' (i.e. restaurant, retail etc.) separately and concatenating the Sets using Set.add() before you do the loop to add the click listener, but that could get messy.
I want to be able to just place a View component (plugin) into the page through code and have it appear at some X\Y on the page... but I'm a bit stumped.
Any attempt to add via page.content kinda adds it to the layout\render pass so it occupies space.
So this would get injected into "any" page at "any" time, I have no control over the markup this would be used in (know what I mean?) There is no XML for it and unfortunately the answer can't just be wrap everything in an AbsoluteLayout because one can't mandate that on users apps\layouts.
Thoughts, even possible?
Basically the simplest way to do this is to dynamically and be fully cross platform compatible is to create a AbsoluteLayout item in your JavaScript code, and dynamically insert your item and the AL into the page container.
Code would be something like this:
var AbsoluteLayout = require('ui/layouts/absolute-layout').AbsoluteLayout;
var myAL = new AbsoluteLayout();
var myItem = new myPluginItem();
// Set you left, right, top, bottom coords.
myItem.top = x;
// Add our item to the AbsoluteItem
myAL.addChild(myItem);
var frame = require('ui/frame');
var page = frame.topmost().currentPage;
var LayoutBase = require('ui/layouts/layout-base').LayoutBase;
page._eachChildView(function(view) {
if (view instanceof LayoutBase) {
view.addChild(myAL);
return false;
}
return true;
});
However, if you don't want to do this the really simple way; the only other way is to actually go a bit lower level. You can natively access the iOS view controller (page._ios.view) and the android view (page._nativeView), and then manually add it to the view by using things like addView (https://developer.android.com/reference/android/view/ViewManager.html) or addSubview (https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/).
I would like to add you can set the Top and Left properties in TypeScript by importing AbsoluteLayout like so
import {AbsoluteLayout} from 'ui/layouts/absolute-layout';
and then using the exposed functions setLeft or setTop
AbsoluteLayout.setLeft(YourItem, LeftValue);
or
AbsoluteLayout.setTop(YourItem, TopValue);
I want to display multiple datasources in a cesiumjs viewer but need to allow the user to select which ones they want to see at any given time. For example, if I load a kml and a czml file, how do I hide one and show the other? I can't find the cesiumjs way to do this with its API.
Update Feb 2016: A show flag has been proposed and may be added to a future version of Cesium.
Original answer:
Currently there is no show flag on the dataSource, however it is easy to add and remove the dataSource from the list of available dataSources, and this is used to get the show/hide functionality.
Here's a working demo: Load the Cesium Sandcastle Hello World example, and paste the following code into the left side, then hit Run (F8). It should display a checkbox in the upper-left with show/hide functionality.
var viewer = new Cesium.Viewer('cesiumContainer');
// Create a typical CzmlDataSource.
var dataSource1 = new Cesium.CzmlDataSource();
dataSource1.load('../../SampleData/simple.czml');
// Add a checkbox at the top.
document.getElementById('toolbar').innerHTML =
'<label><input type="checkbox" id="showCheckbox" /> Show CZML</label>';
var checkbox = document.getElementById('showCheckbox');
checkbox.addEventListener('change', function() {
// Checkbox state changed.
if (checkbox.checked) {
// Show if not shown.
if (!viewer.dataSources.contains(dataSource1)) {
viewer.dataSources.add(dataSource1);
}
} else {
// Hide if currently shown.
if (viewer.dataSources.contains(dataSource1)) {
viewer.dataSources.remove(dataSource1);
}
}
}, false);
This code could be improved, for example it could be a "lazy load" where the dataSource.load does not get called until the first time it's shown. Also if a dataSource has been hidden a while, you have to consider at what point should you be saving memory by destroying the dataSource rather than continuing to hold onto it (triggering a new lazy load if it is later shown again).
as of now, show is a property of the data source, you can control it by accessing the property in dot or bracket notation:
https://cesiumjs.org/Cesium/Build/Documentation/CzmlDataSource.html#show
const src = new Cesium.CzmlDataSource();
src.show = false;
I have a flash movie I am making that has a search box and a search button. The button has this code:
on (release, keyPress "<Enter>") {
searchbox.execute();
/*the function above processes searches*/
}
Clicking on the button works just fine. Pressing Enter doesn't do a bean! Does anyone know why this is, and any ways I can work around it? I'd prefer not to use listeners if I can possibly avoid it at all.
Using on() is a deprecated AS1 practice, so maybe you should just stop using it. Thanks to the onKeyDown event handler of the MovieClip class, it is possible to use proper code to do it without listeners, so you don't have to worry about them. ;)
Anyway, on with the code. Type this into the timeline which contains the button:
//Enable focus for and set focus to your button
searchButton.focusEnabled = true;
Selection.setFocus(searchButton);
//The onRelease handler for the button
searchButton.onRelease = function(){
//You need this._parent this code belongs to the button
this._parent.searchbox.execute();
}
//The onKeyDown handler for the button
searchButton.onKeyDown = function(){
//Key.getCode() returns the key code of the last key press
//Key.ENTER is a constant equal to the key code of the enter key
if(Key.getCode() == Key.ENTER){
this._parent.searchbox.execute();
}
}
I want to be able to add an onBlur/onkeypress/onChange events to all TypeAhead fields on the form rather than have a developer select every one in the Designer client. The only thing I cannot get a handle on is the onChange event.
When the user selects something in the TypeAhead the onChange event is triggered when adding the code directly to the event in the Domino Designer - so I should be able to replicate that capability with code.
If my typeAhead field is called inputText2 I thought I would be able to do the following
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onChange', function (){
alert('1')
});
However this doesn't appear to work...
I tried lowercase onchange
var widget = dojo.byId("#{id:inputText2}")
dojo.connect(widget, 'onchange', function (){
alert('1')
});
no luck there either
I tried
var widget = dijit.byId("#{id:inputText2}");
but that failed to event select the element entirely
So what do I need to do to trigger the onchange event when selecting an option in the typeAhead?
I found a solution.....not ideal but it worked for the moment - not generic though, but a start
Copying the way XPages does it....add this to the page
function view__id1__id2__id31__id50_clientSide_onchange(thisEvent) {
alert('me')
}
and then
dojo.addOnLoad(function(){
XSP.addOnLoad(function() {
XSP.attachEvent("X1","view:_id1:_id2:_id31:inputText2", "onchange", view__id1__id2__id31__id50_clientSide_onchange, false, 2);
});
});
});
X1 must be unique but everything else can be calculated
Thanks to Serdar Basegmez