Skip to content

Commit

Permalink
ax5ui-toast@0.2.3 refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasJang
thomasJang committed Apr 4, 2016
1 parent a786527 commit 8097732
Show file tree
Hide file tree
Showing 7 changed files with 462 additions and 427 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ax5ui-toast",
"version": "0.2.2",
"version": "0.2.3",
"authors": [
"ThomasJ <tom@axisj.com>"
],
Expand Down
2 changes: 1 addition & 1 deletion dist/ax5toast.css
View file

Large diffs are not rendered by default.

229 changes: 118 additions & 111 deletions dist/ax5toast.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@
/**
* @class ax5.ui.toast
* @classdesc
* @version v0.0.1
* @version 0.2.3
* @author tom@axisj.com
* @logs
* 2014-06-17 tom : 시작
* @example
* ```
* var my_toast = new ax5.ui.toast();
Expand All @@ -21,7 +19,9 @@
//== UI Class
var axClass = function axClass() {
var self = this,
cfg;
cfg,
toastSeq = 0,
toastSeqClear = null;

if (_SUPER_) _SUPER_.call(this); // 부모호출
this.toastContainer = null;
Expand All @@ -40,6 +40,7 @@
animateTime: 250,
containerPosition: "bottom-left"
};

cfg = this.config;

var onStateChanged = function onStateChanged(opts, that) {
Expand All @@ -49,6 +50,96 @@
this.onStateChanged.call(that, that);
}
return true;
},
getContentTmpl = function getContentTmpl() {
return '\n <div id="{{toastId}}" data-ax5-ui="toast" class="ax5-ui-toast {{theme}}">\n {{#icon}}\n <div class="ax-toast-icon">{{{.}}}</div>\n {{/icon}}\n <div class="ax-toast-body">{{{msg}}}</div>\n {{#btns}}\n <div class="ax-toast-buttons">\n <div class="ax-button-wrap">\n {{#@each}}\n <button type="button" data-ax-toast-btn="{{@key}}" class="btn btn-{{@value.theme}}">{{{@value.label}}}</button>\n {{/@each}}\n </div>\n </div>\n {{/btns}}\n {{^btns}}\n <a class="ax-toast-close" data-ax-toast-btn="ok">{{{closeIcon}}}</a>\n {{/btns}}\n <div style="clear:both;"></div>\n </div>\n ';
},
getContent = function getContent(toastId, opts) {
var data = {
toastId: toastId,
theme: opts.theme,
icon: opts.icon,
msg: (opts.msg || "").replace(/\n/g, "<br/>"),
btns: opts.btns,
closeIcon: opts.closeIcon
};

return ax5.mustache.render(getContentTmpl(), data);
},
open = function open(opts, callBack) {
if (toastSeqClear) clearTimeout(toastSeqClear);

var toastBox,
box = {
width: opts.width
};

opts.id = 'ax5-toast-' + self.containerId + '-' + ++toastSeq;
if (jQuery('#' + opts.id).get(0)) return this;

if (U.left(cfg.containerPosition, '-') == 'bottom') {
this.toastContainer.append(getContent(opts.id, opts));
} else {
this.toastContainer.prepend(getContent(opts.id, opts));
}

toastBox = jQuery('#' + opts.id);
toastBox.css({ width: box.width });
opts.toastBox = toastBox;
this.queue.push(opts);

onStateChanged.call(this, opts, {
self: this,
state: "open",
toastId: opts.id
});

if (opts.toastType === "push") {
// 자동 제거 타이머 시작
setTimeout(function () {
this.close(opts, toastBox, callBack);
}.bind(this), cfg.displayTime);

toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, function (e) {
btnOnClick.call(this, e || window.event, opts, toastBox, callBack);
}.bind(this));
} else if (opts.toastType === "confirm") {
toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, function (e) {
btnOnClick.call(this, e || window.event, opts, toastBox, callBack);
}.bind(this));
}
},
btnOnClick = function btnOnClick(e, opts, toastBox, callBack, target, k) {
target = U.findParentNode(e.target, function (target) {
if (target.getAttribute("data-ax-toast-btn")) {
return true;
}
});

if (target) {
k = target.getAttribute("data-ax-toast-btn");

var that = {
key: k, value: opts.btns ? opts.btns[k] : k,
toastId: opts.id,
btn_target: target
};

if (opts.btns && opts.btns[k].onClick) {
opts.btns[k].onClick.call(that, k);
} else if (opts.toastType === "push") {
if (callBack) callBack.call(that, k);
this.close(opts, toastBox);
} else if (opts.toastType === "confirm") {
if (callBack) callBack.call(that, k);
this.close(opts, toastBox);
}
}
},
onKeyup = function onKeyup(e, opts, callBack, target, k) {
if (e.keyCode == ax5.info.eventKeys.ESC) {
if (this.queue.length > 0) this.close();
}
};

/**
Expand All @@ -73,6 +164,12 @@
this.toastContainer = jQuery('[data-toast-container="' + self.containerId + '"]');
};

/**
* @method ax5.ui.toast.push
* @param opts
* @param callBack
* @returns {ax5.ui.toast}
*/
this.push = function (opts, callBack) {
if (!self.containerId) {
this.init();
Expand All @@ -89,10 +186,16 @@
jQuery.extend(true, self.dialogConfig, cfg, opts);
opts = self.dialogConfig;

this.open(opts, callBack);
open.call(this, opts, callBack);
return this;
};

/**
* @method ax5.ui.toast.confirm
* @param opts
* @param callBack
* @returns {ax5.ui.toast}
*/
this.confirm = function (opts, callBack) {
if (!self.containerId) {
this.init();
Expand All @@ -114,115 +217,10 @@
ok: { label: cfg.lang["ok"], theme: opts.theme }
};
}
this.open(opts, callBack);
open.call(this, opts, callBack);
return this;
};

this.getContent = function (toastId, opts) {
var po = [];
po.push('<div id="' + toastId + '" data-ax5-ui="toast" class="ax5-ui-toast ' + opts.theme + '">');
if (opts.icon) {
po.push('<div class="ax-toast-icon">');
po.push(opts.icon || "");
po.push('</div>');
}
po.push('<div class="ax-toast-body">');
po.push((opts.msg || "").replace(/\n/g, "<br/>"));
po.push('</div>');

if (opts.btns) {
po.push('<div class="ax-toast-buttons">');
po.push('<div class="ax-button-wrap">');
U.each(opts.btns, function (k, v) {
po.push('<button type="button" data-ax-toast-btn="' + k + '" class="btn btn-' + (this.theme || "default") + '">' + this.label + '</button>');
});
po.push('</div>');
po.push('</div>');
} else {
po.push('<a class="ax-toast-close" data-ax-toast-btn="ok">' + (opts.closeIcon || '') + '</a>');
}

po.push('<div style="clear:both;"></div>');
po.push('</div>');
return po.join('');
};

this.open = function (opts, callBack) {
var toastBox,
box = {
width: opts.width
};

opts.id = 'ax5-toast-' + self.containerId + '-' + this.queue.length;

if (U.left(cfg.containerPosition, '-') == 'bottom') {
this.toastContainer.append(this.getContent(opts.id, opts));
} else {
this.toastContainer.prepend(this.getContent(opts.id, opts));
}

toastBox = jQuery('#' + opts.id);
toastBox.css({ width: box.width });
opts.toastBox = toastBox;
this.queue.push(opts);

onStateChanged.call(this, opts, {
self: this,
state: "open",
toastId: opts.id
});

if (opts.toastType === "push") {
// 자동 제거 타이머 시작
setTimeout(function () {
this.close(opts, toastBox, callBack);
}.bind(this), cfg.displayTime);

toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, function (e) {
this.btnOnClick(e || window.event, opts, toastBox, callBack);
}.bind(this));
} else if (opts.toastType === "confirm") {
toastBox.find("[data-ax-toast-btn]").on(cfg.clickEventName, function (e) {
this.btnOnClick(e || window.event, opts, toastBox, callBack);
}.bind(this));
}
};

this.btnOnClick = function (e, opts, toastBox, callBack, target, k) {

target = U.findParentNode(e.target, function (target) {
if (target.getAttribute("data-ax-toast-btn")) {
return true;
}
});

if (target) {
k = target.getAttribute("data-ax-toast-btn");

var that = {
key: k, value: opts.btns ? opts.btns[k] : k,
toastId: opts.id,
btn_target: target
};

if (opts.btns && opts.btns[k].onClick) {
opts.btns[k].onClick.call(that, k);
} else if (opts.toastType === "push") {
if (callBack) callBack.call(that, k);
this.close(opts, toastBox);
} else if (opts.toastType === "confirm") {
if (callBack) callBack.call(that, k);
this.close(opts, toastBox);
}
}
};

this.onKeyup = function (e, opts, callBack, target, k) {
if (e.keyCode == ax5.info.eventKeys.ESC) {
if (this.queue.length > 0) this.close();
}
};

/**
* close the toast
* @method ax5.ui.toast.close
Expand Down Expand Up @@ -256,6 +254,15 @@
toastId: opts.id
};
onStateChanged.call(this, opts, that);

// 3초후에도 아무 일이 없다면 완전히 제거
if (this.queue.length === 0) {
if (toastSeqClear) clearTimeout(toastSeqClear);
toastSeqClear = setTimeout(function () {
/// console.log("try clear seq");
if (this.queue.length === 0) toastSeq = 0;
}.bind(this), 3000);
}
}.bind(this), cfg.animateTime);
return this;
};
Expand Down
2 changes: 1 addition & 1 deletion dist/ax5toast.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ax5ui-toast",
"version": "0.2.2",
"version": "0.2.3",
"description": "A toast plugin that works with Bootstrap & jQuery",
"license": "MIT",
"repository": {
Expand Down

0 comments on commit 8097732

Please sign in to comment.