From 275c80dcd1670b56b2de4388479bda1a1c234e3d Mon Sep 17 00:00:00 2001 From: Juan Romay Sieira Date: Thu, 27 Jun 2019 17:17:30 +0200 Subject: [PATCH] Add - New type of message: offer. It shows an offer message and a button "dont show it again" to hide it using cookies. Changed README.md with the new feature --- README.md | 34 ++++++++++++++++++++++++++++++- lib/overhang.css | 11 ++++++++++ lib/overhang.js | 53 ++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 93 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c54451a..ec4a6d6 100755 --- a/README.md +++ b/README.md @@ -41,6 +41,12 @@ Include a reference to the latest version of jQuery and jQuery UI. — The speci ``` +If you want to use the type of message "offer", you must reference latest version of jQuery cookie plugin (https://github.com/carhartl/jquery-cookie) + +```html + +``` + Include references to the Javascript and CSS files. ```html @@ -58,7 +64,7 @@ Configuration Parameters ##### `type` This is the type of the notification that you want to display. -The preset types are `success`, `error`, `warn`, `info`, `prompt` and `confirm`. +The preset types are `success`, `error`, `warn`, `info`, `prompt`, `offer` and `confirm`. If you would like to use a custom theme, leave this parameter blank and follow the rules for setting a custom theme. @@ -112,6 +118,10 @@ This is a boolean if the `message` argument should be interpreted as HTML. The d Set this to `true` if you would like to have an overlay displayed with your alert. The default value is set to `false`. You can also pass in a value to the `overlayColor` argument to specify the color of the overlay. The default is set to black. +##### `buttonsClass` + +Set here the class or classes you want to add to the buttons in all type of messages. + ```javascript $("body").overhang({ type: "confirm", @@ -178,6 +188,28 @@ $("body").overhang({ }); ``` +### Offers + +When using offers, all you need to do is set the `type` parameter to `"offer"`. + +##### `readedMessage` + +This is the text on the "readed" button that would to display. The default is set to `"Do not show it again"`. + +##### `readedColor` + +This is the color of the "readed" button. The default is set to `"#4E4E4E"`. + +#### Offer Example + +```javascript +// Some offer message +$("body").overhang({ + type: "offer", + message: "Free shipping on all orders" +}); +``` + Retrieving Data --------------- diff --git a/lib/overhang.css b/lib/overhang.css index 9fbe35f..650f824 100644 --- a/lib/overhang.css +++ b/lib/overhang.css @@ -73,6 +73,17 @@ margin : 0 6px; } +.overhang-readed-option { + min-width : 50px; + border : none; + outline : none; + border-radius : 4px; + font-size : 15px; + color : #FFF; + cursor : pointer; + margin : 0 6px; +} + .overhang-yes-option { margin-left : 15px; } diff --git a/lib/overhang.js b/lib/overhang.js index e6b844b..511f70c 100755 --- a/lib/overhang.js +++ b/lib/overhang.js @@ -13,6 +13,8 @@ $.fn.overhang = function (arguments) { var $overhang = $("
"); var $overlay = $("
"); + var $cookieReaded = $.cookie('overhang_cookie_readed') == "overhang_cookie_readed"; + $(".overhang").remove(); $(".overhang-overlay").remove(); @@ -24,7 +26,8 @@ $.fn.overhang = function (arguments) { "info" : ["#3498DB", "#2980B9"], "prompt" : ["#9B59B6", "#8E44AD"], "confirm" : ["#1ABC9C", "#16A085"], - "default" : ["#95A5A6", "#7F8C8D"] + "default" : ["#95A5A6", "#7F8C8D"], + "offer" : ["#009CD4", "#2980B9"], }; // Default attributes @@ -35,8 +38,10 @@ $.fn.overhang = function (arguments) { textColor : "#FFFFFF", yesMessage : "Yes", noMessage : "No", + readedMessage: "Do not show it again", yesColor : "#2ECC71", noColor : "#E74C3C", + readedColor : "#4E4E4E", duration : 1.5, speed : 500, closeConfirm : false, @@ -44,6 +49,8 @@ $.fn.overhang = function (arguments) { easing : "easeOutBounce", html : false, overlay : false, + cookieExpires: 365, + buttonsClass : false, callback : function () {} }; @@ -63,7 +70,7 @@ $.fn.overhang = function (arguments) { attributes.type = attributes.type.toLowerCase(); // Handle invalid type name - var validTypes = ["success", "error", "warn", "info", "prompt", "confirm"]; + var validTypes = ["success", "error", "warn", "info", "prompt", "confirm", "offer"]; if ($.inArray(attributes.type, validTypes) === -1) { attributes.type = "default"; @@ -86,10 +93,20 @@ $.fn.overhang = function (arguments) { attributes.closeConfirm = true; } + if (attributes.type === "offer") { + attributes.primary = arguments.primary || themes[attributes.type][0]; + attributes.closeConfirm = true; + } + // Style colors $overhang.css("background-color", attributes.primary); $overhang.css("border-bottom", "6px solid " + attributes.accent); + if (attributes.type === "offer") { + $overhang.css("text-align", "justify"); + $overhang.css("padding", "13px"); + } + // Message var $message = $(""); $message.css("color", attributes.textColor); @@ -107,16 +124,28 @@ $.fn.overhang = function (arguments) { var $inputField = $(""); var $yesButton = $(""); var $noButton = $(""); + var $readedButton = $(""); $yesButton.css("background-color", attributes.yesColor); $noButton.css("background-color", attributes.noColor); + $readedButton.css("background-color", attributes.readedColor); + $readedButton.css("float", "right"); + $readedButton.css("margin-right", "20px"); + $readedButton.css("margin-top", "30px"); + $readedButton.css("cursor", "pointer"); + + if (attributes.buttonsClass){ + $yesButton.addClass(attributes.buttonsClass); + $noButton.addClass(attributes.buttonsClass); + $readedButton.addClass(attributes.buttonsClass); + } // Close button if (attributes.closeConfirm) { var $close = $(""); $close.css("color", attributes.accent); - if (attributes.type !== "confirm") { + if (attributes.type !== "confirm" && attributes.type !== "offer") { $overhang.append($close); } } @@ -156,13 +185,29 @@ $.fn.overhang = function (arguments) { raise(true, "overhangConfirm"); }); + }else if (attributes.type === "offer"){ + $overhang.append($readedButton); + $element.data("overhangOffer", null); + + // Append selection to DOM element + $readedButton.click(function () { + $element.data("overhangOffer", true); + raise(true, "overhangOffer"); + $.cookie("overhang_cookie_readed", "overhang_cookie_readed", { + expires: attributes.cookieExpires, + path: '/' + }); + }); } // Attack overhang to element $element.append($overhang); // Slide overhang down - $overhang.slideDown(attributes.speed, attributes.easing); + if (attributes.type !== "offer" || (attributes.type === "offer" && !$cookieReaded)){ + $overhang.slideDown(attributes.speed, attributes.easing); + } + // Dim overlay if (attributes.overlay) {