Skip to content

Commit

Permalink
Give the facility to set the duration to show alert and Resolved alin…
Browse files Browse the repository at this point in the history 
…ement issue in mobile.

- Add 'data-duration="3000"' in button tag to set the duration.
  • Loading branch information
@sunil-digicorp
sunil-digicorp committed Mar 7, 2017
1 parent 44662c8 commit 41dd312
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 23 deletions.
10 changes: 5 additions & 5 deletions components/alert/alerts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,13 +252,13 @@ <h2>Propeller Alerts with basic notification types</h2>
<div class="pmd-card pmd-z-depth">
<div class="pmd-card-body text-center alert-custom">
<!--Information Alett-->
<button type="button" data-positionX="left"data-positionY="top"data-effect="fadeInUp"data-message="Heads up! This alert needs your attention, but it's not super important."data-type="information" data-revert="fadeOutUp"class="btn pmd-ripple-effect btn-info pmd-btn-raised pmd-alert-toggle">Alert Information</button>
<button type="button" data-positionX="left" data-positionY="top" data-duration="5000" data-effect="fadeInUp" data-message="Heads up! This alert needs your attention, but it's not super important." data-type="information" data-revert="fadeOutUp" class="btn pmd-ripple-effect btn-info pmd-btn-raised pmd-alert-toggle">Alert Information</button>
<!--Warning Alett-->
<button type="button" data-positionX="center"data-positionY="top"data-effect="fadeInUp"data-message="Warning! Spyware detected on your system."data-type="warning" class="btn pmd-ripple-effect btn-warning pmd-z-depth pmd-alert-toggle">Alert Warning</button>
<button type="button" data-positionX="center" data-positionY="top" data-effect="fadeInUp" data-message="Warning! Spyware detected on your system." data-type="warning" class="btn pmd-ripple-effect btn-warning pmd-z-depth pmd-alert-toggle">Alert Warning</button>
<!--Success Alett-->
<button type="button" data-positionX="right"data-positionY="top"data-effect="fadeInUp"data-message="Well done! You successfully read this important alert message."data-type="success" class="btn pmd-ripple-effect btn-success pmd-z-depth pmd-alert-toggle">Alert Success</button>
<button type="button" data-positionX="right" data-positionY="top" data-duration="10000" data-effect="fadeInUp" data-message="Well done! You successfully read this important alert message." data-type="success" class="btn pmd-ripple-effect btn-success pmd-z-depth pmd-alert-toggle">Alert Success</button>
<!--Error Alert -->
<button type="button" data-positionX="right"data-positionY="top"data-effect="fadeInUp"data-message="Oh snap! Change a few things up and try submitting again."data-type="error" class="btn pmd-ripple-effect btn-danger pmd-z-depth pmd-alert-toggle">Alert Error</button>
<button type="button" data-positionX="right" data-positionY="top" data-effect="fadeInUp" data-message="Oh snap! Change a few things up and try submitting again." data-type="error" class="btn pmd-ripple-effect btn-danger pmd-z-depth pmd-alert-toggle">Alert Error</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -374,7 +374,7 @@ <h2>Events</h2>
<script type="text/javascript" src="http://propeller.in/components/button/js/ripple-effect.js"></script>

<!-- Propeller alerts js -->
<script type="text/javascript" src="http://propeller.in/components/alert/js/alert.js"></script>
<script type="text/javascript" src="js/alert.js"></script>

</body>
</html>
8 changes: 7 additions & 1 deletion components/alert/css/alert.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,10 @@

@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }}
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

@media screen and (max-width:767px){
.pmd-alert-container.left { left:50%;}
.pmd-alert-container.right { right:50%;}

}
44 changes: 27 additions & 17 deletions components/alert/js/alert.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@

/*!
* Propeller v1.0.0 (http://propeller.in)
* Propeller v1.0.0 (http://propeller.in): alert.js
* Copyright 2016-2017 Digicorp, Inc.
* Licensed under MIT (http://propeller.in/LICENSE)
*/

$(document).ready(function() {
$(".pmd-alert-toggle").click(function(){
$positionX = $(this).attr("data-positionX");
$positionY = $(this).attr("data-positionY");
$dataEffect = $(this).attr("data-effect");
$dataRevert = $(this).attr("data-revert");
$dataMessage = $(this).attr("data-message");
$dataType = $(this).attr("data-type");
$actionText = $(this).attr("data-action-text");
$action = $(this).attr("data-action");
var $positionX = $(this).attr("data-positionX"),
$positionY = $(this).attr("data-positionY"),
$dataEffect = $(this).attr("data-effect"),
$dataMessage = $(this).attr("data-message"),
$dataType = $(this).attr("data-type"),
$actionText = $(this).attr("data-action-text"),
$action = $(this).attr("data-action");

if($(window).width() < 768){
$positionX = "center";
}else {
$positionX = $positionX;
}

if(!$(".pmd-alert-container."+ $positionX +"."+ $positionY).length){
$('body').append("<div class='pmd-alert-container "+$positionX+" "+$positionY+"'></div>");
}

$currentPath = $(".pmd-alert-container."+ $positionX +"."+ $positionY);

$notification = notificationValue();

var $currentPath = $(".pmd-alert-container."+ $positionX +"."+ $positionY);
function notificationValue(){
if($action == "true"){
if($actionText == null){
Expand All @@ -40,9 +43,15 @@ $(document).ready(function() {
return $notification;
}
}

var $notification = notificationValue();
var boxLength = $(".pmd-alert-container."+ $positionX +"."+ $positionY + " .pmd-alert").length;

if($(this).attr("data-duration") !== undefined){
var duration = $(this).attr("data-duration");
}else {
var duration = 3000;
}

if (boxLength > 0) {
if ($positionY == 'top') {
$currentPath.append($notification);
Expand All @@ -54,7 +63,7 @@ $(document).ready(function() {
if($action == "true"){
$currentPath.children("[data-action='true']").addClass("visible" +" "+ $dataEffect);
}else{
$currentPath.children("[data-action='false']").addClass("visible" +" "+ $dataEffect).delay(3000).slideUp(
$currentPath.children("[data-action='false']").addClass("visible" +" "+ $dataEffect).delay(duration).slideUp(
function(){
$(this).removeClass("visible" +" "+ $dataEffect).remove();
});
Expand All @@ -66,18 +75,19 @@ $(document).ready(function() {
if($action == "true"){
$currentPath.children("[data-action='true']").addClass("visible" +" "+ $dataEffect);
}else{
$currentPath.children("[data-action='false']").addClass("visible" +" "+ $dataEffect).delay(3000).slideUp(
$currentPath.children("[data-action='false']").addClass("visible" +" "+ $dataEffect).delay(duration).slideUp(
function(){
$(this).removeClass("visible" +" "+ $dataEffect).remove();
});
}
$currentPath.children(".pmd-alert").eq(boxLength).addClass($dataType);
}
$middle = $(".pmd-alert").outerWidth() / 2;
var $middle = $(".pmd-alert").outerWidth() / 2;
$(".pmd-alert-container.center").css("marginLeft","-" + $middle+"px");
});

$(document).on("click",".pmd-alert-close",function(){
var $dataEffect = $(this).attr("data-effect");
$(this).parents(".pmd-alert").slideUp(function(){$(this).removeClass("visible" +" "+ $dataEffect).remove();});
});
});

0 comments on commit 41dd312

Please sign in to comment.