Merge pull request #107 from humaan/develop

Enhancements (#62) and bug fixes for Instagram (#106 and #95)

Author: danhumaan

README.md

@@ -2,7 +2,7 @@
 
 ***
 
-- Version 0.4.0
+- Version 0.4.1
 - Requires jQuery 1.11.2 or higher (v2 not tested, v3 works but not extensively stress tested).
 - Built by [Humaan](http://www.humaan.com)
 
@@ -50,7 +50,7 @@ Modaal is now setup and ready to be used with CDN [JSDelivr](http://www.jsdelivr
 
 #### 1.4. The Basics
 
-Out of the box Modaal is setup to work using inline content using as little customisation as possible. The first thing you'll require is a link to trigger the modal window. It's recommended that your `href` attribute targets a unique ID for a hidden element on the page containing your modal content. Like so..
+Out of the box Modaal is setup to work using inline content using as little customisation as possible. The first thing you'll require is a link to trigger the modal window. It's recommended that your `href` attribute targets a unique ID for a hidden element on the page containing your modal content. Like so:
 
 ```html
 <a href="#inline" class="inline">Show</a>
@@ -62,6 +62,20 @@ Out of the box Modaal is setup to work using inline content using as little cust
 $('.inline').modaal();
 ```
 
+If you would prefer your trigger element is _not_ an `<a href="#">`, you can define a `content_source` value like so:
+
+```html
+<button class="inline">Show</button>
+<div id="inline" style="display:none;">
+	<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+</div>
+```
+```js
+$('.inline').modaal({
+	content_source: '#inline'
+});
+```
+
 
 ## 2. Configuration
 
@@ -77,6 +91,7 @@ $('.my-link').modaal({
 key | type | default | values | notes
 ----|------|---------|--------|-------
 type|`string`|`inline`|`ajax`<br /> `inline`<br /> `image`<br /> `iframe`<br /> `confirm`<br /> `video`<br /> `instagram`|
+content_source|`string`|null||Accepts a string value for your target element, such as '#my-content'. This allows for when trigger element is an `<a href="#">` link. Not to be confused with the already existing `source` event.
 animation|`string`|`fade`|`fade`, `none`|
 animation_speed|`integer`|`300`||Animation speed is the duration it takes to reveal the Modaal window once triggered. It's important to note, that if you change this, you must also change the `after_callback_delay` below so that callback events sync up. This will be overwritten and set to `0` if `type` is `none`.
 after_callback_delay|`integer`|`350`||Specify a delay value for the after open callbacks. This is necessary because with the bundled animations have a set duration in the bundled CSS. Specify a delay of the same amount as the animation duration in so more accurately fire the after open/close callbacks. Defaults 350, does not apply if animation is 'none', after open callbacks are dispatched immediately
@@ -115,6 +130,12 @@ To enable this, the Modaal trigger link must have a class of `modaal`, then you
 <a href="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</a>
 ```
 
+Or for non `<a href="#">` elements:
+
+```html
+<button data-modaal-content-source="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</button>
+```
+
 It's important to note, that configuration options that contain an underscore (`_`) in them need to be replaced with a hyphen (`-`) in it's respective html attribute. For example, `overlay_opacity` configuration would read `data-overlay-opacity="0.8"`.
 
 

demo/css/demo.css

@@ -157,6 +157,8 @@ hr {
       .btn.btn-download span strong {
         position: relative;
         z-index: 1; }
+  .btn + .btn {
+    margin-left: 20px; }
 
 .share {
   margin: 60px 0 0; }
@@ -176,9 +178,8 @@ hr {
     width: 50px;
     height: 50px;
     border: 2px solid #eee;
-    -webkit-transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
     position: absolute;
     top: 50%;
     left: 50%;
@@ -249,15 +250,12 @@ hr {
   width: 30px;
   height: 60px;
   margin: 0 0 0 -15px;
-  transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
-  -webkit-transform: translateY(0);
-      -ms-transform: translateY(0);
-          transform: translateY(0); }
+  -ms-transform: translateY(0);
+      transform: translateY(0); }
   .scroll-trigger:focus, .scroll-trigger:hover {
-    -webkit-transform: translateY(15px);
-        -ms-transform: translateY(15px);
-            transform: translateY(15px); }
+    -ms-transform: translateY(15px);
+        transform: translateY(15px); }
     .scroll-trigger:focus .scroll-arrow, .scroll-trigger:hover .scroll-arrow {
       background: #6d4d9a; }
       .scroll-trigger:focus .scroll-arrow:before, .scroll-trigger:focus .scroll-arrow:after, .scroll-trigger:hover .scroll-arrow:before, .scroll-trigger:hover .scroll-arrow:after {
@@ -283,14 +281,12 @@ hr {
     bottom: 3px;
     transition: background-color 0.3s; }
   .scroll-arrow:before {
-    -webkit-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
-            transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
     margin: 0 0 0 -14px; }
   .scroll-arrow:after {
-    -webkit-transform: rotate(-45deg);
-        -ms-transform: rotate(-45deg);
-            transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+        transform: rotate(-45deg);
     margin: 0 0 0 -1px; }
 
 .modaal-fixed-header {
@@ -299,17 +295,15 @@ hr {
   left: 0;
   width: 100%;
   height: 70px;
-  box-shadow: 0 0 5px transparent;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0);
   background: #6d4d9a;
-  -webkit-transform: translateY(0);
-      -ms-transform: translateY(0);
-          transform: translateY(0);
+  -ms-transform: translateY(0);
+      transform: translateY(0);
   transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
   .modaal-fixed-header.reveal {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-    -webkit-transform: translateY(70px);
-        -ms-transform: translateY(70px);
-            transform: translateY(70px); }
+    -ms-transform: translateY(70px);
+        transform: translateY(70px); }
   .modaal-fixed-header .modaal-logo {
     display: block;
     float: left;

demo/css/demo.scss

@@ -168,6 +168,9 @@ hr {
 			}
 		}
 	}
+	+ .btn {
+		margin-left: 20px;
+	}
 }
 
 .share {

dist/css/modaal.css

@@ -1,5 +1,5 @@
 /*!
-	Modaal - accessible modals - v0.4.0
+	Modaal - accessible modals - v0.4.1
 	by Humaan, for all humans.
 	http://humaan.com
  */

dist/css/modaal.min.css

@@ -1,5 +1,5 @@
 /*!
-	Modaal - accessible modals - v0.4.0
+	Modaal - accessible modals - v0.4.1
 	by Humaan, for all humans.
 	http://humaan.com
  */