Related
I am using Google Maps API with multiple markers & mouse over & infowindows. It works perfectly. Now I want to add an individual URL for each marker on CLICK. But for some reason, all markers always open the last URL. - What is possibly the problem?
// Define your locations: HTML content for mouseover, the info window content, latitude, longitude, url
var locations = [
['<h8>Brugg</h8>', '<h7>auseinander.</h7>', 47.4867355, 8.2109103, 'http://www.stadtereignisse.ch/dokumentiert/'],
['<h8>Aarau»</h8>', '<h7>Aarau</h7>', 47.391224, 8.038669, 'http://www.stadtereignisse.ch/erlebt/'],
['<h8>Bern</h8>', '<h7>Bern</h7>', 46.947974, 7.447447, 'http://www.stadtereignisse.ch/erwuenscht/']
];
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
/* title: locations[i][0], */
url: "http://www.stadtereignisse.ch/dokumentiert/",
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (Allow each marker to have an info window)
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
Look at the difference between your click handler and your mouseover handler. One of these creates a closure; the other does not. You need to create a closure for click as well.
However, instead of the complicated technique of a function-that-returns-a-function, there is a cleaner way to do it. Simply move the entire loop body into one function that you call from the loop. Then you won't need the extra complication on the mouseover (or click either).
Also, as #ValLeNain pointed out, you're setting marker.url to a hard coded value instead of a different value for each marker, so I changed that to what looks like the value you want.
Finally, a bit of user experience advice: I do not recommend opening an infowindow on a mouseover. As you have probably noticed, if you open an infowindow for a marker near the top of the visible map, the entire map shifts to bring the infowindow into view. It is confusing and surprising when a mouseover triggers that movement. Infowindows should be opened on a click, not a mouseover. Then if you want to put a link inside the infowindow text you can do that.
I didn't address this issue in the code below, but will leave it for you to sort out.
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
addMarker( locations[i] );
}
function addMarker( location ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[2], location[3]),
title: location[0],
url: location[4],
map: map,
visible: true,
icon: icons[iconCounter]
});
markers.push(marker);
// CLICK (Allow each marker to have an info window)
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
// MOUSEOVER
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(location[0]);
infowindow.open(map, marker);
});
iconCounter++;
// We only have a limited number of possible icon colors, so we may have to restart the counter
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
I'm using OpenLayers 3 and I need to show only the vertices of a polyline. For exemple see this image :
I want to be able to show only the red squares (they can be something else than squares, like circles). Using markers is not an option for performance issue, my lines can be huge (500 000 vertices).
Currently I have a working code :
// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 1.5,
fill: new ol.style.Fill({
color: 'yellow'
})
}),
geometry: function(feature) {
return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
}
})
];
// Create the line :
var lineLayer = new ol.layer.Vector({
zIndex: 1000,
source: new ol.source.Vector({ features: [new ol.Feature({ geometry: myLine })] }),
style: yellowVertexPolylineStyle
});
// Add the layer :
map.addLayer(lineLayer);
But this is causing performance issue when the polyline is quite big (> 10 000 points).
Using an ol.geom.MultiPoint geometry is even worse. Does someone knows a better way?
EDIT : I'm trying this now :
// Define the style for vertex polyline :
var yellowVertexPolylineStyle = [
new ol.style.Style({
image: new ol.style.Circle({
radius: 1.5,
fill: new ol.style.Fill({
color: 'yellow'
})
}),
geometry: function(feature) {
var geom = feature.get('stylegeom');
if (!geom || (geom && geom.getCoordinates().length !== feature.getGeometry().getCoordinates().length) ) {
geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
feature.set('stylegeom', geom);
}
return geom;
}
})
];
I'll come back here to tell if it works...
You need to cache your style geometry, otherwise it will be calculated for every rendered frame, e.g.
geometry: function(feature) {
var geom = feature.get('stylegeom');
if (!geom) {
geom = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
feature.set('stylegeom', geom);
}
return geom;
}
If your feature geometry changes, you'll need to update the style geometry too:
source.on('changefeature', function(evt) {
feature.set('stylegeom', undefined);
});
I've successfully integrated both a Flot line graph and an instance of FullCalendar into my site. They are both on separate pages (although the pages are loaded into a div via AJAX).
I've added the Flot Resize plugin and that works perfectly, re-sizing the line graph as expected. However, it seems to cause an error when resizing the calendar.
Even if I load the calendar page first, when I resize the window I get this error in the console (also, the calendar does not resize correctly):
TypeError: 'undefined' is not an object (evaluating 'r.w=o!==c?o:q.width()')
I was struggling to work out where the error was coming from, so I removed the link to the Flot Resize JS and tried again. Of course the line graph does not resize, but when resizing the calendar, it works correctly.
The div containers for the two elements have different names and the resize function is called from within the function to draw the line graph (as required).
I have tried moving the link to the Flot Resize plugin into different places (i.e. above/below the fullCalendar JS, into the template which holds the graph), but all to no avail.
Does anyone have any idea where the conflict might be and how I might solve it??
Thanks very much!
EDIT: It seems that the error is also triggered when loading the line graph (flot) page AFTER the fullcalendar page even without resizing the window.... Now I am very confused!
EDIT 2: The code which draws the line graph. The function is called on pageload and recieves the data from JSON pulled off the server. When the graph is loaded, I still get the error about shutdown() being undefined.
function plotLineGraph(theData){
var myData = theData['data'];
var myEvents = theData['events'];
var myDates = theData['dates'];
var events = new Array();
for (var i=0; i<myEvents.length; i++) {
events.push(
{
min: myEvents[i][0],
max: myEvents[i][1],
eventType: "Calendar Entry",
title: myEvents[i][2],
description: myEvents[i][3]
}
);
}
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': 'black',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if ($("#enableTooltip:checked").length == 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
if(item.series.label != null){
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + y);
}
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
var d1 = [
myData[0], myData[1], myData[2], myData[3], myData[4],
myData[5], myData[6], myData[7], myData[8], myData[9],
myData[10], myData[11], myData[12], myData[13], myData[14],
myData[15], myData[16], myData[17], myData[18], myData[19],
myData[20], myData[21], myData[22], myData[23], myData[24],
myData[25], myData[26], myData[27], myData[28], myData[29]
];
var markings = [
{ color: '#FFBDC1', yaxis: { from: 0, to: 2 } },
{ color: '#F2E2C7', yaxis: { from: 2, to: 3.5 } },
{ color: '#B6F2B7', yaxis: { from: 3.5, to: 5 } }
];
$.plot($("#placeholder"), [
{label: "Average Daily Rating", data: d1, color: "black"}
], {
events: {
data: events,
},
series: {
lines: { show: true },
points: { show: true }
},
legend: { show: true, container: '#legend-holder' },
xaxis: {
ticks:[
myDates[0], myDates[1], myDates[2], myDates[3], myDates[4],
myDates[5], myDates[6], myDates[7], myDates[8], myDates[9],
myDates[10], myDates[11], myDates[12], myDates[13], myDates[14],
myDates[15], myDates[16], myDates[17], myDates[18], myDates[19],
myDates[20], myDates[21], myDates[22], myDates[23], myDates[24],
myDates[25], myDates[26], myDates[27], myDates[28], myDates[29]
],
},
yaxis: {
ticks: 5,
min: 0,
max: 5
},
grid: {
backgroundColor: { colors: ["#fff", "#eee"] },
hoverable: true,
clickable: true,
markings: markings
},
selection: {
color: 'white',
mode: 'x'
},
});
$('#placeholder').resize();
$('#placeholder').shutdown();
}
EDIT 3:
The calendar is called like this:
function showCalendar() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#fullcalendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
clickable: true,
firstDay: 1,
eventSources: [
{
url: '/populate-calendar/{{theProductUuid}}/',
color: 'black',
data: {
text: 'text'
}
}
],
eventClick: function(calEvent, jsEvent, view) {
var startDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
var endDate = $.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd');
var eventId = calEvent.uuid;
$('#modal-event-title').text(calEvent.title);
$('#edit-event-name').val(calEvent.title);
$('#edit-start-date').val(startDate);
$('#edit-end-date').val(endDate);
$('#edit-event-text').val(calEvent.text);
$('#edit-event-btn').attr('data-uuid', eventId);
$('#modal-edit-event').on('click', '#delete-btn', function(){
deleteCalendarEvent(eventId);
});
$('#modal-edit-event').modal();
},
});
}
The AJAX to load the page containing the flot chart:
function loadDetailedReports(uuid){
$('#product-content').fadeOut('slow', function(){
$('#product-content').empty();
$('#whole-product-sub-nav .active').removeClass('active');
$('#detailed-reports-content').load('/detailed-reports/' + uuid + '/', function(){
$('#detailed-reports-btn').addClass('active');
$('#detailed-reports-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadDetailedReports&' + uuid);
getChartData(uuid);
} else {
setLocationHash('');
}
});
});
});
}
And the AJAX to load the page containing the calendar:
function loadCalendar(uuid){
$('#detailed-reports-content').empty().hide();
$('#product-content').fadeOut('slow', function(){
$('#whole-product-sub-nav .active').removeClass('active');
$('#product-content').load('/calendar/' + uuid + '/', function(){
$('#calendar-btn').addClass('active');
$('#product-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadCalendar&' + uuid);
} else {
setLocationHash('');
}
showCalendar();
});
});
});
}
The calls to .resize and .shutdown are there because I was under the impression that they are necessary to achieve the resizing function and in response to your earlier comment regarding shutdown...... They're quite possibly n00b errors........?!?!
It looks like this is triggering on line 198 of jquery-resize:
data.w = w !== undefined ? w : elem.width();
This sounds like a race-condition stemming from the way you load different content into the same div. Flot binds the resize event to the chart div, and only un-binds it if the plot is destroyed cleanly.
EDIT: Looking at your code, my first suggestion would be to get rid of the resize and shutdown calls at the end of plotLineGraph. The resize plugin doesn't require any setup; it hooks into Flot to attach automatically to any new plot. So your call to resize is actually to jQuery's resize event trigger, which may be what's causing the error.
EDIT #2: I'm still not clear on your structure, but to generalize: anywhere that you might be getting rid of #placeholder (via emptying its parent or anything like that) you should first call shutdown on the plot object. If you aren't keeping a reference to it, you can do it like this: $("#placeholder").data("plot").shutdown(); but then have to account for the fact that it's undefined prior to the creation of your first plot.
If that still doesn't work, I'd need to see a live (simplified) example to make any further suggestions.
I've just finished creating a meticulously generated grid of icons (imageViews) and now I need to be able to do something with them. What I'm finding, though, is that the event listener I'm trying to bind isn't getting bound. Window loads, my icons are displayed nicely, but they aren't clickable.
Can anyone see what I'm missing? The code below is a fully functional (except for the part that doesn't function) file. You should be able to copy it into a test app and load it right up (may be iPhone-only at the moment).
Any insight would be much appreciated.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Ti.UI.setBackgroundColor('#000');
//
// create base UI tab and root window
//
var win = Ti.UI.createWindow({
backgroundColor:'#fff',
layout: 'vertical',
navBarHidden: true,
});
// icon grid
var icons = [
{ image: '/images/ico_generic.png', label: 'Hospital Locations', url: 'http://google.com' },
{ image: '/images/ico_generic.png', label: 'Tobacco Free Campus', url: 'http:://robwilkerson.org' },
{ image: '/images/ico_generic.png', label: 'ER Wait Times', url: 'http://letmegooglethatforyou.com' },
{ image: '/images/ico_generic.png', label: 'Make a Donation', url: 'http://flickr.com/photos/robwilkerson' },
{ image: '/images/ico_generic.png', label: 'Condition Search', url: 'http://facebook.com' },
{ image: '/images/ico_generic.png', label: 'Video Library', url: 'http://google.com/reader' },
{ image: '/images/ico_generic.png', label: 'Financial Help', url: 'http://stackoverflow.com' },
{ image: '/images/ico_generic.png', label: 'Patient Forms', url: 'http://github.com' }
];
// put the grid in a scrollable view
var iconGrid = Ti.UI.createScrollView({
layout: 'vertical',
});
// incoming properties we want customizable
var cols = 3;
var icoW = 57;
var icoH = 57;
// Grid
var xSpacer = 10; // horizontal space b/t icons
var ySpacer = 10; // vertical space b/t icons
var rows = Math.ceil( icons.length / cols ); // how many rows?
// Container width = 1/3 of the viewport minus the icon widths and spacers
var containerW = Math.floor( ( Ti.Platform.displayCaps.platformWidth - ( xSpacer * ( cols + 1 ) ) ) / 3 );
// Container height = icon height + label spacer + label height
var containerH = icoH + ySpacer + 15;
// Row height = icon height + top spacer + bottom spacer + label spacer + 15 (label height)
var rowH = containerH + ( 2 * ySpacer );
// Incrementing values
var i = 0;
var viewHeight = 0;
for( var y = 0; y < rows; y++ ) {
var thisRow = Ti.UI.createView({
className: 'grid',
layout: 'horizontal',
height: rowH,
touchEnabled: false,
});
viewHeight += rowH;
for( var x = 0; x < cols && i < icons.length; x++ ) {
var container = Ti.UI.createView({
left: xSpacer,
height: containerH,
top: ySpacer,
width: containerW,
});
var icon = Ti.UI.createImageView({
left: ( containerW - icoW ) / 2,
height: icoH,
image: icons[i].image,
top: 0,
width: icoW,
});
var label = Ti.UI.createLabel({
// borderColor: '#00f',
font: { fontSize: 12 },
height: 15,
text: icons[i].label,
textAlign: 'center',
top: icoH + ySpacer,
width: containerW,
});
icon.addEventListener( 'click', function( e ) {
alert( 'Icon ' + i + ' was clicked' );d
});
container.add( icon );
container.add( label );
thisRow.add( container );
i++;
}
iconGrid.add( thisRow );
iconGrid.height = viewHeight;
}
win.add( iconGrid );
win.open();
You can also apply an event listener to the "view" itself. The reason being is, if you constantly add the same event listener to every single view, you'll cause the device's memory to become smaller and smaller, especially in cases where you'll have a larger data set.
My suggestion to you is this:
Add your own property to the imageView, like an "id" or something. So something like:
Ti.UI.createImageView({image: 'path/to/image.png', id: 'array_key'});
Once you've done that, you can add an event listener to the parent view, in this case your imageView.
view.addEventListener('click', function(e) {
alert(e.source.id + ' was clicked');
});
That way you have one event listener that can handle all the imageView events.
This one's on me. In my learning process, I went through a couple of different solutions to display a grid of icons. In one of the early iterations, I had to disable touch for the row (it was a tableView attempt). Several iterations later I got the display right, but disabling touch access on the row killed my ability to "click" the icons.
I was so far down the road that I didn't even realize that property was still in place until a new set of eyes pointed it out to me. Once I removed that property on thisRow, the event listeners got bound properly.
I am adding some line of code. What I have done is like created the grid of images and when you click, you will be able to that image.
{
"body": [
{
"type": "photo",
"order": 1,
"photos": [
{
"thumbnail": "http://www.flower.com/version_2.0/files/photos/thumbnails/745178756-_-1331130219.jpg",
"photo": "http://www.flower.com/version_2.0/files/photos/745178756-_-1331130219.jpg"
},
{
"thumbnail": "http://www.flower.com/version_2.0/files/photos/thumbnails/58062938-_-1337463040.jpg",
"photo": "http://www.flower.com/version_2.0/files/photos/58062938-_-1337463040.jpg"
},
{
"thumbnail": "http://www.flower.com/version_2.0/files/photos/thumbnails/1368715237-_-1337463149.jpg",
"photo": "http://www.flower.comversion_2.0/files/photos/1368715237-_-1337463149.jpg"
},
]
},
],
"status": true
}
It was response I was getting from the server.
Now for Making it is in grid and for clickable image, I am going to paste the code below. Note grid is done for 320 px width.
var xhr = Ti.Network.createHTTPClient({
onload : function(e) {
var response = JSON.parse(this.responseText);
var myObjectString = JSON.stringify(response);
Titanium.API.info('myObjectString--->: ' + myObjectString)
var myArray = response.body;
var objectArray = [];
var k = 5;
for (var i = 0; i < myArray[0].photos.length/5; i++) {
var l = 0+i*5; var m = 0 for (var j = l; j < k; j++) {
var thumb = Ti.UI.createImageView({
image:myArray[0].photos[j].thumbnail,
largeImage:myArray[0].photos[j].photo,
height:60,
tag:j,
width:60,
top:5*(i+1)+60*i,
left:3*(m+1)+60*m,
});
objectArray.push(thumb);
m++;
scroll.add(thumb);
thumb.addEventListener('click' ,function(e)
{
for(var i =0;i<objectArray.length;i++)
{
if(e.source.tag==objectArray[i].tag)
{
var LargeImageView = Ti.UI.createWindow({
backButtonTitle:'Image',
barColor:'#000',
backgroundColor: '#fff',
backgroundImage:'./Images/background.png',
url:'/More/DetailsImage.js',
image:objectArray[i].largeImage,
ImageArray:objectArray,
index:i,
});
Titanium.UI.currentTab.open(LargeImageView,{animated:true,modal:true});
break;
}
}
}); } l=k+5; k=k+5;
} } });
Is there a way to create a non-modal dialog window using dojo? jQuery UI supports both modal and non-modal dialog boxes. I am trying to convert a SilverLight application to HTML/javascript and finding it difficult to create non-modal windows using dojo.
You can set the display of the underlay to 'none', and you will have a non-modal Dialog. To do that, set the class of the Dialog to 'nonModal' (that's just a convention I'm creating right now), and in the CSS for the page, have an entry for .nonModal_underlay.
require(['dijit/form/Button','dijit/Dialog'],
function (Button, Dialog) {
var d = new Dialog({
'title':'I am nonmodal',
'class':'nonModal'
});
});
.nonModal_underlay {
display:none;
}
you might try dojox.layout.FloatingPane
Hi Just add this in your css
.dijitDialogUnderlayWrapper{
display:none !important
}
For people that need truly modeless Dialog, Roy J provides only partial solution as the focus still is held within the Dialog. To fix this, you can copy the dijit/Dialog.js and its dijit/templates/Dialog.html to your own folder structure and rename them to ModelessDialog. Then remove the focus handler, the key handler and the underlay. Here is the full result:
define([
"require",
"dojo/_base/array", // array.forEach array.indexOf array.map
"dojo/aspect",
"dojo/_base/declare", // declare
"dojo/Deferred", // Deferred
"dojo/dom", // dom.isDescendant
"dojo/dom-class", // domClass.add domClass.contains
"dojo/dom-geometry", // domGeometry.position
"dojo/dom-style", // domStyle.set
"dojo/_base/fx", // fx.fadeIn fx.fadeOut
"dojo/i18n", // i18n.getLocalization
"dojo/keys",
"dojo/_base/lang", // lang.mixin lang.hitch
"dojo/on",
"dojo/ready",
"dojo/sniff", // has("ie") has("opera") has("dijit-legacy-requires")
"dojo/window", // winUtils.getBox, winUtils.get
"dojo/dnd/Moveable", // Moveable
"dojo/dnd/TimedMoveable", // TimedMoveable
"dijit/focus",
"dijit/_base/manager", // manager.defaultDuration
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_CssStateMixin",
"dijit/form/_FormMixin",
"dijit/_DialogMixin",
"dijit/layout/ContentPane",
"dijit/layout/utils",
"dojo/text!./templates/ModelessDialog.html",
"dijit/a11yclick", // template uses ondijitclick
"dojo/i18n!dijit/nls/common"
], function(require, array, aspect, declare, Deferred,
dom, domClass, domGeometry, domStyle, fx, i18n, keys, lang, on, ready, has, winUtils,
Moveable, TimedMoveable, focus, manager, _Widget, _TemplatedMixin, _CssStateMixin, _FormMixin, _DialogMixin,
ContentPane, utils, template){
// module:
// company/common/ModelessDialog
var resolvedDeferred = new Deferred(), _DialogBase, ds = null, DialogLevelManager = null, ModelessDialog,
_currentDialog = null;
resolvedDeferred.resolve(true);
_DialogBase = declare("dijit._DialogBase" + (has("dojo-bidi") ? "_NoBidi" : ""),
[_TemplatedMixin, _FormMixin, _DialogMixin, _CssStateMixin], {
templateString: template,
baseClass: "dijitDialog",
cssStateNodes: {
closeButtonNode: "dijitDialogCloseIcon"
},
// Map widget attributes to DOMNode attributes.
_setTitleAttr: { node: "titleNode", type: "innerHTML" },
// open: [readonly] Boolean
// True if ModelessDialog is currently displayed on screen.
open: false,
// duration: Integer
// The time in milliseconds it takes the dialog to fade in and out
duration: manager.defaultDuration,
// refocus: Boolean
// A Toggle to modify the default focus behavior of a ModelessDialog, which
// is to re-focus the element which had focus before being opened.
// False will disable refocusing. Default: true
refocus: true,
// autofocus: Boolean
// A Toggle to modify the default focus behavior of a ModelessDialog, which
// is to focus on the first dialog element after opening the dialog.
// False will disable autofocusing. Default: true
autofocus: true,
// _firstFocusItem: [private readonly] DomNode
// The pointer to the first focusable node in the dialog.
// Set by `dijit/_DialogMixin._getFocusItems()`.
_firstFocusItem: null,
// _lastFocusItem: [private readonly] DomNode
// The pointer to which node has focus prior to our dialog.
// Set by `dijit/_DialogMixin._getFocusItems()`.
_lastFocusItem: null,
// draggable: Boolean
// Toggles the movable aspect of the ModelessDialog. If true, ModelessDialog
// can be dragged by it's title. If false it will remain centered
// in the viewport.
draggable: true,
_setDraggableAttr: function(/*Boolean*/ val){
// Avoid _WidgetBase behavior of copying draggable attribute to this.domNode,
// as that prevents text select on modern browsers (#14452)
this._set("draggable", val);
},
// maxRatio: Number
// Maximum size to allow the dialog to expand to, relative to viewport size
maxRatio: 0.8,
// closable: Boolean
// ModelessDialog show [x] icon to close itself, and ESC key will close the dialog.
closable: true,
_setClosableAttr: function(val){
this.closeButtonNode.style.display = val ? "" : "none";
this._set("closable", val);
},
postMixInProperties: function(){
var _nlsResources = i18n.getLocalization("dijit", "common");
lang.mixin(this, _nlsResources);
this.inherited(arguments);
},
postCreate: function(){
domStyle.set(this.domNode, {
display: "none",
position: "absolute"
});
this.ownerDocumentBody.appendChild(this.domNode);
this.inherited(arguments);
aspect.after(this, "onExecute", lang.hitch(this, "hide"), true);
aspect.after(this, "onCancel", lang.hitch(this, "hide"), true);
this._modalconnects = [];
},
onLoad: function(){
// summary:
// Called when data has been loaded from an href.
// Unlike most other callbacks, this function can be connected to (via `dojo.connect`)
// but should *not* be overridden.
// tags:
// callback
// when href is specified we need to reposition the dialog after the data is loaded
// and find the focusable elements
this.resize();
this._position();
if(this.autofocus && DialogLevelManager.isTop(this)){
this._getFocusItems();
focus.focus(this._firstFocusItem);
}
this.inherited(arguments);
},
focus: function(){
this._getFocusItems();
focus.focus(this._firstFocusItem);
},
_endDrag: function(){
// summary:
// Called after dragging the ModelessDialog. Saves the position of the dialog in the viewport,
// and also adjust position to be fully within the viewport, so user doesn't lose access to handle
var nodePosition = domGeometry.position(this.domNode),
viewport = winUtils.getBox(this.ownerDocument);
nodePosition.y = Math.min(Math.max(nodePosition.y, 0), (viewport.h - nodePosition.h));
nodePosition.x = Math.min(Math.max(nodePosition.x, 0), (viewport.w - nodePosition.w));
this._relativePosition = nodePosition;
this._position();
},
_setup: function(){
// summary:
// Stuff we need to do before showing the ModelessDialog for the first
// time (but we defer it until right beforehand, for
// performance reasons).
// tags:
// private
var node = this.domNode;
if(this.titleBar && this.draggable){
// prevent overload, see #5285
if(has("ie") == 6) {
this._moveable = new TimedMoveable(node, { handle: this.titleBar });
} else {
this._moveable = new Moveable(node, { handle: this.titleBar });
}
aspect.after(this._moveable, "onMoveStop", lang.hitch(this, "_endDrag"), true);
}else{
domClass.add(node, "dijitDialogFixed");
}
},
_size: function(){
// TODO: remove for 2.0
this.resize();
},
_position: function(){
// summary:
// Position the dialog in the viewport. If no relative offset
// in the viewport has been determined (by dragging, for instance),
// center the dialog. Otherwise, use the ModelessDialog's stored relative offset,
// adjusted by the viewport's scroll.
if(!domClass.contains(this.ownerDocumentBody, "dojoMove")){ // don't do anything if called during auto-scroll
var node = this.domNode,
viewport = winUtils.getBox(this.ownerDocument),
p = this._relativePosition,
bb = p ? null : domGeometry.position(node),
l = Math.floor(viewport.l + (p ? p.x : (viewport.w - bb.w) / 2)),
t = Math.floor(viewport.t + (p ? p.y : (viewport.h - bb.h) / 2))
;
domStyle.set(node, {
left: l + "px",
top: t + "px"
});
}
},
show: function(){
// summary:
// Display the dialog
// returns: dojo/promise/Promise
// Promise object that resolves when the display animation is complete
if(this.open){
return resolvedDeferred.promise;
}
if(_currentDialog && _currentDialog != this) {
_currentDialog.destroy();
}
_currentDialog = this;
if(!this._started){
this.startup();
}
// first time we show the dialog, there's some initialization stuff to do
if(!this._alreadyInitialized){
this._setup();
this._alreadyInitialized = true;
}
if(this._fadeOutDeferred){
// There's a hide() operation in progress, so cancel it, but still call DialogLevelManager.hide()
// as though the hide() completed, in preparation for the DialogLevelManager.show() call below.
this._fadeOutDeferred.cancel();
DialogLevelManager.hide(this);
}
// Recenter ModelessDialog if user scrolls browser. Connecting to document doesn't work on IE, need to use window.
// Be sure that event object doesn't get passed to resize() method, because it's expecting an optional
// {w: ..., h:...} arg.
var win = winUtils.get(this.ownerDocument),
// fade-in Animation object, setup below
fadeIn = null, promise;
this._modalconnects.push(on(win, "scroll", lang.hitch(this, "resize", null)));
//this._modalconnects.push(on(this.domNode, "keydown", lang.hitch(this, "_onKey")));
domStyle.set(this.domNode, {
opacity: 0,
display: ""
});
this._set("open", true);
this._onShow(); // lazy load trigger
this.resize();
this._position();
this._fadeInDeferred = new Deferred(lang.hitch(this, function(){
fadeIn.stop();
delete this._fadeInDeferred;
}));
// If delay is 0, code below will delete this._fadeInDeferred instantly, so grab promise while we can.
promise = this._fadeInDeferred.promise;
fadeIn = fx.fadeIn({
node: this.domNode,
duration: this.duration,
beforeBegin: lang.hitch(this, function(){
DialogLevelManager.show(this/*, this.underlayAttrs*/);
}),
onEnd: lang.hitch(this, function(){
if(this.autofocus && DialogLevelManager.isTop(this)){
// find focusable items each time dialog is shown since if dialog contains a widget the
// first focusable items can change
this._getFocusItems();
focus.focus(this._firstFocusItem);
}
this._fadeInDeferred.resolve(true);
delete this._fadeInDeferred;
})
}).play();
return promise;
},
hide: function(){
// summary:
// Hide the dialog
// returns: dojo/promise/Promise
// Promise object that resolves when the display animation is complete
// If we haven't been initialized yet then we aren't showing and we can just return.
// Likewise if we are already hidden, or are currently fading out.
_currentDialog = null;
if(!this._alreadyInitialized || !this.open){
return resolvedDeferred.promise;
}
if(this._fadeInDeferred){
this._fadeInDeferred.cancel();
}
// fade-in Animation object, setup below
var fadeOut = null, promise, h = null;
this._fadeOutDeferred = new Deferred(lang.hitch(this, function(){
fadeOut.stop();
delete this._fadeOutDeferred;
}));
// fire onHide when the promise resolves.
this._fadeOutDeferred.then(lang.hitch(this, 'onHide'));
// If delay is 0, code below will delete this._fadeOutDeferred instantly, so grab promise while we can.
promise = this._fadeOutDeferred.promise;
fadeOut = fx.fadeOut({
node: this.domNode,
duration: this.duration,
onEnd: lang.hitch(this, function(){
this.domNode.style.display = "none";
DialogLevelManager.hide(this);
this._fadeOutDeferred.resolve(true);
delete this._fadeOutDeferred;
})
}).play();
if(this._scrollConnected){
this._scrollConnected = false;
}
while(h = this._modalconnects.pop()){
h.remove();
}
if(this._relativePosition){
delete this._relativePosition;
}
this._set("open", false);
return promise;
},
resize: function(dim){
// summary:
// Called with no argument when viewport scrolled or viewport size changed. Adjusts ModelessDialog as
// necessary to keep it visible.
//
// Can also be called with an argument (by dojox/layout/ResizeHandle etc.) to explicitly set the
// size of the dialog.
// dim: Object?
// Optional dimension object like {w: 200, h: 300}
if(this.domNode.style.display != "none"){
this._checkIfSingleChild();
if(!dim){
if(this._shrunk){
// If we earlier shrunk the dialog to fit in the viewport, reset it to its natural size
if(this._singleChild){
if(typeof this._singleChildOriginalStyle != "undefined"){
this._singleChild.domNode.style.cssText = this._singleChildOriginalStyle;
delete this._singleChildOriginalStyle;
}
}
array.forEach([this.domNode, this.containerNode, this.titleBar], function(node){
domStyle.set(node, {
position: "static",
width: "auto",
height: "auto"
});
});
this.domNode.style.position = "absolute";
}
// If necessary, shrink ModelessDialog to fit in viewport and have some space around it
// to indicate that it's a popup. This will also compensate for possible scrollbars on viewport.
var viewport = winUtils.getBox(this.ownerDocument), bb, contentDim, centerSize, cb;
viewport.w *= this.maxRatio;
viewport.h *= this.maxRatio;
bb = domGeometry.position(this.domNode);
if(bb.w >= viewport.w || bb.h >= viewport.h){
dim = {
w: Math.min(bb.w, viewport.w),
h: Math.min(bb.h, viewport.h)
};
this._shrunk = true;
}else{
this._shrunk = false;
}
}
// Code to run if user has requested an explicit size, or the shrinking code above set an implicit size
if(dim){
// Set this.domNode to specified size
domGeometry.setMarginBox(this.domNode, dim);
// And then size this.containerNode
contentDim = utils.marginBox2contentBox(this.domNode, dim);
centerSize = {domNode: this.containerNode, region: "center"};
utils.layoutChildren(this.domNode, contentDim,
[ {domNode: this.titleBar, region: "top"}, centerSize ]);
// And then if this.containerNode has a single layout widget child, size it too.
// Otherwise, make this.containerNode show a scrollbar if it's overflowing.
if(this._singleChild){
cb = utils.marginBox2contentBox(this.containerNode, centerSize);
// note: if containerNode has padding singleChildSize will have l and t set,
// but don't pass them to resize() or it will doubly-offset the child
this._singleChild.resize({w: cb.w, h: cb.h});
// TODO: save original size for restoring it on another show()?
}else{
this.containerNode.style.overflow = "auto";
this._layoutChildren(); // send resize() event to all child widgets
}
}else{
this._layoutChildren(); // send resize() event to all child widgets
}
if(!has("touch") && !dim){
// If the user has scrolled the viewport then reposition the ModelessDialog. But don't do it for touch
// devices, because it will counteract when a keyboard pops up and then the browser auto-scrolls
// the focused node into view.
this._position();
}
}
},
_layoutChildren: function(){
// Override _ContentPaneResizeMixin._layoutChildren because even when there's just a single layout child
// widget, sometimes we don't want to size it explicitly (i.e. to pass a dim argument to resize())
array.forEach(this.getChildren(), function(widget){
if(widget.resize){
widget.resize();
}
});
},
destroy: function(){
if(this._fadeInDeferred){
this._fadeInDeferred.cancel();
}
if(this._fadeOutDeferred){
this._fadeOutDeferred.cancel();
}
if(this._moveable){
this._moveable.destroy();
}
var h = null;
while(h = this._modalconnects.pop()){
h.remove();
}
DialogLevelManager.hide(this);
_currentDialog = null;
this.inherited(arguments);
}
});
if(has("dojo-bidi")){
_DialogBase = declare("dijit._DialogBase", _DialogBase, {
_setTitleAttr: function(/*String*/ title){
this._set("title", title);
this.titleNode.innerHTML = title;
this.applyTextDir(this.titleNode);
},
_setTextDirAttr: function(textDir){
if(this._created && this.textDir != textDir){
this._set("textDir", textDir);
this.set("title", this.title);
}
}
});
}
ModelessDialog = declare("beacons.common.ModelessDialog", [ContentPane, _DialogBase], {
// summary:
// A modal dialog Widget.
// description:
// Pops up a modeless dialog window. ModelessDialog is extended from
// ContentPane so it supports all the same parameters (href, etc.).
// example:
// | <div data-dojo-type="beacons/common/ModelessDialog" data-dojo-props="href: 'test.html'"></div>
// example:
// | var foo = new ModelessDialog({ title: "test dialog", content: "test content" });
// | foo.placeAt(win.body());
// | foo.startup();
});
ModelessDialog._DialogBase = _DialogBase; // for monkey patching and dojox/widget/DialogSimple
DialogLevelManager = ModelessDialog._DialogLevelManager = {
// summary:
// Controls the various active "levels" on the page, starting with the
// stuff initially visible on the page (at z-index 0), and then having an entry for
// each ModelessDialog shown.
_beginZIndex: 750,
show: function(/*dijit/_WidgetBase*/ dialog/*, / *Object* / underlayAttrs*/){
// summary:
// Call right before fade-in animation for new dialog.
// Saves current focus, displays/adjusts underlay for new dialog,
// and sets the z-index of the dialog itself.
//
// New dialog will be displayed on top of all currently displayed dialogs.
//
// Caller is responsible for setting focus in new dialog after the fade-in
// animation completes.
// Save current focus
ds[ds.length - 1].focus = focus.curNode;
// Set z-index a bit above previous dialog
var zIndex = ds[ds.length - 1].dialog ? ds[ds.length - 1].zIndex + 2 : ModelessDialog._DialogLevelManager._beginZIndex;
domStyle.set(dialog.domNode, 'zIndex', zIndex);
ds.push({dialog: dialog, /*underlayAttrs: underlayAttrs, */zIndex: zIndex});
},
hide: function(/*dijit/_WidgetBase*/ dialog){
// summary:
// Called when the specified dialog is hidden/destroyed, after the fade-out
// animation ends, in order to reset page focus, fix the underlay, etc.
// If the specified dialog isn't open then does nothing.
//
// Caller is responsible for either setting display:none on the dialog domNode,
// or calling dijit/popup.hide(), or removing it from the page DOM.
var pd, focus, idx;
if(ds[ds.length - 1].dialog == dialog){
// Removing the top (or only) dialog in the stack, return focus
// to previous dialog
ds.pop();
pd = ds[ds.length - 1]; // the new active dialog (or the base page itself)
// Adjust focus.
// TODO: regardless of setting of dialog.refocus, if the exeucte() method set focus somewhere,
// don't shift focus back to button. Note that execute() runs at the start of the fade-out but
// this code runs later, at the end of the fade-out. Menu has code like this.
if(dialog.refocus){
// If we are returning control to a previous dialog but for some reason
// that dialog didn't have a focused field, set focus to first focusable item.
// This situation could happen if two dialogs appeared at nearly the same time,
// since a dialog doesn't set it's focus until the fade-in is finished.
focus = pd.focus;
if(pd.dialog && (!focus || !dom.isDescendant(focus, pd.dialog.domNode))){
pd.dialog._getFocusItems();
focus = pd.dialog._firstFocusItem;
}
if(focus){
// Refocus the button that spawned the ModelessDialog. This will fail in corner cases including
// page unload on IE, because the dijit/form/Button that launched the ModelessDialog may get destroyed
// before this code runs. (#15058)
try{
focus.focus();
}catch(e){
;
}
}
}
}else{
// Removing a dialog out of order (#9944, #10705).
// Don't need to mess with underlay or z-index or anything.
idx = array.indexOf(array.map(ds, function(elem){
return elem.dialog;
}), dialog);
if(idx != -1){
ds.splice(idx, 1);
}
}
},
isTop: function(/*dijit/_WidgetBase*/ dialog){
// summary:
// Returns true if specified ModelessDialog is the top in the task
return ds[ds.length - 1].dialog == dialog;
}
};
// Stack representing the various active "levels" on the page, starting with the
// stuff initially visible on the page (at z-index 0), and then having an entry for
// each ModelessDialog shown.
// Each element in stack has form {
// dialog: dialogWidget,
// focus: returnFromGetFocus(),
// underlayAttrs: attributes to set on underlay (when this widget is active)
// }
ds = ModelessDialog._dialogStack = [
{dialog: null, focus: null/*, underlayAttrs: null*/} // entry for stuff at z-index: 0
];
// Back compat w/1.6, remove for 2.0
if(has("dijit-legacy-requires")){
ready(0, function(){
var requires = ["dijit/TooltipDialog"];
require(requires); // use indirection so modules not rolled into a build
});
}
ModelessDialog.closeCurrent = function() {
if(_currentDialog) {
_currentDialog.destroy();
}
};
return ModelessDialog;
});