diff --git a/demo/app.js b/demo/app.js deleted file mode 100644 index 6dc2ea3..0000000 --- a/demo/app.js +++ /dev/null @@ -1,20 +0,0 @@ -angular.module('morphDemo', ['ngMorph']) -.controller('AppCtrl', ['$scope', function ($scope) { - - $scope.example1 = { - trigger: 'click', - closeEl: '.close-x', - modal: { - templateUrl: 'views/loginform.html' - } - }; - - $scope.example2 = { - trigger: 'click', - closeEl: '.close-x', - overlay: { - templateUrl: 'views/info.html', - } - }; - -}]); \ No newline at end of file diff --git a/demo/fonts/glyphicons-halflings-regular.eot b/demo/fonts/glyphicons-halflings-regular.eot deleted file mode 100755 index 4a4ca86..0000000 Binary files a/demo/fonts/glyphicons-halflings-regular.eot and /dev/null differ diff --git a/demo/fonts/glyphicons-halflings-regular.svg b/demo/fonts/glyphicons-halflings-regular.svg deleted file mode 100755 index 838dd3b..0000000 --- a/demo/fonts/glyphicons-halflings-regular.svg +++ /dev/null @@ -1,230 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/demo/fonts/glyphicons-halflings-regular.ttf b/demo/fonts/glyphicons-halflings-regular.ttf deleted file mode 100755 index 67fa00b..0000000 Binary files a/demo/fonts/glyphicons-halflings-regular.ttf and /dev/null differ diff --git a/demo/fonts/glyphicons-halflings-regular.woff b/demo/fonts/glyphicons-halflings-regular.woff deleted file mode 100755 index 8c54182..0000000 Binary files a/demo/fonts/glyphicons-halflings-regular.woff and /dev/null differ diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index 4058e2a..0000000 --- a/demo/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - -
-
-
- -
-
- -
-
- -
-
-
- - - - - - \ No newline at end of file diff --git a/demo/styles/bootstrap-glyph.css b/demo/styles/bootstrap-glyph.css deleted file mode 100755 index fe7eeb1..0000000 --- a/demo/styles/bootstrap-glyph.css +++ /dev/null @@ -1,774 +0,0 @@ -/*! - * Bootstrap v3.2.0 (http://getbootstrap.com) - * Copyright 2011-2014 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ - -/*! - * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=4e0904b3f8f5dac55326) - * Config saved to config.json and https://gist.github.com/4e0904b3f8f5dac55326 - */ -/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ - - -@font-face { - font-family: 'Glyphicons Halflings'; - src: url('../fonts/glyphicons-halflings-regular.eot'); - src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); -} -.glyphicon { - position: relative; - top: 1px; - display: inline-block; - font-family: 'Glyphicons Halflings'; - font-style: normal; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.glyphicon-asterisk:before { - content: "\2a"; -} -.glyphicon-plus:before { - content: "\2b"; -} -.glyphicon-euro:before { - content: "\20ac"; -} -.glyphicon-minus:before { - content: "\2212"; -} -.glyphicon-cloud:before { - content: "\2601"; -} -.glyphicon-envelope:before { - content: "\2709"; -} -.glyphicon-pencil:before { - content: "\270f"; -} -.glyphicon-glass:before { - content: "\e001"; -} -.glyphicon-music:before { - content: "\e002"; -} -.glyphicon-search:before { - content: "\e003"; -} -.glyphicon-heart:before { - content: "\e005"; -} -.glyphicon-star:before { - content: "\e006"; -} -.glyphicon-star-empty:before { - content: "\e007"; -} -.glyphicon-user:before { - content: "\e008"; -} -.glyphicon-film:before { - content: "\e009"; -} -.glyphicon-th-large:before { - content: "\e010"; -} -.glyphicon-th:before { - content: "\e011"; -} -.glyphicon-th-list:before { - content: "\e012"; -} -.glyphicon-ok:before { - content: "\e013"; -} -.glyphicon-remove:before { - content: "\e014"; -} -.glyphicon-zoom-in:before { - content: "\e015"; -} -.glyphicon-zoom-out:before { - content: "\e016"; -} -.glyphicon-off:before { - content: "\e017"; -} -.glyphicon-signal:before { - content: "\e018"; -} -.glyphicon-cog:before { - content: "\e019"; -} -.glyphicon-trash:before { - content: "\e020"; -} -.glyphicon-home:before { - content: "\e021"; -} -.glyphicon-file:before { - content: "\e022"; -} -.glyphicon-time:before { - content: "\e023"; -} -.glyphicon-road:before { - content: "\e024"; -} -.glyphicon-download-alt:before { - content: "\e025"; -} -.glyphicon-download:before { - content: "\e026"; -} -.glyphicon-upload:before { - content: "\e027"; -} -.glyphicon-inbox:before { - content: "\e028"; -} -.glyphicon-play-circle:before { - content: "\e029"; -} -.glyphicon-repeat:before { - content: "\e030"; -} -.glyphicon-refresh:before { - content: "\e031"; -} -.glyphicon-list-alt:before { - content: "\e032"; -} -.glyphicon-lock:before { - content: "\e033"; -} -.glyphicon-flag:before { - content: "\e034"; -} -.glyphicon-headphones:before { - content: "\e035"; -} -.glyphicon-volume-off:before { - content: "\e036"; -} -.glyphicon-volume-down:before { - content: "\e037"; -} -.glyphicon-volume-up:before { - content: "\e038"; -} -.glyphicon-qrcode:before { - content: "\e039"; -} -.glyphicon-barcode:before { - content: "\e040"; -} -.glyphicon-tag:before { - content: "\e041"; -} -.glyphicon-tags:before { - content: "\e042"; -} -.glyphicon-book:before { - content: "\e043"; -} -.glyphicon-bookmark:before { - content: "\e044"; -} -.glyphicon-print:before { - content: "\e045"; -} -.glyphicon-camera:before { - content: "\e046"; -} -.glyphicon-font:before { - content: "\e047"; -} -.glyphicon-bold:before { - content: "\e048"; -} -.glyphicon-italic:before { - content: "\e049"; -} -.glyphicon-text-height:before { - content: "\e050"; -} -.glyphicon-text-width:before { - content: "\e051"; -} -.glyphicon-align-left:before { - content: "\e052"; -} -.glyphicon-align-center:before { - content: "\e053"; -} -.glyphicon-align-right:before { - content: "\e054"; -} -.glyphicon-align-justify:before { - content: "\e055"; -} -.glyphicon-list:before { - content: "\e056"; -} -.glyphicon-indent-left:before { - content: "\e057"; -} -.glyphicon-indent-right:before { - content: "\e058"; -} -.glyphicon-facetime-video:before { - content: "\e059"; -} -.glyphicon-picture:before { - content: "\e060"; -} -.glyphicon-map-marker:before { - content: "\e062"; -} -.glyphicon-adjust:before { - content: "\e063"; -} -.glyphicon-tint:before { - content: "\e064"; -} -.glyphicon-edit:before { - content: "\e065"; -} -.glyphicon-share:before { - content: "\e066"; -} -.glyphicon-check:before { - content: "\e067"; -} -.glyphicon-move:before { - content: "\e068"; -} -.glyphicon-step-backward:before { - content: "\e069"; -} -.glyphicon-fast-backward:before { - content: "\e070"; -} -.glyphicon-backward:before { - content: "\e071"; -} -.glyphicon-play:before { - content: "\e072"; -} -.glyphicon-pause:before { - content: "\e073"; -} -.glyphicon-stop:before { - content: "\e074"; -} -.glyphicon-forward:before { - content: "\e075"; -} -.glyphicon-fast-forward:before { - content: "\e076"; -} -.glyphicon-step-forward:before { - content: "\e077"; -} -.glyphicon-eject:before { - content: "\e078"; -} -.glyphicon-chevron-left:before { - content: "\e079"; -} -.glyphicon-chevron-right:before { - content: "\e080"; -} -.glyphicon-plus-sign:before { - content: "\e081"; -} -.glyphicon-minus-sign:before { - content: "\e082"; -} -.glyphicon-remove-sign:before { - content: "\e083"; -} -.glyphicon-ok-sign:before { - content: "\e084"; -} -.glyphicon-question-sign:before { - content: "\e085"; -} -.glyphicon-info-sign:before { - content: "\e086"; -} -.glyphicon-screenshot:before { - content: "\e087"; -} -.glyphicon-remove-circle:before { - content: "\e088"; -} -.glyphicon-ok-circle:before { - content: "\e089"; -} -.glyphicon-ban-circle:before { - content: "\e090"; -} -.glyphicon-arrow-left:before { - content: "\e091"; -} -.glyphicon-arrow-right:before { - content: "\e092"; -} -.glyphicon-arrow-up:before { - content: "\e093"; -} -.glyphicon-arrow-down:before { - content: "\e094"; -} -.glyphicon-share-alt:before { - content: "\e095"; -} -.glyphicon-resize-full:before { - content: "\e096"; -} -.glyphicon-resize-small:before { - content: "\e097"; -} -.glyphicon-exclamation-sign:before { - content: "\e101"; -} -.glyphicon-gift:before { - content: "\e102"; -} -.glyphicon-leaf:before { - content: "\e103"; -} -.glyphicon-fire:before { - content: "\e104"; -} -.glyphicon-eye-open:before { - content: "\e105"; -} -.glyphicon-eye-close:before { - content: "\e106"; -} -.glyphicon-warning-sign:before { - content: "\e107"; -} -.glyphicon-plane:before { - content: "\e108"; -} -.glyphicon-calendar:before { - content: "\e109"; -} -.glyphicon-random:before { - content: "\e110"; -} -.glyphicon-comment:before { - content: "\e111"; -} -.glyphicon-magnet:before { - content: "\e112"; -} -.glyphicon-chevron-up:before { - content: "\e113"; -} -.glyphicon-chevron-down:before { - content: "\e114"; -} -.glyphicon-retweet:before { - content: "\e115"; -} -.glyphicon-shopping-cart:before { - content: "\e116"; -} -.glyphicon-folder-close:before { - content: "\e117"; -} -.glyphicon-folder-open:before { - content: "\e118"; -} -.glyphicon-resize-vertical:before { - content: "\e119"; -} -.glyphicon-resize-horizontal:before { - content: "\e120"; -} -.glyphicon-hdd:before { - content: "\e121"; -} -.glyphicon-bullhorn:before { - content: "\e122"; -} -.glyphicon-bell:before { - content: "\e123"; -} -.glyphicon-certificate:before { - content: "\e124"; -} -.glyphicon-thumbs-up:before { - content: "\e125"; -} -.glyphicon-thumbs-down:before { - content: "\e126"; -} -.glyphicon-hand-right:before { - content: "\e127"; -} -.glyphicon-hand-left:before { - content: "\e128"; -} -.glyphicon-hand-up:before { - content: "\e129"; -} -.glyphicon-hand-down:before { - content: "\e130"; -} -.glyphicon-circle-arrow-right:before { - content: "\e131"; -} -.glyphicon-circle-arrow-left:before { - content: "\e132"; -} -.glyphicon-circle-arrow-up:before { - content: "\e133"; -} -.glyphicon-circle-arrow-down:before { - content: "\e134"; -} -.glyphicon-globe:before { - content: "\e135"; -} -.glyphicon-wrench:before { - content: "\e136"; -} -.glyphicon-tasks:before { - content: "\e137"; -} -.glyphicon-filter:before { - content: "\e138"; -} -.glyphicon-briefcase:before { - content: "\e139"; -} -.glyphicon-fullscreen:before { - content: "\e140"; -} -.glyphicon-dashboard:before { - content: "\e141"; -} -.glyphicon-paperclip:before { - content: "\e142"; -} -.glyphicon-heart-empty:before { - content: "\e143"; -} -.glyphicon-link:before { - content: "\e144"; -} -.glyphicon-phone:before { - content: "\e145"; -} -.glyphicon-pushpin:before { - content: "\e146"; -} -.glyphicon-usd:before { - content: "\e148"; -} -.glyphicon-gbp:before { - content: "\e149"; -} -.glyphicon-sort:before { - content: "\e150"; -} -.glyphicon-sort-by-alphabet:before { - content: "\e151"; -} -.glyphicon-sort-by-alphabet-alt:before { - content: "\e152"; -} -.glyphicon-sort-by-order:before { - content: "\e153"; -} -.glyphicon-sort-by-order-alt:before { - content: "\e154"; -} -.glyphicon-sort-by-attributes:before { - content: "\e155"; -} -.glyphicon-sort-by-attributes-alt:before { - content: "\e156"; -} -.glyphicon-unchecked:before { - content: "\e157"; -} -.glyphicon-expand:before { - content: "\e158"; -} -.glyphicon-collapse-down:before { - content: "\e159"; -} -.glyphicon-collapse-up:before { - content: "\e160"; -} -.glyphicon-log-in:before { - content: "\e161"; -} -.glyphicon-flash:before { - content: "\e162"; -} -.glyphicon-log-out:before { - content: "\e163"; -} -.glyphicon-new-window:before { - content: "\e164"; -} -.glyphicon-record:before { - content: "\e165"; -} -.glyphicon-save:before { - content: "\e166"; -} -.glyphicon-open:before { - content: "\e167"; -} -.glyphicon-saved:before { - content: "\e168"; -} -.glyphicon-import:before { - content: "\e169"; -} -.glyphicon-export:before { - content: "\e170"; -} -.glyphicon-send:before { - content: "\e171"; -} -.glyphicon-floppy-disk:before { - content: "\e172"; -} -.glyphicon-floppy-saved:before { - content: "\e173"; -} -.glyphicon-floppy-remove:before { - content: "\e174"; -} -.glyphicon-floppy-save:before { - content: "\e175"; -} -.glyphicon-floppy-open:before { - content: "\e176"; -} -.glyphicon-credit-card:before { - content: "\e177"; -} -.glyphicon-transfer:before { - content: "\e178"; -} -.glyphicon-cutlery:before { - content: "\e179"; -} -.glyphicon-header:before { - content: "\e180"; -} -.glyphicon-compressed:before { - content: "\e181"; -} -.glyphicon-earphone:before { - content: "\e182"; -} -.glyphicon-phone-alt:before { - content: "\e183"; -} -.glyphicon-tower:before { - content: "\e184"; -} -.glyphicon-stats:before { - content: "\e185"; -} -.glyphicon-sd-video:before { - content: "\e186"; -} -.glyphicon-hd-video:before { - content: "\e187"; -} -.glyphicon-subtitles:before { - content: "\e188"; -} -.glyphicon-sound-stereo:before { - content: "\e189"; -} -.glyphicon-sound-dolby:before { - content: "\e190"; -} -.glyphicon-sound-5-1:before { - content: "\e191"; -} -.glyphicon-sound-6-1:before { - content: "\e192"; -} -.glyphicon-sound-7-1:before { - content: "\e193"; -} -.glyphicon-copyright-mark:before { - content: "\e194"; -} -.glyphicon-registration-mark:before { - content: "\e195"; -} -.glyphicon-cloud-download:before { - content: "\e197"; -} -.glyphicon-cloud-upload:before { - content: "\e198"; -} -.glyphicon-tree-conifer:before { - content: "\e199"; -} -.glyphicon-tree-deciduous:before { - content: "\e200"; -} -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -*:before, -*:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -html { - font-size: 10px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} -body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 1.42857143; - color: #333333; - background-color: #ffffff; -} -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} -a { - color: #428bca; - text-decoration: none; -} -a:hover, -a:focus { - color: #2a6496; - text-decoration: underline; -} -a:focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} -figure { - margin: 0; -} -img { - vertical-align: middle; -} -.img-responsive { - display: block; - width: 100% \9; - max-width: 100%; - height: auto; -} -.img-rounded { - border-radius: 6px; -} -.img-thumbnail { - padding: 4px; - line-height: 1.42857143; - background-color: #ffffff; - border: 1px solid #dddddd; - border-radius: 4px; - -webkit-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - display: inline-block; - width: 100% \9; - max-width: 100%; - height: auto; -} -.img-circle { - border-radius: 50%; -} -hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #eeeeee; -} -.sr-only { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} -.clearfix:before, -.clearfix:after { - content: " "; - display: table; -} -.clearfix:after { - clear: both; -} -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} -.pull-right { - float: right !important; -} -.pull-left { - float: left !important; -} -.hide { - display: none !important; -} -.show { - display: block !important; -} -.invisible { - visibility: hidden; -} -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.hidden { - display: none !important; - visibility: hidden !important; -} -.affix { - position: fixed; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} diff --git a/demo/styles/bootstrap-grid.css b/demo/styles/bootstrap-grid.css deleted file mode 100644 index 905ebc3..0000000 --- a/demo/styles/bootstrap-grid.css +++ /dev/null @@ -1,1011 +0,0 @@ -/*! - * Bootstrap v3.2.0 (http://getbootstrap.com) - * Copyright 2011-2014 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - */ - -/*! - * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=59b20e2c6fb1831fc3b6) - * Config saved to config.json and https://gist.github.com/59b20e2c6fb1831fc3b6 - */ -/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} -body { - margin: 0; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} -audio, -canvas, -progress, -video { - display: inline-block; - vertical-align: baseline; -} -audio:not([controls]) { - display: none; - height: 0; -} -[hidden], -template { - display: none; -} -a { - background: transparent; -} -a:active, -a:hover { - outline: 0; -} -abbr[title] { - border-bottom: 1px dotted; -} -b, -strong { - font-weight: bold; -} -dfn { - font-style: italic; -} -h1 { - font-size: 2em; - margin: 0.67em 0; -} -mark { - background: #ff0; - color: #000; -} -small { - font-size: 80%; -} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} -img { - border: 0; -} -svg:not(:root) { - overflow: hidden; -} -figure { - margin: 1em 40px; -} -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} -pre { - overflow: auto; -} -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} -button, -input, -optgroup, -select, -textarea { - color: inherit; - font: inherit; - margin: 0; -} -button { - overflow: visible; -} -button, -select { - text-transform: none; -} -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; -} -button[disabled], -html input[disabled] { - cursor: default; -} -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} -input { - line-height: normal; -} -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - padding: 0; -} -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} -input[type="search"] { - -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} -legend { - border: 0; - padding: 0; -} -textarea { - overflow: auto; -} -optgroup { - font-weight: bold; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -td, -th { - padding: 0; -} -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -*:before, -*:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -html { - font-size: 10px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} -body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 1.42857143; - color: #333333; - background-color: #ffffff; -} -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} -a { - color: #428bca; - text-decoration: none; -} -a:hover, -a:focus { - color: #2a6496; - text-decoration: underline; -} -a:focus { - outline: thin dotted; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} -figure { - margin: 0; -} -img { - vertical-align: middle; -} -.img-responsive { - display: block; - width: 100% \9; - max-width: 100%; - height: auto; -} -.img-rounded { - border-radius: 6px; -} -.img-thumbnail { - padding: 4px; - line-height: 1.42857143; - background-color: #ffffff; - border: 1px solid #dddddd; - border-radius: 4px; - -webkit-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - display: inline-block; - width: 100% \9; - max-width: 100%; - height: auto; -} -.img-circle { - border-radius: 50%; -} -hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #eeeeee; -} -.sr-only { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} -.sr-only-focusable:active, -.sr-only-focusable:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; -} -.container { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -@media (min-width: 768px) { - .container { - width: 750px; - } -} -@media (min-width: 992px) { - .container { - width: 970px; - } -} -@media (min-width: 1200px) { - .container { - width: 1170px; - } -} -.container-fluid { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; -} -.row { - margin-left: -15px; - margin-right: -15px; -} -.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; -} -.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { - float: left; -} -.col-xs-12 { - width: 100%; -} -.col-xs-11 { - width: 91.66666667%; -} -.col-xs-10 { - width: 83.33333333%; -} -.col-xs-9 { - width: 75%; -} -.col-xs-8 { - width: 66.66666667%; -} -.col-xs-7 { - width: 58.33333333%; -} -.col-xs-6 { - width: 50%; -} -.col-xs-5 { - width: 41.66666667%; -} -.col-xs-4 { - width: 33.33333333%; -} -.col-xs-3 { - width: 25%; -} -.col-xs-2 { - width: 16.66666667%; -} -.col-xs-1 { - width: 8.33333333%; -} -.col-xs-pull-12 { - right: 100%; -} -.col-xs-pull-11 { - right: 91.66666667%; -} -.col-xs-pull-10 { - right: 83.33333333%; -} -.col-xs-pull-9 { - right: 75%; -} -.col-xs-pull-8 { - right: 66.66666667%; -} -.col-xs-pull-7 { - right: 58.33333333%; -} -.col-xs-pull-6 { - right: 50%; -} -.col-xs-pull-5 { - right: 41.66666667%; -} -.col-xs-pull-4 { - right: 33.33333333%; -} -.col-xs-pull-3 { - right: 25%; -} -.col-xs-pull-2 { - right: 16.66666667%; -} -.col-xs-pull-1 { - right: 8.33333333%; -} -.col-xs-pull-0 { - right: auto; -} -.col-xs-push-12 { - left: 100%; -} -.col-xs-push-11 { - left: 91.66666667%; -} -.col-xs-push-10 { - left: 83.33333333%; -} -.col-xs-push-9 { - left: 75%; -} -.col-xs-push-8 { - left: 66.66666667%; -} -.col-xs-push-7 { - left: 58.33333333%; -} -.col-xs-push-6 { - left: 50%; -} -.col-xs-push-5 { - left: 41.66666667%; -} -.col-xs-push-4 { - left: 33.33333333%; -} -.col-xs-push-3 { - left: 25%; -} -.col-xs-push-2 { - left: 16.66666667%; -} -.col-xs-push-1 { - left: 8.33333333%; -} -.col-xs-push-0 { - left: auto; -} -.col-xs-offset-12 { - margin-left: 100%; -} -.col-xs-offset-11 { - margin-left: 91.66666667%; -} -.col-xs-offset-10 { - margin-left: 83.33333333%; -} -.col-xs-offset-9 { - margin-left: 75%; -} -.col-xs-offset-8 { - margin-left: 66.66666667%; -} -.col-xs-offset-7 { - margin-left: 58.33333333%; -} -.col-xs-offset-6 { - margin-left: 50%; -} -.col-xs-offset-5 { - margin-left: 41.66666667%; -} -.col-xs-offset-4 { - margin-left: 33.33333333%; -} -.col-xs-offset-3 { - margin-left: 25%; -} -.col-xs-offset-2 { - margin-left: 16.66666667%; -} -.col-xs-offset-1 { - margin-left: 8.33333333%; -} -.col-xs-offset-0 { - margin-left: 0%; -} -@media (min-width: 768px) { - .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { - float: left; - } - .col-sm-12 { - width: 100%; - } - .col-sm-11 { - width: 91.66666667%; - } - .col-sm-10 { - width: 83.33333333%; - } - .col-sm-9 { - width: 75%; - } - .col-sm-8 { - width: 66.66666667%; - } - .col-sm-7 { - width: 58.33333333%; - } - .col-sm-6 { - width: 50%; - } - .col-sm-5 { - width: 41.66666667%; - } - .col-sm-4 { - width: 33.33333333%; - } - .col-sm-3 { - width: 25%; - } - .col-sm-2 { - width: 16.66666667%; - } - .col-sm-1 { - width: 8.33333333%; - } - .col-sm-pull-12 { - right: 100%; - } - .col-sm-pull-11 { - right: 91.66666667%; - } - .col-sm-pull-10 { - right: 83.33333333%; - } - .col-sm-pull-9 { - right: 75%; - } - .col-sm-pull-8 { - right: 66.66666667%; - } - .col-sm-pull-7 { - right: 58.33333333%; - } - .col-sm-pull-6 { - right: 50%; - } - .col-sm-pull-5 { - right: 41.66666667%; - } - .col-sm-pull-4 { - right: 33.33333333%; - } - .col-sm-pull-3 { - right: 25%; - } - .col-sm-pull-2 { - right: 16.66666667%; - } - .col-sm-pull-1 { - right: 8.33333333%; - } - .col-sm-pull-0 { - right: auto; - } - .col-sm-push-12 { - left: 100%; - } - .col-sm-push-11 { - left: 91.66666667%; - } - .col-sm-push-10 { - left: 83.33333333%; - } - .col-sm-push-9 { - left: 75%; - } - .col-sm-push-8 { - left: 66.66666667%; - } - .col-sm-push-7 { - left: 58.33333333%; - } - .col-sm-push-6 { - left: 50%; - } - .col-sm-push-5 { - left: 41.66666667%; - } - .col-sm-push-4 { - left: 33.33333333%; - } - .col-sm-push-3 { - left: 25%; - } - .col-sm-push-2 { - left: 16.66666667%; - } - .col-sm-push-1 { - left: 8.33333333%; - } - .col-sm-push-0 { - left: auto; - } - .col-sm-offset-12 { - margin-left: 100%; - } - .col-sm-offset-11 { - margin-left: 91.66666667%; - } - .col-sm-offset-10 { - margin-left: 83.33333333%; - } - .col-sm-offset-9 { - margin-left: 75%; - } - .col-sm-offset-8 { - margin-left: 66.66666667%; - } - .col-sm-offset-7 { - margin-left: 58.33333333%; - } - .col-sm-offset-6 { - margin-left: 50%; - } - .col-sm-offset-5 { - margin-left: 41.66666667%; - } - .col-sm-offset-4 { - margin-left: 33.33333333%; - } - .col-sm-offset-3 { - margin-left: 25%; - } - .col-sm-offset-2 { - margin-left: 16.66666667%; - } - .col-sm-offset-1 { - margin-left: 8.33333333%; - } - .col-sm-offset-0 { - margin-left: 0%; - } -} -@media (min-width: 992px) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } - .col-md-pull-12 { - right: 100%; - } - .col-md-pull-11 { - right: 91.66666667%; - } - .col-md-pull-10 { - right: 83.33333333%; - } - .col-md-pull-9 { - right: 75%; - } - .col-md-pull-8 { - right: 66.66666667%; - } - .col-md-pull-7 { - right: 58.33333333%; - } - .col-md-pull-6 { - right: 50%; - } - .col-md-pull-5 { - right: 41.66666667%; - } - .col-md-pull-4 { - right: 33.33333333%; - } - .col-md-pull-3 { - right: 25%; - } - .col-md-pull-2 { - right: 16.66666667%; - } - .col-md-pull-1 { - right: 8.33333333%; - } - .col-md-pull-0 { - right: auto; - } - .col-md-push-12 { - left: 100%; - } - .col-md-push-11 { - left: 91.66666667%; - } - .col-md-push-10 { - left: 83.33333333%; - } - .col-md-push-9 { - left: 75%; - } - .col-md-push-8 { - left: 66.66666667%; - } - .col-md-push-7 { - left: 58.33333333%; - } - .col-md-push-6 { - left: 50%; - } - .col-md-push-5 { - left: 41.66666667%; - } - .col-md-push-4 { - left: 33.33333333%; - } - .col-md-push-3 { - left: 25%; - } - .col-md-push-2 { - left: 16.66666667%; - } - .col-md-push-1 { - left: 8.33333333%; - } - .col-md-push-0 { - left: auto; - } - .col-md-offset-12 { - margin-left: 100%; - } - .col-md-offset-11 { - margin-left: 91.66666667%; - } - .col-md-offset-10 { - margin-left: 83.33333333%; - } - .col-md-offset-9 { - margin-left: 75%; - } - .col-md-offset-8 { - margin-left: 66.66666667%; - } - .col-md-offset-7 { - margin-left: 58.33333333%; - } - .col-md-offset-6 { - margin-left: 50%; - } - .col-md-offset-5 { - margin-left: 41.66666667%; - } - .col-md-offset-4 { - margin-left: 33.33333333%; - } - .col-md-offset-3 { - margin-left: 25%; - } - .col-md-offset-2 { - margin-left: 16.66666667%; - } - .col-md-offset-1 { - margin-left: 8.33333333%; - } - .col-md-offset-0 { - margin-left: 0%; - } -} -@media (min-width: 1200px) { - .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { - float: left; - } - .col-lg-12 { - width: 100%; - } - .col-lg-11 { - width: 91.66666667%; - } - .col-lg-10 { - width: 83.33333333%; - } - .col-lg-9 { - width: 75%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-3 { - width: 25%; - } - .col-lg-2 { - width: 16.66666667%; - } - .col-lg-1 { - width: 8.33333333%; - } - .col-lg-pull-12 { - right: 100%; - } - .col-lg-pull-11 { - right: 91.66666667%; - } - .col-lg-pull-10 { - right: 83.33333333%; - } - .col-lg-pull-9 { - right: 75%; - } - .col-lg-pull-8 { - right: 66.66666667%; - } - .col-lg-pull-7 { - right: 58.33333333%; - } - .col-lg-pull-6 { - right: 50%; - } - .col-lg-pull-5 { - right: 41.66666667%; - } - .col-lg-pull-4 { - right: 33.33333333%; - } - .col-lg-pull-3 { - right: 25%; - } - .col-lg-pull-2 { - right: 16.66666667%; - } - .col-lg-pull-1 { - right: 8.33333333%; - } - .col-lg-pull-0 { - right: auto; - } - .col-lg-push-12 { - left: 100%; - } - .col-lg-push-11 { - left: 91.66666667%; - } - .col-lg-push-10 { - left: 83.33333333%; - } - .col-lg-push-9 { - left: 75%; - } - .col-lg-push-8 { - left: 66.66666667%; - } - .col-lg-push-7 { - left: 58.33333333%; - } - .col-lg-push-6 { - left: 50%; - } - .col-lg-push-5 { - left: 41.66666667%; - } - .col-lg-push-4 { - left: 33.33333333%; - } - .col-lg-push-3 { - left: 25%; - } - .col-lg-push-2 { - left: 16.66666667%; - } - .col-lg-push-1 { - left: 8.33333333%; - } - .col-lg-push-0 { - left: auto; - } - .col-lg-offset-12 { - margin-left: 100%; - } - .col-lg-offset-11 { - margin-left: 91.66666667%; - } - .col-lg-offset-10 { - margin-left: 83.33333333%; - } - .col-lg-offset-9 { - margin-left: 75%; - } - .col-lg-offset-8 { - margin-left: 66.66666667%; - } - .col-lg-offset-7 { - margin-left: 58.33333333%; - } - .col-lg-offset-6 { - margin-left: 50%; - } - .col-lg-offset-5 { - margin-left: 41.66666667%; - } - .col-lg-offset-4 { - margin-left: 33.33333333%; - } - .col-lg-offset-3 { - margin-left: 25%; - } - .col-lg-offset-2 { - margin-left: 16.66666667%; - } - .col-lg-offset-1 { - margin-left: 8.33333333%; - } - .col-lg-offset-0 { - margin-left: 0%; - } -} -.clearfix:before, -.clearfix:after, -.container:before, -.container:after, -.container-fluid:before, -.container-fluid:after, -.row:before, -.row:after { - content: " "; - display: table; -} -.clearfix:after, -.container:after, -.container-fluid:after, -.row:after { - clear: both; -} -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} -.pull-right { - float: right !important; -} -.pull-left { - float: left !important; -} -.hide { - display: none !important; -} -.show { - display: block !important; -} -.invisible { - visibility: hidden; -} -.text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.hidden { - display: none !important; - visibility: hidden !important; -} -.affix { - position: fixed; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} diff --git a/demo/styles/style.css b/demo/styles/style.css deleted file mode 100644 index b57575e..0000000 --- a/demo/styles/style.css +++ /dev/null @@ -1,94 +0,0 @@ -body { - font-family: 'Open Sans'; - background: #F0F1F0; -} -button { - width: 250px; - height: 50px; - background: #1BBA9A; - color: #F0F1F0; - outline: none; - cursor: pointer; - border: none; - margin: 100px 0; -} -.main { - text-align: center; -} -/* demo info page */ -.more-info { - color: #F0F1F0; - font-size: 20px; - text-align: left; - background: #1BBA9A; -} -.more-info h2 { - text-align: center; -} -/* demo login form */ -.login { - background: #1BBA9A; - width: 400px; - height: 400px; - color: #F0F1F0; - font-weight: bold; -} -.close-x { - margin: 10px; - z-index: 2000; - font-size: 25px; - cursor: pointer; - color: rgb(19, 146, 121); -} -.close-x:hover { - color: #F0F1F0; -} -form { - position: relative; - text-align: left; - padding: 10px 30px; - -} -form h2 { - margin: 0; - text-align: center; - font-weight: 300; - font-size: 3.5em; -} -form p { - margin: 0 0 5px 0; - font-size: 0.7em; -} -form label { - display: block; - font-size: 1.5em; - padding: 10px 0 0; - color: #FCFCFC; - letter-spacing: 1px; - font-weight: normal; -} -form input[type="text"], -form input[type="password"] { - padding: 10px; - width: 100%; - border: 2px solid #F0F1F0; - background: transparent; - color: #F0F1F0; - font-weight: 300; - font-size: 2.2em; -} -form input:focus { - outline: 0; -} -form button { - display: block; - margin-top: 2.5em; - padding: 1em; - width: 100%; - border: none; - background: #F0F1F0; - color: #1BBA9A; - letter-spacing: 1px; - line-height: 0; - font-size: 1.5em; -} \ No newline at end of file diff --git a/demo/views/info.html b/demo/views/info.html deleted file mode 100644 index 97a739d..0000000 --- a/demo/views/info.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
- -
-
-
-

LOREM IPSUM!

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis Praesent sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris Praesent massa. Vestibulum sed lacinia arcu nec eget augue nulla. Class aptent nibh taciti sociosqu massa.

- -

Ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur massa. sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique libero. sem. Proin ut ligula vel nunc egestas dolor. porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus mattis. non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt aliquet. sed, euismod Fusce in, nibh. ipsum. Quisque volutpat condimentum velit.

- -

Class aptent taciti sociosqu ad litora torquent per ullamcorper conubia nostra, per inceptos himenaeos. vel, Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus imperdiet. suscipit. Sed lectus. Integer euismod lacus luctus consequat magna. magna Quisque cursus, lectus. - -

Metus vitae pharetra auctor, sem massa mattis sem, magna at interdum magna augue lacus eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ante posuere cubilia Curae; Morbi primis lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi blandit sit amet augue congue elementum. Morbi in ipsum dolor. sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.

- -
- -
-
- diff --git a/demo/views/loginform.html b/demo/views/loginform.html deleted file mode 100644 index 01e6648..0000000 --- a/demo/views/loginform.html +++ /dev/null @@ -1,12 +0,0 @@ -
-
- -
-
-
-

-

-

-
-
-
\ No newline at end of file diff --git a/dist/angular-morph.js b/dist/angular-morph.js index d74582c..8c0bfa7 100644 --- a/dist/angular-morph.js +++ b/dist/angular-morph.js @@ -193,7 +193,6 @@ // add vertical scrollbar once full-screen. // TODO: add before/after animation hooks. - console.log(settings.overlay.scroll, settings); if ( settings.overlay.scroll !== false ) { setTimeout( function () { element.css({'overflow-y': 'scroll'}); @@ -299,26 +298,21 @@ angular.module('morph.directives') .directive('ngMorphModal', ['TemplateHandler', '$compile', 'Morph', function (TemplateHandler, $compile, Morph) { - var isMorphed = false; - return { restrict: 'A', - scope: { - settings: '=ngMorphModal' - }, + scope: true, link: function (scope, element, attrs) { - var wrapper = angular.element('
').css('visibility', 'hidden'); - var modalSettings = scope.settings.modal; + var settings = scope[attrs.ngMorphModal]; + var isMorphed = false; var compile = function (results) { var morphTemplate = results.data ? results.data : results; - return $compile(morphTemplate)(scope); }; var initMorphable = function (content) { - var closeEl = angular.element(content[0].querySelector(scope.settings.closeEl)); + var closeEl = angular.element(content[0].querySelector(settings.closeEl)); var elements = { morphable: element, wrapper: wrapper, @@ -326,7 +320,7 @@ }; // create element for modal fade - if ( scope.settings.modal.fade !== false ) { + if (settings.modal.fade !== false) { var fade = angular.element('
'); elements.fade = fade; } @@ -334,27 +328,27 @@ // add to dom wrapper.append(content); element.after(wrapper); - if ( fade ) wrapper.after(fade); + if (fade) wrapper.after(fade); // set the wrapper bg color wrapper.css('background', getComputedStyle(content[0]).backgroundColor); // get bounding rectangles - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); - scope.settings.ContentBoundingRect = content[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.ContentBoundingRect = content[0].getBoundingClientRect(); // bootstrap the modal - var modal = new Morph('Modal', elements, scope.settings); + var modal = new Morph('Modal', elements, settings); // attach event listeners element.bind('click', function () { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = modal.toggle(isMorphed); }); - if ( closeEl ) { + if (closeEl) { closeEl.bind('click', function (event) { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = modal.toggle(isMorphed); }); } @@ -366,15 +360,13 @@ }); }; - if ( modalSettings.template ) { - initMorphable(compile(modalSettings.template)); - - } else if ( modalSettings.templateUrl ){ - var loadContent = TemplateHandler.get(modalSettings.templateUrl); - - loadContent.then(compile) - .then(initMorphable); - + if (settings.modal.template) { + initMorphable(compile(settings.modal.template)); + } else if (settings.modal.templateUrl) { + TemplateHandler + .get(settings.modal.templateUrl) + .then(compile) + .then(initMorphable); } else { throw new Error('No template found.'); } @@ -388,28 +380,22 @@ angular.module('morph.directives') .directive('ngMorphOverlay', ['$compile', 'TemplateHandler', 'Morph', function ($compile, TemplateHandler, Morph) { - var isMorphed = false; return { restrict: 'A', - scope: { - settings: '=ngMorphOverlay' - }, + scope: true, link: function (scope, element, attrs) { var wrapper = angular.element('
').css('visibility', 'hidden'); - var overlaySettings = scope.settings.overlay; + var settings = scope[attrs.ngMorphOverlay]; + var isMorphed = false; var compile = function (results) { var morphTemplate = results.data ? results.data : results; - return $compile(morphTemplate)(scope); }; - // content - // scope.settings - // isMorphed var initMorphable = function (content) { - var closeEl = angular.element(content[0].querySelector(scope.settings.closeEl)); + var closeEl = angular.element(content[0].querySelector(settings.closeEl)); var elements = { morphable: element, wrapper: wrapper, @@ -424,21 +410,21 @@ wrapper.css('background', getComputedStyle(content[0]).backgroundColor); // get bounding rectangles - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); - scope.settings.ContentBoundingRect = content[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.ContentBoundingRect = content[0].getBoundingClientRect(); // bootstrap the overlay - var overlay = new Morph('Overlay', elements, scope.settings); + var overlay = new Morph('Overlay', elements, settings); // attach event listeners element.bind('click', function () { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = overlay.toggle(isMorphed); }); - if ( closeEl ) { + if (closeEl) { closeEl.bind('click', function (event) { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = overlay.toggle(isMorphed); }); } @@ -450,15 +436,13 @@ }); }; - if ( overlaySettings.template ) { - initMorphable(compile(overlaySettings.template)); - - } else if ( overlaySettings.templateUrl ){ - var loadContent = TemplateHandler.get(overlaySettings.templateUrl); - - loadContent.then(compile) - .then(initMorphable); - + if (settings.overlay.template) { + initMorphable(compile(settings.overlay.template)); + } else if (settings.overlay.templateUrl) { + TemplateHandler + .get(settings.overlay.templateUrl) + .then(compile) + .then(initMorphable); } else { throw new Error('No template found.'); } diff --git a/dist/angular-morph.min.js b/dist/angular-morph.min.js index c69bd3e..232a4ec 100644 --- a/dist/angular-morph.min.js +++ b/dist/angular-morph.min.js @@ -1 +1 @@ -!function(t){"use strict";t.module("morph.transitions",["morph.assist"]).factory("Transitions",["Modal","Overlay",function(t,i){return{Modal:t,Overlay:i}}])}(angular),function(t){"use strict";t.module("morph.transitions").factory("Modal",[function(){return function(i,n){var e={wrapper:function(t,i){var n=i.ContentBoundingRect,e=i.modal,o="50%",s="50%",r=0;e.position&&"center"!==e.position||(r="-"+n.height/2+"px 0 0 -"+n.width/2+"px"),"object"==typeof e.position&&(o=e.position.top+"",s=e.position.left+"",o.indexOf("%")<0&&o.indexOf("px")<0&&(o+="%"),s.indexOf("%")<0&&s.indexOf("px")<0&&(s+="%")),t.css({"z-index":1900,opacity:1,visibility:"visible","pointer-events":"auto",top:o,left:s,width:n.width+"px",height:n.height+"px",margin:r,"-webkit-transition":"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s",transition:"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s"})},content:function(t){t.css({transition:"opacity 0.3s 0.4s ease",visibility:"visible",opacity:"1"})},morphable:function(t){t.css({"z-index":2e3,opacity:0,"-webkit-transition":"opacity 0.1s",transition:"opacity 0.1s"})},fade:function(t){t.css({display:"block"}),setTimeout(function(){t.css({opacity:"1"})},25)}},o={wrapper:function(t,i){var n=i.MorphableBoundingRect;t.css({position:"fixed","z-index":"900",opacity:"0",margin:0,top:n.top+"px",left:n.left+"px",width:n.width+"px",height:n.height+"px","pointer-events":"none","-webkit-transition":"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s",transition:"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s"})},content:function(t){t.css({transition:"opacity 0.3s 0.4s ease",height:"0",opacity:"0"}),setTimeout(function(){t.css({visibility:"hidden"})},100)},morphable:function(t){t.css({"z-index":900,opacity:1,"-webkit-transition":"opacity 0.1s 0.4s",transition:"opacity 0.1s 0.4s"})},fade:function(t){t.css({opacity:"0"}),setTimeout(function(){t.css({display:"none"})},525)}};return{toggle:function(s){return s?t.forEach(i,function(t,i){o[i](t,n)}):(i.wrapper.css({transition:"none",top:n.MorphableBoundingRect.top+"px",left:n.MorphableBoundingRect.left+"px"}),setTimeout(function(){t.forEach(i,function(t,i){e[i](t,n)})},25)),!s}}}}])}(angular),function(t){"use strict";t.module("morph.transitions").factory("Expand",[function(){}])}(angular),function(t){"use strict";t.module("morph.transitions").factory("Overlay",[function(){return function(i,n){var e={wrapper:function(t,i){t.css({"z-index":1900,opacity:1,visibility:"visible","pointer-events":"auto",top:"0",left:"0",width:"100%",height:"100%","-webkit-transition":"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s",transition:"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s"}),console.log(i.overlay.scroll,i),i.overlay.scroll!==!1&&setTimeout(function(){t.css({"overflow-y":"scroll"})},500)},content:function(t){t.css({transition:"opacity 0.3s 0.5s ease",visibility:"visible",opacity:"1"})},morphable:function(t){t.css({"z-index":2e3,opacity:0,"-webkit-transition":"opacity 0.1s",transition:"opacity 0.1s"})}},o={wrapper:function(t,i){var n=i.MorphableBoundingRect;setTimeout(function(){t.css({overflow:"hidden",position:"fixed","z-index":"900",opacity:"0",margin:0,top:n.top+"px",left:n.left+"px",width:n.width+"px",height:n.height+"px","pointer-events":"none","-webkit-transition":"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s",transition:"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s"})},100)},content:function(t){t.css({transition:"opacity 0.22s ease","-webkit-transition":"opacity 0.22s ease",height:"0",opacity:"0"}),setTimeout(function(){t.css({visibility:"hidden"})},70)},morphable:function(t){t.css({"z-index":900,opacity:1,"-webkit-transition":"opacity 0.1s 0.3s",transition:"opacity 0.1s 0.3s"})}};return{toggle:function(s){return s?t.forEach(i,function(t,i){o[i](t,n)}):(i.wrapper.css({transition:"none",top:n.MorphableBoundingRect.top+"px",left:n.MorphableBoundingRect.left+"px"}),setTimeout(function(){t.forEach(i,function(t,i){e[i](t,n)})},25)),!s}}}}])}(angular),function(t){"use strict";t.module("morph.directives",["morph"])}(angular),function(t){"use strict";t.module("morph.directives").directive("ngMorphModal",["TemplateHandler","$compile","Morph",function(i,n,e){var o=!1;return{restrict:"A",scope:{settings:"=ngMorphModal"},link:function(s,r){var a=t.element("
").css("visibility","hidden"),c=s.settings.modal,p=function(t){var i=t.data?t.data:t;return n(i)(s)},l=function(i){var n=t.element(i[0].querySelector(s.settings.closeEl)),c={morphable:r,wrapper:a,content:i};if(s.settings.modal.fade!==!1){var p=t.element("
");c.fade=p}a.append(i),r.after(a),p&&a.after(p),a.css("background",getComputedStyle(i[0]).backgroundColor),s.settings.MorphableBoundingRect=r[0].getBoundingClientRect(),s.settings.ContentBoundingRect=i[0].getBoundingClientRect();var l=new e("Modal",c,s.settings);r.bind("click",function(){s.settings.MorphableBoundingRect=r[0].getBoundingClientRect(),o=l.toggle(o)}),n&&n.bind("click",function(){s.settings.MorphableBoundingRect=r[0].getBoundingClientRect(),o=l.toggle(o)}),s.$on("$destroy",function(){r.unbind("click"),n.unbind("click")})};if(c.template)l(p(c.template));else{if(!c.templateUrl)throw new Error("No template found.");var u=i.get(c.templateUrl);u.then(p).then(l)}}}}])}(angular),function(t){"use strict";t.module("morph.directives").directive("ngMorphOverlay",["$compile","TemplateHandler","Morph",function(i,n,e){var o=!1;return{restrict:"A",scope:{settings:"=ngMorphOverlay"},link:function(s,r){var a=t.element("
").css("visibility","hidden"),c=s.settings.overlay,p=function(t){var n=t.data?t.data:t;return i(n)(s)},l=function(i){var n=t.element(i[0].querySelector(s.settings.closeEl)),c={morphable:r,wrapper:a,content:i};a.append(i),r.after(a),a.css("background",getComputedStyle(i[0]).backgroundColor),s.settings.MorphableBoundingRect=r[0].getBoundingClientRect(),s.settings.ContentBoundingRect=i[0].getBoundingClientRect();var p=new e("Overlay",c,s.settings);r.bind("click",function(){s.settings.MorphableBoundingRect=r[0].getBoundingClientRect(),o=p.toggle(o)}),n&&n.bind("click",function(){s.settings.MorphableBoundingRect=r[0].getBoundingClientRect(),o=p.toggle(o)}),s.$on("$destroy",function(){r.unbind("click"),n.unbind("click")})};if(c.template)l(p(c.template));else{if(!c.templateUrl)throw new Error("No template found.");var u=n.get(c.templateUrl);u.then(p).then(l)}}}}])}(angular),function(t){"use strict";t.module("morph.assist",[]).factory("Assist",[function(){var t={wrapper:{position:"fixed","z-index":"900",opacity:"0",margin:"0","pointer-events":"none","-webkit-transition":"opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s",transition:"opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s"},content:{transition:"opacity 0.3s 0.3s ease","-webkit-transition":"opacity 0.3s 0.3s ease",height:"0",opacity:"0"},morphable:{"z-index":"1000",outline:"none"},fade:{display:"none",opacity:"0",position:"fixed",top:"0",left:"0","z-index":"800",width:"100%",height:"100%",background:"rgba(0,0,0,0.5)","-webkit-transition":"opacity 0.5s",transition:"opacity 0.5s"}};return{setBoundingRect:function(t,i,n){t.css({top:i.top+"px",left:i.left+"px",width:i.width+"px",height:i.height+"px"}),"function"==typeof n&&n(t)},applyDefaultStyles:function(i,n){t[n]&&i.css(t[n])}}}])}(angular),function(t){"use strict";t.module("morph",["morph.transitions","morph.assist"]).factory("Morph",["Transitions","Assist",function(i,n){return function(e,o,s){var r=s.MorphableBoundingRect;return n.setBoundingRect(o.wrapper,r),t.forEach(o,function(t,i){n.applyDefaultStyles(t,i)}),i[e](o,s)}}]).factory("TemplateHandler",["$http","$templateCache",function(t,i){return{get:function(n){return t.get(n,{cache:i})}}}])}(angular),function(t){"use strict";t.module("ngMorph",["morph.directives","morph"])}(angular); \ No newline at end of file +!function(t){"use strict";t.module("morph.transitions",["morph.assist"]).factory("Transitions",["Modal","Overlay",function(t,i){return{Modal:t,Overlay:i}}])}(angular),function(t){"use strict";t.module("morph.transitions").factory("Modal",[function(){return function(i,n){var e={wrapper:function(t,i){var n=i.ContentBoundingRect,e=i.modal,o="50%",s="50%",r=0;e.position&&"center"!==e.position||(r="-"+n.height/2+"px 0 0 -"+n.width/2+"px"),"object"==typeof e.position&&(o=e.position.top+"",s=e.position.left+"",o.indexOf("%")<0&&o.indexOf("px")<0&&(o+="%"),s.indexOf("%")<0&&s.indexOf("px")<0&&(s+="%")),t.css({"z-index":1900,opacity:1,visibility:"visible","pointer-events":"auto",top:o,left:s,width:n.width+"px",height:n.height+"px",margin:r,"-webkit-transition":"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s",transition:"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s"})},content:function(t){t.css({transition:"opacity 0.3s 0.4s ease",visibility:"visible",opacity:"1"})},morphable:function(t){t.css({"z-index":2e3,opacity:0,"-webkit-transition":"opacity 0.1s",transition:"opacity 0.1s"})},fade:function(t){t.css({display:"block"}),setTimeout(function(){t.css({opacity:"1"})},25)}},o={wrapper:function(t,i){var n=i.MorphableBoundingRect;t.css({position:"fixed","z-index":"900",opacity:"0",margin:0,top:n.top+"px",left:n.left+"px",width:n.width+"px",height:n.height+"px","pointer-events":"none","-webkit-transition":"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s",transition:"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s"})},content:function(t){t.css({transition:"opacity 0.3s 0.4s ease",height:"0",opacity:"0"}),setTimeout(function(){t.css({visibility:"hidden"})},100)},morphable:function(t){t.css({"z-index":900,opacity:1,"-webkit-transition":"opacity 0.1s 0.4s",transition:"opacity 0.1s 0.4s"})},fade:function(t){t.css({opacity:"0"}),setTimeout(function(){t.css({display:"none"})},525)}};return{toggle:function(s){return s?t.forEach(i,function(t,i){o[i](t,n)}):(i.wrapper.css({transition:"none",top:n.MorphableBoundingRect.top+"px",left:n.MorphableBoundingRect.left+"px"}),setTimeout(function(){t.forEach(i,function(t,i){e[i](t,n)})},25)),!s}}}}])}(angular),function(t){"use strict";t.module("morph.transitions").factory("Expand",[function(){}])}(angular),function(t){"use strict";t.module("morph.transitions").factory("Overlay",[function(){return function(i,n){var e={wrapper:function(t,i){t.css({"z-index":1900,opacity:1,visibility:"visible","pointer-events":"auto",top:"0",left:"0",width:"100%",height:"100%","-webkit-transition":"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s",transition:"width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s"}),console.log(i.overlay.scroll,i),i.overlay.scroll!==!1&&setTimeout(function(){t.css({"overflow-y":"scroll"})},500)},content:function(t){t.css({transition:"opacity 0.3s 0.5s ease",visibility:"visible",opacity:"1"})},morphable:function(t){t.css({"z-index":2e3,opacity:0,"-webkit-transition":"opacity 0.1s",transition:"opacity 0.1s"})}},o={wrapper:function(t,i){var n=i.MorphableBoundingRect;setTimeout(function(){t.css({overflow:"hidden",position:"fixed","z-index":"900",opacity:"0",margin:0,top:n.top+"px",left:n.left+"px",width:n.width+"px",height:n.height+"px","pointer-events":"none","-webkit-transition":"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s",transition:"opacity 0.3s 0.5s, width 0.35s 0.1s, height 0.35s 0.1s, top 0.35s 0.1s, left 0.35s 0.1s, margin 0.35s 0.1s"})},100)},content:function(t){t.css({transition:"opacity 0.22s ease","-webkit-transition":"opacity 0.22s ease",height:"0",opacity:"0"}),setTimeout(function(){t.css({visibility:"hidden"})},70)},morphable:function(t){t.css({"z-index":900,opacity:1,"-webkit-transition":"opacity 0.1s 0.3s",transition:"opacity 0.1s 0.3s"})}};return{toggle:function(s){return s?t.forEach(i,function(t,i){o[i](t,n)}):(i.wrapper.css({transition:"none",top:n.MorphableBoundingRect.top+"px",left:n.MorphableBoundingRect.left+"px"}),setTimeout(function(){t.forEach(i,function(t,i){e[i](t,n)})},25)),!s}}}}])}(angular),function(t){"use strict";t.module("morph.directives",["morph"])}(angular),function(t){"use strict";t.module("morph.directives").directive("ngMorphModal",["TemplateHandler","$compile","Morph",function(i,n,e){return{restrict:"A",scope:!0,link:function(o,s,r){var a=t.element("
").css("visibility","hidden"),c=o[r.ngMorphModal],p=!1,l=function(t){var i=t.data?t.data:t;return n(i)(o)},u=function(i){var n=t.element(i[0].querySelector(c.closeEl)),r={morphable:s,wrapper:a,content:i};if(c.modal.fade!==!1){var l=t.element("
");r.fade=l}a.append(i),s.after(a),l&&a.after(l),a.css("background",getComputedStyle(i[0]).backgroundColor),c.MorphableBoundingRect=s[0].getBoundingClientRect(),c.ContentBoundingRect=i[0].getBoundingClientRect();var u=new e("Modal",r,c);s.bind("click",function(){c.MorphableBoundingRect=s[0].getBoundingClientRect(),p=u.toggle(p)}),n&&n.bind("click",function(){c.MorphableBoundingRect=s[0].getBoundingClientRect(),p=u.toggle(p)}),o.$on("$destroy",function(){s.unbind("click"),n.unbind("click")})};if(c.modal.template)u(l(c.modal.template));else{if(!c.modal.templateUrl)throw new Error("No template found.");i.get(c.modal.templateUrl).then(l).then(u)}}}}])}(angular),function(t){"use strict";t.module("morph.directives").directive("ngMorphOverlay",["$compile","TemplateHandler","Morph",function(i,n,e){return{restrict:"A",scope:!0,link:function(o,s,r){var a=t.element("
").css("visibility","hidden"),c=o[r.ngMorphOverlay],p=!1,l=function(t){var n=t.data?t.data:t;return i(n)(o)},u=function(i){var n=t.element(i[0].querySelector(c.closeEl)),r={morphable:s,wrapper:a,content:i};a.append(i),s.after(a),a.css("background",getComputedStyle(i[0]).backgroundColor),c.MorphableBoundingRect=s[0].getBoundingClientRect(),c.ContentBoundingRect=i[0].getBoundingClientRect();var l=new e("Overlay",r,c);s.bind("click",function(){c.MorphableBoundingRect=s[0].getBoundingClientRect(),p=l.toggle(p)}),n&&n.bind("click",function(){c.MorphableBoundingRect=s[0].getBoundingClientRect(),p=l.toggle(p)}),o.$on("$destroy",function(){s.unbind("click"),n.unbind("click")})};if(c.overlay.template)u(l(c.overlay.template));else{if(!c.overlay.templateUrl)throw new Error("No template found.");n.get(c.overlay.templateUrl).then(l).then(u)}}}}])}(angular),function(t){"use strict";t.module("morph.assist",[]).factory("Assist",[function(){var t={wrapper:{position:"fixed","z-index":"900",opacity:"0",margin:"0","pointer-events":"none","-webkit-transition":"opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s",transition:"opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s"},content:{transition:"opacity 0.3s 0.3s ease","-webkit-transition":"opacity 0.3s 0.3s ease",height:"0",opacity:"0"},morphable:{"z-index":"1000",outline:"none"},fade:{display:"none",opacity:"0",position:"fixed",top:"0",left:"0","z-index":"800",width:"100%",height:"100%",background:"rgba(0,0,0,0.5)","-webkit-transition":"opacity 0.5s",transition:"opacity 0.5s"}};return{setBoundingRect:function(t,i,n){t.css({top:i.top+"px",left:i.left+"px",width:i.width+"px",height:i.height+"px"}),"function"==typeof n&&n(t)},applyDefaultStyles:function(i,n){t[n]&&i.css(t[n])}}}])}(angular),function(t){"use strict";t.module("morph",["morph.transitions","morph.assist"]).factory("Morph",["Transitions","Assist",function(i,n){return function(e,o,s){var r=s.MorphableBoundingRect;return n.setBoundingRect(o.wrapper,r),t.forEach(o,function(t,i){n.applyDefaultStyles(t,i)}),i[e](o,s)}}]).factory("TemplateHandler",["$http","$templateCache",function(t,i){return{get:function(n){return t.get(n,{cache:i})}}}])}(angular),function(t){"use strict";t.module("ngMorph",["morph.directives","morph"])}(angular); \ No newline at end of file diff --git a/spec/transitions/modalSpec.js b/spec/transitions/modalSpec.js index cbc7e4a..bcbde6b 100644 --- a/spec/transitions/modalSpec.js +++ b/spec/transitions/modalSpec.js @@ -1,4 +1,4 @@ -describe('Modal Transition', function(){ +describe('Modal', function(){ var tpl = '

Test Content

'; @@ -15,6 +15,7 @@ describe('Modal Transition', function(){ })); + // basic modal functionality tests it('should compile a template', function(){ inject(function ($compile, $document, $rootScope, $rootElement) { var morphable = $compile('
')($rootScope); @@ -73,7 +74,8 @@ describe('Modal Transition', function(){ it('should close modal when closeEl is clicked', function() { inject(function ($compile, $document, $rootScope, $rootElement) { - var tplWithCloseEl = '
x

Test Content

'; + var tplWithCloseEl = '
x

Test Content

'; + $rootScope.settings = { closeEl: ".close-x", trigger: 'click', @@ -103,4 +105,87 @@ describe('Modal Transition', function(){ }, "wrapper should be hidden to user", 850); }); }); + + // nested morphable tests + it('should compile a template containing a nested modal morphable', function () { + inject(function ($compile, $document, $rootScope, $rootElement) { + var tplContainingMorphable = '
'; + var nestedModaltpl = '
x
'; + + $rootScope.modalSettings = { + closeEl: ".close-x", + trigger: 'click', + modal: { + template: tplContainingMorphable + } + }; + + $rootScope.nestedModalSettings = { + closeEl: ".close-x", + trigger: 'click', + modal: { + template: nestedModaltpl + } + }; + + var morphable = $compile('
')($rootScope); + + $rootElement.append(morphable); + angular.element($document[0].body).append($rootElement); + + runs(function() { + morphable.find("button")[0].click(); + }); + + expect(morphable[0].querySelector("#nested-modal").childNodes.length).to.be(2); + }); + }); + + it('should open a modal when a nested directive element is clicked', function () { + inject(function ($compile, $document, $rootScope, $rootElement) { + var tplContainingMorphable = '
'; + var nestedModaltpl = '
x
'; + + $rootScope.modalSettings = { + closeEl: ".close-x", + trigger: 'click', + modal: { + template: tplContainingMorphable + } + }; + + $rootScope.nestedModalSettings = { + closeEl: ".close-x", + trigger: 'click', + modal: { + template: nestedModaltpl + } + }; + + var morphable = $compile('
')($rootScope); + + $rootElement.append(morphable); + angular.element($document[0].body).append($rootElement); + + // open first modal + runs(function() { + morphable.find("button")[0].click(); + }); + + waitsFor(function() { + return getComputedStyle(morphable.find("div")[0], null).opacity === "1"; + }, "wrapper should be visible to user", 35); + + // open nested modal + runs(function() { + var tpl = angular.element(morphable[0].querySelector("#tpl-containing-morphable")); + tpl.find("button")[0].click(); + }); + + waitsFor(function() { + return getComputedStyle(morphable[0].querySelector("#nested-modal"), null).visibility === "visible"; + }, "nested modal should be visible to user", 35); + + }); + }); }); \ No newline at end of file diff --git a/spec/transitions/overlaySpec.js b/spec/transitions/overlaySpec.js index dbfaa68..010abb7 100644 --- a/spec/transitions/overlaySpec.js +++ b/spec/transitions/overlaySpec.js @@ -15,6 +15,7 @@ describe('Overlay Transition', function(){ })); + // basic overlay functionality tests it('should compile a template', function(){ inject(function ($compile, $document, $rootScope, $rootElement) { var morphable = $compile('
')($rootScope); @@ -29,4 +30,136 @@ describe('Overlay Transition', function(){ }); }); + it('should open overlay when directive element is clicked', function() { + inject(function ($compile, $document, $rootScope, $rootElement) { + var morphable = $compile('
')($rootScope); + + $rootElement.append(morphable); + angular.element($document[0].body).append($rootElement); + runs(function() { + morphable.find("button")[0].click(); + }); + + waitsFor(function() { + return getComputedStyle(morphable.find("div")[0], null).opacity === "1"; + }, "wrapper should be visible to user", 35); + }); + }); + + it('should close overlay when closeEl is clicked', function() { + inject(function ($compile, $document, $rootScope, $rootElement) { + var tplWithCloseEl = '
x

Test Content

'; + + $rootScope.settings = { + closeEl: ".close-x", + trigger: 'click', + overlay: { + template: tplWithCloseEl + } + }; + + var morphable = $compile('
')($rootScope); + + $rootElement.append(morphable); + angular.element($document[0].body).append($rootElement); + runs(function() { + morphable.find("button")[0].click(); + }); + + waitsFor(function() { + return getComputedStyle(morphable.find("div")[0], null).opacity === "1"; + }, "wrapper should be visible to user", 35); + + runs(function() { + morphable.children(".close-x")[0].click(); + }); + + waitsFor(function() { + return getComputedStyle(morphable.find("div")[0], null).opacity === '0' ; + }, "wrapper should be hidden to user", 850); + }); + }); + + // nested morphable tests + it('should compile a template containing a nested overlay morphable', function () { + inject(function ($compile, $document, $rootScope, $rootElement) { + var tplContainingMorphable = '
'; + var nestedOverlayTpl = '
x
'; + + $rootScope.overlaySettings = { + closeEl: ".close-x", + trigger: 'click', + overlay: { + template: tplContainingMorphable + } + }; + + $rootScope.nestedOverlaySettings = { + closeEl: ".close-x", + trigger: 'click', + overlay: { + template: nestedOverlayTpl + } + }; + + var morphable = $compile('
')($rootScope); + + $rootElement.append(morphable); + angular.element($document[0].body).append($rootElement); + + runs(function() { + morphable.find("button")[0].click(); + }); + + expect(morphable[0].querySelector("#nested-overlay").childNodes.length).to.be(2); + }); + }); + + it('should open an overlay when a nested directive element is clicked', function () { + inject(function ($compile, $document, $rootScope, $rootElement) { + var tplContainingMorphable = '
'; + var nestedOverlayTpl = '
x
'; + + $rootScope.overlaySettings = { + closeEl: ".close-x", + trigger: 'click', + overlay: { + template: tplContainingMorphable + } + }; + + $rootScope.nestedOverlaySettings = { + closeEl: ".close-x", + trigger: 'click', + overlay: { + template: nestedOverlayTpl + } + }; + + var morphable = $compile('
')($rootScope); + + $rootElement.append(morphable); + angular.element($document[0].body).append($rootElement); + + // open first overlay + runs(function() { + morphable.find("button")[0].click(); + }); + + waitsFor(function() { + return getComputedStyle(morphable.find("div")[0], null).opacity === "1"; + }, "wrapper should be visible to user", 35); + + // open nested overlay + runs(function() { + var tpl = angular.element(morphable[0].querySelector("#tpl-containing-morphable")); + tpl.find("button")[0].click(); + }); + + waitsFor(function() { + return getComputedStyle(morphable[0].querySelector("#nested-overlay"), null).visibility === "visible"; + }, "nested overlay should be visible to user", 35); + + }); + }); }); \ No newline at end of file diff --git a/src/directives/modal.js b/src/directives/modal.js index 1d41625..0e13c10 100644 --- a/src/directives/modal.js +++ b/src/directives/modal.js @@ -3,26 +3,21 @@ angular.module('morph.directives') .directive('ngMorphModal', ['TemplateHandler', '$compile', 'Morph', function (TemplateHandler, $compile, Morph) { - var isMorphed = false; - return { restrict: 'A', - scope: { - settings: '=ngMorphModal' - }, + scope: true, link: function (scope, element, attrs) { - var wrapper = angular.element('
').css('visibility', 'hidden'); - var modalSettings = scope.settings.modal; + var settings = scope[attrs.ngMorphModal]; + var isMorphed = false; var compile = function (results) { var morphTemplate = results.data ? results.data : results; - return $compile(morphTemplate)(scope); }; var initMorphable = function (content) { - var closeEl = angular.element(content[0].querySelector(scope.settings.closeEl)); + var closeEl = angular.element(content[0].querySelector(settings.closeEl)); var elements = { morphable: element, wrapper: wrapper, @@ -30,7 +25,7 @@ }; // create element for modal fade - if ( scope.settings.modal.fade !== false ) { + if (settings.modal.fade !== false) { var fade = angular.element('
'); elements.fade = fade; } @@ -38,27 +33,27 @@ // add to dom wrapper.append(content); element.after(wrapper); - if ( fade ) wrapper.after(fade); + if (fade) wrapper.after(fade); // set the wrapper bg color wrapper.css('background', getComputedStyle(content[0]).backgroundColor); // get bounding rectangles - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); - scope.settings.ContentBoundingRect = content[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.ContentBoundingRect = content[0].getBoundingClientRect(); // bootstrap the modal - var modal = new Morph('Modal', elements, scope.settings); + var modal = new Morph('Modal', elements, settings); // attach event listeners element.bind('click', function () { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = modal.toggle(isMorphed); }); - if ( closeEl ) { + if (closeEl) { closeEl.bind('click', function (event) { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = modal.toggle(isMorphed); }); } @@ -70,15 +65,13 @@ }); }; - if ( modalSettings.template ) { - initMorphable(compile(modalSettings.template)); - - } else if ( modalSettings.templateUrl ){ - var loadContent = TemplateHandler.get(modalSettings.templateUrl); - - loadContent.then(compile) - .then(initMorphable); - + if (settings.modal.template) { + initMorphable(compile(settings.modal.template)); + } else if (settings.modal.templateUrl) { + TemplateHandler + .get(settings.modal.templateUrl) + .then(compile) + .then(initMorphable); } else { throw new Error('No template found.'); } diff --git a/src/directives/overlay.js b/src/directives/overlay.js index fff0580..53e7991 100644 --- a/src/directives/overlay.js +++ b/src/directives/overlay.js @@ -3,28 +3,22 @@ angular.module('morph.directives') .directive('ngMorphOverlay', ['$compile', 'TemplateHandler', 'Morph', function ($compile, TemplateHandler, Morph) { - var isMorphed = false; return { restrict: 'A', - scope: { - settings: '=ngMorphOverlay' - }, + scope: true, link: function (scope, element, attrs) { var wrapper = angular.element('
').css('visibility', 'hidden'); - var overlaySettings = scope.settings.overlay; + var settings = scope[attrs.ngMorphOverlay]; + var isMorphed = false; var compile = function (results) { var morphTemplate = results.data ? results.data : results; - return $compile(morphTemplate)(scope); }; - // content - // scope.settings - // isMorphed var initMorphable = function (content) { - var closeEl = angular.element(content[0].querySelector(scope.settings.closeEl)); + var closeEl = angular.element(content[0].querySelector(settings.closeEl)); var elements = { morphable: element, wrapper: wrapper, @@ -39,21 +33,21 @@ wrapper.css('background', getComputedStyle(content[0]).backgroundColor); // get bounding rectangles - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); - scope.settings.ContentBoundingRect = content[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.ContentBoundingRect = content[0].getBoundingClientRect(); // bootstrap the overlay - var overlay = new Morph('Overlay', elements, scope.settings); + var overlay = new Morph('Overlay', elements, settings); // attach event listeners element.bind('click', function () { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = overlay.toggle(isMorphed); }); - if ( closeEl ) { + if (closeEl) { closeEl.bind('click', function (event) { - scope.settings.MorphableBoundingRect = element[0].getBoundingClientRect(); + settings.MorphableBoundingRect = element[0].getBoundingClientRect(); isMorphed = overlay.toggle(isMorphed); }); } @@ -65,15 +59,13 @@ }); }; - if ( overlaySettings.template ) { - initMorphable(compile(overlaySettings.template)); - - } else if ( overlaySettings.templateUrl ){ - var loadContent = TemplateHandler.get(overlaySettings.templateUrl); - - loadContent.then(compile) - .then(initMorphable); - + if (settings.overlay.template) { + initMorphable(compile(settings.overlay.template)); + } else if (settings.overlay.templateUrl) { + TemplateHandler + .get(settings.overlay.templateUrl) + .then(compile) + .then(initMorphable); } else { throw new Error('No template found.'); } diff --git a/src/transitions/overlay.js b/src/transitions/overlay.js index 8718ea2..8ce4c1e 100644 --- a/src/transitions/overlay.js +++ b/src/transitions/overlay.js @@ -21,7 +21,6 @@ // add vertical scrollbar once full-screen. // TODO: add before/after animation hooks. - console.log(settings.overlay.scroll, settings); if ( settings.overlay.scroll !== false ) { setTimeout( function () { element.css({'overflow-y': 'scroll'});