wide/static/js/dialog.js

375 lines
14 KiB
JavaScript

/*
* Copyright (c) 2014-2018, b3log.org & hacpai.com
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
* @file dialog.js
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 1.0.0.1, Dec 8, 2015
*/
(function ($) {
$.fn.extend({
dialog: {
version: "0.0.1.7",
author: "v@b3log.org"
}
});
var dpuuid = new Date().getTime();
var PROP_NAME = 'dialog';
var Dialog = function () {
this._defaults = {
"styleClass": {
"background": "dialog-background",
"panel": "dialog-panel",
"main": "dialog-main",
"footer": "dialog-footer",
"headerMiddle": "dialog-header-middle",
"headerBg": "dialog-header-bg",
"closeIcon": "dialog-close-icon",
"closeIconHover": "dialog-close-icon-hover",
"title": "dialog-title"
}
};
};
$.extend(Dialog.prototype, {
_attach: function (target, settings) {
if (!target.id) {
this.uuid++;
target.id = 'dp' + this.uuid;
}
var inst = this._newInst($(target));
inst.settings = $.extend({}, settings || {});
$.data(target, PROP_NAME, inst);
this._init(target);
},
/* Create a new instance object. */
_newInst: function (target) {
// escape jQuery meta chars
var id = target[0].id.replace(/([^A-Za-z0-9_])/g, '\\\\$1');
return {
id: id
};
},
_getInst: function (target) {
try {
return $.data(target, PROP_NAME);
} catch (err) {
throw 'Missing instance data for this dialog';
}
},
_destroyDialog: function (target) {
var inst = $.dialog._getInst(target);
var id = inst.id;
$.removeData(target, PROP_NAME);
$(target).prependTo("#" + id + "Wrap").unwrap();
$(target).removeAttr("style");
var styleClass = this._getDefaults($.dialog._defaults, inst.settings, "styleClass");
$("." + styleClass.background).remove();
$("#" + id + "Dialog").remove();
},
_init: function (target) {
var inst = this._getInst(target);
var id = inst.id,
settings = inst.settings;
var windowH = $(window).height(),
windowW = $(window).width();
var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass"),
dialogH = settings.height ? settings.height : parseInt(windowH * 0.6),
dialogW = settings.width ? settings.width : parseInt(windowW * 0.6);
// get settings or default value.
settings.title = settings.title ? settings.title : "";
settings.okText = settings.okText ? settings.okText : "Ok";
settings.cancelText = settings.cancelText ? settings.cancelText : "Cancel";
// build HTML.
var footerHTML = "",
headerHTML = "<div class='"
+ styleClass.headerBg + "'><div class='"
+ styleClass.title + "'>"
+ settings.title + "</div><a href='javascript:void(0);' class='ico-close font-ico "
+ styleClass.closeIcon + "'></a></div>";
// Sets footerHTML.
if (!settings.hideFooter) {
if (!settings.hiddenOk) {
footerHTML = "<button>" + settings.okText +
"</button>";
}
footerHTML += "<button>"
+ settings.cancelText + "</button>";
}
var dialogHTML = "<div id='" + id + "Dialog' class='" + styleClass.panel
+ "' style='width: " + dialogW + "px;' onselectstart='return false;'>" + headerHTML
+ "<div class='" + styleClass.main + "'><div style='overflow: auto; height: "
+ dialogH + "px;'></div><div class='" + styleClass.footer + "'>"
+ footerHTML + "</div></div>";
var bgHTML = "";
if (settings.modal && $("." + styleClass.background).length === 0) {
var bgHeight = windowH < document.documentElement.scrollHeight
? document.documentElement.scrollHeight : windowH;
bgHTML = "<div style='height:" + bgHeight
+ "px;' class='" + styleClass.background + "'></div>";
}
// Package dialog.
$("#" + id).wrap("<div id='" + id + "Wrap'></div>");
var cloneObj = $(target).clone(true);
$(target).remove();
$('body').append(bgHTML + dialogHTML);
$($("#" + id + "Dialog ." + styleClass.main + " div").get(0)).append(cloneObj);
$(cloneObj).show();
// Bind event.
$("#" + id + "Dialog ." + styleClass.closeIcon).bind("click", function () {
$.dialog._close(id, settings);
});
var $buttons = $("#" + id + "Dialog ." + styleClass.footer + " button");
$($buttons.get(1)).bind("click", function () {
$.dialog._close(id, settings);
});
$($buttons.get(0)).bind("click", function () {
if (settings.ok === undefined || settings.ok()) {
$.dialog._close(id, settings);
}
});
this._bindMove(id, styleClass.headerBg, dialogH, dialogW);
// esc exit
$(window).keyup(function (event) {
if (event.keyCode === 27) {
$.dialog._close(id, settings);
}
});
$(window).resize(function () {
var height = $("body").height() > $(window).height() ? $("body").height() : $(window).height();
$(".dialog-background").height(height);
});
if (typeof settings.afterInit === "function") {
settings.afterInit();
}
},
_bindMove: function (id, className) {
$("#" + id + "Dialog ." + className).mousedown(function (event) {
var _document = document;
if (!event) {
event = window.event;
}
var dialog = document.getElementById(id + "Dialog");
var x = event.clientX - parseInt(dialog.style.left),
y = event.clientY - parseInt(dialog.style.top);
_document.ondragstart = "return false;";
_document.onselectstart = "return false;";
_document.onselect = "document.selection.empty();";
if (this.setCapture) {
this.setCapture();
} else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
_document.onmousemove = function (event) {
if (!event) {
event = window.event;
}
var positionX = event.clientX - x,
positionY = event.clientY - y;
if (positionX < 0) {
positionX = 0;
}
if (positionX > $(window).width() - $(dialog).width()) {
positionX = $(window).width() - $(dialog).width();
}
if (positionY > $(window).height() - $(dialog).height()) {
positionY = $(window).height() - $(dialog).height();
}
if (positionY < 0) {
positionY = 0;
}
dialog.style.left = positionX + "px";
dialog.style.top = positionY + "px";
};
_document.onmouseup = function () {
if (this.releaseCapture) {
this.releaseCapture();
} else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
_document.onmousemove = null;
_document.onmouseup = null;
_document.ondragstart = null;
_document.onselectstart = null;
_document.onselect = null;
};
});
},
_close: function (id, settings) {
if ($("#" + id + "Dialog").css("display") === "none") {
return;
}
if (settings.close === undefined || settings.close()) {
$("#" + id + "Dialog").hide();
if (settings.modal) {
var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass");
$("." + styleClass.background).hide();
}
}
},
_closeDialog: function (target) {
var inst = this._getInst(target);
var id = inst.id,
settings = inst.settings;
$.dialog._close(id, settings);
},
_openDialog: function (target, msg) {
var inst = this._getInst(target);
var id = inst.id,
settings = inst.settings,
top = "", left = "",
$dialog = $("#" + id + "Dialog"),
windowH = $(window).height(),
windowW = $(window).width(),
dialogH = settings.height ? settings.height : parseInt(windowH * 0.6),
dialogW = settings.width ? settings.width : parseInt(windowW * 0.6);
// Sets position.
if (settings.position) {
top = settings.position.top;
left = settings.position.left;
} else {
// 20(footer) + 23(header)
top = parseInt((windowH - dialogH - 43) / 2);
if (top < 0) {
top = 0;
}
left = parseInt((windowW - dialogW) / 2);
}
$dialog.css({
"top": top + "px",
"left": left + "px"
}).show();
if (settings.modal) {
var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass");
$("." + styleClass.background).show();
}
if (typeof settings.afterOpen === "function") {
settings.afterOpen(msg);
}
$("#" + id + "Dialog .dialog-footer button:eq(0)").focus();
},
_updateDialog: function (target, data) {
var inst = this._getInst(target);
var id = inst.id,
settings = inst.settings;
var styleClass = this._getDefaults($.dialog._defaults, settings, "styleClass");
$.extend(settings, data);
var $dialog = $("#" + id + "Dialog");
if (data.position) {
$dialog.css({
"top": data.position.top,
"left": data.position.left
});
}
if (data.width) {
$dialog.width(data.width + 26);
$dialog.find("." + styleClass.main + " div")[0].style.width = data.width + "px";
$dialog.find("." + styleClass.headerBg).width(data.width + 18);
}
if (data.height) {
$dialog.find("." + styleClass.main + " div")[0].style.height = data.height + "px";
}
if (data.title) {
$dialog.find("." + styleClass.title).html(data.title);
}
if (data.modal !== undefined) {
if (data.modal) {
$("." + styleClass.background).show();
} else {
$("." + styleClass.background).hide();
}
}
if (data.hideFooter !== undefined) {
if (data.hideFooter) {
$dialog.find("." + styleClass.footer).hide();
} else {
$dialog.find("." + styleClass.footer).show();
}
}
},
_getDefaults: function (defaults, settings, key) {
if (key === "styleClass") {
if (settings.theme === "default" || settings.theme === undefined) {
return defaults.styleClass;
}
settings.styleClass = {};
for (var styleName in defaults[key]) {
settings.styleClass[styleName] = settings.theme + "-" + defaults.styleClass[styleName];
}
} else if (key === "height" || key === "width") {
if (settings[key] === null || settings[key] === undefined) {
return "auto";
} else {
return settings[key] + "px";
}
} else {
if (settings[key] === null || settings[key] === undefined) {
return defaults[key];
}
}
return settings[key];
}
});
$.fn.dialog = function (options) {
var otherArgs = Array.prototype.slice.call(arguments);
if (typeof options === 'string') {
otherArgs.shift();
return $.dialog['_' + options + 'Dialog'].apply($.dialog, [this[0]].concat(otherArgs));
}
return this.each(function () {
$.dialog._attach(this, options);
});
};
$.dialog = new Dialog();
// Add another global to avoid noConflict issues with inline event handlers
window['DP_jQuery_' + dpuuid] = $;
})(jQuery);