Add frontend assets and plugin bundles
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
Power BI Dev
322
assets/plugins/sweetalert/example/example.css
Normal file
322
assets/plugins/sweetalert/example/example.css
Normal file
@@ -0,0 +1,322 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);
|
||||
body {
|
||||
background-color: #f2f4f6;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-align: center; }
|
||||
|
||||
h1 {
|
||||
background-image: url("images/logo_big.png");
|
||||
background-image: -webkit-image-set(url("images/logo_big.png") 1x, url("images/logo_big@2x.png") 2x);
|
||||
width: 385px;
|
||||
height: 81px;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
margin: 50px auto; }
|
||||
@media all and (max-width: 420px) {
|
||||
h1 {
|
||||
width: 300px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center; } }
|
||||
@media all and (max-width: 330px) {
|
||||
h1 {
|
||||
width: 250px; } }
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
color: #A9B2BC;
|
||||
line-height: 25px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
display: block; }
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
color: #C7CCD1;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
h3#download-section {
|
||||
margin-top: 50px;
|
||||
padding-top: 40px; }
|
||||
h3::after {
|
||||
content: "";
|
||||
background-color: #e2e5e8;
|
||||
height: 4px;
|
||||
width: 700px;
|
||||
left: 50%;
|
||||
margin-left: -350px;
|
||||
position: absolute;
|
||||
margin-top: -50px;
|
||||
border-radius: 2px; }
|
||||
@media all and (max-width: 740px) {
|
||||
h3::after {
|
||||
width: auto;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
margin-left: 0; } }
|
||||
|
||||
a {
|
||||
text-decoration: none; }
|
||||
|
||||
p {
|
||||
max-width: 826px;
|
||||
margin: 30px auto;
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
color: #848D94;
|
||||
line-height: 25px;
|
||||
text-align: left; }
|
||||
p.center {
|
||||
text-align: center; }
|
||||
p strong {
|
||||
color: #8A8F94;
|
||||
font-weight: 600; }
|
||||
p a {
|
||||
color: #9ECADF;
|
||||
font-weight: 600; }
|
||||
p a:hover {
|
||||
text-decoration: underline; }
|
||||
p a.twitter {
|
||||
color: #5eaade; }
|
||||
p a.dribbble {
|
||||
color: #f26798; }
|
||||
p a.github {
|
||||
color: #323131; }
|
||||
|
||||
button, .button {
|
||||
background-color: #AEDEF4;
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
padding: 15px 35px;
|
||||
margin: 26px 5px 0 5px;
|
||||
cursor: pointer; }
|
||||
button:focus, .button:focus {
|
||||
outline: none; }
|
||||
button:hover, .button:hover {
|
||||
background-color: #a1d9f2; }
|
||||
button:active, .button:active {
|
||||
background-color: #81ccee; }
|
||||
button.cancel, .button.cancel {
|
||||
background-color: #D0D0D0; }
|
||||
button.cancel:hover, .button.cancel:hover {
|
||||
background-color: #c8c8c8; }
|
||||
button.cancel:active, .button.cancel:active {
|
||||
background-color: #b6b6b6; }
|
||||
button.download, .button.download {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
top: 0;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
color: #ABCADA;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
z-index: 3; }
|
||||
@media all and (max-width: 1278px) {
|
||||
button.download, .button.download {
|
||||
display: none; } }
|
||||
|
||||
.center-container {
|
||||
max-width: 700px;
|
||||
margin: 70px auto; }
|
||||
|
||||
pre {
|
||||
background-color: #49483e;
|
||||
color: #f8f8f2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
white-space: pre-line;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
max-width: 600px; }
|
||||
pre .str {
|
||||
color: #e6db74; }
|
||||
pre .func {
|
||||
color: #66d9ef; }
|
||||
pre .val {
|
||||
color: #a381ff; }
|
||||
pre .tag {
|
||||
color: #e92772; }
|
||||
pre .attr {
|
||||
color: #a6e22d; }
|
||||
|
||||
.showcase {
|
||||
background-color: #eceef0;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
width: 383px;
|
||||
vertical-align: top;
|
||||
position: relative; }
|
||||
@media all and (max-width: 865px) {
|
||||
.showcase {
|
||||
margin: 5px auto;
|
||||
padding: 46px 20px; } }
|
||||
@media all and (max-width: 440px) {
|
||||
.showcase {
|
||||
width: auto; } }
|
||||
.showcase h4 {
|
||||
font-size: 16px;
|
||||
color: #BCBCBC;
|
||||
line-height: 22px;
|
||||
margin: 0 auto;
|
||||
font-weight: 400; }
|
||||
.showcase.sweet h4 {
|
||||
width: 117px;
|
||||
height: 25px;
|
||||
margin-top: -3px;
|
||||
text-indent: -9999px;
|
||||
background-image: url("images/logo_small.png");
|
||||
background-image: -webkit-image-set(url("images/logo_small.png") 1x, url("images/logo_small@2x.png") 2x); }
|
||||
.showcase h5 {
|
||||
margin-bottom: -7px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: #c2c2c2; }
|
||||
.showcase button {
|
||||
margin-bottom: 10px; }
|
||||
.showcase .vs-icon {
|
||||
background-image: url("images/vs_icon.png");
|
||||
background-image: -webkit-image-set(url("images/vs_icon.png") 1x, url("images/vs_icon@2x.png") 2x);
|
||||
width: 69px;
|
||||
height: 69px;
|
||||
position: absolute;
|
||||
right: -34px;
|
||||
top: 60px;
|
||||
z-index: 2; }
|
||||
@media all and (max-width: 865px) {
|
||||
.showcase .vs-icon {
|
||||
margin: 5px auto;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -35px;
|
||||
top: auto;
|
||||
bottom: -35px; } }
|
||||
|
||||
ul.examples {
|
||||
list-style-type: none;
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
padding-left: 0; }
|
||||
@media all and (max-width: 758px) {
|
||||
ul.examples {
|
||||
width: auto; } }
|
||||
ul.examples li {
|
||||
padding-left: 0; }
|
||||
ul.examples .ui, ul.examples pre {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
@media all and (max-width: 758px) {
|
||||
ul.examples .ui, ul.examples pre {
|
||||
display: block;
|
||||
max-width: none;
|
||||
margin: 0 auto; } }
|
||||
ul.examples .ui {
|
||||
width: 300px;
|
||||
text-align: center; }
|
||||
ul.examples .ui button {
|
||||
margin-top: 12px; }
|
||||
ul.examples .ui p {
|
||||
text-align: center;
|
||||
margin-bottom: 0; }
|
||||
ul.examples pre {
|
||||
max-width: 370px;
|
||||
margin-top: 67px; }
|
||||
@media all and (max-width: 758px) {
|
||||
ul.examples pre {
|
||||
margin-top: 16px !important;
|
||||
margin-bottom: 60px; } }
|
||||
ul.examples .warning pre {
|
||||
margin-top: 93px; }
|
||||
|
||||
ol {
|
||||
max-width: 700px;
|
||||
margin: 70px auto;
|
||||
list-style-position: inside;
|
||||
padding-left: 0; }
|
||||
ol li {
|
||||
color: #A7ADB2; }
|
||||
ol li p {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
table {
|
||||
width: 700px;
|
||||
font-size: 14px;
|
||||
color: #8a8f94;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
border-collapse: collapse; }
|
||||
@media all and (max-width: 750px) {
|
||||
table {
|
||||
width: auto;
|
||||
margin: 10px 20px; } }
|
||||
table th {
|
||||
background-color: white;
|
||||
padding: 9px;
|
||||
color: #acb9be;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
table th .border-left, table th .border-right {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: -17px;
|
||||
width: 37px;
|
||||
height: 37px; }
|
||||
table th .border-right {
|
||||
left: auto;
|
||||
right: -17px; }
|
||||
@media all and (max-width: 750px) {
|
||||
table th:nth-child(2) {
|
||||
display: none; } }
|
||||
table td {
|
||||
padding: 10px 20px;
|
||||
vertical-align: top; }
|
||||
table td:first-child {
|
||||
padding-left: 0px; }
|
||||
table td:last-child {
|
||||
padding-right: 0px; }
|
||||
@media all and (max-width: 750px) {
|
||||
table td:nth-child(2) {
|
||||
display: none; } }
|
||||
@media all and (max-width: 360px) {
|
||||
table td {
|
||||
padding: 10px 4px; }
|
||||
table td b {
|
||||
font-size: 13px; } }
|
||||
|
||||
footer {
|
||||
margin-top: 100px;
|
||||
padding-bottom: 30px;
|
||||
color: #9A999F;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
color: #93a1aa;
|
||||
font-weight: 300; }
|
||||
footer .te-logo {
|
||||
text-indent: -99999px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-image: url("images/te-logo-small.svg");
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: 3px; }
|
||||
412
assets/plugins/sweetalert/example/example.scss
Normal file
412
assets/plugins/sweetalert/example/example.scss
Normal file
@@ -0,0 +1,412 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300); // Open Sans font
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700); // Condensed
|
||||
|
||||
@mixin retina-background($url, $type:png) {
|
||||
background-image: url("#{$url}.#{$type}");
|
||||
background-image: -webkit-image-set(url("#{$url}.#{$type}") 1x,
|
||||
url("#{$url}@2x.#{$type}") 2x);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f2f4f6;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include retina-background("images/logo_big");
|
||||
width: 385px;
|
||||
height: 81px;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
margin: 50px auto;
|
||||
@media all and (max-width: 420px) {
|
||||
width: 300px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
@media all and (max-width: 330px) {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
color: #A9B2BC;
|
||||
line-height: 25px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
color: #C7CCD1;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&#download-section {
|
||||
margin-top: 50px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
background-color: #e2e5e8;
|
||||
height: 4px;
|
||||
width: 700px;
|
||||
left: 50%;
|
||||
margin-left: -350px;
|
||||
position: absolute;
|
||||
margin-top: -50px;
|
||||
border-radius: 2px;
|
||||
|
||||
@media all and (max-width: 740px) {
|
||||
width: auto;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 826px;
|
||||
margin: 30px auto;
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
color: #848D94;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #8A8F94;
|
||||
font-weight: 600;
|
||||
}
|
||||
a {
|
||||
color: #9ECADF;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.twitter {
|
||||
color: #5eaade;
|
||||
}
|
||||
&.dribbble {
|
||||
color: #f26798;
|
||||
}
|
||||
&.github {
|
||||
color: #323131;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button, .button {
|
||||
$btnBlue: #AEDEF4;
|
||||
$btnGray: #D0D0D0;
|
||||
|
||||
background-color: $btnBlue;
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
padding: 15px 35px;
|
||||
margin: 26px 5px 0 5px;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken($btnBlue, 3%);
|
||||
}
|
||||
&:active {
|
||||
background-color: darken($btnBlue, 10%);
|
||||
}
|
||||
&.cancel {
|
||||
background-color: $btnGray;
|
||||
&:hover {
|
||||
background-color: darken($btnGray, 3%);
|
||||
}
|
||||
&:active {
|
||||
background-color: darken($btnGray, 10%);
|
||||
}
|
||||
}
|
||||
&.download {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
top: 0;
|
||||
background-color: rgba(white, 0.9);
|
||||
color: #ABCADA;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
z-index: 3;
|
||||
|
||||
@media all and (max-width: 1278px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-container {
|
||||
max-width: 700px;
|
||||
margin: 70px auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #49483e;
|
||||
color: #f8f8f2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
white-space: pre-line;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
max-width: 600px;
|
||||
|
||||
.str {
|
||||
color: #e6db74;
|
||||
}
|
||||
.func {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.val {
|
||||
color: #a381ff;
|
||||
}
|
||||
.tag {
|
||||
color: #e92772;
|
||||
}
|
||||
.attr {
|
||||
color: #a6e22d;
|
||||
}
|
||||
}
|
||||
|
||||
.showcase {
|
||||
background-color: #eceef0;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
width: 383px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
@media all and (max-width: 865px) {
|
||||
margin: 5px auto;
|
||||
padding: 46px 20px;
|
||||
}
|
||||
@media all and (max-width: 440px) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
color: #BCBCBC;
|
||||
line-height: 22px;
|
||||
margin: 0 auto;
|
||||
font-weight: 400;
|
||||
}
|
||||
&.sweet h4 {
|
||||
width: 117px;
|
||||
height: 25px;
|
||||
margin-top: -3px;
|
||||
text-indent: -9999px;
|
||||
@include retina-background("images/logo_small");
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: -7px;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgb(194, 194, 194);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.vs-icon {
|
||||
@include retina-background("images/vs_icon");
|
||||
width: 69px;
|
||||
height: 69px;
|
||||
position: absolute;
|
||||
right: -34px;
|
||||
top: 60px;
|
||||
z-index: 2;
|
||||
|
||||
@media all and (max-width: 865px) {
|
||||
margin: 5px auto;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -35px;
|
||||
top: auto;
|
||||
bottom: -35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ul.examples {
|
||||
list-style-type: none;
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
@media all and (max-width: 758px) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ui, pre {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
@media all and (max-width: 758px) {
|
||||
display: block;
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.ui {
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 370px;
|
||||
margin-top: 67px;
|
||||
|
||||
@media all and (max-width: 758px) {
|
||||
margin-top: 16px !important;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
}
|
||||
.warning pre {
|
||||
margin-top: 93px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ol {
|
||||
max-width: 700px;
|
||||
margin: 70px auto;
|
||||
list-style-position: inside;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
color: #A7ADB2;
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
width: 700px;
|
||||
font-size: 14px;
|
||||
color: #8a8f94;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
@media all and (max-width: 750px) {
|
||||
width: auto;
|
||||
margin: 10px 20px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: white;
|
||||
padding: 9px;
|
||||
color: rgb(172, 185, 190);
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.border-left, .border-right {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
left: -17px;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
.border-right {
|
||||
left: auto;
|
||||
right: -17px;
|
||||
}
|
||||
@media all and (max-width: 750px) {
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
vertical-align: top;
|
||||
&:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0px;
|
||||
}
|
||||
@media all and (max-width: 750px) {
|
||||
&:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 360px) {
|
||||
padding: 10px 4px;
|
||||
b {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 100px;
|
||||
padding-bottom: 30px;
|
||||
color: #9A999F;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
color: rgb(147, 161, 170);
|
||||
font-weight: 300;
|
||||
|
||||
.te-logo {
|
||||
text-indent: -99999px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-image: url("images/te-logo-small.svg");
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
BIN
assets/plugins/sweetalert/example/images/logo_big.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
assets/plugins/sweetalert/example/images/logo_big@2x.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_big@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
assets/plugins/sweetalert/example/images/logo_small.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
assets/plugins/sweetalert/example/images/logo_small@2x.png
Normal file
BIN
assets/plugins/sweetalert/example/images/logo_small@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
12
assets/plugins/sweetalert/example/images/te-logo-small.svg
Normal file
12
assets/plugins/sweetalert/example/images/te-logo-small.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="14px" height="11px" viewBox="0 0 14 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.0.4 (8053) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>te-logo-small</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Website" sketch:type="MSArtboardGroup" transform="translate(-520.000000, -1871.000000)" fill="#AFC1C9">
|
||||
<path d="M526.768,1871.832 L524.416,1871.832 L524.416,1881.672 L523.488,1881.672 L523.488,1871.832 L520,1871.832 L520,1871 L527.336,1871 L533.536,1871 L533.536,1871.832 L527.68,1871.832 L527.68,1875.784 L533.424,1875.784 L533.424,1876.616 L527.68,1876.616 L527.68,1880.84 L533.536,1880.84 L533.536,1881.672 L526.768,1881.672 L526.768,1871.832 Z" id="te-logo-small" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
assets/plugins/sweetalert/example/images/thumbs-up.jpg
Normal file
BIN
assets/plugins/sweetalert/example/images/thumbs-up.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
assets/plugins/sweetalert/example/images/vs_icon.png
Normal file
BIN
assets/plugins/sweetalert/example/images/vs_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
assets/plugins/sweetalert/example/images/vs_icon@2x.png
Normal file
BIN
assets/plugins/sweetalert/example/images/vs_icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
339
assets/plugins/sweetalert/example/index.html
Normal file
339
assets/plugins/sweetalert/example/index.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE HTML>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<title>SweetAlert</title>
|
||||
|
||||
<link rel="stylesheet" href="./example.css">
|
||||
|
||||
<!-- This is what you need -->
|
||||
<script src="../lib/sweet-alert.js"></script>
|
||||
<link rel="stylesheet" href="../lib/sweet-alert.css">
|
||||
<!--.......................-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Sweet Alert</h1>
|
||||
<h2>A beautiful replacement for Javascript's "Alert"</h2>
|
||||
<button class="download">Download</button>
|
||||
|
||||
<!-- What does it do? -->
|
||||
<h3>So... What does it do?</h3>
|
||||
<p>Here’s a comparison of a standard error message. The first one uses the built-in <strong>alert</strong>-function, while the second is using <strong>sweetAlert</strong>.</p>
|
||||
|
||||
<div class="showcase normal">
|
||||
<h4>Normal alert</h4>
|
||||
<button>Show error message</button>
|
||||
|
||||
<h5>Code:</h5>
|
||||
<pre><span class="func">alert</span>(<span class="str">"Oops... Something went wrong!"</span>);
|
||||
|
||||
</pre>
|
||||
|
||||
<div class="vs-icon"></div>
|
||||
</div>
|
||||
|
||||
<div class="showcase sweet">
|
||||
<h4>Sweet Alert</h4>
|
||||
<button>Show error message</button>
|
||||
|
||||
<h5>Code:</h5>
|
||||
<pre>sweetAlert(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);</pre>
|
||||
</div>
|
||||
|
||||
<p>Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
|
||||
|
||||
|
||||
<!-- Examples -->
|
||||
<h3>More examples</h3>
|
||||
|
||||
<p class="center">In these examples, we're using the shorthand function <strong>swal</strong> to call sweetAlert.</p>
|
||||
|
||||
<ul class="examples">
|
||||
|
||||
<li class="message">
|
||||
<div class="ui">
|
||||
<p>A basic message</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal(<span class="str">"Here's a message!"</span>)</pre>
|
||||
</li>
|
||||
|
||||
<li class="title-text">
|
||||
<div class="ui">
|
||||
<p>A title with a text under</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it?"</span>)</pre>
|
||||
</li>
|
||||
|
||||
<li class="success">
|
||||
<div class="ui">
|
||||
<p>A success message!</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)</pre>
|
||||
</li>
|
||||
|
||||
<li class="warning confirm">
|
||||
<div class="ui">
|
||||
<p>A warning message, with a function attached to the "Confirm"-button...</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Are you sure?"</span>,
|
||||
text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
|
||||
type: <span class="str">"warning"</span>,
|
||||
showCancelButton: <span class="val">true</span>,
|
||||
confirmButtonColor: <span class="str">"#DD6B55"</span>,
|
||||
confirmButtonText: <span class="str">"Yes, delete it!"</span>,
|
||||
closeOnConfirm: <span class="val">false</span>
|
||||
},
|
||||
<span class="func"><i>function</i></span>(){
|
||||
<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
|
||||
});</pre>
|
||||
</li>
|
||||
|
||||
<li class="warning cancel">
|
||||
<div class="ui">
|
||||
<p>... and by passing a parameter, you can execute something else for "Cancel".</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Are you sure?"</span>,
|
||||
text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
|
||||
type: <span class="str">"warning"</span>,
|
||||
showCancelButton: <span class="val">true</span>,
|
||||
confirmButtonColor: <span class="str">"#DD6B55"</span>,
|
||||
confirmButtonText: <span class="str">"Yes, delete it!"</span>,
|
||||
cancelButtonText: <span class="str">"No, cancel plx!"</span>,
|
||||
closeOnConfirm: <span class="val">false</span>,
|
||||
closeOnCancel: <span class="val">false</span>
|
||||
},
|
||||
<span class="func"><i>function</i></span>(isConfirm){
|
||||
<span class="tag">if</span> (isConfirm) {
|
||||
<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
|
||||
} <span class="tag">else</span> {
|
||||
<span class="func">swal</span>(<span class="str">"Cancelled"</span>, <span class="str">"Your imaginary file is safe :)"</span>, <span class="str">"error"</span>);
|
||||
}
|
||||
});</pre>
|
||||
</li>
|
||||
|
||||
<li class="custom-icon">
|
||||
<div class="ui">
|
||||
<p>A message with a custom icon</p>
|
||||
<button>Try me!</button>
|
||||
</div>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Sweet!"</span>,
|
||||
text: <span class="str">"Here's a custom image."</span>,
|
||||
imageUrl: <span class="str">"images/thumbs-up.jpg"</span>
|
||||
});</pre>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- Download & Install -->
|
||||
<h3 id="download-section">Download & install</h3>
|
||||
|
||||
<div class="center-container">
|
||||
<p class="center"><b>Method 1:</b> Install through bower:</p>
|
||||
<pre class="center">$ bower install sweetalert</pre>
|
||||
</div>
|
||||
|
||||
<p class="center"><b>Method 2:</b> Download the sweetAlert <strong>CSS</strong> and <strong>JavaScript</strong> files.</p>
|
||||
|
||||
<a class="button" href="https://github.com/t4t5/sweetalert/archive/master.zip" download>Download files</a>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<p>Initialize the plugin by referencing the necessary files:</p>
|
||||
<pre><<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"lib/sweet-alert.min.js"</span>></<span class="tag">script</span>>
|
||||
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"lib/sweet-alert.css"</span>></pre>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p>Call the sweetAlert-function after the page has loaded</p>
|
||||
<pre>swal({
|
||||
title: <span class="str">"Error!"</span>,
|
||||
text: <span class="str">"Here's my error message!"</span>,
|
||||
type: <span class="str">"error"</span>,
|
||||
confirmButtonText: <span class="str">"Cool"</span>
|
||||
});
|
||||
</pre>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<!-- Configuration -->
|
||||
<h3>Configuration</h3>
|
||||
|
||||
<p class="center">Here are the keys that you can use if you pass an object into sweetAlert:</p>
|
||||
|
||||
<table>
|
||||
<tr class="titles">
|
||||
<th>
|
||||
<div class="border-left"></div>
|
||||
Argument
|
||||
</th>
|
||||
<th>Default value</th>
|
||||
<th>
|
||||
<div class="border-right"></div>
|
||||
Description
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>title</b></td>
|
||||
<td><i>null (required)</i></td>
|
||||
<td>The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>text</b></td>
|
||||
<td><i>null</i></td>
|
||||
<td>A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>type</b></td>
|
||||
<td><i>null</i></td>
|
||||
<td>The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "<strong>warning</strong>", "<strong>error</strong>", "<strong>success</strong>" and "<strong>info"</strong>. It can either be put in the array under the key "type" or passed as the third parameter of the function.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>allowOutsideClick</b></td>
|
||||
<td><i>false</i></td>
|
||||
<td>If set to <strong>true</strong>, the user can dismiss the modal by clicking outside it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>showCancelButton</b></td>
|
||||
<td><i>false</i></td>
|
||||
<td>If set to <strong>true</strong>, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>confirmButtonText</b></td>
|
||||
<td><i>"OK"</i></td>
|
||||
<td>Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>confirmButtonColor</b></td>
|
||||
<td><i>"#AEDEF4"</i></td>
|
||||
<td>Use this to change the background color of the "Confirm"-button (must be a HEX value).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>cancelButtonText</b></td>
|
||||
<td><i>"Cancel"</i></td>
|
||||
<td>Use this to change the text on the "Cancel"-button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>closeOnConfirm</b></td>
|
||||
<td><i>true</i></td>
|
||||
<td>Set to <i>false</i> if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>imageUrl</b></td>
|
||||
<td><i>null</i></td>
|
||||
<td>Add a customized icon for the modal. Should contain a string with the path to the image.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>imageSize</b></td>
|
||||
<td><i>"80x80"</i></td>
|
||||
<td>If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!-- Contribute -->
|
||||
<h3>Contribute</h3>
|
||||
<p>SweetAlert was created by <a href="http://tristanedwards.me" target="_blank">Tristan Edwards</a>, you can follow him on <a href="https://twitter.com/t4t5" target="_blank" class="twitter">Twitter</a> or <a href="https://dribbble.com/tristanedwards" target="_blank" class="dribbble">Dribbble</a> for updates and other cool projects!</p>
|
||||
<p>Feel free to fork sweetAlert on <a href="https://github.com/t4t5/sweetalert" class="github">GitHub</a> if you have any features that you want to add!</p>
|
||||
|
||||
|
||||
<footer>
|
||||
<span class="te-logo">TE</span> • 2014
|
||||
</footer>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
document.querySelector('button.download').onclick = function(){
|
||||
$("html, body").animate({ scrollTop: $("#download-section").offset().top }, 1000);
|
||||
};
|
||||
|
||||
document.querySelector('.showcase.normal button').onclick = function(){
|
||||
alert("Oops... Something went wrong!");
|
||||
};
|
||||
|
||||
document.querySelector('.showcase.sweet button').onclick = function(){
|
||||
swal("Oops...", "Something went wrong!", "error");
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.message button').onclick = function(){
|
||||
swal("Here's a message!");
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.title-text button').onclick = function(){
|
||||
swal("Here's a message!", "It's pretty, isn't it?")
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.success button').onclick = function(){
|
||||
swal("Good job!", "You clicked the button!", "success");
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#DD6B55',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
closeOnConfirm: false,
|
||||
//closeOnCancel: false
|
||||
},
|
||||
function(){
|
||||
swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.warning.cancel button').onclick = function(){
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#DD6B55',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: "No, cancel plx!",
|
||||
closeOnConfirm: false,
|
||||
closeOnCancel: false
|
||||
},
|
||||
function(isConfirm){
|
||||
if (isConfirm){
|
||||
swal("Deleted!", "Your imaginary file has been deleted!", "success");
|
||||
} else {
|
||||
swal("Cancelled", "Your imaginary file is safe :)", "error");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelector('ul.examples li.custom-icon button').onclick = function(){
|
||||
swal({
|
||||
title: "Sweet!",
|
||||
text: "Here's a custom image.",
|
||||
imageUrl: 'images/thumbs-up.jpg'
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
605
assets/plugins/sweetalert/sweet-alert.css
Normal file
605
assets/plugins/sweetalert/sweet-alert.css
Normal file
@@ -0,0 +1,605 @@
|
||||
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
|
||||
.sweet-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
z-index: 1000; }
|
||||
|
||||
.sweet-alert {
|
||||
background-color: white;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
width: 478px;
|
||||
padding: 17px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -256px;
|
||||
margin-top: -200px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
z-index: 2000; }
|
||||
@media all and (max-width: 540px) {
|
||||
.sweet-alert {
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
left: 15px;
|
||||
right: 15px; } }
|
||||
.sweet-alert h2 {
|
||||
color: #575757;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
text-transform: none;
|
||||
position: relative; }
|
||||
.sweet-alert p {
|
||||
color: #797979;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
line-height: normal; }
|
||||
.sweet-alert button {
|
||||
background-color: #AEDEF4;
|
||||
color: white;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
border-radius: 5px;
|
||||
padding: 10px 32px;
|
||||
margin: 26px 5px 0 5px;
|
||||
cursor: pointer; }
|
||||
.sweet-alert button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
|
||||
.sweet-alert button:hover {
|
||||
background-color: #a1d9f2; }
|
||||
.sweet-alert button:active {
|
||||
background-color: #81ccee; }
|
||||
.sweet-alert button.cancel {
|
||||
background-color: #D0D0D0; }
|
||||
.sweet-alert button.cancel:hover {
|
||||
background-color: #c8c8c8; }
|
||||
.sweet-alert button.cancel:active {
|
||||
background-color: #b6b6b6; }
|
||||
.sweet-alert button.cancel:focus {
|
||||
box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
|
||||
.sweet-alert button::-moz-focus-inner {
|
||||
border: 0; }
|
||||
.sweet-alert[data-has-cancel-button=false] button {
|
||||
box-shadow: none !important; }
|
||||
.sweet-alert .icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid gray;
|
||||
border-radius: 50%;
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
box-sizing: content-box; }
|
||||
.sweet-alert .icon.error {
|
||||
border-color: #F27474; }
|
||||
.sweet-alert .icon.error .x-mark {
|
||||
position: relative;
|
||||
display: block; }
|
||||
.sweet-alert .icon.error .line {
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
width: 47px;
|
||||
background-color: #F27474;
|
||||
display: block;
|
||||
top: 37px;
|
||||
border-radius: 2px; }
|
||||
.sweet-alert .icon.error .line.left {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
left: 17px; }
|
||||
.sweet-alert .icon.error .line.right {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 16px; }
|
||||
.sweet-alert .icon.warning {
|
||||
border-color: #F8BB86; }
|
||||
.sweet-alert .icon.warning .body {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 47px;
|
||||
left: 50%;
|
||||
top: 10px;
|
||||
border-radius: 2px;
|
||||
margin-left: -2px;
|
||||
background-color: #F8BB86; }
|
||||
.sweet-alert .icon.warning .dot {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
margin-left: -3px;
|
||||
left: 50%;
|
||||
bottom: 10px;
|
||||
background-color: #F8BB86; }
|
||||
.sweet-alert .icon.info {
|
||||
border-color: #C9DAE1; }
|
||||
.sweet-alert .icon.info::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 29px;
|
||||
left: 50%;
|
||||
bottom: 17px;
|
||||
border-radius: 2px;
|
||||
margin-left: -2px;
|
||||
background-color: #C9DAE1; }
|
||||
.sweet-alert .icon.info::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
margin-left: -3px;
|
||||
top: 19px;
|
||||
background-color: #C9DAE1; }
|
||||
.sweet-alert .icon.success {
|
||||
border-color: #A5DC86; }
|
||||
.sweet-alert .icon.success::before, .sweet-alert .icon.success::after {
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
background: white;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
.sweet-alert .icon.success::before {
|
||||
border-radius: 120px 0 0 120px;
|
||||
top: -7px;
|
||||
left: -33px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform-origin: 60px 60px;
|
||||
transform-origin: 60px 60px; }
|
||||
.sweet-alert .icon.success::after {
|
||||
border-radius: 0 120px 120px 0;
|
||||
top: -11px;
|
||||
left: 30px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform-origin: 0px 60px;
|
||||
transform-origin: 0px 60px; }
|
||||
.sweet-alert .icon.success .placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 4px solid rgba(165, 220, 134, 0.2);
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
z-index: 2; }
|
||||
.sweet-alert .icon.success .fix {
|
||||
width: 5px;
|
||||
height: 90px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
top: 8px;
|
||||
z-index: 1;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.sweet-alert .icon.success .line {
|
||||
height: 5px;
|
||||
background-color: #A5DC86;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 2; }
|
||||
.sweet-alert .icon.success .line.tip {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 46px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
.sweet-alert .icon.success .line.long {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.sweet-alert .icon.custom {
|
||||
background-size: contain;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat; }
|
||||
|
||||
/*
|
||||
* Animations
|
||||
*/
|
||||
@-webkit-keyframes showSweetAlert {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7); }
|
||||
45% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05); }
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
-webkit-tranform: scale(0.95); }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); } }
|
||||
@-moz-keyframes showSweetAlert {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7); }
|
||||
45% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05); }
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
-webkit-tranform: scale(0.95); }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); } }
|
||||
@keyframes showSweetAlert {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
-webkit-transform: scale(0.7); }
|
||||
45% {
|
||||
transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05); }
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
-webkit-tranform: scale(0.95); }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); } }
|
||||
@-webkit-keyframes hideSweetAlert {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); }
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5); } }
|
||||
@-moz-keyframes hideSweetAlert {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); }
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5); } }
|
||||
@keyframes hideSweetAlert {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1); }
|
||||
100% {
|
||||
transform: scale(0.5);
|
||||
-webkit-transform: scale(0.5); } }
|
||||
.showSweetAlert {
|
||||
-webkit-animation: showSweetAlert 0.3s;
|
||||
-moz-animation: showSweetAlert 0.3s;
|
||||
animation: showSweetAlert 0.3s; }
|
||||
|
||||
.hideSweetAlert {
|
||||
-webkit-animation: hideSweetAlert 0.2s;
|
||||
-moz-animation: hideSweetAlert 0.2s;
|
||||
animation: hideSweetAlert 0.2s; }
|
||||
|
||||
@-webkit-keyframes animateSuccessTip {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -8px;
|
||||
top: 37px; }
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px; }
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px; } }
|
||||
@-moz-keyframes animateSuccessTip {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -8px;
|
||||
top: 37px; }
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px; }
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px; } }
|
||||
@keyframes animateSuccessTip {
|
||||
0% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
54% {
|
||||
width: 0;
|
||||
left: 1px;
|
||||
top: 19px; }
|
||||
70% {
|
||||
width: 50px;
|
||||
left: -8px;
|
||||
top: 37px; }
|
||||
84% {
|
||||
width: 17px;
|
||||
left: 21px;
|
||||
top: 48px; }
|
||||
100% {
|
||||
width: 25px;
|
||||
left: 14px;
|
||||
top: 45px; } }
|
||||
@-webkit-keyframes animateSuccessLong {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px; }
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px; } }
|
||||
@-moz-keyframes animateSuccessLong {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px; }
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px; } }
|
||||
@keyframes animateSuccessLong {
|
||||
0% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
65% {
|
||||
width: 0;
|
||||
right: 46px;
|
||||
top: 54px; }
|
||||
84% {
|
||||
width: 55px;
|
||||
right: 0px;
|
||||
top: 35px; }
|
||||
100% {
|
||||
width: 47px;
|
||||
right: 8px;
|
||||
top: 38px; } }
|
||||
@-webkit-keyframes rotatePlaceholder {
|
||||
0% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
5% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
12% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); }
|
||||
100% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); } }
|
||||
@-moz-keyframes rotatePlaceholder {
|
||||
0% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
5% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
12% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); }
|
||||
100% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); } }
|
||||
@keyframes rotatePlaceholder {
|
||||
0% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
5% {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg); }
|
||||
12% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); }
|
||||
100% {
|
||||
transform: rotate(-405deg);
|
||||
-webkit-transform: rotate(-405deg); } }
|
||||
.animateSuccessTip {
|
||||
-webkit-animation: animateSuccessTip 0.75s;
|
||||
-moz-animation: animateSuccessTip 0.75s;
|
||||
animation: animateSuccessTip 0.75s; }
|
||||
|
||||
.animateSuccessLong {
|
||||
-webkit-animation: animateSuccessLong 0.75s;
|
||||
-moz-animation: animateSuccessLong 0.75s;
|
||||
animation: animateSuccessLong 0.75s; }
|
||||
|
||||
.icon.success.animate::after {
|
||||
-webkit-animation: rotatePlaceholder 4.25s ease-in;
|
||||
-moz-animation: rotatePlaceholder 4.25s ease-in;
|
||||
animation: rotatePlaceholder 4.25s ease-in; }
|
||||
|
||||
@-webkit-keyframes animateErrorIcon {
|
||||
0% {
|
||||
transform: rotateX(100deg);
|
||||
-webkit-transform: rotateX(100deg);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
opacity: 1; } }
|
||||
@-moz-keyframes animateErrorIcon {
|
||||
0% {
|
||||
transform: rotateX(100deg);
|
||||
-webkit-transform: rotateX(100deg);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
opacity: 1; } }
|
||||
@keyframes animateErrorIcon {
|
||||
0% {
|
||||
transform: rotateX(100deg);
|
||||
-webkit-transform: rotateX(100deg);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: rotateX(0deg);
|
||||
-webkit-transform: rotateX(0deg);
|
||||
opacity: 1; } }
|
||||
.animateErrorIcon {
|
||||
-webkit-animation: animateErrorIcon 0.5s;
|
||||
-moz-animation: animateErrorIcon 0.5s;
|
||||
animation: animateErrorIcon 0.5s; }
|
||||
|
||||
@-webkit-keyframes animateXMark {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: scale(1.15);
|
||||
-webkit-transform: scale(1.15);
|
||||
margin-top: -6px; }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
margin-top: 0;
|
||||
opacity: 1; } }
|
||||
@-moz-keyframes animateXMark {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: scale(1.15);
|
||||
-webkit-transform: scale(1.15);
|
||||
margin-top: -6px; }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
margin-top: 0;
|
||||
opacity: 1; } }
|
||||
@keyframes animateXMark {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
50% {
|
||||
transform: scale(0.4);
|
||||
-webkit-transform: scale(0.4);
|
||||
margin-top: 26px;
|
||||
opacity: 0; }
|
||||
80% {
|
||||
transform: scale(1.15);
|
||||
-webkit-transform: scale(1.15);
|
||||
margin-top: -6px; }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
margin-top: 0;
|
||||
opacity: 1; } }
|
||||
.animateXMark {
|
||||
-webkit-animation: animateXMark 0.5s;
|
||||
-moz-animation: animateXMark 0.5s;
|
||||
animation: animateXMark 0.5s; }
|
||||
|
||||
/*@include keyframes(simpleRotate) {
|
||||
0% { transform: rotateY(0deg); }
|
||||
100% { transform: rotateY(-360deg); }
|
||||
}
|
||||
.simpleRotate {
|
||||
@include animation('simpleRotate 0.75s');
|
||||
}*/
|
||||
@-webkit-keyframes pulseWarning {
|
||||
0% {
|
||||
border-color: #F8D486; }
|
||||
100% {
|
||||
border-color: #F8BB86; } }
|
||||
@-moz-keyframes pulseWarning {
|
||||
0% {
|
||||
border-color: #F8D486; }
|
||||
100% {
|
||||
border-color: #F8BB86; } }
|
||||
@keyframes pulseWarning {
|
||||
0% {
|
||||
border-color: #F8D486; }
|
||||
100% {
|
||||
border-color: #F8BB86; } }
|
||||
.pulseWarning {
|
||||
-webkit-animation: pulseWarning 0.75s infinite alternate;
|
||||
-moz-animation: pulseWarning 0.75s infinite alternate;
|
||||
animation: pulseWarning 0.75s infinite alternate; }
|
||||
|
||||
@-webkit-keyframes pulseWarningIns {
|
||||
0% {
|
||||
background-color: #F8D486; }
|
||||
100% {
|
||||
background-color: #F8BB86; } }
|
||||
@-moz-keyframes pulseWarningIns {
|
||||
0% {
|
||||
background-color: #F8D486; }
|
||||
100% {
|
||||
background-color: #F8BB86; } }
|
||||
@keyframes pulseWarningIns {
|
||||
0% {
|
||||
background-color: #F8D486; }
|
||||
100% {
|
||||
background-color: #F8BB86; } }
|
||||
.pulseWarningIns {
|
||||
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
|
||||
-moz-animation: pulseWarningIns 0.75s infinite alternate;
|
||||
animation: pulseWarningIns 0.75s infinite alternate; }
|
||||
734
assets/plugins/sweetalert/sweet-alert.js
Normal file
734
assets/plugins/sweetalert/sweet-alert.js
Normal file
@@ -0,0 +1,734 @@
|
||||
// SweetAlert
|
||||
// 2014 (c) - Tristan Edwards
|
||||
// github.com/t4t5/sweetalert
|
||||
(function(window, document) {
|
||||
|
||||
var modalClass = '.sweet-alert',
|
||||
overlayClass = '.sweet-overlay',
|
||||
alertTypes = ['error', 'warning', 'info', 'success'],
|
||||
defaultParams = {
|
||||
title: '',
|
||||
text: '',
|
||||
type: null,
|
||||
allowOutsideClick: false,
|
||||
showCancelButton: false,
|
||||
closeOnConfirm: true,
|
||||
closeOnCancel: true,
|
||||
confirmButtonText: 'OK',
|
||||
confirmButtonColor: '#AEDEF4',
|
||||
cancelButtonText: 'Cancel',
|
||||
imageUrl: null,
|
||||
imageSize: null
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Manipulate DOM
|
||||
*/
|
||||
|
||||
var getModal = function() {
|
||||
return document.querySelector(modalClass);
|
||||
},
|
||||
getOverlay = function() {
|
||||
return document.querySelector(overlayClass);
|
||||
},
|
||||
hasClass = function(elem, className) {
|
||||
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
|
||||
},
|
||||
addClass = function(elem, className) {
|
||||
if (!hasClass(elem, className)) {
|
||||
elem.className += ' ' + className;
|
||||
}
|
||||
},
|
||||
removeClass = function(elem, className) {
|
||||
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
|
||||
if (hasClass(elem, className)) {
|
||||
while (newClass.indexOf(' ' + className + ' ') >= 0) {
|
||||
newClass = newClass.replace(' ' + className + ' ', ' ');
|
||||
}
|
||||
elem.className = newClass.replace(/^\s+|\s+$/g, '');
|
||||
}
|
||||
},
|
||||
escapeHtml = function(str) {
|
||||
var div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(str));
|
||||
return div.innerHTML;
|
||||
},
|
||||
_show = function(elem) {
|
||||
elem.style.opacity = '';
|
||||
elem.style.display = 'block';
|
||||
},
|
||||
show = function(elems) {
|
||||
if (elems && !elems.length) {
|
||||
return _show(elems);
|
||||
}
|
||||
for (var i = 0; i < elems.length; ++i) {
|
||||
_show(elems[i]);
|
||||
}
|
||||
},
|
||||
_hide = function(elem) {
|
||||
elem.style.opacity = '';
|
||||
elem.style.display = 'none';
|
||||
},
|
||||
hide = function(elems) {
|
||||
if (elems && !elems.length) {
|
||||
return _hide(elems);
|
||||
}
|
||||
for (var i = 0; i < elems.length; ++i) {
|
||||
_hide(elems[i]);
|
||||
}
|
||||
},
|
||||
isDescendant = function(parent, child) {
|
||||
var node = child.parentNode;
|
||||
while (node !== null) {
|
||||
if (node === parent) {
|
||||
return true;
|
||||
}
|
||||
node = node.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getTopMargin = function(elem) {
|
||||
elem.style.left = '-9999px';
|
||||
elem.style.display = 'block';
|
||||
|
||||
var height = elem.clientHeight;
|
||||
var padding = parseInt(getComputedStyle(elem).getPropertyValue('padding'), 10);
|
||||
|
||||
elem.style.left = '';
|
||||
elem.style.display = 'none';
|
||||
return ('-' + parseInt(height / 2 + padding) + 'px');
|
||||
},
|
||||
fadeIn = function(elem, interval) {
|
||||
if(+elem.style.opacity < 1) {
|
||||
interval = interval || 16;
|
||||
elem.style.opacity = 0;
|
||||
elem.style.display = 'block';
|
||||
var last = +new Date();
|
||||
var tick = function() {
|
||||
elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
|
||||
last = +new Date();
|
||||
|
||||
if (+elem.style.opacity < 1) {
|
||||
setTimeout(tick, interval);
|
||||
}
|
||||
};
|
||||
tick();
|
||||
}
|
||||
},
|
||||
fadeOut = function(elem, interval) {
|
||||
interval = interval || 16;
|
||||
elem.style.opacity = 1;
|
||||
var last = +new Date();
|
||||
var tick = function() {
|
||||
elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
|
||||
last = +new Date();
|
||||
|
||||
if (+elem.style.opacity > 0) {
|
||||
setTimeout(tick, interval);
|
||||
} else {
|
||||
elem.style.display = 'none';
|
||||
}
|
||||
};
|
||||
tick();
|
||||
},
|
||||
fireClick = function(node) {
|
||||
// Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
|
||||
// Then fixed for today's Chrome browser.
|
||||
if (MouseEvent) {
|
||||
// Up-to-date approach
|
||||
var mevt = new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: false,
|
||||
cancelable: true
|
||||
});
|
||||
node.dispatchEvent(mevt);
|
||||
} else if ( document.createEvent ) {
|
||||
// Fallback
|
||||
var evt = document.createEvent('MouseEvents');
|
||||
evt.initEvent('click', false, false);
|
||||
node.dispatchEvent(evt);
|
||||
} else if( document.createEventObject ) {
|
||||
node.fireEvent('onclick') ;
|
||||
} else if (typeof node.onclick === 'function' ) {
|
||||
node.onclick();
|
||||
}
|
||||
},
|
||||
stopEventPropagation = function(e) {
|
||||
// In particular, make sure the space bar doesn't scroll the main window.
|
||||
if (typeof e.stopPropagation === 'function') {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
} else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
|
||||
window.event.cancelBubble = true;
|
||||
}
|
||||
};
|
||||
|
||||
// Remember state in cases where opening and handling a modal will fiddle with it.
|
||||
var previousActiveElement,
|
||||
previousDocumentClick,
|
||||
previousWindowKeyDown,
|
||||
lastFocusedButton;
|
||||
|
||||
/*
|
||||
* Add modal + overlay to DOM
|
||||
*/
|
||||
|
||||
window.sweetAlertInitialize = function() {
|
||||
var sweetHTML = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p>Text</p><button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>',
|
||||
sweetWrap = document.createElement('div');
|
||||
|
||||
sweetWrap.innerHTML = sweetHTML;
|
||||
|
||||
// For readability: check sweet-alert.html
|
||||
document.body.appendChild(sweetWrap);
|
||||
|
||||
// For development use only!
|
||||
/*jQuery.ajax({
|
||||
url: '../lib/sweet-alert.html', // Change path depending on file location
|
||||
dataType: 'html'
|
||||
})
|
||||
.done(function(html) {
|
||||
jQuery('body').append(html);
|
||||
});*/
|
||||
}
|
||||
|
||||
/*
|
||||
* Global sweetAlert function
|
||||
*/
|
||||
|
||||
window.sweetAlert = window.swal = function() {
|
||||
if (arguments[0] === undefined) {
|
||||
window.console.error('sweetAlert expects at least 1 attribute!');
|
||||
return false;
|
||||
}
|
||||
|
||||
var params = extend({}, defaultParams);
|
||||
|
||||
switch (typeof arguments[0]) {
|
||||
|
||||
case 'string':
|
||||
params.title = arguments[0];
|
||||
params.text = arguments[1] || '';
|
||||
params.type = arguments[2] || '';
|
||||
|
||||
break;
|
||||
|
||||
case 'object':
|
||||
if (arguments[0].title === undefined) {
|
||||
window.console.error('Missing "title" argument!');
|
||||
return false;
|
||||
}
|
||||
|
||||
params.title = arguments[0].title;
|
||||
params.text = arguments[0].text || defaultParams.text;
|
||||
params.type = arguments[0].type || defaultParams.type;
|
||||
params.allowOutsideClick = arguments[0].allowOutsideClick || defaultParams.allowOutsideClick;
|
||||
params.showCancelButton = arguments[0].showCancelButton !== undefined ? arguments[0].showCancelButton : defaultParams.showCancelButton;
|
||||
params.closeOnConfirm = arguments[0].closeOnConfirm !== undefined ? arguments[0].closeOnConfirm : defaultParams.closeOnConfirm;
|
||||
params.closeOnCancel = arguments[0].closeOnCancel !== undefined ? arguments[0].closeOnCancel : defaultParams.closeOnCancel;
|
||||
|
||||
// Show "Confirm" instead of "OK" if cancel button is visible
|
||||
params.confirmButtonText = (defaultParams.showCancelButton) ? 'Confirm' : defaultParams.confirmButtonText;
|
||||
|
||||
params.confirmButtonText = arguments[0].confirmButtonText || defaultParams.confirmButtonText;
|
||||
params.confirmButtonColor = arguments[0].confirmButtonColor || defaultParams.confirmButtonColor;
|
||||
params.cancelButtonText = arguments[0].cancelButtonText || defaultParams.cancelButtonText;
|
||||
params.imageUrl = arguments[0].imageUrl || defaultParams.imageUrl;
|
||||
params.imageSize = arguments[0].imageSize || defaultParams.imageSize;
|
||||
params.doneFunction = arguments[1] || null;
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
window.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]);
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
setParameters(params);
|
||||
fixVerticalPosition();
|
||||
openModal();
|
||||
|
||||
|
||||
// Modal interactions
|
||||
var modal = getModal();
|
||||
|
||||
// Mouse interactions
|
||||
var onButtonEvent = function(e) {
|
||||
|
||||
var target = e.target || e.srcElement,
|
||||
targetedConfirm = (target.className === 'confirm'),
|
||||
modalIsVisible = hasClass(modal, 'visible'),
|
||||
doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true');
|
||||
|
||||
switch (e.type) {
|
||||
case ("mouseover"):
|
||||
if (targetedConfirm) {
|
||||
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
|
||||
}
|
||||
break;
|
||||
case ("mouseout"):
|
||||
if (targetedConfirm) {
|
||||
e.target.style.backgroundColor = params.confirmButtonColor;
|
||||
}
|
||||
break;
|
||||
case ("mousedown"):
|
||||
if (targetedConfirm) {
|
||||
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.14);
|
||||
}
|
||||
break;
|
||||
case ("mouseup"):
|
||||
if (targetedConfirm) {
|
||||
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
|
||||
}
|
||||
break;
|
||||
case ("focus"):
|
||||
var $confirmButton = modal.querySelector('button.confirm'),
|
||||
$cancelButton = modal.querySelector('button.cancel');
|
||||
|
||||
if (targetedConfirm) {
|
||||
$cancelButton.style.boxShadow = 'none';
|
||||
} else {
|
||||
$confirmButton.style.boxShadow = 'none';
|
||||
}
|
||||
break;
|
||||
case ("click"):
|
||||
if (targetedConfirm && doneFunctionExists && modalIsVisible) { // Clicked "confirm"
|
||||
|
||||
params.doneFunction(true);
|
||||
|
||||
if (params.closeOnConfirm) {
|
||||
closeModal();
|
||||
}
|
||||
} else if (doneFunctionExists && modalIsVisible) { // Clicked "cancel"
|
||||
|
||||
// Check if callback function expects a parameter (to track cancel actions)
|
||||
var functionAsStr = String(params.doneFunction).replace(/\s/g, '');
|
||||
var functionHandlesCancel = functionAsStr.substring(0, 9) === "function(" && functionAsStr.substring(9, 10) !== ")";
|
||||
|
||||
if (functionHandlesCancel) {
|
||||
params.doneFunction(false);
|
||||
}
|
||||
|
||||
if (params.closeOnCancel) {
|
||||
closeModal();
|
||||
}
|
||||
} else {
|
||||
closeModal();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
var $buttons = modal.querySelectorAll('button');
|
||||
for (var i = 0; i < $buttons.length; i++) {
|
||||
$buttons[i].onclick = onButtonEvent;
|
||||
$buttons[i].onmouseover = onButtonEvent;
|
||||
$buttons[i].onmouseout = onButtonEvent;
|
||||
$buttons[i].onmousedown = onButtonEvent;
|
||||
//$buttons[i].onmouseup = onButtonEvent;
|
||||
$buttons[i].onfocus = onButtonEvent;
|
||||
}
|
||||
|
||||
// Remember the current document.onclick event.
|
||||
previousDocumentClick = document.onclick;
|
||||
document.onclick = function(e) {
|
||||
var target = e.target || e.srcElement;
|
||||
|
||||
var clickedOnModal = (modal === target),
|
||||
clickedOnModalChild = isDescendant(modal, e.target),
|
||||
modalIsVisible = hasClass(modal, 'visible'),
|
||||
outsideClickIsAllowed = modal.getAttribute('data-allow-ouside-click') === 'true';
|
||||
|
||||
if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && outsideClickIsAllowed) {
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Keyboard interactions
|
||||
var $okButton = modal.querySelector('button.confirm'),
|
||||
$cancelButton = modal.querySelector('button.cancel'),
|
||||
$modalButtons = modal.querySelectorAll('button:not([type=hidden])');
|
||||
|
||||
|
||||
function handleKeyDown(e) {
|
||||
var keyCode = e.keyCode || e.which;
|
||||
|
||||
if ([9,13,32,27].indexOf(keyCode) === -1) {
|
||||
// Don't do work on keys we don't care about.
|
||||
return;
|
||||
}
|
||||
|
||||
var $targetElement = e.target || e.srcElement;
|
||||
|
||||
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
||||
for (var i = 0; i < $modalButtons.length; i++) {
|
||||
if ($targetElement === $modalButtons[i]) {
|
||||
btnIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (keyCode === 9) {
|
||||
// TAB
|
||||
if (btnIndex === -1) {
|
||||
// No button focused. Jump to the confirm button.
|
||||
$targetElement = $okButton;
|
||||
} else {
|
||||
// Cycle to the next button
|
||||
if (btnIndex === $modalButtons.length - 1) {
|
||||
$targetElement = $modalButtons[0];
|
||||
} else {
|
||||
$targetElement = $modalButtons[btnIndex + 1];
|
||||
}
|
||||
}
|
||||
|
||||
stopEventPropagation(e);
|
||||
$targetElement.focus();
|
||||
setFocusStyle($targetElement, params.confirmButtonColor); // TODO
|
||||
|
||||
} else {
|
||||
if (keyCode === 13 || keyCode === 32) {
|
||||
if (btnIndex === -1) {
|
||||
// ENTER/SPACE clicked outside of a button.
|
||||
$targetElement = $okButton;
|
||||
} else {
|
||||
// Do nothing - let the browser handle it.
|
||||
$targetElement = undefined;
|
||||
}
|
||||
} else if (keyCode === 27 && !($cancelButton.hidden || $cancelButton.style.display === 'none')) {
|
||||
// ESC to cancel only if there's a cancel button displayed (like the alert() window).
|
||||
$targetElement = $cancelButton;
|
||||
} else {
|
||||
// Fallback - let the browser handle it.
|
||||
$targetElement = undefined;
|
||||
}
|
||||
|
||||
if ($targetElement !== undefined) {
|
||||
fireClick($targetElement, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
previousWindowKeyDown = window.onkeydown;
|
||||
window.onkeydown = handleKeyDown;
|
||||
|
||||
function handleOnBlur(e) {
|
||||
var $targetElement = e.target || e.srcElement,
|
||||
$focusElement = e.relatedTarget,
|
||||
modalIsVisible = hasClass(modal, 'visible');
|
||||
|
||||
if (modalIsVisible) {
|
||||
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
|
||||
|
||||
if ($focusElement !== null) {
|
||||
// If we picked something in the DOM to focus to, let's see if it was a button.
|
||||
for (var i = 0; i < $modalButtons.length; i++) {
|
||||
if ($focusElement === $modalButtons[i]) {
|
||||
btnIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (btnIndex === -1) {
|
||||
// Something in the dom, but not a visible button. Focus back on the button.
|
||||
$targetElement.focus();
|
||||
}
|
||||
} else {
|
||||
// Exiting the DOM (e.g. clicked in the URL bar);
|
||||
lastFocusedButton = $targetElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$okButton.onblur = handleOnBlur;
|
||||
$cancelButton.onblur = handleOnBlur;
|
||||
|
||||
window.onfocus = function() {
|
||||
// When the user has focused away and focused back from the whole window.
|
||||
window.setTimeout(function() {
|
||||
// Put in a timeout to jump out of the event sequence. Calling focus() in the event
|
||||
// sequence confuses things.
|
||||
if (lastFocusedButton !== undefined) {
|
||||
lastFocusedButton.focus();
|
||||
lastFocusedButton = undefined;
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Set default params for each popup
|
||||
* @param {Object} userParams
|
||||
*/
|
||||
window.swal.setDefaults = function(userParams) {
|
||||
if (!userParams) {
|
||||
throw new Error('userParams is required');
|
||||
}
|
||||
if (typeof userParams !== 'object') {
|
||||
throw new Error('userParams has to be a object');
|
||||
}
|
||||
|
||||
extend(defaultParams, userParams);
|
||||
};
|
||||
|
||||
/*
|
||||
* Set type, text and actions on modal
|
||||
*/
|
||||
|
||||
function setParameters(params) {
|
||||
var modal = getModal();
|
||||
|
||||
var $title = modal.querySelector('h2'),
|
||||
$text = modal.querySelector('p'),
|
||||
$cancelBtn = modal.querySelector('button.cancel'),
|
||||
$confirmBtn = modal.querySelector('button.confirm');
|
||||
|
||||
// Title
|
||||
$title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
|
||||
|
||||
// Text
|
||||
$text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
|
||||
if (params.text) {
|
||||
show($text);
|
||||
}
|
||||
|
||||
// Icon
|
||||
hide(modal.querySelectorAll('.icon'));
|
||||
if (params.type) {
|
||||
var validType = false;
|
||||
for (var i = 0; i < alertTypes.length; i++) {
|
||||
if (params.type === alertTypes[i]) {
|
||||
validType = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!validType) {
|
||||
window.console.error('Unknown alert type: ' + params.type);
|
||||
return false;
|
||||
}
|
||||
var $icon = modal.querySelector('.icon.' + params.type);
|
||||
show($icon);
|
||||
|
||||
// Animate icon
|
||||
switch (params.type) {
|
||||
case "success":
|
||||
addClass($icon, 'animate');
|
||||
addClass($icon.querySelector('.tip'), 'animateSuccessTip');
|
||||
addClass($icon.querySelector('.long'), 'animateSuccessLong');
|
||||
break;
|
||||
case "error":
|
||||
addClass($icon, 'animateErrorIcon');
|
||||
addClass($icon.querySelector('.x-mark'), 'animateXMark');
|
||||
break;
|
||||
case "warning":
|
||||
addClass($icon, 'pulseWarning');
|
||||
addClass($icon.querySelector('.body'), 'pulseWarningIns');
|
||||
addClass($icon.querySelector('.dot'), 'pulseWarningIns');
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Custom image
|
||||
if (params.imageUrl) {
|
||||
var $customIcon = modal.querySelector('.icon.custom');
|
||||
|
||||
$customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
|
||||
show($customIcon);
|
||||
|
||||
var _imgWidth = 80,
|
||||
_imgHeight = 80;
|
||||
|
||||
if (params.imageSize) {
|
||||
var imgWidth = params.imageSize.split('x')[0];
|
||||
var imgHeight = params.imageSize.split('x')[1];
|
||||
|
||||
if (!imgWidth || !imgHeight) {
|
||||
window.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize);
|
||||
} else {
|
||||
_imgWidth = imgWidth;
|
||||
_imgHeight = imgHeight;
|
||||
|
||||
$customIcon.css({
|
||||
'width': imgWidth + 'px',
|
||||
'height': imgHeight + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
$customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
modal.setAttribute('data-has-cancel-button', params.showCancelButton);
|
||||
if (params.showCancelButton) {
|
||||
$cancelBtn.style.display = 'inline-block';
|
||||
} else {
|
||||
hide($cancelBtn);
|
||||
}
|
||||
|
||||
// Edit text on cancel and confirm buttons
|
||||
if (params.cancelButtonText) {
|
||||
$cancelBtn.innerHTML = escapeHtml(params.cancelButtonText);
|
||||
}
|
||||
if (params.confirmButtonText) {
|
||||
$confirmBtn.innerHTML = escapeHtml(params.confirmButtonText);
|
||||
}
|
||||
|
||||
// Set confirm button to selected background color
|
||||
$confirmBtn.style.backgroundColor = params.confirmButtonColor;
|
||||
|
||||
// Set box-shadow to default focused button
|
||||
setFocusStyle($confirmBtn, params.confirmButtonColor);
|
||||
|
||||
// Allow outside click?
|
||||
modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick);
|
||||
|
||||
// Done-function
|
||||
var hasDoneFunction = (params.doneFunction) ? true : false;
|
||||
modal.setAttribute('data-has-done-function', hasDoneFunction);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
|
||||
*/
|
||||
|
||||
function colorLuminance(hex, lum) {
|
||||
// Validate hex string
|
||||
hex = String(hex).replace(/[^0-9a-f]/gi, '');
|
||||
if (hex.length < 6) {
|
||||
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
|
||||
}
|
||||
lum = lum || 0;
|
||||
|
||||
// Convert to decimal and change luminosity
|
||||
var rgb = "#", c, i;
|
||||
for (i = 0; i < 3; i++) {
|
||||
c = parseInt(hex.substr(i*2,2), 16);
|
||||
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
|
||||
rgb += ("00"+c).substr(c.length);
|
||||
}
|
||||
|
||||
return rgb;
|
||||
}
|
||||
|
||||
function extend(a, b){
|
||||
for (var key in b) {
|
||||
if (b.hasOwnProperty(key)) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
|
||||
return a;
|
||||
}
|
||||
|
||||
function hexToRgb(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
|
||||
}
|
||||
|
||||
// Add box-shadow style to button (depending on its chosen bg-color)
|
||||
function setFocusStyle($button, bgColor) {
|
||||
var rgbColor = hexToRgb(bgColor);
|
||||
$button.style.boxShadow = '0 0 2px rgba(' + rgbColor +', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Animations
|
||||
*/
|
||||
|
||||
function openModal() {
|
||||
var modal = getModal();
|
||||
fadeIn(getOverlay(), 10);
|
||||
show(modal);
|
||||
addClass(modal, 'showSweetAlert');
|
||||
removeClass(modal, 'hideSweetAlert');
|
||||
|
||||
previousActiveElement = document.activeElement;
|
||||
var $okButton = modal.querySelector('button.confirm');
|
||||
$okButton.focus();
|
||||
|
||||
setTimeout(function() {
|
||||
addClass(modal, 'visible');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
var modal = getModal();
|
||||
fadeOut(getOverlay(), 5);
|
||||
fadeOut(modal, 5);
|
||||
removeClass(modal, 'showSweetAlert');
|
||||
addClass(modal, 'hideSweetAlert');
|
||||
removeClass(modal, 'visible');
|
||||
|
||||
|
||||
// Reset icon animations
|
||||
|
||||
var $successIcon = modal.querySelector('.icon.success');
|
||||
removeClass($successIcon, 'animate');
|
||||
removeClass($successIcon.querySelector('.tip'), 'animateSuccessTip');
|
||||
removeClass($successIcon.querySelector('.long'), 'animateSuccessLong');
|
||||
|
||||
var $errorIcon = modal.querySelector('.icon.error');
|
||||
removeClass($errorIcon, 'animateErrorIcon');
|
||||
removeClass($errorIcon.querySelector('.x-mark'), 'animateXMark');
|
||||
|
||||
var $warningIcon = modal.querySelector('.icon.warning');
|
||||
removeClass($warningIcon, 'pulseWarning');
|
||||
removeClass($warningIcon.querySelector('.body'), 'pulseWarningIns');
|
||||
removeClass($warningIcon.querySelector('.dot'), 'pulseWarningIns');
|
||||
|
||||
|
||||
// Reset the page to its previous state
|
||||
window.onkeydown = previousWindowKeyDown;
|
||||
document.onclick = previousDocumentClick;
|
||||
if (previousActiveElement) {
|
||||
previousActiveElement.focus();
|
||||
}
|
||||
lastFocusedButton = undefined;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Set "margin-top"-property on modal based on its computed height
|
||||
*/
|
||||
|
||||
function fixVerticalPosition() {
|
||||
var modal = getModal();
|
||||
|
||||
modal.style.marginTop = getTopMargin(getModal());
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* If library is injected after page has loaded
|
||||
*/
|
||||
|
||||
(function () {
|
||||
if (document.readyState === "complete" || document.readyState === "interactive" && document.body) {
|
||||
sweetAlertInitialize();
|
||||
} else {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('DOMContentLoaded', function factorial() {
|
||||
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
|
||||
sweetAlertInitialize();
|
||||
}, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('onreadystatechange', function() {
|
||||
if (document.readyState === 'complete') {
|
||||
document.detachEvent('onreadystatechange', arguments.callee);
|
||||
sweetAlertInitialize();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
})(window, document);
|
||||
1
assets/plugins/sweetalert/sweet-alert.min.js
vendored
Normal file
1
assets/plugins/sweetalert/sweet-alert.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user