Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add - New type of message: offer. It shows an offer message and a but… #23

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+93 −5
Open

Add - New type of message: offer. It shows an offer message and a but… #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ Include a reference to the latest version of jQuery and jQuery UI. — The speci
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
```

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
<script type="text/javascript" src="/path/to/jquery.cookie.js"></script>
```

Include references to the Javascript and CSS files.

```html
Expand All @@ -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.

Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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
---------------

Expand Down
11 changes: 11 additions & 0 deletions lib/overhang.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
53 changes: 49 additions & 4 deletions lib/overhang.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ $.fn.overhang = function (arguments) {
var $overhang = $("<div class='overhang'></div>");
var $overlay = $("<div class='overhang-overlay'></div>");

var $cookieReaded = $.cookie('overhang_cookie_readed') == "overhang_cookie_readed";

$(".overhang").remove();
$(".overhang-overlay").remove();

Expand All @@ -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
Expand All @@ -35,15 +38,19 @@ $.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,
upper : false,
easing : "easeOutBounce",
html : false,
overlay : false,
cookieExpires: 365,
buttonsClass : false,
callback : function () {}
};

Expand All @@ -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";

Expand All @@ -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 = $("<span class='overhang-message'></span>");
$message.css("color", attributes.textColor);
Expand All @@ -107,16 +124,28 @@ $.fn.overhang = function (arguments) {
var $inputField = $("<input class='overhang-prompt-field' />");
var $yesButton = $("<button class='overhang-yes-option'>" + attributes.yesMessage + "</button>");
var $noButton = $("<button class='overhang-no-option'>" + attributes.noMessage + "</button>");
var $readedButton = $("<button class='overhang-readed-option'>" + attributes.readedMessage + "</button>");

$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 = $("<span class='overhang-close'></span>");
$close.css("color", attributes.accent);

if (attributes.type !== "confirm") {
if (attributes.type !== "confirm" && attributes.type !== "offer") {
$overhang.append($close);
}
}
Expand Down Expand Up @@ -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) {
Expand Down