first commit
This commit is contained in:
kicap1992
BIN
assets/plugin/popover/._jquery.popSelect.css
Executable file
BIN
assets/plugin/popover/._jquery.popSelect.css
Executable file
Binary file not shown.
BIN
assets/plugin/popover/._jquery.popSelect.js
Executable file
BIN
assets/plugin/popover/._jquery.popSelect.js
Executable file
Binary file not shown.
BIN
assets/plugin/popover/._jquery.popSelect.min.css
vendored
Executable file
BIN
assets/plugin/popover/._jquery.popSelect.min.css
vendored
Executable file
Binary file not shown.
BIN
assets/plugin/popover/._jquery.popSelect.min.js
vendored
Executable file
BIN
assets/plugin/popover/._jquery.popSelect.min.js
vendored
Executable file
Binary file not shown.
302
assets/plugin/popover/jquery.popSelect.css
Executable file
302
assets/plugin/popover/jquery.popSelect.css
Executable file
@ -0,0 +1,302 @@
|
||||
/*
|
||||
* popselect - v0.1.14
|
||||
* Replaces traditional <select> with a options from popover
|
||||
* http://jquer.in/popselect
|
||||
*
|
||||
* Made by Jay Kanakiya
|
||||
* Under MIT License
|
||||
*/
|
||||
.popover-select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popover-select {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1060;
|
||||
display: none;
|
||||
max-width: 366px;
|
||||
padding: 1px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: normal;
|
||||
background-color: #fff;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, .2);
|
||||
border-radius: 6px;
|
||||
line-break: auto;
|
||||
}
|
||||
|
||||
.popover-select.top {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.popover-select.right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.popover-select.bottom {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.popover-select.left {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popover-select-title {
|
||||
padding: 8px 14px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.popover-select-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
.popover-select > .arrow,
|
||||
.popover-select > .arrow:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.popover-select > .arrow {
|
||||
border-width: 11px;
|
||||
}
|
||||
|
||||
.popover-select > .arrow:after {
|
||||
content: "";
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.popover-select.top > .arrow {
|
||||
bottom: -11px;
|
||||
left: 50%;
|
||||
margin-left: -11px;
|
||||
border-top-color: #999;
|
||||
border-top-color: rgba(0, 0, 0, 0);
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.popover-select.top > .arrow:after {
|
||||
bottom: 1px;
|
||||
margin-left: -10px;
|
||||
content: " ";
|
||||
border-top-color: #fff;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.popover-select.right > .arrow {
|
||||
top: 50%;
|
||||
left: -11px;
|
||||
margin-top: -11px;
|
||||
border-right-color: #999;
|
||||
border-right-color: rgba(0, 0, 0, .25);
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.popover-select.right > .arrow:after {
|
||||
bottom: -10px;
|
||||
left: 1px;
|
||||
content: " ";
|
||||
border-right-color: #fff;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.popover-select.bottom > .arrow {
|
||||
top: -11px;
|
||||
left: 50%;
|
||||
margin-left: -11px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #999;
|
||||
border-bottom-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.popover-select.bottom > .arrow:after {
|
||||
top: 1px;
|
||||
margin-left: -10px;
|
||||
content: " ";
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.popover-select.left > .arrow {
|
||||
top: 50%;
|
||||
right: -11px;
|
||||
margin-top: -11px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #999;
|
||||
border-left-color: rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.popover-select.left > .arrow:after {
|
||||
right: 1px;
|
||||
bottom: -10px;
|
||||
content: " ";
|
||||
border-right-width: 0;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
.popover-select-tags {
|
||||
cursor: pointer;
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 37px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
}
|
||||
|
||||
.popover-select-tags.focus {
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
|
||||
}
|
||||
|
||||
.popover-select-tags .tag {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
margin-top: 3px;
|
||||
padding-right: 10px;
|
||||
border-color: #d43f3a;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: 0.25s linear;
|
||||
transition: 0.25s linear;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.popover-select-tags .tag:hover {
|
||||
background-color: #ec7063;
|
||||
border-color: #ec7063;
|
||||
}
|
||||
|
||||
.popover-select-tags .tag .popSelect-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popover-select-tags .tag:hover .popSelect-close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.popSelect-close, .popSelect-close:hover, .popSelect-close:active {
|
||||
float: right;
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
padding-left: 3px;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.popSelect-close:hover, .popSelect-close:active {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hide the Textarea Input */
|
||||
|
||||
textarea.popover-select-textarea {
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
padding: .3em .5em;
|
||||
position: absolute;
|
||||
left: -99999px;
|
||||
}
|
||||
|
||||
.popover-select-tags .placeholder {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Dummy Input */
|
||||
|
||||
.placeholder input {
|
||||
vertical-align: inherit; border: 0; outline: none; padding: 0; margin: 0; cursor: text;
|
||||
font-family: inherit; font-weight: inherit; font-size: inherit; font-style: inherit;
|
||||
box-shadow: none; background: none;
|
||||
width: 5px;
|
||||
height: 30px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* popSelect */
|
||||
|
||||
.popover-select-list {
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.popover-select-list li {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
background-color: #e74c3c;
|
||||
border-color: #d43f3a;
|
||||
margin: 5px;
|
||||
-webkit-transition: 0.5s all;
|
||||
}
|
||||
|
||||
.popover-select-list li:hover {
|
||||
color: white;
|
||||
background-color: #ec7063;
|
||||
border-color: #ec7063;
|
||||
}
|
||||
|
||||
/* Disable Tags inside a Popover */
|
||||
|
||||
.popover-select-list li.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Placeholder Text */
|
||||
|
||||
.placeholder-text {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 15px;
|
||||
color: lightgray;
|
||||
}
|
||||
527
assets/plugin/popover/jquery.popSelect.js
Executable file
527
assets/plugin/popover/jquery.popSelect.js
Executable file
@ -0,0 +1,527 @@
|
||||
/*
|
||||
* popselect - v0.1.14
|
||||
* Replaces traditional <select> with a options from popover
|
||||
* http://jquer.in/popselect
|
||||
*
|
||||
* Made by Jay Kanakiya
|
||||
* Under MIT License
|
||||
*/
|
||||
;(function($, window, document, undefined) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// Create the defaults once
|
||||
var pluginName = 'popSelect';
|
||||
var defaults = {
|
||||
position: 'top',
|
||||
showTitle: true,
|
||||
autoIncrease: true,
|
||||
title: 'Select Multiple Options',
|
||||
debug: false,
|
||||
maxAllowed: 0,
|
||||
placeholderText: 'Click to Add Values',
|
||||
autofocus: false
|
||||
};
|
||||
|
||||
var classNames = {
|
||||
tag: 'tag',
|
||||
arrow: 'arrow',
|
||||
selectWrapper: 'popover-select-wrapper',
|
||||
tagWrapper: 'popover-tag-wrapper',
|
||||
popoverSelect: 'popover-select',
|
||||
popoverBody: 'popover-select-body',
|
||||
selectTextarea: 'popover-select-textarea',
|
||||
selectTags: 'popover-select-tags',
|
||||
popoverClose: 'popSelect-close',
|
||||
selectList: 'popover-select-list',
|
||||
popoverDisabled: 'disabled',
|
||||
placeholder: 'placeholder',
|
||||
placeholderInput: 'placeholder input',
|
||||
placeholderText: 'placeholder-text',
|
||||
selectTitle: 'popover-select-title',
|
||||
top: 'top'
|
||||
};
|
||||
|
||||
var logs = {
|
||||
popoverGenerated: 'PopSelect Code Generated',
|
||||
closeClicked: 'Close button clicked',
|
||||
noElem: 'No element to be removed',
|
||||
unSupported: 'Not Supported',
|
||||
posChanged: 'Position changed'
|
||||
};
|
||||
|
||||
var constants = {
|
||||
option: 'option',
|
||||
blur: 'blur',
|
||||
click: 'click',
|
||||
mousedown: 'mousedown',
|
||||
li: 'li',
|
||||
attrVal: 'data-value',
|
||||
attrText: 'data-text',
|
||||
body: 'BODY'
|
||||
};
|
||||
|
||||
// The actual plugin constructor
|
||||
function Plugin(element, options) {
|
||||
this.element = element;
|
||||
// jQuery has an extend method which merges the contents of two or
|
||||
// more objects, storing the result in the first object. The first object
|
||||
// is generally empty as we don't want to alter the default options for
|
||||
// future instances of the plugin
|
||||
this.settings = $.extend({}, defaults, options);
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
this.init();
|
||||
}
|
||||
|
||||
// Avoid Plugin.prototype conflicts
|
||||
$.extend(Plugin.prototype, {
|
||||
init: function() {
|
||||
var $this = this;
|
||||
this.$elem = $(this.element);
|
||||
|
||||
// Get all the options in an array
|
||||
this.$options = this.$elem.children(constants.option).map(function(i, option) {
|
||||
return {
|
||||
val: $(option).val(),
|
||||
text: $(option).text(),
|
||||
selected: $(option).attr('selected')
|
||||
};
|
||||
});
|
||||
|
||||
// Wrap the whole input box in your own popover
|
||||
this.$elem.wrap(template(createEmptyDiv(), {
|
||||
wrapper: classNames.selectWrapper
|
||||
}));
|
||||
|
||||
var elemPos = this.getPosition(this.$elem);
|
||||
this.elemPos = elemPos;
|
||||
|
||||
// Also Add the required css Properties
|
||||
this.$elem
|
||||
.parent(addDot(classNames.selectWrapper))
|
||||
.css({width: this.settings.width || elemPos.width, height: elemPos.height});
|
||||
|
||||
// Append the popover to $elem
|
||||
var popUpCode = this.generatePopover(this.$options);
|
||||
$this.log(logs.popoverGenerated, popUpCode);
|
||||
this.$elem.after(popUpCode);
|
||||
|
||||
// Assign the $popover to the new $elem
|
||||
this.$popover = this.$elem.next(addDot(classNames.popoverSelect));
|
||||
this.$popover.css({top: 0, left: 0});
|
||||
|
||||
// Append Tagging System to it
|
||||
this.$elem.after(createTaggingStr(this.settings.placeholderText, this.$options));
|
||||
|
||||
// Get the Tag Wrapper for later use
|
||||
this.$tagWrapper = this.$elem.next(addDot(classNames.tagWrapper));
|
||||
this.baseHeight = this.$tagWrapper.height();
|
||||
|
||||
// Get the input
|
||||
this.$inputTagField = this.$tagWrapper.find(addDot(classNames.selectTextarea));
|
||||
|
||||
// Hide the popover when blurring the inputTagField
|
||||
this.$inputTagField.on(constants.blur, function() {
|
||||
$this.$popover.hide();
|
||||
});
|
||||
|
||||
// Get the tags in the wrapper
|
||||
this.$tags = this.$tagWrapper.find(addDot(classNames.selectTags));
|
||||
|
||||
// Show Popover on click of tags
|
||||
this.$tags
|
||||
.on(constants.click, this.initializePopover.bind(this));
|
||||
|
||||
// Also Attach to placeHolder Text
|
||||
this.$tags.next(addDot(classNames.placeholderText))
|
||||
.on(constants.click, this.initializePopover.bind(this));
|
||||
|
||||
// Attach Event Listener to ul list
|
||||
this.$tags.on(constants.click, addDot(classNames.popoverClose), function() {
|
||||
$this.inputToPopover($(this));
|
||||
});
|
||||
|
||||
// Attach List Event Handlers to Li
|
||||
this.$popover.find(addDot(classNames.selectList)).on(constants.mousedown, function(e) {
|
||||
e.preventDefault();
|
||||
}).on(constants.click, constants.li, function() {
|
||||
$this.popoverToInput($(this));
|
||||
});
|
||||
|
||||
// Finally Hide the Element
|
||||
this.$elem.hide();
|
||||
|
||||
// Required for placeholdertext and pre-selected values
|
||||
this.checkNumberOfTags();
|
||||
|
||||
// If pre-selected are higher than normal
|
||||
this.changeSize();
|
||||
|
||||
// Trigger init event
|
||||
this.$elem.trigger('popselect:init');
|
||||
|
||||
if (this.settings.autofocus) {
|
||||
this.initializePopover();
|
||||
}
|
||||
},
|
||||
inputToPopover: function($elem) {
|
||||
var $li = $elem.parent();
|
||||
this.log(logs.closeClicked, $li);
|
||||
var val = $li.attr(constants.attrVal);
|
||||
var text = $li.attr(constants.attrText);
|
||||
|
||||
// Remove them from input and add it to popover
|
||||
this.appendToPopup(val, text);
|
||||
$li.remove();
|
||||
|
||||
// Standard Reset Calls
|
||||
this.setPlaceholder();
|
||||
this.focus();
|
||||
|
||||
// Whether to increase/decrease width
|
||||
this.changeSize();
|
||||
|
||||
// Whether to enable / disable popover and Placeholder Text
|
||||
this.checkNumberOfTags();
|
||||
|
||||
// Trigger remove event, passing value and text of removed tag
|
||||
this.$elem.trigger('popselect:remove', [val, text]);
|
||||
},
|
||||
enablePopover: function() {
|
||||
this.$popover.find(addDot(classNames.selectList) + ' li')
|
||||
.removeClass(classNames.popoverDisabled);
|
||||
},
|
||||
disablePopover: function() {
|
||||
this.$popover.find(addDot(classNames.selectList) + ' li')
|
||||
.addClass(classNames.popoverDisabled);
|
||||
},
|
||||
checkNumberOfTags: function() {
|
||||
var currentNo = this.$tags.find(addDot(classNames.tag)).length;
|
||||
if (currentNo === 0) {
|
||||
this.enablePlaceHolderText();
|
||||
} else {
|
||||
this.disablePlaceHolderText();
|
||||
}
|
||||
|
||||
if (this.settings.maxAllowed !== 0) {
|
||||
if (this.settings.maxAllowed > currentNo) {
|
||||
this.enablePopover();
|
||||
} else {
|
||||
this.disablePopover();
|
||||
}
|
||||
}
|
||||
|
||||
this.syncWithSelect();
|
||||
},
|
||||
popoverToInput: function($elem) {
|
||||
var val = $elem.attr(constants.attrVal);
|
||||
var text = $elem.text();
|
||||
var li = createTagStr(val, text);
|
||||
|
||||
// Remove them from popover and it to input
|
||||
this.$tags.append(li);
|
||||
$elem.remove();
|
||||
|
||||
// Standard Reset Calls
|
||||
this.setPlaceholder();
|
||||
this.focus();
|
||||
this.popoverShow();
|
||||
this.changePosition();
|
||||
|
||||
// Whether to increase/decrease width
|
||||
this.changeSize();
|
||||
|
||||
// Enable / Disable Popover
|
||||
this.checkNumberOfTags();
|
||||
|
||||
// Trigger add event, passing value and text of added tag
|
||||
this.$elem.trigger('popselect:add', [val, text]);
|
||||
},
|
||||
popoverShow: function() {
|
||||
// Change Position as well show popover
|
||||
if (this.$popover.find(addDot(classNames.selectList) + ' li').length) {
|
||||
this.$popover.show();
|
||||
} else {
|
||||
this.$popover.hide();
|
||||
}
|
||||
},
|
||||
initializePopover: function() {
|
||||
this.popoverShow();
|
||||
this.changePosition();
|
||||
this.setPlaceholder();
|
||||
this.focus();
|
||||
},
|
||||
enablePlaceHolderText: function() {
|
||||
this.$tags.next(addDot(classNames.placeholderText)).show();
|
||||
},
|
||||
disablePlaceHolderText: function() {
|
||||
this.$tags.next(addDot(classNames.placeholderText)).hide();
|
||||
},
|
||||
focus: function() {
|
||||
var $this = this;
|
||||
this.$tags.find(addDot(classNames.placeholderInput)).focus();
|
||||
this.$tags.find(addDot(classNames.placeholderInput)).on(constants.blur, function() {
|
||||
$this.$popover.hide();
|
||||
});
|
||||
},
|
||||
setPlaceholder: function() {
|
||||
if (this.$tags.children(addDot(classNames.placeholder)).length) {
|
||||
this.$tags.children(addDot(classNames.placeholder)).remove();
|
||||
}
|
||||
this.$tags.append(createPlaceholderInput());
|
||||
this.disableInput();
|
||||
},
|
||||
disableInput: function() {
|
||||
var $this = this;
|
||||
this.$tags.find(addDot(classNames.placeholderInput)).keyup(function(e) {
|
||||
// Empty the input always
|
||||
$(this).val('');
|
||||
|
||||
// For delete key, backspace and Ctrl + x Key
|
||||
if (e.which === 8 || e.which === 46 || e.ctrlKey && e.which === 88) {
|
||||
$this.removeLastElem();
|
||||
}
|
||||
});
|
||||
},
|
||||
changeSize: function() {
|
||||
if (this.settings.autoIncrease) {
|
||||
var tagWidth = 0;
|
||||
var textWidth = this.settings.width || this.elemPos.width;
|
||||
this.$tags.find(addDot(classNames.tag)).each(function(i, elem) {
|
||||
tagWidth += $(elem).outerWidth() + 20;
|
||||
});
|
||||
var mHeight = Math.floor(tagWidth / textWidth);
|
||||
this.$tags.height((mHeight + 1) * this.baseHeight);
|
||||
}
|
||||
},
|
||||
removeLastElem: function() {
|
||||
// Delete the last selected li if present
|
||||
var tags = this.$tags.find(addDot(classNames.tag));
|
||||
if (tags.length) {
|
||||
var $li = $(tags[tags.length - 1]);
|
||||
var val = $li.attr(constants.attrVal);
|
||||
var text = $li.attr(constants.attrText);
|
||||
|
||||
// Remove them from input and add it to popover
|
||||
this.appendToPopup(val, text);
|
||||
$li.remove();
|
||||
|
||||
// Standard Reset Calls
|
||||
this.changePosition();
|
||||
this.setPlaceholder();
|
||||
this.focus();
|
||||
|
||||
// Whether to increase/decrease width
|
||||
this.changeSize();
|
||||
|
||||
// Enable / Disable Popover
|
||||
this.checkNumberOfTags();
|
||||
} else {
|
||||
this.log(logs.noElem);
|
||||
}
|
||||
},
|
||||
setTitle: function(title) {
|
||||
if (this.settings.showTitle) {
|
||||
this.$popover.find(addDot(classNames.selectTitle)).text(title);
|
||||
}
|
||||
},
|
||||
getPosition: function($element) {
|
||||
$element = $element || this.$element;
|
||||
var el = $element[0];
|
||||
var isBody = el.tagName === constants.body;
|
||||
|
||||
var elRect = el.getBoundingClientRect();
|
||||
if (elRect.width == null) {
|
||||
var w = elRect.right - elRect.left;
|
||||
var h = elRect.bottom - elRect.top;
|
||||
elRect = $.extend({}, elRect, {width: w, height: h});
|
||||
}
|
||||
var elOffset = isBody ? {top: 0, left: 0} : $element.offset();
|
||||
/* jshint ignore:start */
|
||||
var scroll = {scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
|
||||
/* jshint ignore:end */
|
||||
var outerDims = isBody ? {width: $(window).width(), height: $(window).height()} : null;
|
||||
|
||||
return $.extend({}, elRect, scroll, outerDims, elOffset);
|
||||
},
|
||||
syncWithSelect: function() {
|
||||
var arrValues = this.$tags.find(addDot(classNames.tag)).map(function(i, elem) {
|
||||
return $(elem).attr('data-value');
|
||||
}).toArray();
|
||||
this.$elem.children(constants.option).each(function(i, option) {
|
||||
if (arrValues.indexOf($(option).val()) < 0) {
|
||||
$(option).removeAttr('selected');
|
||||
} else {
|
||||
$(option).attr('selected', 'selected');
|
||||
}
|
||||
});
|
||||
},
|
||||
appendToPopup: function(val, text) {
|
||||
var li = createLiTag(val, text);
|
||||
this.$popover.find(addDot(classNames.selectList)).append(li);
|
||||
},
|
||||
generatePopover: function(options) {
|
||||
var list = '';
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
if (!options[i].selected) {
|
||||
list += createLiTag(options[i].val, options[i].text);
|
||||
}
|
||||
}
|
||||
var popoverStr = createPopoverStr(list, this.settings);
|
||||
return popoverStr;
|
||||
},
|
||||
changePosition: function() {
|
||||
// It first needs to be placed
|
||||
var popPos = this.getPosition(this.$popover);
|
||||
var tagPos = this.getPosition(this.$tagWrapper);
|
||||
|
||||
var leftOffset = ((this.settings.width || this.elemPos.width) / 2) - (popPos.width / 2);
|
||||
var topOffset;
|
||||
if (this.settings.position === 'top') {
|
||||
topOffset = -(popPos.height);
|
||||
} else {
|
||||
topOffset = tagPos.height;
|
||||
}
|
||||
|
||||
this.log('popPos.width', popPos.width);
|
||||
this.log(logs.posChanged, topOffset, leftOffset);
|
||||
this.$popover.css({top: topOffset, left: leftOffset});
|
||||
},
|
||||
log: function() {
|
||||
if (this.settings.debug) {
|
||||
console.log.apply(console, arguments);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* A quick helper function for creating templates
|
||||
* @param {string} s Template String
|
||||
* @param {object} d Values to replace for
|
||||
* @return {string} Populated template string
|
||||
*/
|
||||
function template(s, d) {
|
||||
for (var p in d) {
|
||||
s = s.replace(new RegExp('{' + p + '}', 'g'), d[p]);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
/**
|
||||
* Just adds a dot for easy class selection
|
||||
* @param {string} str DOM className
|
||||
* @return {string} jQuery selector
|
||||
*/
|
||||
function addDot(str) {
|
||||
return '.' + str;
|
||||
}
|
||||
|
||||
function createEmptyDiv(x) {
|
||||
if (x) {
|
||||
return '<div class="{' + x + '}"></div>';
|
||||
} else {
|
||||
return '<div class="{wrapper}"></div>';
|
||||
}
|
||||
}
|
||||
|
||||
function createTagsLi(options) {
|
||||
var str = '';
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
if (options[i].selected) {
|
||||
str += createTagStr(options[i].val, options[i].text);
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
function createTaggingStr(text, options) {
|
||||
return template('<div class="{tagWrapper}">' +
|
||||
'<textarea class="{selectTextarea}"></textarea>' +
|
||||
'<ul class="{selectTags}">' +
|
||||
'{tags}' +
|
||||
'</ul>' +
|
||||
'<div class="{placeholderText}">' +
|
||||
'{text}' +
|
||||
'</div>' +
|
||||
'</div>', {
|
||||
tags: createTagsLi(options),
|
||||
text: text,
|
||||
placeholderText: classNames.placeholderText,
|
||||
tagWrapper: classNames.tagWrapper,
|
||||
selectTextarea: classNames.selectTextarea,
|
||||
selectTags: classNames.selectTags
|
||||
});
|
||||
}
|
||||
|
||||
function createTagStr(val, text) {
|
||||
return template('<li class="{tag}" data-value="{val}" data-text="{text}">' +
|
||||
'<span class="{popoverClose}">×</span>{text}' +
|
||||
'</li>', {
|
||||
text: text,
|
||||
val: val,
|
||||
tag: classNames.tag,
|
||||
popoverClose: classNames.popoverClose
|
||||
});
|
||||
}
|
||||
|
||||
function createLiTag(val, text) {
|
||||
return template('<li data-value="{val}" data-text="{text}">{text}</li>', {
|
||||
val: val,
|
||||
text: text
|
||||
});
|
||||
}
|
||||
|
||||
function createPlaceholderInput() {
|
||||
return template('<li class="{placeholder}">' +
|
||||
'<div>' +
|
||||
'<input type="text" readonly="true">' +
|
||||
'</div>' +
|
||||
'</li>', {
|
||||
placeholder: classNames.placeholder
|
||||
});
|
||||
}
|
||||
|
||||
function createPopoverStr(list, settings) {
|
||||
return template('<div class="{popoverSelect} {top}">' +
|
||||
(settings.showTitle ? '<h3 class="{selectTitle}">{title}</h3>' : '') +
|
||||
'<div class="{popoverBody}">' +
|
||||
'<ul class="{selectList}">' +
|
||||
'{list}' +
|
||||
'</ul>' +
|
||||
'</div>' +
|
||||
'<div class="{arrow}"></div>' +
|
||||
'</div>', {
|
||||
title: settings.title,
|
||||
list: list,
|
||||
arrow: classNames.arrow,
|
||||
popoverSelect: classNames.popoverSelect,
|
||||
popoverBody: classNames.popoverBody,
|
||||
selectList: classNames.selectList,
|
||||
top: settings.position,
|
||||
selectTitle: classNames.selectTitle
|
||||
});
|
||||
}
|
||||
|
||||
// A really lightweight plugin wrapper around the constructor,
|
||||
// preventing against multiple instantiations
|
||||
$.fn.popSelect = function(options) {
|
||||
if (typeof(options) === 'string') {
|
||||
if (options === 'value') {
|
||||
return this.next(addDot(classNames.tagWrapper))
|
||||
.find(addDot(classNames.tag)).map(function(i, $elem) {
|
||||
return $($elem).attr(constants.attrVal);
|
||||
});
|
||||
} else {
|
||||
console.warn(logs.unSupported);
|
||||
}
|
||||
} else {
|
||||
return this.each(function() {
|
||||
if (!$.data(this, 'plugin_' + pluginName)) {
|
||||
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
1
assets/plugin/popover/jquery.popSelect.min.css
vendored
Executable file
1
assets/plugin/popover/jquery.popSelect.min.css
vendored
Executable file
@ -0,0 +1 @@
|
||||
.popover-select,.popover-select-tags{font-size:14px;line-height:1.42857143}.popover-select-wrapper{position:relative}.popover-select{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:366px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;line-break:auto}.popover-select.top{margin-top:-10px}.popover-select.right{margin-left:10px}.popover-select.bottom{margin-top:10px}.popover-select.left{margin-left:-10px}.popover-select-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-select-content{padding:9px 14px}.popover-select>.arrow,.popover-select>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover-select>.arrow{border-width:11px}.popover-select>.arrow:after{content:"";border-width:10px}.popover-select.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:transparent;border-bottom-width:0}.popover-select.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover-select.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover-select.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover-select.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover-select.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover-select.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover-select.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.popover-select-tags{cursor:pointer;list-style-type:none;display:block;width:100%;height:37px;padding:0;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.popover-select-tags.focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.popover-select-tags .tag{display:block;float:left;margin-left:10px;background-color:#e74c3c;color:#fff;padding:5px 10px 5px 5px;margin-top:3px;border-color:#d43f3a;vertical-align:middle;-webkit-transition:.25s linear;transition:.25s linear;height:30px}.popover-select-tags .tag:hover{background-color:#ec7063;border-color:#ec7063}.popover-select-tags .tag .popSelect-close{display:none}.popover-select-tags .tag:hover .popSelect-close{display:block}.popSelect-close,.popSelect-close:active,.popSelect-close:hover{float:right;font-size:21px;font-weight:700;line-height:1;padding-left:3px;color:#fff;opacity:.8}.popSelect-close:active,.popSelect-close:hover{cursor:pointer;opacity:1}textarea.popover-select-textarea{width:100%;height:29px;padding:.3em .5em;position:absolute;left:-99999px}.popover-select-tags .placeholder{display:block;float:left;margin-left:10px}.placeholder input{vertical-align:inherit;border:0;outline:0;padding:0;margin:3px 0 0;cursor:text;font-family:inherit;font-weight:inherit;font-size:inherit;font-style:inherit;box-shadow:none;background:0 0;width:5px;height:30px}.popover-select-list{list-style-type:none;overflow:hidden;padding:10px;margin-bottom:0}.popover-select-list li{cursor:pointer;text-align:center;float:left;padding:10px;background-color:#e74c3c;border-color:#d43f3a;margin:5px;-webkit-transition:.5s all}.popover-select-list li:hover{color:#fff;background-color:#ec7063;border-color:#ec7063}.popover-select-list li.disabled{pointer-events:none;opacity:.5}.placeholder-text{position:absolute;top:9px;left:15px;color:#d3d3d3}
|
||||
9
assets/plugin/popover/jquery.popSelect.min.js
vendored
Executable file
9
assets/plugin/popover/jquery.popSelect.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user