1.1.0

RELEASENOTES.md

@@ -1,4 +1,9 @@
 # Release Notes
+* **v1.1.0** [24 Jan. 2015]
+  * New API event hooks for dialog developers (onshow, onclose, onupdate)
+  * Support move for frameless dialogs.
+  * Fix Move/Resize mouse events capture when dialog contains an iframe.
+
 * **v1.0.1** [11 Jan. 2015]
   * Re-append notifier div when body content is replaced. Fixes #17
 

build/alertify.js

@@ -7,7 +7,7 @@
  * @license MIT <http://opensource.org/licenses/mit-license.php>
  * @link http://alertifyjs.com
  * @module AlertifyJS
- * @version 1.0.1
+ * @version 1.1.0
  */
 ( function ( window ) {
     'use strict';

docpad/documents/examples.html.eco

@@ -23,102 +23,6 @@ hljs: 	'light'
 
 <section class="dark">
 	<div class="content">
-
-
-  <!--Youtube dialog-->
-	<div class="segment">
-		<h1 id="youtube"><a href="#youtube"><i class="fa fa-code"></i> </a> Youtube Dialog </h1>
-		<hr />
-<pre>
-<code class="lang-javascript">
-alertify.YoutubeDialog || alertify.dialog('YoutubeDialog',function(){
-    var iframe;
-    return {
-        // dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
-        main:function(videoId){
-            //set the videoId setting and return current instance for chaining.
-            return this.set({ 
-                'videoId': videoId
-            });
-        },
-        // we only want to override two options (padding and overflow).
-        setup:function(){
-            return {
-                options:{
-                    //disable both padding and overflow control.
-                    padding : !1,
-                    overflow: !1,
-                }
-            };
-        },
-        // This will be called once the DOM is ready and will never be invoked again.
-        // Here we create the iframe to embed the video.
-        build:function(){           
-            // create the iframe element
-            iframe = document.createElement('iframe');
-            iframe.frameBorder = "no";
-            iframe.width = "100%";
-            iframe.height = "100%";
-            // add it to the dialog
-            this.elements.content.appendChild(iframe);
-
-            //give the dialog initial height (half the screen height).
-            this.elements.body.style.minHeight = screen.height * .5 + 'px';
-        },
-        // dialog custom settings
-        settings:{
-            videoId:undefined
-        },
-        // listen and respond to changes in dialog settings.
-        settingUpdated:function(key, oldValue, newValue){
-            switch(key){
-               case 'videoId':
-                    iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
-                break;   
-            }
-        },
-        // listen to internal dialog events.
-        hooks:{
-            // triggered when the dialog is closed, this is seperate from user defined onclose
-            onclose: function(){
-                iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
-            },
-            // triggered when a dialog option gets update.
-            // warning! this will not be triggered for settings updates.
-            onupdate: function(option,oldValue, newValue){
-                switch(option){
-                    case 'resizable':
-                        if(newValue){
-                            this.elements.content.removeAttribute('style');
-                            iframe && iframe.removeAttribute('style');
-                        }else{
-                            this.elements.content.style.minHeight = 'inherit';
-                            iframe && (iframe.style.minHeight = 'inherit');
-                        }
-                    break;    
-                }    
-            }
-        }
-    };
-});
-//show the dialog
-alertify.YoutubeDialog('GODhPuM5cEE').set({frameless:false});
-</code> 
-</pre>
-			<div class="RIGHT">		
-                <div class="ui inverted toggle checkbox example">
-					<input type="checkbox">
-					<label>Frameless</label>
-				</div>
-				<a class="button example" href="javascript:void(0);">
-					<span> Run </span>
-				</a>
-			</div>
-	<br/>		
-
-
-  </div><!--//Youtube dialog-->
-
 
 	<!--Arabic dialogs-->
 	<div class="segment">
@@ -444,6 +348,99 @@ alertify.genericDialog ($('#loginForm')[0]).set('selector', 'input[type="passwor
   </div><!--//Generic dialog-->
 
 
+  <!--Youtube dialog-->
+	<div class="segment">
+		<h1 id="youtube"><a href="#youtube"><i class="fa fa-code"></i> </a> Youtube Dialog </h1>
+		<hr />
+<pre>
+<code class="lang-javascript">
+alertify.YoutubeDialog || alertify.dialog('YoutubeDialog',function(){
+    var iframe;
+    return {
+        // dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
+        main:function(videoId){
+            //set the videoId setting and return current instance for chaining.
+            return this.set({ 
+                'videoId': videoId
+            });
+        },
+        // we only want to override two options (padding and overflow).
+        setup:function(){
+            return {
+                options:{
+                    //disable both padding and overflow control.
+                    padding : !1,
+                    overflow: !1,
+                }
+            };
+        },
+        // This will be called once the DOM is ready and will never be invoked again.
+        // Here we create the iframe to embed the video.
+        build:function(){           
+            // create the iframe element
+            iframe = document.createElement('iframe');
+            iframe.frameBorder = "no";
+            iframe.width = "100%";
+            iframe.height = "100%";
+            // add it to the dialog
+            this.elements.content.appendChild(iframe);
+
+            //give the dialog initial height (half the screen height).
+            this.elements.body.style.minHeight = screen.height * .5 + 'px';
+        },
+        // dialog custom settings
+        settings:{
+            videoId:undefined
+        },
+        // listen and respond to changes in dialog settings.
+        settingUpdated:function(key, oldValue, newValue){
+            switch(key){
+               case 'videoId':
+                    iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
+                break;   
+            }
+        },
+        // listen to internal dialog events.
+        hooks:{
+            // triggered when the dialog is closed, this is seperate from user defined onclose
+            onclose: function(){
+                iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
+            },
+            // triggered when a dialog option gets update.
+            // warning! this will not be triggered for settings updates.
+            onupdate: function(option,oldValue, newValue){
+                switch(option){
+                    case 'resizable':
+                        if(newValue){
+                            this.elements.content.removeAttribute('style');
+                            iframe && iframe.removeAttribute('style');
+                        }else{
+                            this.elements.content.style.minHeight = 'inherit';
+                            iframe && (iframe.style.minHeight = 'inherit');
+                        }
+                    break;    
+                }    
+            }
+        }
+    };
+});
+//show the dialog
+alertify.YoutubeDialog('GODhPuM5cEE').set({frameless:false});
+</code> 
+</pre>
+			<div class="RIGHT">		
+                <div class="ui inverted toggle checkbox example">
+					<input type="checkbox">
+					<label>Frameless</label>
+				</div>
+				<a class="button example" href="javascript:void(0);">
+					<span> Run </span>
+				</a>
+			</div>
+	<br/>		
+
+
+  </div><!--//Youtube dialog-->
 
 
 

docpad/documents/factory.html.eco

@@ -190,11 +190,13 @@ function factory(){
 						title: ...,
                         modal: ...,
                         basic:...,
+                        frameless:...,
                         pinned: ...,
                         movable: ...,
                         resizable: ...,
                         closable: ...,
                         maximizable: ...,
+                        startMaximized: ...,
                         pinnable: ...,
                         transition: ...,
                         padding:...,
@@ -216,8 +218,8 @@ function factory(){
 			// this.elements.modal          ==> Modal div (dialog wrapper)
 			// this.elements.dialog         ==> Dialog div
 			// this.elements.reset          ==> Array containing the tab reset anchor links
-			// this.elements.reset[0]       ==> First reset link.
-			// this.elements.reset[1]       ==> Second reset link.
+			// this.elements.reset[0]       ==> First reset element (button).
+			// this.elements.reset[1]       ==> Second reset element (button).
 			// this.elements.header         ==> Dialog header div
 			// this.elements.body           ==> Dialog body div
 			// this.elements.content        ==> Dialog body content div

docpad/documents/guide.html.eco

@@ -166,10 +166,13 @@ PM> Install-Package AlertifyJS
 alertify.defaults = {
 		// dialogs defaults
         modal:true,
+        basic:false,
+        frameless:false,
         movable:true,
         resizable:true,
         closable:true,
         maximizable:true,
+        startMaximized:false,
         pinnable:true,
         pinned:true,
         padding: true,

docpad/files/build/alertify.js

@@ -7,7 +7,7 @@
  * @license MIT <http://opensource.org/licenses/mit-license.php>
  * @link http://alertifyjs.com
  * @module AlertifyJS
- * @version 1.0.1
+ * @version 1.1.0
  */
 ( function ( window ) {
     'use strict';