mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
add modal popup widget
This commit is contained in:
Andy Gup
parent
44f5d27c56
commit
060bb7ac06
162
samples/widgets/modal/css/modal-popup.css
Normal file
162
samples/widgets/modal/css/modal-popup.css
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
.mod-popup-div {
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
z-index: 98;
|
||||||
|
font-size: x-large;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: -1000px;
|
||||||
|
}
|
||||||
|
.mod-popup-body {
|
||||||
|
position: relative;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
z-index: 100;
|
||||||
|
height: 80%;
|
||||||
|
width: 80%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: black;
|
||||||
|
display: table;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.mod-popup-modal-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
opacity: 0.5;
|
||||||
|
background-color: black;
|
||||||
|
z-index: 99;
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.mod-popup-input {
|
||||||
|
border-bottom: solid #ffffff 1px;
|
||||||
|
width: 80%;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.mod-popup-label {
|
||||||
|
padding: 12px;
|
||||||
|
width: 20%;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: dimgrey;
|
||||||
|
}
|
||||||
|
.mod-popup-label-top-left {
|
||||||
|
padding: 12px;
|
||||||
|
width: 20%;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: dimgray;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
}
|
||||||
|
.mod-popup-table-row {
|
||||||
|
color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
.mod-popup-stop-input {
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: x-large;
|
||||||
|
width: 90%;
|
||||||
|
height: 75%;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.mod-popup-stop-input-disabled {
|
||||||
|
color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: x-large;
|
||||||
|
background-color: dimgray;
|
||||||
|
opacity: 1.0; /* For safari display bug */
|
||||||
|
padding: 5px;
|
||||||
|
width: 90%;
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
.mod-popup-button {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: x-large;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 45%;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: #000000;
|
||||||
|
border: solid #ffffff 2px;
|
||||||
|
}
|
||||||
|
.mod-popup-button:active {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
color: #000000;
|
||||||
|
font-size: x-large;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 45%;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: lightyellow;
|
||||||
|
border: solid #ffffff 2px;
|
||||||
|
}
|
||||||
|
.mod-popup-button-cancel {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
color: lightgray;
|
||||||
|
font-size: x-large;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: #000000;
|
||||||
|
border: solid lightgray 1px;
|
||||||
|
}
|
||||||
|
.mod-popup-button-cancel:active {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
color: #000000;
|
||||||
|
font-size: x-large;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: lightyellow;
|
||||||
|
border: solid lightgray 1px;
|
||||||
|
}
|
||||||
|
.mod-popup-button-div {
|
||||||
|
padding: 12px;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
.mod-popup-button-div-bottom-left {
|
||||||
|
padding: 12px;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: #000000;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
}
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.mod-popup-button {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.mod-popup-button:active{
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.mod-popup-button-cancel {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.mod-popup-button-cancel:active {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 450px) {
|
||||||
|
.mod-popup-button {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.mod-popup-button:active{
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.mod-popup-button-cancel {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
.mod-popup-button-cancel:active {
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
71
samples/widgets/modal/popup.js
Normal file
71
samples/widgets/modal/popup.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
/**
|
||||||
|
* Modal Popup Widget
|
||||||
|
* This widget provides a basic framework for building modal popups
|
||||||
|
* for mobile GIS web applications.
|
||||||
|
* @author @agup
|
||||||
|
*/
|
||||||
|
define([
|
||||||
|
"dojo/_base/declare", "dojo/parser", "dojo/ready",
|
||||||
|
"dijit/_WidgetBase", "dijit/_TemplatedMixin","dojo/query",
|
||||||
|
"dojo/text!../widgets/template/popup.html","dojo/NodeList-manipulate"
|
||||||
|
], function(declare, parser, ready, _WidgetBase, _TemplatedMixin,query,template){
|
||||||
|
|
||||||
|
return declare("ModalPopup", [_WidgetBase, _TemplatedMixin], {
|
||||||
|
|
||||||
|
options: {
|
||||||
|
animation: false,
|
||||||
|
animationDuration: 1
|
||||||
|
},
|
||||||
|
|
||||||
|
templateString: template,
|
||||||
|
|
||||||
|
constructor: function (options, srcRefNode) {
|
||||||
|
// mix in settings and defaults
|
||||||
|
declare.safeMixin(this.options, options);
|
||||||
|
|
||||||
|
// widget node
|
||||||
|
this.domNode = srcRefNode;
|
||||||
|
|
||||||
|
// Set properties
|
||||||
|
this.set("animation", this.options.animation);
|
||||||
|
this.set("animationDuration", this.options.animationDuration);
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function () {
|
||||||
|
|
||||||
|
if(this.animation){
|
||||||
|
// You can design any animation you want!
|
||||||
|
this.domNode.style.opacity = 1;
|
||||||
|
this.domNode.style.left = 0;
|
||||||
|
this.domNode.style.top = 0;
|
||||||
|
this.domNode.style.width = "100%";
|
||||||
|
this.domNode.style.height = "100%";
|
||||||
|
this.domNode.style.transition = "all " + this.animationDuration + "s linear 0s";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.domNode.style.position = "static";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function () {
|
||||||
|
|
||||||
|
if(this.animation){
|
||||||
|
// You can design any animation you want!
|
||||||
|
this.domNode.style.height = 0;
|
||||||
|
this.domNode.style.width = 0;
|
||||||
|
this.domNode.style.opacity = 0;
|
||||||
|
this.domNode.style.top = "0px";
|
||||||
|
this.domNode.style.left = -1000 + "px";
|
||||||
|
this.domNode.style.transition = "all " + this.animationDuration + "s ease-in-out 0s";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.domNode.style.position = "absolute";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// connections/subscriptions will be cleaned up during the destroy() lifecycle phase
|
||||||
|
destroy: function () {
|
||||||
|
this.inherited(arguments);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
46
samples/widgets/modal/template/popup.html
Normal file
46
samples/widgets/modal/template/popup.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<div id="mod-popup" class="mod-popup-div">
|
||||||
|
<!--
|
||||||
|
|
||||||
|
MODAL POPUP TEMPLATE
|
||||||
|
|
||||||
|
This is a customizable template for creating modal popups.
|
||||||
|
Feel free to modify this to fit the properties of your own feature service.
|
||||||
|
|
||||||
|
-->
|
||||||
|
<div id="mod-popup-b" class="mod-popup-body">
|
||||||
|
<div id="row1" class="mod-popup-table-row">
|
||||||
|
<div class="mod-popup-label-top-left">ID</div>
|
||||||
|
<div class="mod-popup-input">
|
||||||
|
<input id="stop-main-id" type="text" disabled class="mod-popup-stop-input-disabled" value="test"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="row2" class="mod-popup-table-row">
|
||||||
|
<div class="mod-popup-label">Bustop ID</div>
|
||||||
|
<div class="mod-popup-input">
|
||||||
|
<input id="stop-id" disabled class="mod-popup-stop-input-disabled" value="test"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="row3" class="mod-popup-table-row">
|
||||||
|
<div class="mod-popup-label">Routes</div>
|
||||||
|
<div class="mod-popup-input">
|
||||||
|
<input id="stop-routes" class="mod-popup-stop-input" value="test"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="row4" class="mod-popup-table-row">
|
||||||
|
<div class="mod-popup-label">Stopnames</div>
|
||||||
|
<div class="mod-popup-input">
|
||||||
|
<input id="stop-names" class="mod-popup-stop-input" value="test"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="row5" class="mod-popup-table-row">
|
||||||
|
<div class="mod-popup-button-div-bottom-left">
|
||||||
|
<button id="mod-popup-close-btn" class="mod-popup-button-cancel" >Close</button>
|
||||||
|
</div>
|
||||||
|
<div class="mod-popup-button-div">
|
||||||
|
<button id="mod-popup-save-btn" class="mod-popup-button" style="margin-right: 10px;">Save</button>
|
||||||
|
<button id="mod-popup-delete-btn" disabled class="mod-popup-button" style="background-color: grey; text-decoration:line-through;">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="modal-background" class="mod-popup-modal-background"></div>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user