diff --git a/samples/widgets/modal/css/modal-popup.css b/samples/widgets/modal/css/modal-popup.css new file mode 100644 index 0000000..3703a82 --- /dev/null +++ b/samples/widgets/modal/css/modal-popup.css @@ -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; + } +} \ No newline at end of file diff --git a/samples/widgets/modal/popup.js b/samples/widgets/modal/popup.js new file mode 100644 index 0000000..fc80c07 --- /dev/null +++ b/samples/widgets/modal/popup.js @@ -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); + } + }); +}); diff --git a/samples/widgets/modal/template/popup.html b/samples/widgets/modal/template/popup.html new file mode 100644 index 0000000..eeed14c --- /dev/null +++ b/samples/widgets/modal/template/popup.html @@ -0,0 +1,46 @@ +
+ +
+
+
ID
+
+ +
+
+
+
Bustop ID
+
+ +
+
+
+
Routes
+
+ +
+
+
+
Stopnames
+
+ +
+
+
+
+ +
+
+ + +
+
+
+ +
\ No newline at end of file