Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

First version

  • Loading branch information...
commit 21eaf70f40cd3a87eaece387f339ff7fcd233c04 1 parent 28fde16
@kunambi kunambi authored
View
4 .gitignore
@@ -0,0 +1,4 @@
+*.pyc
+.idea/
+.idea
+mootools*.js
View
63 README
@@ -0,0 +1,63 @@
+Moory Popins
+===========
+
+Moory Popins is a nifty widget, written in MooTools framework, that allows you to show popin (modal) windows within a
+web page. Browsers that doesn't support CSS Transitions will utilize Javascript fading instead. Settings currently allow
+you to show the information in an Iframe or if you want the popin in a fixed position (follows the user when scrolling)
+
+How to use
+-----------------
+
+Javascript snippet to initialize the class:
+
+ window.addEvent("domready", function() {
+ var MP = new MooryPopins({
+ src: "MooryPopins.html",
+ iframe: true,
+ fixed: true
+ });
+ });
+
+
+CSS selector to style the overlay and its children, eg:
+
+ ARTICLE#overlay-popin {}
+
+Options
+-----------------
+ iframe: (boolean) Show the response in an IFRAME or a DIV? | default: false (a DIV)
+ fixed: (boolean) Does the popin have a fixed position? If yes, it will follow the user when scrolling | default: false
+ src: (string) Path to the resource you want to display | default: "about:blank"
+ duration: (integer) How long should the transitions take? In milliseconds. | default: 250
+ css: (object) Some default CSS class-/id-names that are used. Change these if they're conflicting with your webpage
+
+
+Methods
+-----------------
+
+The following methods are availible publicly:
+
+ populate: takes string and fetches resource to display in the popin
+
+
+Version history
+-----------------
+Version 1.0
+
+ * First version
+
+
+Known bugs
+-----------------
+
+Known bugs that hopefully will be squashed in future releases
+
+ * None atm
+
+
+Wish list
+-----------------
+
+Future features I'd like to implement
+
+ * Please create an issue on github if you have any nifty ideas!
View
63 README.md
@@ -1,4 +1,63 @@
-MooryPopins
+Moory Popins
===========
-Moory Popins is a nifty widget, written in MooTools framework, that allows you to show popin (modal) windows within a web page.
+Moory Popins is a nifty widget, written in MooTools framework, that allows you to show popin (modal) windows within a
+web page. Browsers that doesn't support CSS Transitions will utilize Javascript fading instead. Settings currently allow
+you to show the information in an Iframe or if you want the popin in a fixed position (follows the user when scrolling)
+
+How to use
+-----------------
+
+Javascript snippet to initialize the class:
+
+ window.addEvent("domready", function() {
+ var MP = new MooryPopins({
+ src: "MooryPopins.html",
+ iframe: true,
+ fixed: true
+ });
+ });
+
+
+CSS selector to style the overlay and its children, eg:
+
+ ARTICLE#overlay-popin {}
+
+Options
+-----------------
+ iframe: (boolean) Show the response in an IFRAME or a DIV? | default: false (a DIV)
+ fixed: (boolean) Does the popin have a fixed position? If yes, it will follow the user when scrolling | default: false
+ src: (string) Path to the resource you want to display | default: "about:blank"
+ duration: (integer) How long should the transitions take? In milliseconds. | default: 250
+ css: (object) Some default CSS class-/id-names that are used. Change these if they're conflicting with your webpage
+
+
+Methods
+-----------------
+
+The following methods are availible publicly:
+
+ populate: takes string and fetches resource to display in the popin
+
+
+Version history
+-----------------
+Version 1.0
+
+ * First version
+
+
+Known bugs
+-----------------
+
+Known bugs that hopefully will be squashed in future releases
+
+ * None atm
+
+
+Wish list
+-----------------
+
+Future features I'd like to implement
+
+ * Please create an issue on github if you have any nifty ideas!
View
45 Source/MooryPopins.css
@@ -0,0 +1,45 @@
+BODY.loading {
+ cursor: progress;
+}
+ARTICLE#overlay-popin,
+ARTICLE#overlay-popin * {
+ padding: 0;
+ margin: 0;
+}
+ARTICLE#overlay-popin {
+ z-index: 99999;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACRJREFUeNpiYWBgaGCgImBioDIYNXDUwFEDRw0cNXCoGAgQYADADQCraWCIjwAAAABJRU5ErkJggg==) repeat left top;
+ opacity: 0;
+}
+ARTICLE#overlay-popin > SECTION {
+ width: 400px;
+ height: 400px;
+ position: relative;
+ margin: 10% auto 0;
+ left: 0;
+ right: 0;
+}
+ARTICLE#overlay-popin > SECTION > BUTTON.close {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiZJREFUeNq8l81Kw0AQx7NJ60fFbyrEkIvtQegl6M1bQejJPkSlV5/BB/DUa6Ev0avQeynoUbTgoShF0fpZsZrojMxKjZvNxqYO/Chkp/PP7M7uTpimZglgDlgEJoAk8UYMgB7wALyHBWMh45PAKrCkqdstcAm8RhXVAQtIK7yYyD6Aa+AC8FREcdqyQEob3fpAm5bg2wzB2q0D01o8hgks0JR7IlEWY4b+RGZI+JeoHbFgotgkaT3wgtEou7Q2XkvzWeSipqxKG43GTrVadWQRcRz9QranObzYG8CmCAi0/wHmuu4zBN4V+eBzHEc/9A+KRToJnrbQqVAo5HmwIOFhQe6D/5MIf9VNRuIgDMqFZWMS1lA0F+IkDN5sNg/+IIjkDDrudFmR1Ov1rm3bR47jbDPGkohlWVv4i+Oe5/VrtdpeuVw+VqhixkVDzS/Mn0cU/NoxmKGr/a+5mOkyL+OwfVgqlSq6rv84JjFrzB5nAWdDQXRg0OU8FUUQp7TValVM03T4GkcQfjQoy/kogriGxWLx0F9cisJd6Yk0hsNhY3gpM/90DGaGO4cUXd4s6MBvt9sd2bbAZchms3Y+n69LWpgT7CaY7z5dGeNWuQI6/kv8EZilFjNuewLOg3qke+ptEzEKYit6FtQjaTTQo72bjEHwBTj1N+CGwBGFb2gsNWLfey46ZlU6fIumXNV61GRH7vBFbeQ89bBB3zJ3VBOh3zKfAgwAVzp5MTohr5UAAAAASUVORK5CYII=) no-repeat left top;
+ display: block;
+ width: 29px;
+ height: 29px;
+ border: 0 none;
+ z-index: 1;
+ position: absolute;
+ right: -14px;
+ top: -14px;
+ cursor: pointer;
+}
+ARTICLE#overlay-popin > SECTION > IFRAME,
+ARTICLE#overlay-popin > SECTION > DIV {
+ width: 100%;
+ height: 100%;
+ border: 0 none;
+ background-color: #fff;
+}
View
1  Source/MooryPopins.html
@@ -0,0 +1 @@
+<p>MooryPopins.html has finished loaded!</p>
View
235 Source/MooryPopins.js
@@ -0,0 +1,235 @@
+/*
+---
+
+script: MooryPopins.js
+
+name: MooryPopins
+
+description: A helper class for creating popins/modal windows in a web page
+
+license: MIT-style license
+
+authors:
+ - Thomas Kunambi
+ - kunambi
+
+requires:
+ - Core/Class
+ - Core/Element
+ - Core/Element.Event
+ - Core/Fx.Tween
+ - Core/Request.HTML
+
+provides: [MooryPopins]
+
+...
+*/
+
+var MooryPopins = new Class({
+ Implements: Options,
+ options: {
+ iframe: false,
+ fixed: false,
+ src: "about:blank",
+ duration: 250,
+ css: {
+ id: "overlay-popin",
+ cu: "ease",
+ cl: "close",
+ lo: "loading"
+ }
+ },
+ /**
+ @constructor
+ @this {MooryPopins}
+ @param {Array} Options for behaviours for the displaying the popin/modal
+ @author Thomas Kunambi
+ @version 1.0
+ */
+ initialize: function(options) {
+ this.setOptions(options);
+
+ this.overlay = new Element("article", {
+ "id": this.options.css.id,
+ "events": {
+ "click": function(e) {
+ e.preventDefault();
+ if (e.target === this.overlay) {
+ this._close(this.overlay);
+ }
+ }.bind(this)
+ }
+ }).inject(document.body, "top");
+
+ if (this._hasTransition()) {
+ this._setTransition();
+ (function() {
+ this.setStyle("opacity", 1);
+ }).delay(5, this.overlay);
+ } else {
+ this.overlay.fade("in");
+ }
+
+ this.keydown = this._keydown.bind(this);
+ document.addEvent("keydown", this.keydown);
+
+ this._setup();
+ },
+ /**
+ @protected
+ @return {void}
+ @description Setup the container and close button
+ @since 1.0
+ */
+ _setup: function() {
+ document.body.addClass(this.options.css.lo);
+ this.section = new Element("section", {
+ styles: {
+ "position": this.options.fixed?"fixed":"relative"
+ }
+ }).inject(this.overlay).adopt(
+ new Element("button", {
+ "class": this.options.css.cl,
+ "events": {
+ "click": function(e) {
+ this._close(this.overlay);
+ }.bind(this)
+ }
+ })
+ );
+ this.populate(this.options.src);
+ },
+ /**
+ @protected
+ @return {void}
+ @description Populates the Section with data, either an Iframe or a Div with XHR-data
+ @param {String} The URL to show/fetch data from
+ @since 1.0
+ */
+ populate: function(sURL) {
+ var sUID = "uniquemoorypopinname";
+ if (this.options.iframe) {
+ if (document.id(sUID)) {
+ document.id(sUID).set("src", sURL);
+ } else {
+ new IFrame({
+ "id": sUID,
+ "src": sURL,
+ "events": {
+ "load": function() {
+ document.body.removeClass(this.options.css.lo);
+ }.bind(this)
+ }
+ }).inject(this.section);
+ }
+ } else {
+ new Request.HTML({
+ "url": sURL,
+ "method": "get",
+ "headers": {
+ "X-HTTP-XHR": true
+ },
+ "onSuccess": function(tree, elems, HTML, JS) {
+ if (document.id(sUID)) {
+ document.id(sUID).set("html", HTML);
+ } else {
+ new Element("div", {
+ "id": sUID,
+ "html": HTML
+ }).inject(this.section);
+ }
+ document.body.removeClass(this.options.css.lo);
+ }.bind(this)
+ }).send();
+ }
+ },
+ /**
+ @protected
+ @return {void}
+ @description Allow the overlay to close when user is hitting the Escape key
+ @param {Event} Keystrikes to listen to
+ @since 1.0
+ */
+ _keydown: function(e) {
+ var eEvent = e || window.event;
+ if (eEvent.key === "esc") {
+ this._close(this.overlay);
+ document.removeEvent("keydown", this.keydown);
+ }
+ },
+ /**
+ @protected
+ @return {String}
+ @description Returns the prefix associated with the current browser brand
+ @since 1.0
+ */
+ _getPrefix: function() {
+ var sPrefix = "";
+ switch(Browser.name) {
+ case "safari":
+ case "chrome":
+ sPrefix = "webkit";
+ break;
+ case "firefox":
+ sPrefix = "moz";
+ break;
+ case "ie":
+ sPrefix = "ms";
+ break;
+ case "opera":
+ sPrefix = "o";
+ break;
+ }
+ return sPrefix;
+ },
+ /**
+ @protected
+ @return {void}
+ @description Sets inline CSS transition on the overlay
+ @since 1.0
+ */
+ _setTransition: function() {
+ this.overlay.setStyle("-" + this._getPrefix() + "-transition", "opacity " + ((this.options.duration/1000).round(2)) + "s "+ this.options.css.cu);
+ },
+ /**
+ @protected
+ @return {Boolean}
+ @description Checks wether the browser is CSS Transform capable
+ @since 1.0
+ */
+ _hasTransition: function() {
+ var oEl = document.documentElement, s;
+ if (oEl && (s = oEl.style)) {
+ return typeof s.WebkitTransform == "string" ||
+ typeof s.MozTransform == "string" ||
+ typeof s.OTransform == "string" ||
+ typeof s.MsTransform == "string" ||
+ typeof s.transform == "string";
+ }
+ return false;
+ },
+ /**
+ @protected
+ @return {void}
+ @description Sets an objects opacity to 0, then removes it from DOM after default specified time
+ @param {Object} HTML Object to remove
+ @param {Function} Callback function to execute when HTML Object has been removed
+ @since 1.0
+ */
+ _close: function(obj, fnCallback) {
+ var obj = document.id(obj);
+ if (obj) {
+ if (this._hasTransition()) {
+ obj.setStyle("opacity", 0);
+ } else {
+ obj.fade("out");
+ }
+ (function() {
+ obj.dispose();
+ if (fnCallback) {
+ fnCallback();
+ }
+ }).delay(this.options.duration, this)
+ }
+ }
+});
View
31 Source/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>MooryPopins</title>
+<link rel="stylesheet" type="text/css" href="MooryPopins.css" />
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4/mootools-yui-compressed.js"></script>
+<script type="text/javascript" src="MooryPopins.js"></script>
+<script type="text/javascript">
+//<![CDATA[
+window.addEvent("domready", function() {
+ var MP;
+ document.id("test1").addEvent("click", function(e) {
+ MP = new MooryPopins({
+ src: "MooryPopins.html",
+ iframe: true,
+ fixed: true
+ });
+
+ // change the source after 2secs
+ (function() {
+ MP.populate("MooryPopins.html");
+ }).delay(2000);
+ });
+});
+//]]>
+</script>
+</head>
+<body>
+ <p><a id="test1" href="javascript:;">Open Iframe popin!</a></p>
+</body>
+</html>
View
7 package.yml
@@ -0,0 +1,7 @@
+name: MooryPopins
+author: kunambi
+category: Widgets
+tags: [widget, popin, modal, iframe]
+current: v1.0
+copyright: "Thomas Kunambi, 23 Critters"
+description: Moory Popins is a nifty widget, written in MooTools framework, that allows you to show popin (modal) windows within a web page. Browsers that doesn't support CSS Transitions will utilize Javascript fading instead. Settings currently allow you to show the information in an Iframe or if you want the popin in a fixed position (follows the user when scrolling)
Please sign in to comment.
Something went wrong with that request. Please try again.