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