angular-morph.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. (function (angular){
  2. "use strict";
  3. angular.module('morph.transitions', ['morph.assist'])
  4. .factory('Transitions', ['Modal', 'Overlay', function (Modal, Overlay) {
  5. return {
  6. Modal: Modal,
  7. Overlay: Overlay
  8. };
  9. }]);
  10. })(angular);
  11. (function (angular){
  12. "use strict";
  13. angular.module('morph.transitions')
  14. .factory('Modal', [ function () {
  15. return function (elements, settings) {
  16. var enter = {
  17. wrapper: function (element, settings) {
  18. var ContentBoundingRect = settings.ContentBoundingRect;
  19. var modalSettings = settings.modal;
  20. var top = '50%';
  21. var left = '50%';
  22. var margin = 0;
  23. if ( !modalSettings.position || modalSettings.position === 'center' ) {
  24. margin = '-' + ( ContentBoundingRect.height / 2 ) + 'px 0 0 -' + ( ContentBoundingRect.width / 2 ) + 'px';
  25. }
  26. if ( typeof modalSettings.position === 'object' ) {
  27. top = modalSettings.position.top + '';
  28. left = modalSettings.position.left + '';
  29. // set default units if none provided
  30. if ( top.indexOf('%') < 0 && top.indexOf('px') < 0 ) {
  31. top += '%';
  32. }
  33. if ( left.indexOf('%') < 0 && left.indexOf('px') < 0 ) {
  34. left += '%';
  35. }
  36. }
  37. element.css({
  38. 'z-index': 1900,
  39. 'opacity': 1,
  40. 'visibility': 'visible',
  41. 'pointer-events': 'auto',
  42. 'top': top,
  43. 'left': left,
  44. 'width': ContentBoundingRect.width + 'px',
  45. 'height': ContentBoundingRect.height + 'px',
  46. 'margin': margin,
  47. '-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',
  48. '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'
  49. });
  50. },
  51. content: function (element, settings) {
  52. element.css({
  53. 'transition': 'opacity 0.3s 0.4s ease',
  54. 'visibility': 'visible',
  55. 'opacity': '1'
  56. });
  57. },
  58. morphable: function (element, settings) {
  59. element.css({
  60. 'z-index': 2000,
  61. 'opacity': 0,
  62. '-webkit-transition': 'opacity 0.1s',
  63. 'transition': 'opacity 0.1s',
  64. });
  65. },
  66. fade: function (element) {
  67. element.css({
  68. 'display': 'block'
  69. });
  70. setTimeout(function() {
  71. element.css({
  72. 'opacity': '1'
  73. });
  74. }, 25);
  75. }
  76. };
  77. var exit = {
  78. wrapper: function (element, settings) {
  79. var MorphableBoundingRect = settings.MorphableBoundingRect;
  80. element.css({
  81. 'position': 'fixed',
  82. 'z-index': '900',
  83. 'opacity': '0',
  84. 'margin': 0,
  85. 'top': MorphableBoundingRect.top + 'px',
  86. 'left': MorphableBoundingRect.left + 'px',
  87. 'width': MorphableBoundingRect.width + 'px',
  88. 'height': MorphableBoundingRect.height + 'px',
  89. 'pointer-events': 'none',
  90. '-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',
  91. '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'
  92. });
  93. },
  94. content: function (element, settings) {
  95. element.css({
  96. 'transition': 'opacity 0.3s 0.4s ease',
  97. 'height': '0',
  98. 'opacity': '0'
  99. });
  100. setTimeout( function () {
  101. element.css({'visibility': 'hidden'});
  102. }, 100);
  103. },
  104. morphable: function (element, settings) {
  105. element.css({
  106. 'z-index': 900,
  107. 'opacity': 1,
  108. '-webkit-transition': 'opacity 0.1s 0.4s',
  109. 'transition': 'opacity 0.1s 0.4s',
  110. });
  111. },
  112. fade: function (element) {
  113. element.css({
  114. 'opacity': '0'
  115. });
  116. setTimeout(function() {
  117. element.css({
  118. 'display': 'none'
  119. });
  120. }, 525);
  121. }
  122. };
  123. return {
  124. toggle: function (isMorphed) {
  125. if ( !isMorphed ) {
  126. elements.wrapper.css({
  127. transition: 'none', // remove any transitions to prevent the relocation from being delayed.
  128. top: settings.MorphableBoundingRect.top + 'px',
  129. left: settings.MorphableBoundingRect.left + 'px'
  130. });
  131. // wrap in timeout to allow relocation to finish. transition styles are added too soon without this.
  132. setTimeout( function () {
  133. angular.forEach(elements, function (element, elementName) {
  134. enter[elementName](element, settings);
  135. });
  136. }, 25 );
  137. } else {
  138. angular.forEach(elements, function (element, elementName) {
  139. exit[elementName](element, settings);
  140. });
  141. }
  142. return !isMorphed;
  143. }
  144. };
  145. };
  146. }]);
  147. })(angular);
  148. (function (angular){
  149. "use strict";
  150. angular.module('morph.transitions')
  151. .factory('Expand', [ function () {
  152. // TODO
  153. }]);
  154. })(angular);
  155. (function (angular){
  156. "use strict";
  157. angular.module('morph.transitions')
  158. .factory('Overlay', [ function () {
  159. return function (elements, settings) {
  160. var enter = {
  161. wrapper: function (element, settings) {
  162. element.css({
  163. 'z-index': 1900,
  164. 'opacity': 1,
  165. 'visibility': 'visible',
  166. 'pointer-events': 'auto',
  167. 'top': '0',
  168. 'left': '0',
  169. 'width': '100%',
  170. 'height': '100%',
  171. '-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',
  172. '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'
  173. });
  174. // add vertical scrollbar once full-screen.
  175. // TODO: add before/after animation hooks.
  176. if ( settings.overlay.scroll !== false ) {
  177. setTimeout( function () {
  178. element.css({'overflow-y': 'scroll'});
  179. }, 500);
  180. }
  181. },
  182. content: function (element, settings) {
  183. element.css({
  184. 'transition': 'opacity 0.3s 0.5s ease',
  185. 'visibility': 'visible',
  186. 'opacity': '1'
  187. });
  188. },
  189. morphable: function (element, settings) {
  190. element.css({
  191. 'z-index': 2000,
  192. 'opacity': 0,
  193. '-webkit-transition': 'opacity 0.1s',
  194. 'transition': 'opacity 0.1s',
  195. });
  196. },
  197. };
  198. var exit = {
  199. wrapper: function (element, settings) {
  200. var MorphableBoundingRect = settings.MorphableBoundingRect;
  201. setTimeout( function () {
  202. element.css({
  203. 'overflow': 'hidden',
  204. 'position': 'fixed',
  205. 'z-index': '900',
  206. 'opacity': '0',
  207. 'margin': 0,
  208. 'top': MorphableBoundingRect.top + 'px',
  209. 'left': MorphableBoundingRect.left + 'px',
  210. 'width': MorphableBoundingRect.width + 'px',
  211. 'height': MorphableBoundingRect.height + 'px',
  212. 'pointer-events': 'none',
  213. '-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',
  214. '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'
  215. });
  216. }, 100);
  217. },
  218. content: function (element, settings) {
  219. element.css({
  220. 'transition': 'opacity 0.22s ease',
  221. '-webkit-transition': 'opacity 0.22s ease',
  222. 'height': '0',
  223. 'opacity': '0'
  224. });
  225. setTimeout( function () {
  226. element.css({'visibility': 'hidden'});
  227. }, 70);
  228. },
  229. morphable: function (element, settings) {
  230. element.css({
  231. 'z-index': 900,
  232. 'opacity': 1,
  233. '-webkit-transition': 'opacity 0.1s 0.3s',
  234. 'transition': 'opacity 0.1s 0.3s',
  235. });
  236. },
  237. };
  238. return {
  239. toggle: function (isMorphed) {
  240. if ( !isMorphed ) {
  241. elements.wrapper.css({
  242. transition: 'none', // remove any transitions to prevent the relocation from being delayed.
  243. top: settings.MorphableBoundingRect.top + 'px',
  244. left: settings.MorphableBoundingRect.left + 'px'
  245. });
  246. // wrap in timeout to allow relocation to finish. transition styles are added too soon without this.
  247. setTimeout( function () {
  248. angular.forEach(elements, function (element, elementName) {
  249. enter[elementName](element, settings);
  250. });
  251. }, 25 );
  252. } else {
  253. angular.forEach(elements, function (element, elementName) {
  254. exit[elementName](element, settings);
  255. });
  256. }
  257. return !isMorphed;
  258. }
  259. };
  260. };
  261. }]);
  262. })(angular);
  263. (function (angular){
  264. "use strict";
  265. angular.module('morph.directives', ['morph']);
  266. })(angular);
  267. (function (angular){
  268. "use strict";
  269. angular.module('morph.directives')
  270. .directive('ngMorphModal', ['TemplateHandler', '$compile', 'Morph', function (TemplateHandler, $compile, Morph) {
  271. return {
  272. restrict: 'A',
  273. scope: true,
  274. link: function (scope, element, attrs) {
  275. var wrapper = angular.element('<div></div>').css('visibility', 'hidden');
  276. var settings = scope[attrs.ngMorphModal];
  277. var isMorphed = false;
  278. var compile = function (results) {
  279. var morphTemplate = results.data ? results.data : results;
  280. return $compile(morphTemplate)(scope);
  281. };
  282. var initMorphable = function (content) {
  283. var closeEl = angular.element(content[0].querySelector(settings.closeEl));
  284. var elements = {
  285. morphable: element,
  286. wrapper: wrapper,
  287. content: content
  288. };
  289. // create element for modal fade
  290. if (settings.modal.fade !== false) {
  291. var fade = angular.element('<div></div>');
  292. elements.fade = fade;
  293. }
  294. // add to dom
  295. wrapper.append(content);
  296. element.after(wrapper);
  297. if (fade) wrapper.after(fade);
  298. // set the wrapper bg color
  299. wrapper.css('background', getComputedStyle(content[0]).backgroundColor);
  300. // get bounding rectangles
  301. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  302. settings.ContentBoundingRect = content[0].getBoundingClientRect();
  303. // bootstrap the modal
  304. var modal = new Morph('Modal', elements, settings);
  305. // attach event listeners
  306. element.bind('click', function () {
  307. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  308. isMorphed = modal.toggle(isMorphed);
  309. });
  310. if (closeEl) {
  311. closeEl.bind('click', function (event) {
  312. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  313. isMorphed = modal.toggle(isMorphed);
  314. });
  315. }
  316. // remove event handlers when scope is destroyed
  317. scope.$on('$destroy', function () {
  318. element.unbind('click');
  319. closeEl.unbind('click');
  320. });
  321. };
  322. if (settings.modal.template) {
  323. initMorphable(compile(settings.modal.template));
  324. } else if (settings.modal.templateUrl) {
  325. TemplateHandler
  326. .get(settings.modal.templateUrl)
  327. .then(compile)
  328. .then(initMorphable);
  329. } else {
  330. throw new Error('No template found.');
  331. }
  332. }
  333. };
  334. }]);
  335. })(angular);
  336. (function (angular){
  337. "use strict";
  338. angular.module('morph.directives')
  339. .directive('ngMorphOverlay', ['$compile', 'TemplateHandler', 'Morph', function ($compile, TemplateHandler, Morph) {
  340. return {
  341. restrict: 'A',
  342. scope: true,
  343. link: function (scope, element, attrs) {
  344. var wrapper = angular.element('<div></div>').css('visibility', 'hidden');
  345. var settings = scope[attrs.ngMorphOverlay];
  346. var isMorphed = false;
  347. var compile = function (results) {
  348. var morphTemplate = results.data ? results.data : results;
  349. return $compile(morphTemplate)(scope);
  350. };
  351. var initMorphable = function (content) {
  352. var closeEl = angular.element(content[0].querySelector(settings.closeEl));
  353. var elements = {
  354. morphable: element,
  355. wrapper: wrapper,
  356. content: content
  357. };
  358. // add to dom
  359. wrapper.append(content);
  360. element.after(wrapper);
  361. // set the wrapper bg color
  362. wrapper.css('background', getComputedStyle(content[0]).backgroundColor);
  363. // get bounding rectangles
  364. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  365. settings.ContentBoundingRect = content[0].getBoundingClientRect();
  366. // bootstrap the overlay
  367. var overlay = new Morph('Overlay', elements, settings);
  368. // attach event listeners
  369. element.bind('click', function () {
  370. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  371. isMorphed = overlay.toggle(isMorphed);
  372. });
  373. if (closeEl) {
  374. closeEl.bind('click', function (event) {
  375. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  376. isMorphed = overlay.toggle(isMorphed);
  377. });
  378. }
  379. // remove event handlers when scope is destroyed
  380. scope.$on('$destroy', function () {
  381. element.unbind('click');
  382. closeEl.unbind('click');
  383. });
  384. };
  385. if (settings.overlay.template) {
  386. initMorphable(compile(settings.overlay.template));
  387. } else if (settings.overlay.templateUrl) {
  388. TemplateHandler
  389. .get(settings.overlay.templateUrl)
  390. .then(compile)
  391. .then(initMorphable);
  392. } else {
  393. throw new Error('No template found.');
  394. }
  395. }
  396. };
  397. }]);
  398. })(angular);
  399. (function (angular){
  400. "use strict";
  401. angular.module('morph.assist', [])
  402. .factory('Assist', [function () {
  403. var defaultStyles = {
  404. wrapper: {
  405. 'position': 'fixed',
  406. 'z-index': '900',
  407. 'opacity': '0',
  408. 'margin': '0',
  409. 'pointer-events': 'none',
  410. '-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',
  411. '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'
  412. },
  413. content: {
  414. 'transition': 'opacity 0.3s 0.3s ease',
  415. '-webkit-transition': 'opacity 0.3s 0.3s ease',
  416. 'height': '0',
  417. 'opacity': '0',
  418. },
  419. morphable: {
  420. 'z-index': '1000',
  421. 'outline': 'none',
  422. },
  423. fade: {
  424. 'display': 'none',
  425. 'opacity': '0',
  426. 'position': 'fixed',
  427. 'top': '0',
  428. 'left': '0',
  429. 'z-index': '800',
  430. 'width': '100%',
  431. 'height': '100%',
  432. 'background': 'rgba(0,0,0,0.5)',
  433. '-webkit-transition': 'opacity 0.5s',
  434. 'transition': 'opacity 0.5s'
  435. }
  436. };
  437. return {
  438. setBoundingRect: function (element, positioning, callback) {
  439. element.css({
  440. 'top': positioning.top + 'px',
  441. 'left': positioning.left + 'px',
  442. 'width': positioning.width + 'px',
  443. 'height': positioning.height + 'px'
  444. });
  445. if ( typeof callback === 'function' )
  446. callback(element);
  447. },
  448. applyDefaultStyles: function (element, elementName) {
  449. if ( defaultStyles[elementName] ) element.css(defaultStyles[elementName]);
  450. }
  451. };
  452. }]);
  453. })(angular);
  454. (function (angular){
  455. "use strict";
  456. angular.module('morph', [
  457. 'morph.transitions',
  458. 'morph.assist'
  459. ])
  460. .factory('Morph', ['Transitions', 'Assist', function (Transitions, Assist) {
  461. return function (transition, elements, settings) {
  462. var MorphableBoundingRect = settings.MorphableBoundingRect;
  463. // set wrapper bounding rectangle
  464. Assist.setBoundingRect(elements.wrapper, MorphableBoundingRect);
  465. // apply normal-state styles
  466. angular.forEach(elements, function (element, elementName) {
  467. Assist.applyDefaultStyles(element, elementName);
  468. });
  469. return Transitions[transition](elements, settings);
  470. };
  471. }])
  472. .factory('TemplateHandler', ['$http', '$templateCache', function ($http, $templateCache) {
  473. return {
  474. get: function (path) {
  475. return $http.get(path, { cache: $templateCache });
  476. }
  477. };
  478. }]);
  479. })(angular);
  480. (function (angular){
  481. "use strict";
  482. angular.module('ngMorph', [
  483. 'morph.directives',
  484. 'morph'
  485. ]);
  486. })(angular);