forked from tildeverse/tilde.news
replace select2 with tomselect
This commit is contained in:
Peter Bhat Harkins
GitHub
commit
3e1f778df0
|
|
@ -1,57 +1,12 @@
|
|||
//= require jquery
|
||||
//= require jquery_ujs
|
||||
//= require_tree .
|
||||
|
||||
//= require tom-select.base.js
|
||||
//= require TomSelect_remove_button
|
||||
//= require TomSelect_caret_position
|
||||
//= require TomSelect_input_autogrow
|
||||
|
||||
"use strict";
|
||||
|
||||
var _Lobsters = Class.extend({
|
||||
curUser: null,
|
||||
|
||||
runSelect2: function() {
|
||||
$("#story_tags_a").select2({
|
||||
formatSelection: function(what) {
|
||||
return what.id;
|
||||
},
|
||||
matcher: function(term, text) {
|
||||
return text.toUpperCase().indexOf(term.toUpperCase()) >= 0;
|
||||
},
|
||||
sortResults: function(results, container, query) {
|
||||
if (query.term) {
|
||||
var tmatches = [];
|
||||
var dmatches = [];
|
||||
|
||||
/* prefer tag matches first, then description matches */
|
||||
for (var x in results) {
|
||||
var r = results[x];
|
||||
|
||||
if (r.id.toUpperCase().indexOf(query.term.toUpperCase()) == 0)
|
||||
tmatches.push(r);
|
||||
else
|
||||
dmatches.push(r);
|
||||
}
|
||||
|
||||
tmatches = tmatches.sort(function(a, b) {
|
||||
return a.text.localeCompare(b.text);
|
||||
});
|
||||
dmatches = dmatches.sort(function(a, b) {
|
||||
return a.text.localeCompare(b.text);
|
||||
});
|
||||
|
||||
return tmatches.concat(dmatches);
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
var Lobsters = new _Lobsters();
|
||||
|
||||
$(document).ready(function() {
|
||||
Lobsters.runSelect2();
|
||||
});
|
||||
|
||||
const parentSelector = (target, selector) => {
|
||||
let parent = target;
|
||||
while (!parent.matches(selector)) {
|
||||
|
|
@ -131,7 +86,7 @@ class _LobstersFunction {
|
|||
}
|
||||
|
||||
modalFlaggingDropDown(flaggedItemType, voterEl, reasons) {
|
||||
if (!Lobsters.curUser)
|
||||
if (!Lobster.curUser)
|
||||
return Lobster.bounceToLogin();
|
||||
|
||||
const li = parentSelector(voterEl, '.story, .comment');
|
||||
|
|
@ -183,22 +138,19 @@ class _LobstersFunction {
|
|||
});
|
||||
}
|
||||
|
||||
checkStoryTitle() { //partial removal (due to select2)
|
||||
checkStoryTitle() {
|
||||
const titleLocation = document.getElementById('story_title');
|
||||
if (!titleLocation) return;
|
||||
|
||||
const title = titleLocation.value;
|
||||
if (!title) return;
|
||||
|
||||
// Will check title for common phrases to be removed like "ask/show" lobsters :"
|
||||
// Then it will add the keyword "ask/show" to the tags.
|
||||
// Check for common prefixes like "ask lobsters:", remove it, and add the appropriate tag.
|
||||
const m = title.match(/^(show|ask) lobste\.?rs:? (.+)$/i);
|
||||
if (m) {
|
||||
const ta = $("#story_tags_a").data("select2");
|
||||
if (ta.getVal().indexOf(m[1].toLowerCase()) < 0) {
|
||||
ta.addSelectedChoice({ id: m[1].toLowerCase() });
|
||||
$("#story_title").val(m[2]);
|
||||
}
|
||||
if (m) {
|
||||
const titleEl = document.getElementById('story_title');
|
||||
Lobster.tom.addItem(m[1].toLowerCase());
|
||||
titleEl.value = m[2];
|
||||
}
|
||||
// common separators or (parens) that don't enclose a 4-digit year
|
||||
if (title.match(/: | - | – | — | \| | · | • | by /) ||
|
||||
|
|
@ -288,7 +240,7 @@ class _LobstersFunction {
|
|||
}
|
||||
|
||||
previewStory(formElement) {
|
||||
if(!Lobster.curUser)
|
||||
if (!Lobster.curUser)
|
||||
return Lobster.bounceToLogin();
|
||||
|
||||
const formData = new FormData(formElement);
|
||||
|
|
@ -300,15 +252,11 @@ class _LobstersFunction {
|
|||
}).then(response => {
|
||||
response.text().then(text => {
|
||||
previewElement.innerHTML = text;
|
||||
Lobsters.runSelect2();
|
||||
Lobster.tomSelect();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
runSelect2() { //requires [] (will actully replace select2)
|
||||
|
||||
}
|
||||
|
||||
saveStory(saverEl) {
|
||||
if (!Lobster.curUser)
|
||||
return Lobster.bounceToLogin();
|
||||
|
|
@ -328,6 +276,39 @@ class _LobstersFunction {
|
|||
fetchWithCSRF("/stories/" + li.getAttribute("data-shortid") + "/" + act, {method: 'post'});
|
||||
}
|
||||
|
||||
tomSelect(item) {
|
||||
if (!document.getElementById('story_tags_a')) {
|
||||
return
|
||||
}
|
||||
|
||||
TomSelect.define('caret_position', caret_position);
|
||||
TomSelect.define('input_autogrow', input_autogrow);
|
||||
TomSelect.define('remove_button', remove_button);
|
||||
this.tom = new TomSelect('#story_tags_a', {
|
||||
plugins: ['caret_position', 'input_autogrow', 'remove_button'],
|
||||
maxOptions: 200,
|
||||
maxItems: 10,
|
||||
hideSelected: true,
|
||||
closeAfterSelect: true,
|
||||
selectOnTab: true,
|
||||
sortField: {field: "data-value"},
|
||||
onInitialize: function() {
|
||||
const parent = document.querySelector(".ts-control");
|
||||
parent.appendChild(document.querySelector(".ts-dropdown"));
|
||||
},
|
||||
render: {
|
||||
option: function(data) {
|
||||
return '<div>' +
|
||||
'<span class="dropDownItem">' + data.title + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function(data) {
|
||||
return '<div class="data-ts-item">' + data.value + '</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
upvoteComment(voterEl) {
|
||||
Lobster.voteComment(voterEl, 1);
|
||||
}
|
||||
|
|
@ -492,7 +473,7 @@ onPageLoad(() => {
|
|||
|
||||
on('click', '#modal_backdrop', () => {
|
||||
Lobster.removeFlagModal()
|
||||
})
|
||||
});
|
||||
|
||||
// Account Settings Functions
|
||||
|
||||
|
|
@ -500,7 +481,7 @@ onPageLoad(() => {
|
|||
const homePage = event.target
|
||||
if (homePage.value.trim() !== '' && !homePage.value.match('^[a-z]+:\/\/'))
|
||||
homePage.value = 'https://' + homePage.value
|
||||
})
|
||||
});
|
||||
|
||||
// Inbox Related Funtions
|
||||
|
||||
|
|
@ -513,6 +494,8 @@ onPageLoad(() => {
|
|||
|
||||
Lobster.checkStoryTitle()
|
||||
|
||||
Lobster.tomSelect();
|
||||
|
||||
if (document.getElementById('story_url') && document.getElementById('story_preview') && !document.getElementById('story_preview').firstElementChild) {
|
||||
document.getElementById('story_url').focus()
|
||||
}
|
||||
|
|
@ -545,7 +528,7 @@ onPageLoad(() => {
|
|||
on('click', 'li.story a.hider', (event) => {
|
||||
event.preventDefault();
|
||||
Lobster.hideStory(event.target);
|
||||
})
|
||||
});
|
||||
|
||||
on('click', 'li.story a.saver', (event) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -564,22 +547,18 @@ onPageLoad(() => {
|
|||
"[\/\.](soundcloud\.com)\/": "audio",
|
||||
};
|
||||
|
||||
for (let u in url_tags) {
|
||||
let tag = url_tags[u];
|
||||
|
||||
// can't remove the jquery until I replace select 2
|
||||
if ($("#story_url").val().match(new RegExp(u, "i"))) {
|
||||
var ta = $("#story_tags_a").data("select2");
|
||||
if (ta.getVal().indexOf(tag) < 0)
|
||||
ta.addSelectedChoice({ id: tag });
|
||||
const storyUrlEl = document.getElementById('story_url');
|
||||
for (const [match, tag] of Object.entries(url_tags)) {
|
||||
if (storyUrlEl.value.match(new RegExp(match, "i"))) {
|
||||
Lobster.tom.addItem(tag.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
// check for dupe if there's a URL, but not when editing existing
|
||||
if (document.getElementById('story_url').value !== "" &&
|
||||
if (storyUrlEl.value !== "" &&
|
||||
(!document.querySelector('input[name="_method"]') ||
|
||||
document.querySelector('input[name="_method"]').getAttribute('value') === 'put')) {
|
||||
Lobster.checkStoryDuplicate(parentSelector(document.getElementById('story_url'), 'form'));
|
||||
Lobster.checkStoryDuplicate(parentSelector(storyUrlEl, 'form'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -596,7 +575,7 @@ onPageLoad(() => {
|
|||
});
|
||||
|
||||
on("click", "a.comment_replier", (event) => {
|
||||
if (!Lobsters.curUser) {
|
||||
if (!Lobster.curUser) {
|
||||
Lobster.bounceToLogin();
|
||||
}
|
||||
|
||||
|
|
@ -735,4 +714,3 @@ onPageLoad(() => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
/* Simple JavaScript Inheritance
|
||||
* By John Resig http://ejohn.org/
|
||||
* MIT Licensed.
|
||||
*/
|
||||
// Inspired by base2 and Prototype
|
||||
(function(){
|
||||
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
|
||||
|
||||
// The base Class implementation (does nothing)
|
||||
this.Class = function(){};
|
||||
|
||||
// Create a new Class that inherits from this class
|
||||
Class.extend = function(prop) {
|
||||
var _super = this.prototype;
|
||||
|
||||
// Instantiate a base class (but only create the instance,
|
||||
// don't run the init constructor)
|
||||
initializing = true;
|
||||
var prototype = new this();
|
||||
initializing = false;
|
||||
|
||||
// Copy the properties over onto the new prototype
|
||||
for (var name in prop) {
|
||||
// Check if we're overwriting an existing function
|
||||
prototype[name] = typeof prop[name] == "function" &&
|
||||
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
|
||||
(function(name, fn){
|
||||
return function() {
|
||||
var tmp = this._super;
|
||||
|
||||
// Add a new ._super() method that is the same method
|
||||
// but on the super-class
|
||||
this._super = _super[name];
|
||||
|
||||
// The method only need to be bound temporarily, so we
|
||||
// remove it when we're done executing
|
||||
var ret = fn.apply(this, arguments);
|
||||
this._super = tmp;
|
||||
|
||||
return ret;
|
||||
};
|
||||
})(name, prop[name]) :
|
||||
prop[name];
|
||||
}
|
||||
|
||||
// The dummy class constructor
|
||||
function Class() {
|
||||
// All construction is actually done in the init method
|
||||
if ( !initializing && this.init )
|
||||
this.init.apply(this, arguments);
|
||||
}
|
||||
|
||||
// Populate our constructed prototype object
|
||||
Class.prototype = prototype;
|
||||
|
||||
// Enforce the constructor to be what we expect
|
||||
Class.prototype.constructor = Class;
|
||||
|
||||
// And make this class extendable
|
||||
Class.extend = arguments.callee;
|
||||
|
||||
return Class;
|
||||
};
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,9 @@
|
|||
/*
|
||||
*= require select2
|
||||
*= require_self
|
||||
*= require tom-select
|
||||
*= require TomSelect_remove_button
|
||||
|
||||
after vendor css for easier overriding:
|
||||
*= require_self
|
||||
*/
|
||||
|
||||
/* light and dark mode colorschemes */
|
||||
|
|
@ -399,7 +402,6 @@ button,
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
div.select2-choices,
|
||||
a.button {
|
||||
background-color: var(--color-button-bg);
|
||||
border-bottom-color: var(--color-fg-shape);
|
||||
|
|
@ -1089,6 +1091,8 @@ div.comment_text code {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.markdown_help {
|
||||
background-color: var(--color-box-bg-shaded);
|
||||
border: 1px solid var(--color-box-border);
|
||||
|
|
@ -1243,7 +1247,6 @@ td.warned div, td.unwarned div {
|
|||
width: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* /mod dashbaord */
|
||||
|
||||
.mod {
|
||||
|
|
@ -1311,8 +1314,8 @@ table.data pre {
|
|||
max-width: 800px;
|
||||
}
|
||||
|
||||
|
||||
/* boxes */
|
||||
|
||||
.box label {
|
||||
display: block;
|
||||
float: left;
|
||||
|
|
@ -1446,51 +1449,107 @@ div.flash-success h2 {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* select2 deuglification */
|
||||
/* Using #story_holder for precedence over TomSelect's vendored CSS */
|
||||
|
||||
.select2-container-multi.select2-container-active .select2-choices {
|
||||
border: 1px solid var(--color-box-border-focus);
|
||||
}
|
||||
.select2-container .select2-results .select2-highlighted {
|
||||
background: var(--color-bg-accent);
|
||||
color: var(--color-box-bg);
|
||||
#story_holder .ts-control {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 612px;
|
||||
background-color: var(--color-box-bg);
|
||||
border: 1px solid var(--color-box-border);
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 2px;
|
||||
padding: 0px;
|
||||
padding-top: 2px;
|
||||
/* supposed to be inherited from body, but TS overwrites */
|
||||
font-family: "helvetica neue", arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
color: var(--color-fg);
|
||||
line-height: 1.45rem;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices {
|
||||
border-color: var(--color-box-border);
|
||||
background-color: var(--color-box-bg);
|
||||
background-image: none;
|
||||
padding-top: 2px;
|
||||
#story_holder .ts-control:focus-within {
|
||||
border-color: var(--color-box-border-focus)
|
||||
}
|
||||
|
||||
.select2-container .select2-drop {
|
||||
background-color: var(--color-box-bg);
|
||||
border-color: var(--color-box-border-focus);
|
||||
#story_holder .ts-control .data-ts-item { /* item already selected by user*/
|
||||
background-color: #e4e4e4;
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
border: 1px solid #aaaaaa;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
line-height: 13px;
|
||||
margin: 3px 0 3px 5px;
|
||||
padding: 3px 0.5rem 3px 1rem !important;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-active .select2-choices {
|
||||
box-shadow : none;
|
||||
#story_holder .ts-control .data-ts-item a {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 13px;
|
||||
padding: 2px;
|
||||
left: 0px;
|
||||
margin-left: 0;
|
||||
/*
|
||||
For a decade, select2 had the `x` to remove a tag on the left. TomSelect puts it
|
||||
on the right, so we hide that and insert an`x` on the left with `a::after` below.
|
||||
*/
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.select2-container-active .select2-choice,
|
||||
.select2-container-active .select2-choices {
|
||||
box-shadow : none;
|
||||
#story_holder .ts-control .data-ts-item a::after {
|
||||
content: "\2715";
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
padding-right: 3px;
|
||||
top: 0px;
|
||||
width: 12px;
|
||||
cursor: pointer;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice {
|
||||
border-bottom-color: transparent;
|
||||
box-shadow : none;
|
||||
#story_holder .ts-dropdown {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
background-color: var(--color-box-bg);
|
||||
border-color: var(--color-box-border-focus);
|
||||
border-radius: 0 0 4px 4px;
|
||||
border-top: 1px solid #aaa;
|
||||
box-shadow: 0 4px rgb(0 0 0 / 15%);
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.select2-container .select2-results li em {
|
||||
background: none;
|
||||
color: var(--color-fg-contrast-4-5);
|
||||
font-style: italic;
|
||||
padding-left: 0.5em;
|
||||
#story_holder .ts-dropdown .ts-dropdown-content .active {
|
||||
background: var(--color-bg-accent);
|
||||
color: var(--color-box-bg);
|
||||
}
|
||||
|
||||
.select2-container .select2-results .select2-highlighted em {
|
||||
color: var(--color-box-bg);
|
||||
#story_holder .ts-dropdown-content {
|
||||
max-height: 200px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#story_holder .ts-dropdown .option {
|
||||
color: var(--color-fg);
|
||||
font-family: "helvetica neue", arial, sans-serif;
|
||||
font-size: 10px;
|
||||
line-height: 80%;
|
||||
margin: 0px;
|
||||
padding: 7px 7px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* pushover */
|
||||
|
|
@ -1778,7 +1837,6 @@ div.flash-success h2 {
|
|||
display: none;
|
||||
}
|
||||
|
||||
|
||||
li div.details {
|
||||
margin: 0 0 0 36px;
|
||||
}
|
||||
|
|
@ -1835,6 +1893,10 @@ div.flash-success h2 {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
#story_holder .ts-wrapper .multi {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
float: none;
|
||||
|
|
|
|||
|
|
@ -1,458 +0,0 @@
|
|||
/*
|
||||
Version: @@ver@@ Timestamp: @@timestamp@@
|
||||
*/
|
||||
.select2-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* inline-block for ie7 */
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
|
||||
}
|
||||
|
||||
.select2-container,
|
||||
.select2-drop,
|
||||
.select2-search,
|
||||
.select2-container .select2-search input{
|
||||
/*
|
||||
Force border-box so that % widths fit the parent
|
||||
container without overlap because of margin/padding.
|
||||
|
||||
More Info : http://www.quirksmode.org/css/box.html
|
||||
*/
|
||||
-moz-box-sizing: border-box; /* firefox */
|
||||
-ms-box-sizing: border-box; /* ie */
|
||||
-webkit-box-sizing: border-box; /* webkit */
|
||||
-khtml-box-sizing: border-box; /* konqueror */
|
||||
box-sizing: border-box; /* css3 */
|
||||
}
|
||||
|
||||
.select2-container .select2-choice {
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
|
||||
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
||||
background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
|
||||
background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #aaa;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
padding: 0 0 0 8px;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice span {
|
||||
margin-right: 26px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice abbr {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
font-size: 1px;
|
||||
background: url(<%= asset_path 'select2.png' %>) right top no-repeat;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border:0;
|
||||
outline: 0;
|
||||
}
|
||||
.select2-container .select2-choice abbr:hover {
|
||||
background-position: right -11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select2-container .select2-drop {
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
border-top: 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
-o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
z-index: 999;
|
||||
width:100%;
|
||||
margin-top:-1px;
|
||||
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice div {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
background: #ccc;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
|
||||
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
|
||||
background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
|
||||
border-left: 1px solid #aaa;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice div b {
|
||||
background: url('<%= asset_path 'select2.png' %>') no-repeat 0 1px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select2-container .select2-search {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
z-index: 1010;
|
||||
min-height: 26px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.select2-container .select2-search-hidden {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
}
|
||||
|
||||
.select2-container .select2-search input {
|
||||
background: #fff url('<%= asset_path 'select2.png' %>') no-repeat 100% -22px;
|
||||
background: url('<%= asset_path 'select2.png' %>') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
||||
background: url('<%= asset_path 'select2.png' %>') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('<%= asset_path 'select2.png' %>') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('<%= asset_path 'select2.png' %>') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background: url('<%= asset_path 'select2.png' %>') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
background: url('<%= asset_path 'select2.png' %>') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
padding: 4px 20px 4px 5px;
|
||||
outline: 0;
|
||||
border: 1px solid #aaa;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
width:100%;
|
||||
margin:0;
|
||||
height:auto !important;
|
||||
min-height: 26px;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
.select2-container .select2-search input.select2-active {
|
||||
background: #fff url('spinner.gif') no-repeat 100%;
|
||||
background: url('spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
||||
background: url('spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background: url('spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
background: url('spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
}
|
||||
|
||||
|
||||
.select2-container-active .select2-choice,
|
||||
.select2-container-active .select2-choices {
|
||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
|
||||
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
border: 1px solid #5897fb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice {
|
||||
border: 1px solid #aaa;
|
||||
border-bottom-color: transparent;
|
||||
-webkit-box-shadow: 0 1px 0 #fff inset;
|
||||
-moz-box-shadow : 0 1px 0 #fff inset;
|
||||
-o-box-shadow : 0 1px 0 #fff inset;
|
||||
box-shadow : 0 1px 0 #fff inset;
|
||||
background-color: #eee;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
|
||||
background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
|
||||
background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
|
||||
background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
|
||||
-webkit-border-bottom-left-radius : 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomleft : 0;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
border-bottom-left-radius : 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice div {
|
||||
background: transparent;
|
||||
border-left: none;
|
||||
}
|
||||
.select2-dropdown-open .select2-choice div b {
|
||||
background-position: -18px 1px;
|
||||
}
|
||||
|
||||
/* results */
|
||||
.select2-container .select2-results {
|
||||
margin: 4px 4px 4px 0;
|
||||
padding: 0 0 0 4px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
.select2-container .select2-results li {
|
||||
line-height: 80%;
|
||||
padding: 7px 7px 8px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.select2-container .select2-results .select2-highlighted {
|
||||
background: #3875d7;
|
||||
color: #fff;
|
||||
}
|
||||
.select2-container .select2-results li em {
|
||||
background: #feffde;
|
||||
font-style: normal;
|
||||
}
|
||||
.select2-container .select2-results .select2-highlighted em {
|
||||
background: transparent;
|
||||
}
|
||||
.select2-container .select2-results .select2-no-results {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
disabled look for already selected choices in the results dropdown
|
||||
.select2-container .select2-results .select2-disabled.select2-highlighted {
|
||||
color: #666;
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
cursor: default;
|
||||
}
|
||||
.select2-container .select2-results .select2-disabled {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
cursor: default;
|
||||
}
|
||||
*/
|
||||
.select2-container .select2-results .select2-disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select2-more-results.select2-active {
|
||||
background: #f4f4f4 url('spinner.gif') no-repeat 100%;
|
||||
}
|
||||
|
||||
.select2-more-results {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* disabled styles */
|
||||
|
||||
.select2-container.select2-container-disabled .select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select2-container.select2-container-disabled .select2-choice div {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* multiselect */
|
||||
|
||||
.select2-container-multi .select2-choices {
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
border: 1px solid #aaa;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
height: auto !important;
|
||||
height: 1%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-drop {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-active .select2-choices {
|
||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
|
||||
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
border: 1px solid #5897fb;
|
||||
outline: none;
|
||||
}
|
||||
.select2-container-multi .select2-choices li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-field {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-field input {
|
||||
color: #666;
|
||||
background: transparent !important;
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
height: 15px;
|
||||
padding: 5px;
|
||||
margin: 1px 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow : none;
|
||||
-o-box-shadow : none;
|
||||
box-shadow : none;
|
||||
}
|
||||
|
||||
|
||||
.select2-default {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius : 3px;
|
||||
border-radius : 3px;
|
||||
-moz-background-clip : padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
background-color: #e4e4e4;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
-moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
color: #333;
|
||||
border: 1px solid #aaaaaa;
|
||||
line-height: 13px;
|
||||
padding: 3px 5px 3px 18px;
|
||||
margin: 3px 0 3px 5px;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice span {
|
||||
cursor: default;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice-focus {
|
||||
background: #d4d4d4;
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 4px;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
font-size: 1px;
|
||||
background: url(<%= asset_path 'select2.png' %>) right top no-repeat;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-search-choice-close {
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
|
||||
background-position: right -11px;
|
||||
}
|
||||
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
|
||||
background-position: right -11px;
|
||||
}
|
||||
|
||||
|
||||
.select2-container-multi .select2-results {
|
||||
margin: -1px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* disabled styles */
|
||||
|
||||
.select2-container-multi.select2-container-disabled .select2-choices{
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
|
||||
background-image: none;
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #ddd;
|
||||
padding: 3px 5px 3px 5px;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
|
||||
display: none;
|
||||
}
|
||||
/* end multiselect */
|
||||
|
|
@ -28,9 +28,6 @@
|
|||
<%= stylesheet_link_tag "application", :media => "all" %>
|
||||
<% if @user %>
|
||||
<%= javascript_include_tag "application" %>
|
||||
<script>
|
||||
Lobsters.curUser = '<%= @user.username %>';
|
||||
</script>
|
||||
<% end %>
|
||||
<%= csrf_meta_tags %>
|
||||
<% if @rss_link %>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
(t.filtered_count == 1 ? "" : "s") << " filtering</em>"
|
||||
end
|
||||
|
||||
[ "#{t.tag} - #{t.description}", t.tag, { "data-html" => raw(html) } ]},
|
||||
[ "#{t.tag} - #{t.description}", t.tag, { "data-title" => raw(html) } ]},
|
||||
f.object.tags_a), {}, { :multiple => true } %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
/**
|
||||
* Tom Select v2.1.0
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.caret_position = factory());
|
||||
})(this, (function () { 'use strict';
|
||||
|
||||
// @ts-ignore TS2691 "An import path cannot end with a '.ts' extension"
|
||||
const latin_convert = {
|
||||
'æ': 'ae',
|
||||
'ⱥ': 'a',
|
||||
'ø': 'o'
|
||||
};
|
||||
new RegExp(Object.keys(latin_convert).join('|'), 'gu');
|
||||
|
||||
// @ts-ignore TS2691 "An import path cannot end with a '.ts' extension"
|
||||
/**
|
||||
* Iterates over arrays and hashes.
|
||||
*
|
||||
* ```
|
||||
* iterate(this.items, function(item, id) {
|
||||
* // invoked for each item
|
||||
* });
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
|
||||
const iterate = (object, callback) => {
|
||||
if (Array.isArray(object)) {
|
||||
object.forEach(callback);
|
||||
} else {
|
||||
for (var key in object) {
|
||||
if (object.hasOwnProperty(key)) {
|
||||
callback(object[key], key);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove css classes
|
||||
*
|
||||
*/
|
||||
|
||||
const removeClasses = (elmts, ...classes) => {
|
||||
var norm_classes = classesArray(classes);
|
||||
elmts = castAsArray(elmts);
|
||||
elmts.map(el => {
|
||||
norm_classes.map(cls => {
|
||||
el.classList.remove(cls);
|
||||
});
|
||||
});
|
||||
};
|
||||
/**
|
||||
* Return arguments
|
||||
*
|
||||
*/
|
||||
|
||||
const classesArray = args => {
|
||||
var classes = [];
|
||||
iterate(args, _classes => {
|
||||
if (typeof _classes === 'string') {
|
||||
_classes = _classes.trim().split(/[\11\12\14\15\40]/);
|
||||
}
|
||||
|
||||
if (Array.isArray(_classes)) {
|
||||
classes = classes.concat(_classes);
|
||||
}
|
||||
});
|
||||
return classes.filter(Boolean);
|
||||
};
|
||||
/**
|
||||
* Create an array from arg if it's not already an array
|
||||
*
|
||||
*/
|
||||
|
||||
const castAsArray = arg => {
|
||||
if (!Array.isArray(arg)) {
|
||||
arg = [arg];
|
||||
}
|
||||
|
||||
return arg;
|
||||
};
|
||||
/**
|
||||
* Get the index of an element amongst sibling nodes of the same type
|
||||
*
|
||||
*/
|
||||
|
||||
const nodeIndex = (el, amongst) => {
|
||||
if (!el) return -1;
|
||||
amongst = amongst || el.nodeName;
|
||||
var i = 0;
|
||||
|
||||
while (el = el.previousElementSibling) {
|
||||
if (el.matches(amongst)) {
|
||||
i++;
|
||||
}
|
||||
}
|
||||
|
||||
return i;
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin: "dropdown_input" (Tom Select)
|
||||
* Copyright (c) contributors
|
||||
*
|
||||
* 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:
|
||||
* http://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.
|
||||
*
|
||||
*/
|
||||
function plugin () {
|
||||
var self = this;
|
||||
/**
|
||||
* Moves the caret to the specified index.
|
||||
*
|
||||
* The input must be moved by leaving it in place and moving the
|
||||
* siblings, due to the fact that focus cannot be restored once lost
|
||||
* on mobile webkit devices
|
||||
*
|
||||
*/
|
||||
|
||||
self.hook('instead', 'setCaret', new_pos => {
|
||||
if (self.settings.mode === 'single' || !self.control.contains(self.control_input)) {
|
||||
new_pos = self.items.length;
|
||||
} else {
|
||||
new_pos = Math.max(0, Math.min(self.items.length, new_pos));
|
||||
|
||||
if (new_pos != self.caretPos && !self.isPending) {
|
||||
self.controlChildren().forEach((child, j) => {
|
||||
if (j < new_pos) {
|
||||
self.control_input.insertAdjacentElement('beforebegin', child);
|
||||
} else {
|
||||
self.control.appendChild(child);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
self.caretPos = new_pos;
|
||||
});
|
||||
self.hook('instead', 'moveCaret', direction => {
|
||||
if (!self.isFocused) return; // move caret before or after selected items
|
||||
|
||||
const last_active = self.getLastActive(direction);
|
||||
|
||||
if (last_active) {
|
||||
const idx = nodeIndex(last_active);
|
||||
self.setCaret(direction > 0 ? idx + 1 : idx);
|
||||
self.setActiveItem();
|
||||
removeClasses(last_active, 'last-active'); // move caret left or right of current position
|
||||
} else {
|
||||
self.setCaret(self.caretPos + direction);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return plugin;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=caret_position.js.map
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
/**
|
||||
* Tom Select v2.1.0
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.input_autogrow = factory());
|
||||
})(this, (function () { 'use strict';
|
||||
|
||||
/**
|
||||
* Converts a scalar to its best string representation
|
||||
* for hash keys and HTML attribute values.
|
||||
*
|
||||
* Transformations:
|
||||
* 'str' -> 'str'
|
||||
* null -> ''
|
||||
* undefined -> ''
|
||||
* true -> '1'
|
||||
* false -> '0'
|
||||
* 0 -> '0'
|
||||
* 1 -> '1'
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* Prevent default
|
||||
*
|
||||
*/
|
||||
|
||||
const addEvent = (target, type, callback, options) => {
|
||||
target.addEventListener(type, callback, options);
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin: "input_autogrow" (Tom Select)
|
||||
*
|
||||
* 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:
|
||||
* http://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.
|
||||
*
|
||||
*/
|
||||
function plugin () {
|
||||
var self = this;
|
||||
self.on('initialize', () => {
|
||||
var test_input = document.createElement('span');
|
||||
var control = self.control_input;
|
||||
test_input.style.cssText = 'position:absolute; top:-99999px; left:-99999px; width:auto; padding:0; white-space:pre; ';
|
||||
self.wrapper.appendChild(test_input);
|
||||
var transfer_styles = ['letterSpacing', 'fontSize', 'fontFamily', 'fontWeight', 'textTransform'];
|
||||
|
||||
for (const style_name of transfer_styles) {
|
||||
// @ts-ignore TS7015 https://stackoverflow.com/a/50506154/697576
|
||||
test_input.style[style_name] = control.style[style_name];
|
||||
}
|
||||
/**
|
||||
* Set the control width
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
var resize = () => {
|
||||
test_input.textContent = control.value;
|
||||
control.style.width = test_input.clientWidth + 'px';
|
||||
};
|
||||
|
||||
resize();
|
||||
self.on('update item_add item_remove', resize);
|
||||
addEvent(control, 'input', resize);
|
||||
addEvent(control, 'keyup', resize);
|
||||
addEvent(control, 'blur', resize);
|
||||
addEvent(control, 'update', resize);
|
||||
});
|
||||
}
|
||||
|
||||
return plugin;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=input_autogrow.js.map
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
/**
|
||||
* Tom Select v2.1.0
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.remove_button = factory());
|
||||
})(this, (function () { 'use strict';
|
||||
|
||||
// @ts-ignore TS2691 "An import path cannot end with a '.ts' extension"
|
||||
const latin_convert = {
|
||||
'æ': 'ae',
|
||||
'ⱥ': 'a',
|
||||
'ø': 'o'
|
||||
};
|
||||
new RegExp(Object.keys(latin_convert).join('|'), 'gu');
|
||||
|
||||
/**
|
||||
* Return a dom element from either a dom query string, jQuery object, a dom element or html string
|
||||
* https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
|
||||
*
|
||||
* param query should be {}
|
||||
*/
|
||||
|
||||
const getDom = query => {
|
||||
if (query.jquery) {
|
||||
return query[0];
|
||||
}
|
||||
|
||||
if (query instanceof HTMLElement) {
|
||||
return query;
|
||||
}
|
||||
|
||||
if (isHtmlString(query)) {
|
||||
let div = document.createElement('div');
|
||||
div.innerHTML = query.trim(); // Never return a text node of whitespace as the result
|
||||
|
||||
return div.firstChild;
|
||||
}
|
||||
|
||||
return document.querySelector(query);
|
||||
};
|
||||
const isHtmlString = arg => {
|
||||
if (typeof arg === 'string' && arg.indexOf('<') > -1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a scalar to its best string representation
|
||||
* for hash keys and HTML attribute values.
|
||||
*
|
||||
* Transformations:
|
||||
* 'str' -> 'str'
|
||||
* null -> ''
|
||||
* undefined -> ''
|
||||
* true -> '1'
|
||||
* false -> '0'
|
||||
* 0 -> '0'
|
||||
* 1 -> '1'
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* Escapes a string for use within HTML.
|
||||
*
|
||||
*/
|
||||
|
||||
const escape_html = str => {
|
||||
return (str + '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
};
|
||||
/**
|
||||
* Prevent default
|
||||
*
|
||||
*/
|
||||
|
||||
const preventDefault = (evt, stop = false) => {
|
||||
if (evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
if (stop) {
|
||||
evt.stopPropagation();
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Prevent default
|
||||
*
|
||||
*/
|
||||
|
||||
const addEvent = (target, type, callback, options) => {
|
||||
target.addEventListener(type, callback, options);
|
||||
};
|
||||
|
||||
/**
|
||||
* Plugin: "remove_button" (Tom Select)
|
||||
* Copyright (c) contributors
|
||||
*
|
||||
* 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:
|
||||
* http://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.
|
||||
*
|
||||
*/
|
||||
function plugin (userOptions) {
|
||||
const options = Object.assign({
|
||||
label: '×',
|
||||
title: 'Remove',
|
||||
className: 'remove',
|
||||
append: true
|
||||
}, userOptions); //options.className = 'remove-single';
|
||||
|
||||
var self = this; // override the render method to add remove button to each item
|
||||
|
||||
if (!options.append) {
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
|
||||
self.hook('after', 'setupTemplates', () => {
|
||||
var orig_render_item = self.settings.render.item;
|
||||
|
||||
self.settings.render.item = (data, escape) => {
|
||||
var item = getDom(orig_render_item.call(self, data, escape));
|
||||
var close_button = getDom(html);
|
||||
item.appendChild(close_button);
|
||||
addEvent(close_button, 'mousedown', evt => {
|
||||
preventDefault(evt, true);
|
||||
});
|
||||
addEvent(close_button, 'click', evt => {
|
||||
// propagating will trigger the dropdown to show for single mode
|
||||
preventDefault(evt, true);
|
||||
if (self.isLocked) return;
|
||||
if (!self.shouldDelete([item], evt)) return;
|
||||
self.removeItem(item);
|
||||
self.refreshOptions(false);
|
||||
self.inputState();
|
||||
});
|
||||
return item;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return plugin;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=remove_button.js.map
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,44 @@
|
|||
.#{$select-ns}-wrapper.plugin-remove_button{
|
||||
|
||||
.item{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.item .remove {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 0 $select-padding-item-x;
|
||||
border-left: 1px solid $select-color-item-border;
|
||||
border-radius: 0 2px 2px 0;
|
||||
box-sizing: border-box;
|
||||
margin-left: $select-padding-item-x;
|
||||
}
|
||||
|
||||
.item .remove:hover {
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.item.active .remove {
|
||||
border-left-color: $select-color-item-active-border;
|
||||
}
|
||||
|
||||
&.disabled .item .remove:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.disabled .item .remove {
|
||||
border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
|
||||
}
|
||||
|
||||
.remove-single {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,387 @@
|
|||
/**
|
||||
* tom-select.css (v2.1.0)
|
||||
* Copyright (c) contributors
|
||||
*
|
||||
* 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:
|
||||
* http://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.
|
||||
*
|
||||
*/
|
||||
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
|
||||
visibility: visible !important;
|
||||
background: #f2f2f2 !important;
|
||||
background: rgba(0, 0, 0, 0.06) !important;
|
||||
border: 0 none !important;
|
||||
box-shadow: inset 0 0 12px 4px #fff;
|
||||
}
|
||||
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
|
||||
content: "!";
|
||||
visibility: hidden;
|
||||
}
|
||||
.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.plugin-checkbox_options .option input {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.plugin-clear_button .ts-control {
|
||||
padding-right: calc(1em + (3 * 6px)) !important;
|
||||
}
|
||||
.plugin-clear_button .clear-button {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: calc(8px - 6px);
|
||||
margin-right: 0 !important;
|
||||
background: transparent !important;
|
||||
transition: opacity 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.plugin-clear_button.single .clear-button {
|
||||
right: calc(8px - 6px + 2rem);
|
||||
}
|
||||
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ts-wrapper .dropdown-header {
|
||||
position: relative;
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid #d0d0d0;
|
||||
background: #f8f8f8;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.ts-wrapper .dropdown-header-close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
color: #303030;
|
||||
opacity: 0.4;
|
||||
margin-top: -12px;
|
||||
line-height: 20px;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.ts-wrapper .dropdown-header-close:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.plugin-dropdown_input.focus.dropdown-active .ts-control {
|
||||
box-shadow: none;
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
.plugin-dropdown_input .dropdown-input {
|
||||
border: 1px solid #d0d0d0;
|
||||
border-width: 0 0 1px 0;
|
||||
display: block;
|
||||
padding: 8px 8px;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
.plugin-dropdown_input .items-placeholder {
|
||||
border: 0 none !important;
|
||||
box-shadow: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
|
||||
min-width: 0;
|
||||
}
|
||||
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
|
||||
flex: none;
|
||||
min-width: 4px;
|
||||
}
|
||||
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
|
||||
display: flex;
|
||||
}
|
||||
.ts-dropdown.plugin-optgroup_columns .optgroup {
|
||||
border-right: 1px solid #f2f2f2;
|
||||
border-top: 0 none;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
|
||||
border-right: 0 none;
|
||||
}
|
||||
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
|
||||
display: none;
|
||||
}
|
||||
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
.ts-wrapper.plugin-remove_button .item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.ts-wrapper.plugin-remove_button .item .remove {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
border-left: 1px solid #d0d0d0;
|
||||
border-radius: 0 2px 2px 0;
|
||||
box-sizing: border-box;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.ts-wrapper.plugin-remove_button .item .remove:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.ts-wrapper.plugin-remove_button .item.active .remove {
|
||||
border-left-color: #cacaca;
|
||||
}
|
||||
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
|
||||
background: none;
|
||||
}
|
||||
.ts-wrapper.plugin-remove_button.disabled .item .remove {
|
||||
border-left-color: white;
|
||||
}
|
||||
.ts-wrapper.plugin-remove_button .remove-single {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.ts-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ts-dropdown,
|
||||
.ts-control,
|
||||
.ts-control input {
|
||||
color: #303030;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-smoothing: inherit;
|
||||
}
|
||||
|
||||
.ts-control,
|
||||
.ts-wrapper.single.input-active .ts-control {
|
||||
background: #fff;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ts-control {
|
||||
border: 1px solid #d0d0d0;
|
||||
padding: 8px 8px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ts-wrapper.multi.has-items .ts-control {
|
||||
padding: calc( 8px - 2px - 0px) 8px calc( 8px - 2px - 3px - 0px);
|
||||
}
|
||||
.full .ts-control {
|
||||
background-color: #fff;
|
||||
}
|
||||
.disabled .ts-control, .disabled .ts-control * {
|
||||
cursor: default !important;
|
||||
}
|
||||
.focus .ts-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.ts-control > * {
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
}
|
||||
.ts-wrapper.multi .ts-control > div {
|
||||
cursor: pointer;
|
||||
margin: 0 3px 3px 0;
|
||||
padding: 2px 6px;
|
||||
background: #f2f2f2;
|
||||
color: #303030;
|
||||
border: 0px solid #d0d0d0;
|
||||
}
|
||||
.ts-wrapper.multi .ts-control > div.active {
|
||||
background: #e8e8e8;
|
||||
color: #303030;
|
||||
border: 0px solid #cacaca;
|
||||
}
|
||||
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
|
||||
color: #7d7d7d;
|
||||
background: white;
|
||||
border: 0px solid white;
|
||||
}
|
||||
.ts-control > input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 7rem;
|
||||
display: inline-block !important;
|
||||
padding: 0 !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
text-indent: 0 !important;
|
||||
border: 0 none !important;
|
||||
background: none !important;
|
||||
line-height: inherit !important;
|
||||
-webkit-user-select: auto !important;
|
||||
-moz-user-select: auto !important;
|
||||
-ms-user-select: auto !important;
|
||||
user-select: auto !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ts-control > input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
.ts-control > input:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
.has-items .ts-control > input {
|
||||
margin: 0px 4px !important;
|
||||
}
|
||||
.ts-control.rtl {
|
||||
text-align: right;
|
||||
}
|
||||
.ts-control.rtl.single .ts-control:after {
|
||||
left: 15px;
|
||||
right: auto;
|
||||
}
|
||||
.ts-control.rtl .ts-control > input {
|
||||
margin: 0px 4px 0px -2px !important;
|
||||
}
|
||||
.disabled .ts-control {
|
||||
opacity: 0.5;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.input-hidden .ts-control > input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
}
|
||||
|
||||
.ts-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
border: 1px solid #d0d0d0;
|
||||
background: #fff;
|
||||
margin: 0.25rem 0 0 0;
|
||||
border-top: 0 none;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.ts-dropdown [data-selectable] {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ts-dropdown [data-selectable] .highlight {
|
||||
background: rgba(125, 168, 208, 0.2);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.ts-dropdown .option,
|
||||
.ts-dropdown .optgroup-header,
|
||||
.ts-dropdown .no-results,
|
||||
.ts-dropdown .create {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
|
||||
cursor: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.ts-dropdown [data-selectable].option {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ts-dropdown .optgroup:first-child .optgroup-header {
|
||||
border-top: 0 none;
|
||||
}
|
||||
.ts-dropdown .optgroup-header {
|
||||
color: #303030;
|
||||
background: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
.ts-dropdown .active {
|
||||
background-color: #f5fafd;
|
||||
color: #495c68;
|
||||
}
|
||||
.ts-dropdown .active.create {
|
||||
color: #495c68;
|
||||
}
|
||||
.ts-dropdown .create {
|
||||
color: rgba(48, 48, 48, 0.5);
|
||||
}
|
||||
.ts-dropdown .spinner {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 5px 8px;
|
||||
}
|
||||
.ts-dropdown .spinner:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 3px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #d0d0d0;
|
||||
border-color: #d0d0d0 transparent #d0d0d0 transparent;
|
||||
animation: lds-dual-ring 1.2s linear infinite;
|
||||
}
|
||||
@keyframes lds-dual-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ts-dropdown-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 200px;
|
||||
overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.ts-hidden-accessible {
|
||||
border: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
/*# sourceMappingURL=tom-select.css.map */
|
||||
Loading…
Reference in New Issue