diff --git a/API.md b/API.md index 887b54d..50a7bb4 100644 --- a/API.md +++ b/API.md @@ -27,7 +27,17 @@ myModal.set_config({ onStateChanged: "Function", animateTime: "Number", zIndex: "Number", - fullScreen: "Boolean" + fullScreen: "Boolean", + header: { + title: "", + btns: { + close: { + label: '', onClick: function(){ + myModal.close(); + } + } + } + } }); ``` @@ -97,6 +107,33 @@ Type: `Boolean` fullScreen : true ``` +### header + +Type: `Object' + +```json +{ + title:"MODAL TITLE", + btns: { + minimize: { + label: '', onClick: function(){ + modal.minimize(); + } + }, + maximize: { + label: '', onClick: function(){ + modal.maximize(); + } + }, + close: { + label: '', onClick: function(){ + modal.close(); + } + } + } +} +``` + - - - ## open() @@ -142,6 +179,18 @@ modal.align({left:"left", top:"top", margin: 20}); ## close() `close()` + +- - - + +## minimize() +`minimize()` + + +- - - + +## maximize() +`maximize()` + - - - ## onStateChanged diff --git a/bower.json b/bower.json index f0897f9..9afd455 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ax5ui-modal", - "version": "0.5.6", + "version": "0.6.0", "authors": [ "ThomasJ " ], diff --git a/dist/ax5modal.css b/dist/ax5modal.css index 39f68d3..4618e76 100644 --- a/dist/ax5modal.css +++ b/dist/ax5modal.css @@ -1 +1 @@ -@-webkit-keyframes ax-modal{0%{opacity:0.0;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}0.1%{opacity:1.0;-webkit-transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}5.9%{-webkit-transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}7.7%{-webkit-transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.5%{-webkit-transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.7%{-webkit-transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}15.2%{-webkit-transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}17.5%{-webkit-transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}19%{-webkit-transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}22.8%{-webkit-transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}23.2%{-webkit-transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.3%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.4%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}37.5%{-webkit-transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}44.6%{-webkit-transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}50.3%{-webkit-transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}51.7%{-webkit-transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}70.3%{-webkit-transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}80.3%{-webkit-transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}100%{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}}@-moz-keyframes ax-modal{0%{opacity:0.0;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}0.1%{opacity:1.0;-webkit-transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}5.9%{-webkit-transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}7.7%{-webkit-transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.5%{-webkit-transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.7%{-webkit-transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}15.2%{-webkit-transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}17.5%{-webkit-transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}19%{-webkit-transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}22.8%{-webkit-transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}23.2%{-webkit-transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.3%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.4%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}37.5%{-webkit-transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}44.6%{-webkit-transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}50.3%{-webkit-transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}51.7%{-webkit-transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}70.3%{-webkit-transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}80.3%{-webkit-transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}100%{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}}@keyframes ax-modal{0%{opacity:0.0;-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}0.1%{opacity:1.0;-webkit-transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}5.9%{-webkit-transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}7.7%{-webkit-transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.5%{-webkit-transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}11.7%{-webkit-transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}15.2%{-webkit-transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}17.5%{-webkit-transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}19%{-webkit-transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}22.8%{-webkit-transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}23.2%{-webkit-transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.3%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}30.4%{-webkit-transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}37.5%{-webkit-transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}44.6%{-webkit-transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}50.3%{-webkit-transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}51.7%{-webkit-transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}70.3%{-webkit-transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}80.3%{-webkit-transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}100%{-webkit-transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)}}@-webkit-keyframes ax-modal-destroy{from{-webkit-transform:scale(1);opacity:1.0}to{-webkit-transform:scale(0.5);opacity:0.0}}@-moz-keyframes ax-modal-destroy{from{-moz-transform:scale(1);opacity:1.0}to{-moz-transform:scale(0.5);opacity:0.0}}@keyframes ax-modal-destroy{from{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1.0}to{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5);opacity:0.0}}@-webkit-keyframes ax-modal-fullscreen{0%{-webkit-transform:translateY(100%)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes ax-modal-fullscreen{0%{-moz-transform:translateY(100%)}100%{-moz-transform:translateY(0)}}@keyframes ax-modal-fullscreen{0%{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes ax-modal-fullscreen-destroy{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(100%)}}@-moz-keyframes ax-modal-fullscreen-destroy{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(100%)}}@keyframes ax-modal-fullscreen-destroy{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}}.ax5-ui-modal{-webkit-animation:ax-modal 0.7s linear both;-moz-animation:ax-modal 0.7s linear both;animation:ax-modal 0.7s linear both;-webkit-transform:translateZ(0px);-moz-transform:translateZ(0px);-ms-transform:translateZ(0px);-o-transform:translateZ(0px);transform:translateZ(0px);box-sizing:border-box;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.6);z-index:2000;position:fixed;left:0px;top:0px;overflow:hidden}.ax5-ui-modal .ax-modal-body{padding:0px;text-align:center;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;position:relative}.ax5-ui-modal .ax-modal-body iframe{border:0px none}.ax5-ui-modal.destroy{-webkit-animation:ax-modal-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-modal-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-modal-destroy 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards}.ax5-ui-modal.fullscreen{border:0px none;border-radius:0px;box-shadow:none;-webkit-animation:ax-modal-fullscreen 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;-moz-animation:ax-modal-fullscreen 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;animation:ax-modal-fullscreen 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards}.ax5-ui-modal.fullscreen.destroy{-webkit-animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;-moz-animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards} +@-webkit-keyframes ax-modal{0%{opacity:0.0;-webkit-transform:translateY(20%)}100%{opacity:1.0;-webkit-transform:translateY(0)}}@-moz-keyframes ax-modal{0%{opacity:0.0;-moz-transform:translateY(20%)}100%{opacity:1.0;-moz-transform:translateY(0)}}@keyframes ax-modal{0%{opacity:0.0;-webkit-transform:translateY(20%);-moz-transform:translateY(20%);-ms-transform:translateY(20%);-o-transform:translateY(20%);transform:translateY(20%)}100%{opacity:1.0;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes ax-modal-destroy{100%{opacity:0.0;-webkit-transform:translateY(20%)}0%{opacity:1.0;-webkit-transform:translateY(0)}}@-moz-keyframes ax-modal-destroy{100%{opacity:0.0;-moz-transform:translateY(20%)}0%{opacity:1.0;-moz-transform:translateY(0)}}@keyframes ax-modal-destroy{100%{opacity:0.0;-webkit-transform:translateY(20%);-moz-transform:translateY(20%);-ms-transform:translateY(20%);-o-transform:translateY(20%);transform:translateY(20%)}0%{opacity:1.0;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes ax-modal-fullscreen{0%{-webkit-transform:translateY(20%)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes ax-modal-fullscreen{0%{-moz-transform:translateY(20%)}100%{-moz-transform:translateY(0)}}@keyframes ax-modal-fullscreen{0%{-webkit-transform:translateY(20%);-moz-transform:translateY(20%);-ms-transform:translateY(20%);-o-transform:translateY(20%);transform:translateY(20%)}100%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes ax-modal-fullscreen-destroy{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(100%)}}@-moz-keyframes ax-modal-fullscreen-destroy{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(100%)}}@keyframes ax-modal-fullscreen-destroy{0%{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}}.ax5modal{-webkit-animation:ax-modal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;-moz-animation:ax-modal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;animation:ax-modal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;-webkit-transform:translateZ(0px);-moz-transform:translateZ(0px);-ms-transform:translateZ(0px);-o-transform:translateZ(0px);transform:translateZ(0px);box-sizing:border-box;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.6);z-index:2000;position:fixed;left:0px;top:0px;overflow:hidden}.ax5modal .ax-modal-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:600;padding:10px 15px;border-bottom:1px solid transparent;cursor:move}.ax5modal .ax-modal-header .ax-modal-header-addon{position:absolute;right:0px;top:0px;padding:10px 10px}.ax5modal .ax-modal-header .ax-modal-header-addon a{padding:0px 2px;background:transparent;display:inline-block;text-align:center;cursor:pointer}.ax5modal .ax-modal-body{padding:0px;text-align:center;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;position:relative}.ax5modal .ax-modal-body iframe{border:0px none}.ax5modal .ax-modal-header{color:#333;background:#f5f5f5}.ax5modal .ax-modal-header .ax-modal-header-addon a{color:#333}.ax5modal.primary .ax-modal-header{color:#fff;background:#337ab7}.ax5modal.primary .ax-modal-header .ax-modal-header-addon a{color:#fff}.ax5modal.success .ax-modal-header{color:#3c763d;background:#dff0d8}.ax5modal.success .ax-modal-header .ax-modal-header-addon a{color:#3c763d}.ax5modal.info .ax-modal-header{color:#31708f;background:#d9edf7}.ax5modal.info .ax-modal-header .ax-modal-header-addon a{color:#31708f}.ax5modal.warning .ax-modal-header{color:#8a6d3b;background:#fcf8e3}.ax5modal.warning .ax-modal-header .ax-modal-header-addon a{color:#8a6d3b}.ax5modal.danger .ax-modal-header{color:#a94442;background:#f2dede}.ax5modal.danger .ax-modal-header .ax-modal-header-addon a{color:#a94442}.ax5modal.destroy{-webkit-animation:ax-modal-destroy 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;-moz-animation:ax-modal-destroy 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;animation:ax-modal-destroy 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards}.ax5modal.fullscreen{border:0px none;border-radius:0px;box-shadow:none;-webkit-animation:ax-modal-fullscreen 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;-moz-animation:ax-modal-fullscreen 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;animation:ax-modal-fullscreen 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards}.ax5modal.fullscreen.destroy{-webkit-animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;-moz-animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;animation:ax-modal-fullscreen-destroy 0.3s cubic-bezier(0.19, 1, 0.22, 1) forwards}.ax5modal.draged .ax-modal-header{opacity:0.5}.ax5modal.draged .ax-modal-body{opacity:0.5}.ax5modal-resizer-background{position:fixed;left:0px;top:0px;width:100%;height:100%;background:transparent}.ax5modal-resizer{position:absolute;left:0px;top:0px;z-index:2001;cursor:move;box-sizing:border-box;background-color:#ccc;border:3px dotted red;opacity:0.3;border-radius:4px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.6)} diff --git a/dist/ax5modal.js b/dist/ax5modal.js index a3b3226..6d55027 100755 --- a/dist/ax5modal.js +++ b/dist/ax5modal.js @@ -4,8 +4,8 @@ (function (root, _SUPER_) { /** - * @class ax5.ui.modal - * @classdesc + * @class ax5modal + * @alias ax5.ui.modal * @version 0.5.6 * @author tom@axisj.com * @example @@ -19,7 +19,22 @@ //== UI Class var axClass = function axClass() { var self = this, - cfg; + cfg, + ENM = { + "mousedown": ax5.info.supportTouch ? "touchstart" : "mousedown", + "mousemove": ax5.info.supportTouch ? "touchmove" : "mousemove", + "mouseup": ax5.info.supportTouch ? "touchend" : "mouseup" + }, + getMousePosition = function getMousePosition(e) { + var mouseObj = e; + if ('changedTouches' in e) { + mouseObj = e.changedTouches[0]; + } + return { + clientX: mouseObj.clientX, + clientY: mouseObj.clientY + }; + }; if (_SUPER_) _SUPER_.call(this); // 부모호출 this.activeModal = null; @@ -30,6 +45,7 @@ top: "middle", margin: 10 }, + minimizePosition: "bottom-right", clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), theme: 'default', width: 300, @@ -49,12 +65,13 @@ return true; }, getContentTmpl = function getContentTmpl() { - return "\n
\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n "; + return " \n
\n {{#header}}\n
\n {{{title}}}\n {{#btns}}\n
\n {{#@each}}\n {{{@value.label}}}\n {{/@each}}\n
\n {{/btns}}\n
\n {{/header}}\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n "; }, getContent = function getContent(modalId, opts) { var data = { modalId: modalId, theme: opts.theme, + header: opts.header, fullScreen: opts.fullScreen ? "fullscreen" : "", styles: [], iframe: opts.iframe @@ -79,6 +96,7 @@ // 파트수집 this.$ = { "root": this.activeModal.find('[data-modal-els="root"]'), + "header": this.activeModal.find('[data-modal-els="header"]'), "body": this.activeModal.find('[data-modal-els="body"]') }; @@ -127,22 +145,169 @@ }.bind(this)); } jQuery(window).bind("resize.ax-modal", function (e) { - align.call(this, null, e || window.event); + this.align(null, e || window.event); }.bind(this)); + + this.activeModal.find("[data-modal-header-btn]").on(cfg.clickEventName, function (e) { + btnOnClick.call(this, e || window.event, opts); + }.bind(this)); + + this.$.header.bind(ENM["mousedown"], function (e) { + self.mousePosition = getMousePosition(e); + moveModal.on.call(self); + }).bind("dragstart", function (e) { + U.stopEvent(e); + return false; + }); + }, + btnOnClick = function btnOnClick(e, opts, callBack, target, k) { + var that; + if (e.srcElement) e.target = e.srcElement; + + target = U.findParentNode(e.target, function (target) { + if (target.getAttribute("data-modal-header-btn")) { + return true; + } + }); + + if (target) { + k = target.getAttribute("data-modal-header-btn"); + + that = { + self: this, + key: k, value: opts.header.btns[k], + dialogId: opts.id, + btnTarget: target + }; + + if (opts.header.btns[k].onClick) { + opts.header.btns[k].onClick.call(that, k); + } + } + + that = null; + opts = null; + callBack = null; + target = null; + k = null; }, onkeyup = function onkeyup(e) { if (e.keyCode == ax5.info.eventKeys.ESC) { this.close(); } + }, + alignProcessor = { + "top-left": function topLeft() { + this.align({ left: "left", top: "top" }); + }, + "top-right": function topRight() { + this.align({ left: "right", top: "top" }); + }, + "bottom-left": function bottomLeft() { + this.align({ left: "left", top: "bottom" }); + }, + "bottom-right": function bottomRight() { + this.align({ left: "right", top: "bottom" }); + }, + "center-middle": function centerMiddle() { + this.align({ left: "center", top: "middle" }); + } + }, + moveModal = { + "on": function on() { + var modalOffset = this.activeModal.position(); + var modalBox = { + width: this.activeModal.outerWidth(), height: this.activeModal.outerHeight() + }; + var windowBox = { + width: jQuery(window).width(), + height: jQuery(window).height() + }; + var getResizerPosition = function getResizerPosition(e) { + self.__dx = e.clientX - self.mousePosition.clientX; + self.__dy = e.clientY - self.mousePosition.clientY; + + var minX = 0; + var maxX = windowBox.width - modalBox.width; + var minY = 0; + var maxY = windowBox.height - modalBox.height; + + if (minX > modalOffset.left + self.__dx) { + self.__dx = -modalOffset.left; + } else if (maxX < modalOffset.left + self.__dx) { + self.__dx = maxX - modalOffset.left; + } + + if (minY > modalOffset.top + self.__dy) { + self.__dy = -modalOffset.top; + } else if (maxY < modalOffset.top + self.__dy) { + self.__dy = maxY - modalOffset.top; + } + + return { + left: modalOffset.left + self.__dx, + top: modalOffset.top + self.__dy + }; + }; + + self.__dx = 0; // 변화량 X + self.__dy = 0; // 변화량 Y + + jQuery(document.body).bind(ENM["mousemove"] + ".ax5modal-" + cfg.id, function (e) { + if (!self.resizer) { + // self.resizerBg : body 가 window보다 작을 때 문제 해결을 위한 DIV + self.resizerBg = jQuery('
'); + self.resizer = jQuery('
'); + self.resizer.css({ + left: modalOffset.left, + top: modalOffset.top, + width: modalBox.width, + height: modalBox.height + }); + jQuery(document.body).append(self.resizerBg).append(self.resizer); + self.activeModal.addClass("draged"); + } + self.resizer.css(getResizerPosition(e)); + }).bind(ENM["mouseup"] + ".ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }).bind("mouseleave.ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }); + + jQuery(document.body).attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false); + }, + "off": function off() { + var setModalPosition = function setModalPosition() { + //console.log(this.activeModal.offset(), this.__dx); + var box = this.activeModal.offset(); + box.left += this.__dx; + box.top += this.__dy; + this.activeModal.css(box); + }; + + if (this.resizer) { + this.activeModal.removeClass("draged"); + this.resizer.remove(); + this.resizer = null; + this.resizerBg.remove(); + this.resizerBg = null; + setModalPosition.call(this); + //this.align(); + } + + jQuery(document.body).unbind(ENM["mousemove"] + ".ax5modal-" + cfg.id).unbind(ENM["mouseup"] + ".ax5modal-" + cfg.id).unbind("mouseleave.ax5modal-" + cfg.id); + + jQuery(document.body).removeAttr('unselectable').css('user-select', 'auto').off('selectstart'); + } }; /// private end /** * Preferences of modal UI - * @method ax5.ui.modal.setConfig + * @method ax5modal.setConfig * @param {Object} config - 클래스 속성값 - * @returns {ax5.ui.modal} + * @returns {ax5modal} * @example * ``` * ``` @@ -154,40 +319,29 @@ /** * open the modal - * @method ax5.ui.modal.open - * @returns {ax5.ui.modal} + * @method ax5modal.open + * @returns {ax5modal} * @example * ``` * my_modal.open(); * ``` */ this.open = function (opts, callBack) { - if (U.isString(opts)) { - opts = { - title: cfg.title, - msg: opts - }; - } - - self.modalConfig = {}; - jQuery.extend(true, self.modalConfig, cfg); - jQuery.extend(true, self.modalConfig, opts); - opts = self.modalConfig; - + opts = self.modalConfig = jQuery.extend(true, {}, cfg, opts); open.call(this, opts, callBack); return this; }; /** * close the modal - * @method ax5.ui.modal.close - * @returns {ax5.ui.modal} + * @method ax5modal.close + * @returns {ax5modal} * @example * ``` * my_modal.close(); * ``` */ - this.close = function (opts, that) { + this.close = function (opts) { if (this.activeModal) { opts = self.modalConfig; this.activeModal.addClass("destroy"); @@ -197,10 +351,6 @@ setTimeout(function () { this.activeModal.remove(); this.activeModal = null; - that = { - self: this, - state: "close" - }; onStateChanged.call(this, opts, { self: this, state: "close" @@ -210,11 +360,56 @@ return this; }; + /** + * @method ax5modal.minimize + * @returns {axClass} + */ + this.minimize = function () { + + return function (minimizePosition) { + var opts = self.modalConfig; + if (typeof minimizePosition === "undefined") minimizePosition = cfg.minimizePosition; + this.minimized = true; + this.$.body.hide(); + self.modalConfig.originalHeight = opts.height; + self.modalConfig.height = 0; + alignProcessor[minimizePosition].call(this); + + onStateChanged.call(this, opts, { + self: this, + state: "minimize" + }); + + return this; + }; + }(); + + /** + * @method ax5modal.maximize + * @returns {axClass} + */ + this.maximize = function () { + var opts = self.modalConfig; + if (this.minimized) { + this.minimized = false; + this.$.body.show(); + self.modalConfig.height = self.modalConfig.originalHeight; + self.modalConfig.originalHeight = undefined; + + this.align({ left: "center", top: "middle" }); + onStateChanged.call(this, opts, { + self: this, + state: "restore" + }); + } + return this; + }; + /** * setCSS - * @method ax5.ui.modal.css + * @method ax5modal.css * @param {Object} css - - * @returns {ax5.ui.modal} + * @returns {ax5modal} */ this.css = function (css) { if (this.activeModal && !self.fullScreen) { @@ -234,10 +429,10 @@ }; /** - * @mothod ax5.ui.modal.align + * @mothod ax5modal.align * @param position * @param e - * @returns {ax5.ui.modal} + * @returns {ax5modal} */ this.align = function () { @@ -251,6 +446,7 @@ }; if (opts.fullScreen) { + if (opts.header) this.$.header.hide(); box.width = jQuery(window).width(); box.height = jQuery(window).height(); box.left = 0; @@ -265,6 +461,10 @@ jQuery.extend(true, opts.position, position); } + if (opts.header) { + box.height += this.$.header.outerHeight(); + } + //- position 정렬 if (opts.position.left == "left") { box.left = opts.position.margin || 0; diff --git a/dist/ax5modal.min.js b/dist/ax5modal.min.js index f4dc29a..0fbbb3e 100755 --- a/dist/ax5modal.min.js +++ b/dist/ax5modal.min.js @@ -1 +1 @@ -"use strict";!function(i,t){var e=ax5.util,a=function(){var i,a=this;t&&t.call(this),this.activeModal=null,this.$={},this.config={position:{left:"center",top:"middle",margin:10},clickEventName:"click",theme:"default",width:300,height:400,closeToEsc:!0,animateTime:250},i=this.config,i.id="ax5-modal-"+ax5.getGuid();var o=function(i,t){return i&&i.onStateChanged?i.onStateChanged.call(t,t):this.onStateChanged&&this.onStateChanged.call(t,t),!0},n=function(){return'\n
\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n '},s=function(i,t){var e={modalId:i,theme:t.theme,fullScreen:t.fullScreen?"fullscreen":"",styles:[],iframe:t.iframe};return t.zIndex&&e.styles.push("z-index:"+t.zIndex),e.iframe&&"string"==typeof e.iframe.param&&(e.iframe.param=ax5.util.param(e.iframe.param)),ax5.mustache.render(n(),e)},h=function(i,t){var e;jQuery(document.body).append(s.call(this,i.id,i)),this.activeModal=jQuery("#"+i.id),this.$={root:this.activeModal.find('[data-modal-els="root"]'),body:this.activeModal.find('[data-modal-els="body"]')},i.iframe&&(this.$["iframe-wrap"]=this.activeModal.find('[data-modal-els="iframe-wrap"]'),this.$.iframe=this.activeModal.find('[data-modal-els="iframe"]'),this.$["iframe-form"]=this.activeModal.find('[data-modal-els="iframe-form"]')),this.align(),e={self:this,id:i.id,theme:i.theme,width:i.width,height:i.height,state:"open",$:this.$},i.iframe&&(this.$["iframe-wrap"].css({height:i.height}),this.$.iframe.css({height:i.height}),this.$["iframe-form"].attr({method:i.iframe.method}),this.$["iframe-form"].attr({target:i.id+"-frame"}),this.$["iframe-form"].attr({action:i.iframe.url}),this.$.iframe.on("load",function(){e.state="load",o.call(this,i,e)}.bind(this)),this.$["iframe-form"].submit()),t&&t.call(e),o.call(this,i,e),i.closeToEsc&&jQuery(window).bind("keydown.ax-modal",function(i){d.call(this,i||window.event)}.bind(this)),jQuery(window).bind("resize.ax-modal",function(i){align.call(this,null,i||window.event)}.bind(this))},d=function(i){i.keyCode==ax5.info.eventKeys.ESC&&this.close()};this.init=function(){this.onStateChanged=i.onStateChanged},this.open=function(t,o){return e.isString(t)&&(t={title:i.title,msg:t}),a.modalConfig={},jQuery.extend(!0,a.modalConfig,i),jQuery.extend(!0,a.modalConfig,t),t=a.modalConfig,h.call(this,t,o),this},this.close=function(t,e){return this.activeModal&&(t=a.modalConfig,this.activeModal.addClass("destroy"),jQuery(window).unbind("keydown.ax-modal"),jQuery(window).unbind("resize.ax-modal"),setTimeout(function(){this.activeModal.remove(),this.activeModal=null,e={self:this,state:"close"},o.call(this,t,{self:this,state:"close"})}.bind(this),i.animateTime)),this},this.css=function(i){return this.activeModal&&!a.fullScreen&&(this.activeModal.css(i),i.width&&(a.modalConfig.width=this.activeModal.width()),i.height&&(a.modalConfig.height=this.activeModal.height(),this.$.iframe&&(this.$["iframe-wrap"].css({height:a.modalConfig.height}),this.$.iframe.css({height:a.modalConfig.height})))),this},this.align=function(){return function(i,t){if(!this.activeModal)return this;var e=a.modalConfig,o={width:e.width,height:e.height};return e.fullScreen?(o.width=jQuery(window).width(),o.height=jQuery(window).height(),o.left=0,o.top=0,e.iframe&&(this.$["iframe-wrap"].css({height:o.height}),this.$.iframe.css({height:o.height}))):(i&&jQuery.extend(!0,e.position,i),"left"==e.position.left?o.left=e.position.margin||0:"right"==e.position.left?o.left=jQuery(window).width()-o.width-(e.position.margin||0):"center"==e.position.left?o.left=jQuery(window).width()/2-o.width/2:o.left=e.position.left||0,"top"==e.position.top?o.top=e.position.margin||0:"bottom"==e.position.top?o.top=jQuery(window).height()-o.height-(e.position.margin||0):"middle"==e.position.top?o.top=jQuery(window).height()/2-o.height/2:o.top=e.position.top||0),this.activeModal.css(o),this}}(),this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};i.modal=function(){return e.isFunction(t)&&(a.prototype=new t),a}()}(ax5.ui,ax5.ui.root); \ No newline at end of file +"use strict";!function(t,i){var e=ax5.util,a=function(){var t,a=this,o={mousedown:ax5.info.supportTouch?"touchstart":"mousedown",mousemove:ax5.info.supportTouch?"touchmove":"mousemove",mouseup:ax5.info.supportTouch?"touchend":"mouseup"},n=function(t){var i=t;return"changedTouches"in t&&(i=t.changedTouches[0]),{clientX:i.clientX,clientY:i.clientY}};i&&i.call(this),this.activeModal=null,this.$={},this.config={position:{left:"center",top:"middle",margin:10},minimizePosition:"bottom-right",clickEventName:"click",theme:"default",width:300,height:400,closeToEsc:!0,animateTime:250},t=this.config,t.id="ax5-modal-"+ax5.getGuid();var d=function(t,i){return t&&t.onStateChanged?t.onStateChanged.call(i,i):this.onStateChanged&&this.onStateChanged.call(i,i),!0},s=function(){return' \n
\n {{#header}}\n
\n {{{title}}}\n {{#btns}}\n
\n {{#@each}}\n {{{@value.label}}}\n {{/@each}}\n
\n {{/btns}}\n
\n {{/header}}\n
\n {{#iframe}}\n
\n \n
\n
\n \n {{#param}}\n {{#@each}}\n \n {{/@each}}\n {{/param}}\n
\n {{/iframe}}\n
\n
\n '},l=function(t,i){var e={modalId:t,theme:i.theme,header:i.header,fullScreen:i.fullScreen?"fullscreen":"",styles:[],iframe:i.iframe};return i.zIndex&&e.styles.push("z-index:"+i.zIndex),e.iframe&&"string"==typeof e.iframe.param&&(e.iframe.param=ax5.util.param(e.iframe.param)),ax5.mustache.render(s(),e)},h=function(i,s){var h;jQuery(document.body).append(l.call(this,i.id,i)),this.activeModal=jQuery("#"+i.id),this.$={root:this.activeModal.find('[data-modal-els="root"]'),header:this.activeModal.find('[data-modal-els="header"]'),body:this.activeModal.find('[data-modal-els="body"]')},i.iframe&&(this.$["iframe-wrap"]=this.activeModal.find('[data-modal-els="iframe-wrap"]'),this.$.iframe=this.activeModal.find('[data-modal-els="iframe"]'),this.$["iframe-form"]=this.activeModal.find('[data-modal-els="iframe-form"]')),this.align(),h={self:this,id:i.id,theme:i.theme,width:i.width,height:i.height,state:"open",$:this.$},i.iframe&&(this.$["iframe-wrap"].css({height:i.height}),this.$.iframe.css({height:i.height}),this.$["iframe-form"].attr({method:i.iframe.method}),this.$["iframe-form"].attr({target:i.id+"-frame"}),this.$["iframe-form"].attr({action:i.iframe.url}),this.$.iframe.on("load",function(){h.state="load",d.call(this,i,h)}.bind(this)),this.$["iframe-form"].submit()),s&&s.call(h),d.call(this,i,h),i.closeToEsc&&jQuery(window).bind("keydown.ax-modal",function(t){m.call(this,t||window.event)}.bind(this)),jQuery(window).bind("resize.ax-modal",function(t){this.align(null,t||window.event)}.bind(this)),this.activeModal.find("[data-modal-header-btn]").on(t.clickEventName,function(t){r.call(this,t||window.event,i)}.bind(this)),this.$.header.bind(o.mousedown,function(t){a.mousePosition=n(t),c.on.call(a)}).bind("dragstart",function(t){return e.stopEvent(t),!1})},r=function(t,i,a,o,n){var d;t.srcElement&&(t.target=t.srcElement),o=e.findParentNode(t.target,function(t){return t.getAttribute("data-modal-header-btn")?!0:void 0}),o&&(n=o.getAttribute("data-modal-header-btn"),d={self:this,key:n,value:i.header.btns[n],dialogId:i.id,btnTarget:o},i.header.btns[n].onClick&&i.header.btns[n].onClick.call(d,n)),d=null,i=null,a=null,o=null,n=null},m=function(t){t.keyCode==ax5.info.eventKeys.ESC&&this.close()},u={"top-left":function(){this.align({left:"left",top:"top"})},"top-right":function(){this.align({left:"right",top:"top"})},"bottom-left":function(){this.align({left:"left",top:"bottom"})},"bottom-right":function(){this.align({left:"right",top:"bottom"})},"center-middle":function(){this.align({left:"center",top:"middle"})}},c={on:function(){var i=this.activeModal.position(),e={width:this.activeModal.outerWidth(),height:this.activeModal.outerHeight()},n={width:jQuery(window).width(),height:jQuery(window).height()},d=function(t){a.__dx=t.clientX-a.mousePosition.clientX,a.__dy=t.clientY-a.mousePosition.clientY;var o=0,d=n.width-e.width,s=0,l=n.height-e.height;return o>i.left+a.__dx?a.__dx=-i.left:di.top+a.__dy?a.__dy=-i.top:l'),a.resizer=jQuery('
'),a.resizer.css({left:i.left,top:i.top,width:e.width,height:e.height}),jQuery(document.body).append(a.resizerBg).append(a.resizer),a.activeModal.addClass("draged")),a.resizer.css(d(t))}).bind(o.mouseup+".ax5layout-"+this.instanceId,function(t){c.off.call(a)}).bind("mouseleave.ax5layout-"+this.instanceId,function(t){c.off.call(a)}),jQuery(document.body).attr("unselectable","on").css("user-select","none").on("selectstart",!1)},off:function(){var i=function(){var t=this.activeModal.offset();t.left+=this.__dx,t.top+=this.__dy,this.activeModal.css(t)};this.resizer&&(this.activeModal.removeClass("draged"),this.resizer.remove(),this.resizer=null,this.resizerBg.remove(),this.resizerBg=null,i.call(this)),jQuery(document.body).unbind(o.mousemove+".ax5modal-"+t.id).unbind(o.mouseup+".ax5modal-"+t.id).unbind("mouseleave.ax5modal-"+t.id),jQuery(document.body).removeAttr("unselectable").css("user-select","auto").off("selectstart")}};this.init=function(){this.onStateChanged=t.onStateChanged},this.open=function(i,e){return i=a.modalConfig=jQuery.extend(!0,{},t,i),h.call(this,i,e),this},this.close=function(i){return this.activeModal&&(i=a.modalConfig,this.activeModal.addClass("destroy"),jQuery(window).unbind("keydown.ax-modal"),jQuery(window).unbind("resize.ax-modal"),setTimeout(function(){this.activeModal.remove(),this.activeModal=null,d.call(this,i,{self:this,state:"close"})}.bind(this),t.animateTime)),this},this.minimize=function(){return function(i){var e=a.modalConfig;return"undefined"==typeof i&&(i=t.minimizePosition),this.minimized=!0,this.$.body.hide(),a.modalConfig.originalHeight=e.height,a.modalConfig.height=0,u[i].call(this),d.call(this,e,{self:this,state:"minimize"}),this}}(),this.maximize=function(){var t=a.modalConfig;return this.minimized&&(this.minimized=!1,this.$.body.show(),a.modalConfig.height=a.modalConfig.originalHeight,a.modalConfig.originalHeight=void 0,this.align({left:"center",top:"middle"}),d.call(this,t,{self:this,state:"restore"})),this},this.css=function(t){return this.activeModal&&!a.fullScreen&&(this.activeModal.css(t),t.width&&(a.modalConfig.width=this.activeModal.width()),t.height&&(a.modalConfig.height=this.activeModal.height(),this.$.iframe&&(this.$["iframe-wrap"].css({height:a.modalConfig.height}),this.$.iframe.css({height:a.modalConfig.height})))),this},this.align=function(){return function(t,i){if(!this.activeModal)return this;var e=a.modalConfig,o={width:e.width,height:e.height};return e.fullScreen?(e.header&&this.$.header.hide(),o.width=jQuery(window).width(),o.height=jQuery(window).height(),o.left=0,o.top=0,e.iframe&&(this.$["iframe-wrap"].css({height:o.height}),this.$.iframe.css({height:o.height}))):(t&&jQuery.extend(!0,e.position,t),e.header&&(o.height+=this.$.header.outerHeight()),"left"==e.position.left?o.left=e.position.margin||0:"right"==e.position.left?o.left=jQuery(window).width()-o.width-(e.position.margin||0):"center"==e.position.left?o.left=jQuery(window).width()/2-o.width/2:o.left=e.position.left||0,"top"==e.position.top?o.top=e.position.margin||0:"bottom"==e.position.top?o.top=jQuery(window).height()-o.height-(e.position.margin||0):"middle"==e.position.top?o.top=jQuery(window).height()/2-o.height/2:o.top=e.position.top||0),this.activeModal.css(o),this}}(),this.main=function(){arguments&&e.isObject(arguments[0])&&this.setConfig(arguments[0])}.apply(this,arguments)};t.modal=function(){return e.isFunction(i)&&(a.prototype=new i),a}()}(ax5.ui,ax5.ui.root); \ No newline at end of file diff --git a/package.json b/package.json index 95c6b6e..a96e65b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ax5ui-modal", - "version": "0.5.6", + "version": "0.6.0", "description": "A modal plugin that works with Bootstrap & jQuery", "license": "LGPLv3", "repository": { diff --git a/src/ax5modal.js b/src/ax5modal.js index 3a7fdbb..6dc65c0 100755 --- a/src/ax5modal.js +++ b/src/ax5modal.js @@ -2,8 +2,8 @@ (function (root, _SUPER_) { /** - * @class ax5.ui.modal - * @classdesc + * @class ax5modal + * @alias ax5.ui.modal * @version 0.5.6 * @author tom@axisj.com * @example @@ -18,7 +18,22 @@ var axClass = function () { var self = this, - cfg; + cfg, + ENM = { + "mousedown": (ax5.info.supportTouch) ? "touchstart" : "mousedown", + "mousemove": (ax5.info.supportTouch) ? "touchmove" : "mousemove", + "mouseup": (ax5.info.supportTouch) ? "touchend" : "mouseup" + }, + getMousePosition = function (e) { + var mouseObj = e; + if ('changedTouches' in e) { + mouseObj = e.changedTouches[0]; + } + return { + clientX: mouseObj.clientX, + clientY: mouseObj.clientY + } + }; if (_SUPER_) _SUPER_.call(this); // 부모호출 this.activeModal = null; @@ -29,6 +44,7 @@ top: "middle", margin: 10 }, + minimizePosition: "bottom-right", clickEventName: "click", //(('ontouchstart' in document.documentElement) ? "touchstart" : "click"), theme: 'default', width: 300, @@ -50,8 +66,20 @@ return true; }, getContentTmpl = function () { - return ` -
+ return ` +
+ {{#header}} +
+ {{{title}}} + {{#btns}} +
+ {{#@each}} + {{{@value.label}}} + {{/@each}} +
+ {{/btns}} +
+ {{/header}}
{{#iframe}}
@@ -75,6 +103,7 @@ data = { modalId: modalId, theme: opts.theme, + header: opts.header, fullScreen: (opts.fullScreen ? "fullscreen" : ""), styles: [], iframe: opts.iframe @@ -99,6 +128,7 @@ // 파트수집 this.$ = { "root": this.activeModal.find('[data-modal-els="root"]'), + "header": this.activeModal.find('[data-modal-els="header"]'), "body": this.activeModal.find('[data-modal-els="body"]') }; @@ -147,22 +177,188 @@ }).bind(this)); } jQuery(window).bind("resize.ax-modal", (function (e) { - align.call(this, null, e || window.event); + this.align(null, e || window.event); + }).bind(this)); + + this.activeModal.find("[data-modal-header-btn]").on(cfg.clickEventName, (function (e) { + btnOnClick.call(this, e || window.event, opts); }).bind(this)); + + this.$.header + .bind(ENM["mousedown"], function (e) { + self.mousePosition = getMousePosition(e); + moveModal.on.call(self); + }) + .bind("dragstart", function (e) { + U.stopEvent(e); + return false; + }); + }, + btnOnClick = function (e, opts, callBack, target, k) { + var that; + if (e.srcElement) e.target = e.srcElement; + + target = U.findParentNode(e.target, function (target) { + if (target.getAttribute("data-modal-header-btn")) { + return true; + } + }); + + if (target) { + k = target.getAttribute("data-modal-header-btn"); + + that = { + self: this, + key: k, value: opts.header.btns[k], + dialogId: opts.id, + btnTarget: target + }; + + if (opts.header.btns[k].onClick) { + opts.header.btns[k].onClick.call(that, k); + } + } + + that = null; + opts = null; + callBack = null; + target = null; + k = null; }, onkeyup = function (e) { if (e.keyCode == ax5.info.eventKeys.ESC) { this.close(); } + }, + alignProcessor = { + "top-left": function () { + this.align({left: "left", top: "top"}); + }, + "top-right": function () { + this.align({left: "right", top: "top"}); + }, + "bottom-left": function () { + this.align({left: "left", top: "bottom"}); + }, + "bottom-right": function () { + this.align({left: "right", top: "bottom"}); + }, + "center-middle": function () { + this.align({left: "center", top: "middle"}); + } + }, + moveModal = { + "on": function () { + var modalOffset = this.activeModal.position(); + var modalBox = { + width: this.activeModal.outerWidth(), height: this.activeModal.outerHeight() + }; + var windowBox = { + width: jQuery(window).width(), + height: jQuery(window).height() + }; + var getResizerPosition = function (e) { + self.__dx = e.clientX - self.mousePosition.clientX; + self.__dy = e.clientY - self.mousePosition.clientY; + + var minX = 0; + var maxX = windowBox.width - modalBox.width; + var minY = 0; + var maxY = windowBox.height - modalBox.height; + + if(minX > modalOffset.left + self.__dx){ + self.__dx = -modalOffset.left; + } + else if(maxX < modalOffset.left + self.__dx){ + self.__dx = (maxX) - modalOffset.left; + } + + if(minY > modalOffset.top + self.__dy){ + self.__dy = -modalOffset.top; + } + else if(maxY < modalOffset.top + self.__dy){ + self.__dy = (maxY) - modalOffset.top; + } + + return { + left: modalOffset.left + self.__dx, + top: modalOffset.top + self.__dy + }; + }; + + self.__dx = 0; // 변화량 X + self.__dy = 0; // 변화량 Y + + jQuery(document.body) + .bind(ENM["mousemove"] + ".ax5modal-" + cfg.id, function (e) { + if (!self.resizer) { + // self.resizerBg : body 가 window보다 작을 때 문제 해결을 위한 DIV + self.resizerBg = jQuery('
'); + self.resizer = jQuery('
'); + self.resizer.css({ + left: modalOffset.left, + top: modalOffset.top, + width: modalBox.width, + height: modalBox.height + }); + jQuery(document.body) + .append(self.resizerBg) + .append(self.resizer); + self.activeModal.addClass("draged"); + } + self.resizer.css(getResizerPosition(e)); + }) + .bind(ENM["mouseup"] + ".ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }) + .bind("mouseleave.ax5layout-" + this.instanceId, function (e) { + moveModal.off.call(self); + }); + + jQuery(document.body) + .attr('unselectable', 'on') + .css('user-select', 'none') + .on('selectstart', false); + }, + "off": function () { + var setModalPosition = function () { + //console.log(this.activeModal.offset(), this.__dx); + var box = this.activeModal.offset(); + box.left += this.__dx; + box.top += this.__dy; + this.activeModal.css(box); + }; + + if (this.resizer) { + this.activeModal.removeClass("draged"); + this.resizer.remove(); + this.resizer = null; + this.resizerBg.remove(); + this.resizerBg = null; + setModalPosition.call(this); + //this.align(); + } + + jQuery(document.body) + .unbind(ENM["mousemove"] + ".ax5modal-" + cfg.id) + .unbind(ENM["mouseup"] + ".ax5modal-" + cfg.id) + .unbind("mouseleave.ax5modal-" + cfg.id); + + jQuery(document.body) + .removeAttr('unselectable') + .css('user-select', 'auto') + .off('selectstart'); + + } }; /// private end /** * Preferences of modal UI - * @method ax5.ui.modal.setConfig + * @method ax5modal.setConfig * @param {Object} config - 클래스 속성값 - * @returns {ax5.ui.modal} + * @returns {ax5modal} * @example * ``` * ``` @@ -174,40 +370,29 @@ /** * open the modal - * @method ax5.ui.modal.open - * @returns {ax5.ui.modal} + * @method ax5modal.open + * @returns {ax5modal} * @example * ``` * my_modal.open(); * ``` */ this.open = function (opts, callBack) { - if (U.isString(opts)) { - opts = { - title: cfg.title, - msg: opts - } - } - - self.modalConfig = {}; - jQuery.extend(true, self.modalConfig, cfg); - jQuery.extend(true, self.modalConfig, opts); - opts = self.modalConfig; - + opts = self.modalConfig = jQuery.extend(true, {}, cfg, opts); open.call(this, opts, callBack); return this; }; /** * close the modal - * @method ax5.ui.modal.close - * @returns {ax5.ui.modal} + * @method ax5modal.close + * @returns {ax5modal} * @example * ``` * my_modal.close(); * ``` */ - this.close = function (opts, that) { + this.close = function (opts) { if (this.activeModal) { opts = self.modalConfig; this.activeModal.addClass("destroy"); @@ -217,10 +402,6 @@ setTimeout((function () { this.activeModal.remove(); this.activeModal = null; - that = { - self: this, - state: "close" - }; onStateChanged.call(this, opts, { self: this, state: "close" @@ -230,11 +411,56 @@ return this; }; + /** + * @method ax5modal.minimize + * @returns {axClass} + */ + this.minimize = (function () { + + return function (minimizePosition) { + var opts = self.modalConfig; + if (typeof minimizePosition === "undefined") minimizePosition = cfg.minimizePosition; + this.minimized = true; + this.$.body.hide(); + self.modalConfig.originalHeight = opts.height; + self.modalConfig.height = 0; + alignProcessor[minimizePosition].call(this); + + onStateChanged.call(this, opts, { + self: this, + state: "minimize" + }); + + return this; + }; + })(); + + /** + * @method ax5modal.maximize + * @returns {axClass} + */ + this.maximize = function () { + var opts = self.modalConfig; + if (this.minimized) { + this.minimized = false; + this.$.body.show(); + self.modalConfig.height = self.modalConfig.originalHeight; + self.modalConfig.originalHeight = undefined; + + this.align({left: "center", top: "middle"}); + onStateChanged.call(this, opts, { + self: this, + state: "restore" + }); + } + return this; + }; + /** * setCSS - * @method ax5.ui.modal.css + * @method ax5modal.css * @param {Object} css - - * @returns {ax5.ui.modal} + * @returns {ax5modal} */ this.css = function (css) { if (this.activeModal && !self.fullScreen) { @@ -254,14 +480,14 @@ }; /** - * @mothod ax5.ui.modal.align + * @mothod ax5modal.align * @param position * @param e - * @returns {ax5.ui.modal} + * @returns {ax5modal} */ this.align = (function () { - return function(position, e){ + return function (position, e) { if (!this.activeModal) return this; var opts = self.modalConfig, @@ -270,7 +496,9 @@ height: opts.height }; + if (opts.fullScreen) { + if (opts.header) this.$.header.hide(); box.width = jQuery(window).width(); box.height = jQuery(window).height(); box.left = 0; @@ -286,6 +514,10 @@ jQuery.extend(true, opts.position, position); } + if (opts.header) { + box.height += this.$.header.outerHeight(); + } + //- position 정렬 if (opts.position.left == "left") { box.left = (opts.position.margin || 0); @@ -313,6 +545,7 @@ else { box.top = opts.position.top || 0; } + } this.activeModal.css(box); diff --git a/src/scss/_ax5modal.scss b/src/scss/_ax5modal.scss index a6e75c3..5883a0b 100644 --- a/src/scss/_ax5modal.scss +++ b/src/scss/_ax5modal.scss @@ -1,176 +1,274 @@ @mixin ax-modal() { - box-sizing: $ax5modal-box-model; - background-color: $ax5modal-bg; - border: $ax5modal-border; - - @include ax-border-radius($ax5modal-border-radius); - @include box-shadow($ax5modal-box-shaodw); - - z-index: $ax5modal-z-index; - position: fixed; - left: 0px; - top: 0px; - overflow: hidden; + box-sizing: $ax5modal-box-model; + background-color: $ax5modal-bg; + border: $ax5modal-border; + + @include ax-border-radius($ax5modal-border-radius); + @include box-shadow($ax5modal-box-shadow); + + z-index: $ax5modal-z-index; + position: fixed; + left: 0px; + top: 0px; + overflow: hidden; } @mixin ax-modal-section() { - .ax-modal-body { - padding: $ax5modal-body-padding; - text-align: center; - @include flex(1); - position: relative; - iframe { - border: 0px none; - } - } + .ax-modal-header { + @include user-select(none); + //font-size: 1em; + font-weight: 600; + padding: $ax5modal-header-padding; + border-bottom: 1px solid transparent; + cursor: move; + .ax-modal-header-addon{ + position: absolute; + right: 0px; + top: 0px; + padding: $ax5modal-header-addon-padding; + a{ + padding: $ax5modal-header-addon-btn-padding; + background: transparent; + display: inline-block; + text-align: center; + cursor: pointer; + } + } + } + .ax-modal-body { + padding: $ax5modal-body-padding; + text-align: center; + @include flex(1); + position: relative; + iframe { + border: 0px none; + } + } } -@mixin modal-variant() { - .ax-modal-body { +@mixin modal-variant($text-color, $border, $header-bg-color) { + .ax-modal-header { + color: $text-color; + background: $header-bg-color; + .ax-modal-header-addon{ + a{ + color: $text-color; + } + } + } + .ax-modal-body { - } + } } @include keyframes(ax-modal) { - 0% { - opacity: 0.0; - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 0.1% { - opacity: 1.0; - -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 5.9% { - -webkit-transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 7.7% { - -webkit-transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 11.5% { - -webkit-transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 11.7% { - -webkit-transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 15.2% { - -webkit-transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 17.5% { - -webkit-transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 19% { - -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 22.8% { - -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 23.2% { - -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 30.3% { - -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 30.4% { - -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 37.5% { - -webkit-transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 44.6% { - -webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 50.3% { - -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 51.7% { - -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 70.3% { - -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 80.3% { - -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 100% { - -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - + 0% { + opacity: 0.0; + @include transform(translateY(20%)); + } + 100% { + opacity: 1.0; + @include transform(translateY(0)); + } + /* + 0% { + opacity: 0.0; + -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 0.1% { + opacity: 1.0; + -webkit-transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 5.9% { + -webkit-transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.711, 0, 0, 0, 0, 0.742, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 7.7% { + -webkit-transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.768, 0, 0, 0, 0, 0.812, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 11.5% { + -webkit-transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.869, 0, 0, 0, 0, 0.935, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 11.7% { + -webkit-transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.873, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 15.2% { + -webkit-transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.941, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 17.5% { + -webkit-transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.973, 0, 0, 0, 0, 1.045, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 19% { + -webkit-transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.99, 0, 0, 0, 0, 1.058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 22.8% { + -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.019, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 23.2% { + -webkit-transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.021, 0, 0, 0, 0, 1.071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 30.3% { + -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 30.4% { + -webkit-transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.036, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 37.5% { + -webkit-transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 44.6% { + -webkit-transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.016, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 50.3% { + -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.008, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 51.7% { + -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1.006, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 70.3% { + -webkit-transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 80.3% { + -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 100% { + -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + */ } @include keyframes(ax-modal-destroy) { - from { - @include transform(scale(1)); - opacity: 1.0; - } - to { - @include transform(scale(0.5)); - opacity: 0.0; - } + /* + from { + @include transform(scale(1)); + opacity: 1.0; + } + to { + @include transform(scale(0.5)); + opacity: 0.0; + } + */ + 100% { + opacity: 0.0; + @include transform(translateY(20%)); + } + 0% { + opacity: 1.0; + @include transform(translateY(0)); + } + } @include keyframes(ax-modal-fullscreen) { - 0% { - @include transform(translateY(100%)); - } - 100% { - @include transform(translateY(0)); - } + 0% { + @include transform(translateY(20%)); + } + 100% { + @include transform(translateY(0)); + } } @include keyframes(ax-modal-fullscreen-destroy) { - 0% { - @include transform(translateY(0)); - } - 100% { - @include transform(translateY(100%)); - } + 0% { + @include transform(translateY(0)); + } + 100% { + @include transform(translateY(100%)); + } } // mixins --------------------------------------------- end -.ax5-ui-modal { - @include animation(ax-modal 0.7s linear both); - @include transform(translateZ(0px)); - //@include transition(all $ax5modal-easing-time-open linear); +.ax5modal { + @include animation(ax-modal $ax5modal-easing-time-open $ease-out-back forwards); + @include transform(translateZ(0px)); + //@include transition(all $ax5modal-easing-time-open linear); + + @include ax-modal(); + @include ax-modal-section(); + @include modal-variant($ax5modal-default-text, $ax5modal-default-border, $ax5modal-default-header-bg); - @include ax-modal(); - @include ax-modal-section(); - @include modal-variant(); + &.primary { + @include modal-variant($ax5modal-primary-text, $ax5modal-primary-border, $ax5modal-primary-header-bg); + } + &.success { + @include modal-variant($ax5modal-success-text, $ax5modal-success-border, $ax5modal-success-header-bg); + } + &.info { + @include modal-variant($ax5modal-info-text, $ax5modal-info-border, $ax5modal-info-header-bg); + } + &.warning { + @include modal-variant($ax5modal-warning-text, $ax5modal-warning-border, $ax5modal-warning-header-bg); + } + &.danger { + @include modal-variant($ax5modal-danger-text, $ax5modal-danger-border, $ax5modal-danger-header-bg); + } - &.destroy { - @include animation(ax-modal-destroy $ax5modal-easing-time-close $ease-in-back forwards); - } + &.destroy { + @include animation(ax-modal-destroy $ax5modal-easing-time-close $ease-out-back forwards); + } + &.fullscreen { + border: 0px none; + @include ax-border-radius(0px); + @include box-shadow(none); + @include animation(ax-modal-fullscreen $ax5modal-easing-time-open $ease-out-back forwards); + + &.destroy { + @include animation(ax-modal-fullscreen-destroy $ax5modal-easing-time-close $ease-out-expo forwards); + } + } + + &.draged{ + .ax-modal-header { + opacity: 0.5; + } + .ax-modal-body { + opacity: 0.5; + } + } +} + +.ax5modal-resizer-background{ + position: fixed; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + background: transparent; +} +.ax5modal-resizer{ + position: absolute; + left: 0px; + top: 0px; - &.fullscreen{ - border: 0px none; - @include ax-border-radius(0px); - @include box-shadow(none); - @include animation(ax-modal-fullscreen 0.3s $ease-in-back forwards); + z-index: $ax5modal-z-index + 1; + cursor: move; - &.destroy { - @include animation(ax-modal-fullscreen-destroy $ax5modal-easing-time-close $ease-out-expo forwards); - } - } + box-sizing: $ax5modal-box-model; + background-color: $ax5modal-resizer-bg; + border: $ax5modal-resizer-border; + opacity: $ax5modal-resizer-opacity; + @include ax-border-radius($ax5modal-border-radius); + @include box-shadow($ax5modal-box-shadow); } \ No newline at end of file diff --git a/src/scss/_ax5modal_variables.scss b/src/scss/_ax5modal_variables.scss index 0b11cd1..6a7a8ef 100644 --- a/src/scss/_ax5modal_variables.scss +++ b/src/scss/_ax5modal_variables.scss @@ -3,8 +3,44 @@ $ax5modal-z-index: 2000 !default; $ax5modal-box-model: border-box !default; $ax5modal-bg: $panel-bg !default; $ax5modal-border: 1px solid $panel-inner-border !default; -$ax5modal-box-shaodw: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default; +$ax5modal-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default; $ax5modal-body-padding: 0px !default; +$ax5modal-header-padding: $panel-heading-padding !default; + +$ax5modal-header-addon-padding: 10px 10px !default; +$ax5modal-header-addon-btn-padding: 0px 2px !default; + $ax5modal-border-radius: $panel-border-radius !default; $ax5modal-easing-time-open: 0.3s !default; -$ax5modal-easing-time-close: 0.3s !default; \ No newline at end of file +$ax5modal-easing-time-close: 0.3s !default; + +//== modal resizer +$ax5modal-resizer-bg: #ccc !default; +$ax5modal-resizer-border: 3px dotted #ff0000 !default; +$ax5modal-resizer-box-shaodw: 0px 0px 5px 0px rgba(0, 0, 0, 0.60) !default; +$ax5modal-resizer-opacity : 0.3 !default; + +//** Border color for elements within dialog +$ax5modal-default-text: $panel-default-text !default; +$ax5modal-default-border: 1px solid $panel-default-border !default; +$ax5modal-default-header-bg: $panel-default-heading-bg !default; + +$ax5modal-primary-text: $panel-primary-text !default; +$ax5modal-primary-border: 1px solid $panel-primary-border !default; +$ax5modal-primary-header-bg: $panel-primary-heading-bg !default; + +$ax5modal-success-text: $panel-success-text !default; +$ax5modal-success-border: 1px solid $panel-success-border !default; +$ax5modal-success-header-bg: $panel-success-heading-bg !default; + +$ax5modal-info-text: $panel-info-text !default; +$ax5modal-info-border: 1px solid $panel-info-border !default; +$ax5modal-info-header-bg: $panel-info-heading-bg !default; + +$ax5modal-warning-text: $panel-warning-text !default; +$ax5modal-warning-border: 1px solid $panel-warning-border !default; +$ax5modal-warning-header-bg: $panel-warning-heading-bg !default; + +$ax5modal-danger-text: $panel-danger-text !default; +$ax5modal-danger-border: 1px solid $panel-danger-border !default; +$ax5modal-danger-header-bg: $panel-danger-heading-bg !default; \ No newline at end of file diff --git a/test/index.html b/test/index.html index e00ecd5..9e627bd 100644 --- a/test/index.html +++ b/test/index.html @@ -21,9 +21,32 @@