mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 23:11:38 +08:00
添加Metronic（作为LFS）
This commit is contained in:
482
frontend/static/js/common/markinput.js
Normal file
482
frontend/static/js/common/markinput.js
Normal file
@@ -0,0 +1,482 @@
|
||||
(function( $ ){
|
||||
|
||||
|
||||
|
||||
var methods = {
|
||||
init : function( options ){
|
||||
var $this = this;
|
||||
options = $.extend( $.fn.markinput.options, options );
|
||||
return this.each(function(){
|
||||
var $thisMarkInput = $(this);
|
||||
var markData = options.markData;
|
||||
if(markData == null){
|
||||
markData = [];
|
||||
}
|
||||
$thisMarkInput .data("markData",markData);
|
||||
var adjustLeftComponent = options.adjustLeftComponent;
|
||||
if(adjustLeftComponent != null){
|
||||
$thisMarkInput .data("adjustLeftComponent",adjustLeftComponent);
|
||||
}
|
||||
var $appendVar = $('<div id="drMarkInputContentContainer"><div id="drMarkInputContent" contentEditable="true" data-placeHolder="添加至多 3 个标签（输入标签后按回车确定）"></div></div>\
|
||||
<div id="drMarkInputErrorPopoverContainer" style="display:none;">\
|
||||
<div id="drMarkInputErrorPopover">\
|
||||
<p id="drMarkInputErrorPopoverContent">输入内容过长</p>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div id="drMarkInputPopoverSearchContainer" style="display:none;">\
|
||||
<ul id="drMarkInputPopoverSearch">\
|
||||
</ul>\
|
||||
</div>');
|
||||
$thisMarkInput.append($appendVar);
|
||||
|
||||
for(var i = 0; i < markData.length; i++){
|
||||
$element = $("<span></span>");
|
||||
$element.text(markData[i]);
|
||||
$element.addClass("drMarkSpanContainer");
|
||||
$element.insertBefore($("#drMarkInputContentContainer"));
|
||||
}
|
||||
|
||||
if(markData.length > 0){
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","");
|
||||
}else{
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签（输入标签后按回车确定）");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function isMarkInputErrorShown(){
|
||||
return $("#drMarkInputContent").data('bs.popover').tip().hasClass('in');
|
||||
}
|
||||
function isMarkSearchResShown(){
|
||||
return $("#drMarkInputContentContainer").data('bs.popover').tip().hasClass('in');
|
||||
}
|
||||
|
||||
function deleteOneMark($element){
|
||||
var markData = $thisMarkInput.data("markData");
|
||||
if(markData.length <= 0){
|
||||
return;
|
||||
}
|
||||
if($element == null){
|
||||
//删除最后一个
|
||||
$(".drMarkSpanContainer")[markData.length - 1].remove();
|
||||
markData.splice(markData.length-1,1);
|
||||
if(markData.length > 0){
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","");
|
||||
}else{
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签（输入标签后按回车确定）");
|
||||
}
|
||||
}else{
|
||||
|
||||
var tagName = $element.text();
|
||||
|
||||
for(var i = 0; i < markData.length; i++){
|
||||
if(markData[i] == tagName){
|
||||
markData.splice(i,1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(markData.length > 0){
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","");
|
||||
}else{
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签（输入标签后按回车确定）");
|
||||
}
|
||||
$element.remove();
|
||||
}
|
||||
}
|
||||
function addOneMark(markName){
|
||||
var markData = $thisMarkInput.data("markData");
|
||||
if(markName == ""){
|
||||
return;
|
||||
}else if(markName.length > 30){
|
||||
//提示长度
|
||||
$("#drMarkInputErrorPopoverContent").text("标签最大字数为 30 个");
|
||||
if(isMarkInputErrorShown()){
|
||||
|
||||
}else{
|
||||
$("#drMarkInputContent").popover("show");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
for(var i = 0; i < markData.length; i++){
|
||||
if(markName == markData[i]){
|
||||
//提示重复
|
||||
$("#drMarkInputErrorPopoverContent").text("已经添加了该标签");
|
||||
if(isMarkInputErrorShown()){
|
||||
|
||||
}else{
|
||||
$("#drMarkInputContent").popover("show");
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
markData.push(markName);
|
||||
if(markData.length > 0){
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","");
|
||||
}else{
|
||||
$("#drMarkInputContent")[0].setAttribute("data-placeholder","添加至多 3 个标签（输入标签后按回车确定）");
|
||||
}
|
||||
|
||||
$element = $("<span></span>");
|
||||
$element.text(markName);
|
||||
$element.addClass("drMarkSpanContainer");
|
||||
$element.insertBefore($("#drMarkInputContentContainer"));
|
||||
$("#drMarkInputContent").text("");
|
||||
if(isMarkSearchResShown()){
|
||||
$("#drMarkInputContentContainer").popover("hide");
|
||||
}
|
||||
}
|
||||
|
||||
function searchMarkKeyword(keyword){
|
||||
if(keyword == null || keyword == ""){
|
||||
if(isMarkSearchResShown()){
|
||||
$("#drMarkInputContentContainer").popover("hide");
|
||||
}
|
||||
return;
|
||||
}
|
||||
keyword = encodeURIComponent(keyword);
|
||||
var jRequest = $.ajax({
|
||||
type : "GET",
|
||||
contentType : "application/x-www-form-urlencoded",
|
||||
url : "/marks/searchforchoose?q="+keyword,
|
||||
beforeSend:function(){
|
||||
$('#loadingBar').drloadingbar("startLoad");
|
||||
var currentReq = $("#drMarkInputContentContainer").data("jRequest");
|
||||
if(currentReq != null){
|
||||
currentReq.abort();
|
||||
}
|
||||
|
||||
},
|
||||
success : function(data){
|
||||
$('#loadingBar').drloadingbar("stopLoad");
|
||||
|
||||
var dataLength = data.length;
|
||||
if(dataLength > 0){
|
||||
if(isMarkSearchResShown()){
|
||||
$("#drMarkInputContentContainer").popover("hide");
|
||||
}
|
||||
$("#drMarkInputPopoverSearch").empty();
|
||||
for(var i = 0; i < dataLength; i++){
|
||||
$element = $("<li class='drMarkInputPopoverSearchList'><span><strong>"+data[i].name+"</strong>（"+data[i].useCount+"）</span></li>");
|
||||
$element.appendTo($("#drMarkInputPopoverSearch"));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
$("#drMarkInputContentContainer").popover("show");
|
||||
}else{
|
||||
if(isMarkSearchResShown()){
|
||||
$("#drMarkInputContentContainer").popover("hide");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
error : function(data){
|
||||
|
||||
if(data.statusText=="abort"){
|
||||
return;
|
||||
}
|
||||
$('#loadingBar').drloadingbar("stopLoad");
|
||||
|
||||
}});
|
||||
$("#drMarkInputContentContainer").data("jRequest",jRequest);
|
||||
}
|
||||
$("#drMarkInputContent").on("paste",function(e){
|
||||
var markData = $thisMarkInput.data("markData");
|
||||
|
||||
if(markData.length >= 3){
|
||||
//提示只能输入3个标签
|
||||
$("#drMarkInputErrorPopoverContent").text("只能添加 3 个标签");
|
||||
if(isMarkInputErrorShown()){
|
||||
|
||||
}else{
|
||||
$("#drMarkInputContent").popover("show");
|
||||
}
|
||||
|
||||
|
||||
e.preventDefault();
|
||||
return
|
||||
}
|
||||
if(isMarkInputErrorShown()){
|
||||
$("#drMarkInputContent").popover("hide");
|
||||
}
|
||||
var pasteText = e.originalEvent.clipboardData.getData("text/plain");
|
||||
pasteText = pasteText.replace(/\r\n/g,"");
|
||||
pasteText = pasteText.replace(/\r/g,"");
|
||||
pasteText = pasteText.replace(/\n/g,"");
|
||||
document.execCommand("insertHTML", false, pasteText);
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
searchMarkKeyword($(this).text());
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#drMarkInputContent").on("blur",function(e){
|
||||
if(isMarkInputErrorShown()){
|
||||
$("#drMarkInputContent").popover("hide");
|
||||
}
|
||||
if(isMarkSearchResShown()){
|
||||
|
||||
setTimeout(function(){
|
||||
//延迟200毫秒触发，否则若点击在content cell内部则立马被hide掉，无法触发
|
||||
$("#drMarkInputContentContainer").popover("hide");
|
||||
},200);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$("#drMarkInputContent").on("keydown",function(e){
|
||||
|
||||
var markData = $thisMarkInput.data("markData");
|
||||
var keyCode = e.keyCode;
|
||||
if(keyCode == 8 || keyCode == 46){
|
||||
if(isMarkInputErrorShown()){
|
||||
$("#drMarkInputContent").popover("hide");
|
||||
}
|
||||
if($(this).text() == "" && markData.length > 0){
|
||||
deleteOneMark();
|
||||
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
if(markData.length >= 3){
|
||||
$(this).text("");
|
||||
//提示只能输入3个标签
|
||||
$("#drMarkInputErrorPopoverContent").text("只能添加 3 个标签");
|
||||
if(isMarkInputErrorShown()){
|
||||
|
||||
}else{
|
||||
$("#drMarkInputContent").popover("show");
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if(isMarkInputErrorShown()){
|
||||
$("#drMarkInputContent").popover("hide");
|
||||
}
|
||||
|
||||
|
||||
if(keyCode == 13 || keyCode == 108){
|
||||
e.preventDefault();
|
||||
if(isMarkInputErrorShown()){
|
||||
$("#drMarkInputContent").popover("hide");
|
||||
}
|
||||
|
||||
//处理标签
|
||||
var content = "";
|
||||
if(isMarkSearchResShown() && $(".drMarkInputPopoverSearchList.isActive").length > 0){
|
||||
|
||||
content = $(".drMarkInputPopoverSearchList.isActive span strong").text();
|
||||
$("#drMarkInputContentContainer").popover("hide");
|
||||
}else{
|
||||
content = $(this).text();
|
||||
}
|
||||
var checkContent = $.trim(content);
|
||||
if(checkContent != ""){
|
||||
addOneMark(content);
|
||||
}
|
||||
|
||||
return;
|
||||
}else if(keyCode==40){
|
||||
//下
|
||||
if(isMarkSearchResShown()){
|
||||
if($(".drMarkInputPopoverSearchList.isActive").length > 0){
|
||||
if($(".drMarkInputPopoverSearchList.isActive")[0].nextSibling == null){
|
||||
//指向第一个
|
||||
$(".drMarkInputPopoverSearchList.isActive").removeClass("isActive");
|
||||
$(".drMarkInputPopoverSearchList").first().addClass("isActive");
|
||||
}else{
|
||||
//指向下一个
|
||||
var nextNode = $($(".drMarkInputPopoverSearchList.isActive")[0].nextSibling);
|
||||
$(".drMarkInputPopoverSearchList.isActive").removeClass("isActive");
|
||||
nextNode.addClass("isActive");
|
||||
|
||||
}
|
||||
}else{
|
||||
//指向第一个
|
||||
$(".drMarkInputPopoverSearchList").first().addClass("isActive");
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
}else if(keyCode==38){
|
||||
//上
|
||||
if(isMarkSearchResShown()){
|
||||
if($(".drMarkInputPopoverSearchList.isActive").length > 0){
|
||||
if($(".drMarkInputPopoverSearchList.isActive")[0].previousSibling == null){
|
||||
//指向最后一个
|
||||
$(".drMarkInputPopoverSearchList.isActive").removeClass("isActive");
|
||||
$(".drMarkInputPopoverSearchList").last().addClass("isActive");
|
||||
}else{
|
||||
//指向上一个
|
||||
var previousNode = $($(".drMarkInputPopoverSearchList.isActive")[0].previousSibling);
|
||||
$(".drMarkInputPopoverSearchList.isActive").removeClass("isActive");
|
||||
previousNode.addClass("isActive");
|
||||
|
||||
}
|
||||
}else{
|
||||
//指向最后一个
|
||||
$(".drMarkInputPopoverSearchList").last().addClass("isActive");
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
var $this = $(this);
|
||||
setTimeout(function(){
|
||||
searchMarkKeyword($this.text());
|
||||
}, 100);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
$("#drMarkInputContent").popover({
|
||||
trigger:"manual",
|
||||
html : true,
|
||||
animation:false,
|
||||
placement:"top",
|
||||
content: function(){
|
||||
return $('#drMarkInputErrorPopoverContainer').html();
|
||||
}
|
||||
});
|
||||
|
||||
$("#drMarkInputContent").on('hide.bs.popover', function(e){
|
||||
if(e.target != $("#drMarkInputContent")[0]){
|
||||
return;
|
||||
}
|
||||
$('#drMarkInputErrorPopoverContainer').append($('#drMarkInputErrorPopover'));
|
||||
|
||||
|
||||
});
|
||||
$("#drMarkInputContent").on('shown.bs.popover', function(e){
|
||||
if(e.target != $("#drMarkInputContent")[0]){
|
||||
return;
|
||||
}
|
||||
$('#drMarkInputErrorPopoverContainer #drMarkInputErrorPopover').remove();
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#drMarkInputContentContainer").popover({
|
||||
trigger:"manual",
|
||||
html : true,
|
||||
animation:false,
|
||||
placement:"bottom",
|
||||
content: function(){
|
||||
return $('#drMarkInputPopoverSearchContainer').html();
|
||||
}
|
||||
});
|
||||
|
||||
$("#drMarkInputContentContainer").on('hide.bs.popover',function(e){
|
||||
if(e.target != $("#drMarkInputContentContainer")[0]){
|
||||
return;
|
||||
}
|
||||
$('#drMarkInputPopoverSearchContainer').append($('#drMarkInputPopoverSearch'));
|
||||
|
||||
|
||||
});
|
||||
$("#drMarkInputContentContainer").on('shown.bs.popover',function(e){
|
||||
if(e.target != $("#drMarkInputContentContainer")[0]){
|
||||
return;
|
||||
}
|
||||
var topVal = parseInt($('#drMarkInputContentContainer+.popover').css('top').substr(0,$('#drMarkInputContentContainer+.popover').css('top').length - 2));
|
||||
$('#drMarkInputContentContainer+.popover').css('top',(topVal - 15 ) + 'px');
|
||||
//重新计算left
|
||||
var left = 0;
|
||||
var adjustLeftComponent = $thisMarkInput.data("adjustLeftComponent");
|
||||
if(adjustLeftComponent == null){
|
||||
left = $("#drMarkInputContentContainer").offset().left;
|
||||
}else{
|
||||
var left1 = $("#drMarkInputContentContainer").offset().left;
|
||||
var left2 = adjustLeftComponent.offset().left;
|
||||
left = left1 - left2;
|
||||
}
|
||||
|
||||
//var left = $("#markInputContentContainer+.popover").css('left');
|
||||
|
||||
|
||||
var inText = $("#drMarkInputContent").text();
|
||||
|
||||
$('#drMarkInputContentContainer+.popover').css('left', (left - 20) + 'px');
|
||||
$('#drMarkInputContentContainer+.popover .arrow').css('left', (20 + 14 * inText.length / 2 ) + 'px');
|
||||
|
||||
|
||||
$('#drMarkInputPopoverSearchContainer #drMarkInputPopoverSearch').remove();
|
||||
|
||||
$("#drMarkInputPopoverSearch").off("mouseenter");
|
||||
$("#drMarkInputPopoverSearch").off("mouseleave");
|
||||
$("#drMarkInputPopoverSearch").off("click");
|
||||
$("#drMarkInputPopoverSearch").on("mouseenter",".drMarkInputPopoverSearchList",function(){
|
||||
if(!$(this).hasClass("isActive")){
|
||||
$(".drMarkInputPopoverSearchList.isActive").each(function(){
|
||||
$(this).removeClass("isActive");
|
||||
});
|
||||
$(this).addClass("isActive");
|
||||
}
|
||||
});
|
||||
$("#drMarkInputPopoverSearch").on("mouseleave",".drMarkInputPopoverSearchList",function(){
|
||||
$(this).removeClass("isActive");
|
||||
});
|
||||
$("#drMarkInputPopoverSearch").on("click",".drMarkInputPopoverSearchList.isActive",function(){
|
||||
//选中输入
|
||||
var content = $(this).find("span strong").text();
|
||||
addOneMark(content);
|
||||
$("#drMarkInputContent").focus();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$thisMarkInput.on("click",".drMarkSpanContainer",function(e){
|
||||
|
||||
deleteOneMark($(this));
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
getMarkArray:function(){
|
||||
return this.data("markData");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
$.fn.markinput = function( method ) {
|
||||
|
||||
// Method calling logic
|
||||
if ( methods[method] ) {
|
||||
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.markinput' );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$.fn.markinput.options = {};
|
||||
|
||||
|
||||
})( jQuery );
|
||||
Reference in New Issue
Block a user