Permalink
Browse files

Add dojo version of reveal and demo page

  • Loading branch information...
1 parent 5e2e385 commit 64d473873ab61185a3110cf4e887846ef8ee9712 @mkelly12 mkelly12 committed Mar 10, 2011
Showing with 290 additions and 0 deletions.
  1. +233 −0 dojo.reveal.js
  2. +57 −0 dojo_demo.html
View
@@ -0,0 +1,233 @@
+/*
+ * Dojo Reveal Plugin 1.0
+ * www.ZURB.com
+ * Copyright 2010, ZURB
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+*/
+
+
+dojo.require("dijit._Widget");
+dojo.require("dojo.parser");
+
+dojo.addOnLoad(function () {
+ dojo.declare("ZURB.Reveal", [dijit._Widget], {
+
+ animation: 'fadeAndPop', //fade, fadeAndPop, none
+ animationspeed: 300, //how fast animtions are
+ closeonbackgroundclick: true, //if you click background will modal close?
+ dismissmodalclass: 'close-reveal-modal', //the class of a button or element that will close an open modal
+ locked: false,
+ modalId: '',
+ connections: [],
+
+ postCreate: function () {
+ this.modal = dojo.byId(this.modalId);
+ this.modalBG = dojo.query('.reveal-modal-bg');
+
+ if (this.modalBG.length === 0) {
+ dojo.place('<div class="reveal-modal-bg"></div>', this.modal, 'after');
+ this.modalBG = dojo.query('.reveal-modal-bg');
+ }
+
+ this.connect(this.domNode, 'onclick', 'openModal');
+
+ },
+
+ openModal: function () {
+ this.topMeasure = dojo.marginBox(this.modal).t;
+ this.topOffset = dojo.position(this.modal).h + this.topMeasure;
+
+ dojo.query('.' + this.dismissmodalclass).forEach(dojo.hitch(this, 'connectCloseModal'));
+
+ if (this.closeonbackgroundclick) {
+ this.modalBG.style('cursor', 'pointer');
+ this.connections.push(this.connect(this.modalBG[0], 'onclick', 'closeModal'));
+ }
+
+ this.animate();
+ },
+
+ connectCloseModal: function (closeElement) {
+ this.connections.push(this.connect(closeElement, 'onclick', 'closeModal'));
+ },
+
+ closeModal: function () {
+ dojo.forEach(this.connections, dojo.hitch(this, 'disconnect'));
+ if(!this.locked) {
+ this.lockModal();
+ switch (this.animation) {
+ case "none":
+ this.closeNone();
+ break;
+ case "fadeAndPop":
+ this.closeFadeAndPop();
+ break;
+ case "fade":
+ this.closeFade();
+ break;
+ default:
+ }
+ }
+ },
+
+ animate: function () {
+ if (!this.locked) {
+ this.lockModal();
+ switch (this.animation) {
+ case "none":
+ this.animateNone();
+ break;
+ case "fadeAndPop":
+ this.animateFadeAndPop();
+ break;
+ case "fade":
+ this.animateFade();
+ break;
+ default:
+ }
+ }
+ },
+
+ animateFadeAndPop: function () {
+ dojo.style(this.modal, {
+ 'top': dojo._docScroll().y - this.topOffset + 'px',
+ 'opacity' : 0,
+ 'visibility' : 'visible'
+ });
+
+ this.modalBG.style({'display': 'block', 'opacity': 0});
+ dojo.fadeIn({
+ node: this.modalBG[0],
+ duration: this.animationspeed / 2
+ }).play();
+
+ dojo.animateProperty({
+ node: this.modal,
+ properties: {
+ top: dojo._docScroll().y + this.topMeasure,
+ opacity : 1
+ },
+ duration: this.animationspeed,
+ onEnd: dojo.hitch(this, "unlockModal"),
+ delay: (this.animationspeed / 2)
+ }).play();
+ },
+
+ closeFadeAndPop: function () {
+ dojo.fadeOut({
+ node: this.modalBG[0],
+ duration: this.animationspeed,
+ delay: this.animationspeed,
+ onEnd: dojo.hitch(this, 'hideOverlay')
+ }).play();
+
+ dojo.animateProperty({
+ node: this.modal,
+ properties: {
+ top: dojo._docScroll().y - this.topOffset,
+ opacity: 0
+ },
+ duration: this.animationspeed / 2,
+ onEnd: dojo.hitch(this, 'closeFadeAndPopComplete')
+ }).play();
+ },
+
+ closeFadeAndPopComplete: function () {
+ dojo.style(this.modal, {
+ top: this.topMeasure + 'px',
+ opacity : 1,
+ visibility : 'hidden'
+ });
+ this.unlockModal();
+ },
+
+ animateFade: function () {
+ this.modalBG.style({'display': 'block', 'opacity': 0});
+ dojo.style(this.modal, {
+ 'opacity' : 0,
+ 'visibility' : 'visible',
+ 'top': dojo._docScroll().y + this.topMeasure + 'px'
+ });
+
+ dojo.fadeIn({
+ node: this.modalBG[0],
+ duration: this.animationspeed / 2
+ }).play();
+ dojo.animateProperty({
+ node: this.modal,
+ properties: {
+ "opacity" : 1
+ },
+ duration: this.animationspeed,
+ delay: this.animationspeed / 2,
+ onEnd: dojo.hitch(this, "unlockModal")
+ }).play();
+ },
+
+ closeFade: function () {
+ dojo.fadeOut({
+ node: this.modalBG[0],
+ duration: this.animationspeed,
+ delay: this.animationspeed,
+ onEnd: dojo.hitch(this, "hideOverlay")
+ }).play();
+
+ dojo.animateProperty({
+ node: this.modal,
+ properties: {
+ "opacity" : 0
+ },
+ duration: this.animationspeed,
+ onEnd: dojo.hitch(this, "closeFadeComplete")
+ }).play();
+ },
+
+ closeFadeComplete: function () {
+ dojo.style(this.modal, {
+ 'opacity' : 1,
+ 'visibility' : 'hidden',
+ 'top' : this.topMeasure + 'px'
+ });
+ this.unlockModal();
+ },
+
+ hideOverlay: function () {
+ this.modalBG.style({'display': 'none'});
+ },
+
+ animateNone: function () {
+ dojo.style(this.modal, {
+ visibility: 'visible',
+ top: dojo._docScroll().y + this.topMeasure
+ });
+ this.modalBG.style({
+ "display": "block",
+ "opacity": 1
+ });
+ this.unlockModal();
+ },
+
+ closeNone: function () {
+ dojo.style(this.modal, {
+ visibility: 'hidden',
+ top: this.topMeasure
+ });
+ this.modalBG.style("display", "none");
+ this.unlockModal();
+ },
+
+ lockModal: function () {
+ this.locked = true;
+ },
+
+ unlockModal: function () {
+ this.locked = false;
+ }
+
+ });
+
+
+ // Call the parser manually so it runs after the widget is defined
+ dojo.parser.parse();
+});
View
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+ * Markup for Dojo Reveal Plugin 1.0
+ * www.ZURB.com/playground
+ * Copyright 2010, ZURB
+ * Free to use under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ -->
+ <head>
+ <meta charset="utf-8" />
+ <title>Reveal Demo</title>
+
+ <!-- Attach our CSS -->
+ <link rel="stylesheet" href="reveal.css">
+
+ <!-- Attach necessary scripts -->
+ <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
+ <script type="text/javascript" src="dojo.reveal.js"></script>
+ <script>
+ function openModal() {
+ reveal = new ZURB.Reveal({modalId: "myModal"});
+ reveal.openModal();
+ }
+ </script>
+
+ <style type="text/css">
+ body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
+ .big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px;}
+ </style>
+
+ </head>
+ <body>
+
+ <a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="fadeAndPop">
+ Fade and Pop Animation
+ </a>
+
+ <a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="fade">
+ Fade Animation
+ </a>
+
+ <a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="none">
+ No Animation
+ </a>
+
+ <a href="#" class="big-link" onclick="openModal(); return false;">
+ Open With Script
+ </a>
+
+ <div id="myModal" class="reveal-modal">
+ <h1>Reveal Modal Goodness</h1>
+ <p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
+ <a class="close-reveal-modal">&#215;</a>
+ </div>
+
+ </body>
+</html>

0 comments on commit 64d4738

Please sign in to comment.