Skip to content
This repository
Browse code

Add dojo version of reveal and demo page

  • Loading branch information...
commit 64d473873ab61185a3110cf4e887846ef8ee9712 1 parent 5e2e385
Matt Kelly authored
233  dojo.reveal.js
... ...
@@ -0,0 +1,233 @@
  1
+/*
  2
+ * Dojo Reveal Plugin 1.0
  3
+ * www.ZURB.com
  4
+ * Copyright 2010, ZURB
  5
+ * Free to use under the MIT license.
  6
+ * http://www.opensource.org/licenses/mit-license.php
  7
+*/
  8
+
  9
+
  10
+dojo.require("dijit._Widget");
  11
+dojo.require("dojo.parser");
  12
+
  13
+dojo.addOnLoad(function () {
  14
+  dojo.declare("ZURB.Reveal", [dijit._Widget], {
  15
+    
  16
+    animation: 'fadeAndPop', //fade, fadeAndPop, none
  17
+    animationspeed: 300, //how fast animtions are
  18
+    closeonbackgroundclick: true, //if you click background will modal close?
  19
+    dismissmodalclass: 'close-reveal-modal', //the class of a button or element that will close an open modal
  20
+    locked: false,
  21
+    modalId: '',
  22
+    connections: [],
  23
+  
  24
+    postCreate: function () {      
  25
+      this.modal = dojo.byId(this.modalId);
  26
+      this.modalBG = dojo.query('.reveal-modal-bg');
  27
+      
  28
+      if (this.modalBG.length === 0) {
  29
+        dojo.place('<div class="reveal-modal-bg"></div>', this.modal, 'after');
  30
+        this.modalBG = dojo.query('.reveal-modal-bg');
  31
+			}
  32
+			
  33
+      this.connect(this.domNode, 'onclick', 'openModal');
  34
+      
  35
+    },
  36
+    
  37
+    openModal: function () {
  38
+      this.topMeasure = dojo.marginBox(this.modal).t;
  39
+      this.topOffset = dojo.position(this.modal).h + this.topMeasure;
  40
+      
  41
+      dojo.query('.' + this.dismissmodalclass).forEach(dojo.hitch(this, 'connectCloseModal'));
  42
+      
  43
+      if (this.closeonbackgroundclick) {
  44
+			  this.modalBG.style('cursor', 'pointer');
  45
+			  this.connections.push(this.connect(this.modalBG[0], 'onclick', 'closeModal'));
  46
+			}
  47
+			
  48
+      this.animate();
  49
+    },
  50
+    
  51
+    connectCloseModal: function (closeElement) {
  52
+      this.connections.push(this.connect(closeElement, 'onclick', 'closeModal'));
  53
+    },
  54
+    
  55
+    closeModal: function () {
  56
+      dojo.forEach(this.connections, dojo.hitch(this, 'disconnect'));
  57
+      if(!this.locked) {
  58
+				this.lockModal();
  59
+				switch (this.animation) {
  60
+				  case "none":
  61
+				    this.closeNone();
  62
+				    break;
  63
+				  case "fadeAndPop":
  64
+				    this.closeFadeAndPop();
  65
+				    break;
  66
+			    case "fade":
  67
+				    this.closeFade();
  68
+				    break;
  69
+				  default:
  70
+				}			
  71
+			}
  72
+    },
  73
+    
  74
+    animate: function () {
  75
+			if (!this.locked) {
  76
+				this.lockModal();
  77
+				switch (this.animation) {
  78
+				  case "none":
  79
+				    this.animateNone();
  80
+				    break;
  81
+				  case "fadeAndPop":
  82
+				    this.animateFadeAndPop();
  83
+				    break;
  84
+			    case "fade":
  85
+				    this.animateFade();
  86
+				    break;
  87
+				  default:
  88
+				}
  89
+			}
  90
+    },
  91
+    
  92
+    animateFadeAndPop: function () {
  93
+      dojo.style(this.modal, {
  94
+        'top': dojo._docScroll().y - this.topOffset + 'px',
  95
+        'opacity' : 0,
  96
+        'visibility' : 'visible'
  97
+      });
  98
+
  99
+      this.modalBG.style({'display': 'block', 'opacity': 0});
  100
+      dojo.fadeIn({
  101
+        node: this.modalBG[0],
  102
+        duration: this.animationspeed / 2
  103
+      }).play();
  104
+
  105
+      dojo.animateProperty({
  106
+        node: this.modal,
  107
+        properties: {
  108
+          top: dojo._docScroll().y + this.topMeasure,
  109
+          opacity : 1
  110
+        },
  111
+        duration: this.animationspeed,
  112
+        onEnd: dojo.hitch(this, "unlockModal"),
  113
+        delay: (this.animationspeed / 2)
  114
+      }).play();
  115
+    },
  116
+    
  117
+    closeFadeAndPop: function () {
  118
+      dojo.fadeOut({
  119
+        node: this.modalBG[0],
  120
+        duration: this.animationspeed,
  121
+        delay: this.animationspeed,
  122
+        onEnd: dojo.hitch(this, 'hideOverlay')
  123
+      }).play();
  124
+      
  125
+      dojo.animateProperty({
  126
+        node: this.modal,
  127
+        properties: {
  128
+          top:  dojo._docScroll().y - this.topOffset,
  129
+          opacity: 0
  130
+        },
  131
+        duration: this.animationspeed / 2,
  132
+        onEnd: dojo.hitch(this, 'closeFadeAndPopComplete')
  133
+      }).play();
  134
+    },
  135
+    
  136
+    closeFadeAndPopComplete: function () {
  137
+      dojo.style(this.modal, {
  138
+        top: this.topMeasure + 'px', 
  139
+        opacity : 1,
  140
+        visibility : 'hidden'
  141
+      });
  142
+      this.unlockModal();
  143
+    },
  144
+    
  145
+    animateFade: function () {
  146
+      this.modalBG.style({'display': 'block', 'opacity': 0});
  147
+      dojo.style(this.modal, {
  148
+        'opacity' : 0,
  149
+        'visibility' : 'visible',
  150
+        'top': dojo._docScroll().y + this.topMeasure + 'px'
  151
+      });
  152
+
  153
+			dojo.fadeIn({
  154
+			  node: this.modalBG[0],
  155
+			  duration: this.animationspeed / 2
  156
+			}).play();
  157
+			dojo.animateProperty({
  158
+			  node: this.modal,
  159
+			  properties: {
  160
+			    "opacity" : 1
  161
+			  },
  162
+			  duration: this.animationspeed,
  163
+			  delay: this.animationspeed / 2,
  164
+			  onEnd: dojo.hitch(this, "unlockModal")
  165
+			}).play();
  166
+    },
  167
+    
  168
+    closeFade: function () {
  169
+      dojo.fadeOut({
  170
+        node: this.modalBG[0],
  171
+        duration: this.animationspeed,
  172
+        delay: this.animationspeed,
  173
+        onEnd: dojo.hitch(this, "hideOverlay")
  174
+      }).play();
  175
+      
  176
+      dojo.animateProperty({
  177
+        node: this.modal,
  178
+        properties: {
  179
+          "opacity" : 0
  180
+        },
  181
+        duration: this.animationspeed,
  182
+        onEnd: dojo.hitch(this, "closeFadeComplete")
  183
+      }).play();
  184
+    },
  185
+    
  186
+    closeFadeComplete: function () {
  187
+      dojo.style(this.modal, {
  188
+        'opacity' : 1,
  189
+        'visibility' : 'hidden',
  190
+        'top' : this.topMeasure + 'px'
  191
+      });
  192
+			this.unlockModal();
  193
+    },
  194
+
  195
+    hideOverlay: function () {
  196
+      this.modalBG.style({'display': 'none'});
  197
+    },
  198
+    
  199
+    animateNone: function () {
  200
+      dojo.style(this.modal, {
  201
+        visibility: 'visible',
  202
+        top: dojo._docScroll().y + this.topMeasure
  203
+      });
  204
+			this.modalBG.style({
  205
+			  "display": "block",
  206
+			  "opacity": 1
  207
+			});	
  208
+			this.unlockModal();
  209
+    },
  210
+    
  211
+    closeNone: function () {
  212
+      dojo.style(this.modal, {
  213
+        visibility: 'hidden',
  214
+        top: this.topMeasure
  215
+      });
  216
+      this.modalBG.style("display", "none");
  217
+      this.unlockModal();
  218
+    },
  219
+    
  220
+    lockModal: function () {
  221
+      this.locked = true;
  222
+    },
  223
+    
  224
+    unlockModal: function () {
  225
+      this.locked = false;
  226
+    }
  227
+    
  228
+  });
  229
+
  230
+
  231
+  // Call the parser manually so it runs after the widget is defined
  232
+  dojo.parser.parse();
  233
+});
57  dojo_demo.html
... ...
@@ -0,0 +1,57 @@
  1
+<!DOCTYPE html>
  2
+<!-- 
  3
+ * Markup for Dojo Reveal Plugin 1.0
  4
+ * www.ZURB.com/playground
  5
+ * Copyright 2010, ZURB
  6
+ * Free to use under the MIT license.
  7
+ * http://www.opensource.org/licenses/mit-license.php
  8
+ -->
  9
+	<head>
  10
+		<meta charset="utf-8" />
  11
+		<title>Reveal Demo</title>
  12
+		
  13
+		<!-- Attach our CSS -->
  14
+	  	<link rel="stylesheet" href="reveal.css">	
  15
+	  	
  16
+		<!-- Attach necessary scripts -->
  17
+		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
  18
+		<script type="text/javascript" src="dojo.reveal.js"></script>
  19
+		<script>
  20
+			function openModal() {
  21
+				reveal = new ZURB.Reveal({modalId: "myModal"});
  22
+				reveal.openModal();
  23
+			}
  24
+		</script>
  25
+		
  26
+		<style type="text/css">
  27
+			body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
  28
+			.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px;}
  29
+		</style>
  30
+		
  31
+	</head>
  32
+	<body>
  33
+
  34
+		<a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="fadeAndPop">
  35
+			Fade and Pop Animation
  36
+		</a>
  37
+		
  38
+		<a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="fade">
  39
+			Fade Animation
  40
+		</a>
  41
+		
  42
+		<a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="none">
  43
+			No Animation
  44
+		</a>
  45
+		
  46
+		<a href="#" class="big-link" onclick="openModal(); return false;">
  47
+			Open With Script
  48
+		</a>
  49
+
  50
+		<div id="myModal" class="reveal-modal">
  51
+			<h1>Reveal Modal Goodness</h1>
  52
+			<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
  53
+			<a class="close-reveal-modal">&#215;</a>
  54
+		</div>
  55
+			
  56
+	</body>
  57
+</html>

0 notes on commit 64d4738

Please sign in to comment.
Something went wrong with that request. Please try again.