From 5d63f0a402e6976fd676c55d2b6c4d91f8b980fe Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sun, 14 Jul 2019 21:42:57 -0400 Subject: [PATCH 01/20] [frio] Restore button outline for accessibility --- view/theme/frio/css/style.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index a88276f15d..19c4035f8a 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -192,7 +192,6 @@ blockquote { background-image: none; text-shadow: none; border-radius: 3px; - outline: 0!important; margin-bottom: 0; font-size: 14px; font-weight: 600; @@ -3425,7 +3424,6 @@ section .profile-match-wrapper { background-image: none; text-shadow: none; border-radius: 3px; - outline: 0!important; margin-bottom: 0; font-size: 14px; font-weight: 600; @@ -3444,7 +3442,6 @@ section .profile-match-wrapper { background-image: none; text-shadow: none; border-radius: 3px; - outline: 0!important; margin-bottom: 0; font-size: 14px; font-weight: 600; From fe51c53798e5b2ec0032c478ade8bb7b1255a023 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sun, 14 Jul 2019 21:44:48 -0400 Subject: [PATCH 02/20] [frio] Add friendica-tagsinput library based on bootstrap-tagsinput --- .../frameworks/friendica-tagsinput/LICENSE | 20 + .../friendica-tagsinput-typeahead.css | 54 ++ .../friendica-tagsinput.css | 72 ++ .../friendica-tagsinput.js | 695 ++++++++++++++++++ 4 files changed, 841 insertions(+) create mode 100644 view/theme/frio/frameworks/friendica-tagsinput/LICENSE create mode 100644 view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput-typeahead.css create mode 100644 view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.css create mode 100644 view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.js diff --git a/view/theme/frio/frameworks/friendica-tagsinput/LICENSE b/view/theme/frio/frameworks/friendica-tagsinput/LICENSE new file mode 100644 index 0000000000..58bc985baf --- /dev/null +++ b/view/theme/frio/frameworks/friendica-tagsinput/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2013 Tim Schlechter + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput-typeahead.css b/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput-typeahead.css new file mode 100644 index 0000000000..8cec654c47 --- /dev/null +++ b/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput-typeahead.css @@ -0,0 +1,54 @@ +/* + * friendica-tagsinput v0.8.0 + * + */ + +.twitter-typeahead .tt-query, +.twitter-typeahead .tt-hint { + margin-bottom: 0; +} + +.twitter-typeahead .tt-hint +{ + display: none; +} + +.tt-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + background-color: #ffffff; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; + cursor: pointer; +} + +.tt-suggestion { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.428571429; + color: #333333; + white-space: nowrap; +} + +.tt-suggestion:hover, +.tt-suggestion:focus { + color: #ffffff; + text-decoration: none; + outline: 0; + background-color: #428bca; +} diff --git a/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.css b/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.css new file mode 100644 index 0000000000..f2e1197a55 --- /dev/null +++ b/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.css @@ -0,0 +1,72 @@ +/* + * friendica-tagsinput v0.8.0 + * + */ + +.friendica-tagsinput { + background-color: #fff; + border: 1px solid #ccc; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + display: inline-block; + padding: 4px 6px; + color: #555; + vertical-align: middle; + border-radius: 4px; + max-width: 100%; + line-height: 22px; + cursor: text; + height: auto; +} +.friendica-tagsinput.input-lg { + line-height: 27px; +} +.friendica-tagsinput input { + border: none; + box-shadow: none; + outline: none; + background-color: transparent; + padding: 0 6px; + margin: 0; + width: auto; + max-width: inherit; +} +.friendica-tagsinput.form-control input::-moz-placeholder { + color: #777; + opacity: 1; +} +.friendica-tagsinput.form-control input:-ms-input-placeholder { + color: #777; +} +.friendica-tagsinput.form-control input::-webkit-input-placeholder { + color: #777; +} +.friendica-tagsinput input:focus { + border: none; + box-shadow: none; +} +.friendica-tagsinput .tag { + margin: 0 2px 2px 0; + color: white; + font-weight: normal; +} +.friendica-tagsinput .tag img { + width: auto; + height: 1.5em; + vertical-align: text-top; + margin-right: 8px; +} +.friendica-tagsinput .tag [data-role="remove"] { + margin-left: 8px; + cursor: pointer; +} +.friendica-tagsinput .tag [data-role="remove"]:after { + content: "x"; + padding: 0px 2px; + font-weight: bold; +} +.friendica-tagsinput .tag [data-role="remove"]:hover { + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} +.friendica-tagsinput .tag [data-role="remove"]:hover:active { + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} diff --git a/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.js b/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.js new file mode 100644 index 0000000000..2e83eedc64 --- /dev/null +++ b/view/theme/frio/frameworks/friendica-tagsinput/friendica-tagsinput.js @@ -0,0 +1,695 @@ +/* + * friendica-tagsinput v0.8.0 + * Based on bootstrap-tagsinput v0.8.0 + * + * Adds: + * - optional thumbnail + * - copying source input element class to the pseudo-input element + * + */ + +(function ($) { + "use strict"; + + var defaultOptions = { + tagClass: function(item) { + return 'label label-info'; + }, + focusClass: 'focus', + itemValue: function(item) { + return item ? item.toString() : item; + }, + itemText: function(item) { + return this.itemValue(item); + }, + itemTitle: function(item) { + return null; + }, + itemThumb: function(item) { + return null; + }, + freeInput: true, + addOnBlur: true, + maxTags: undefined, + maxChars: undefined, + confirmKeys: [13, 44], + delimiter: ',', + delimiterRegex: null, + cancelConfirmKeysOnEmpty: false, + onTagExists: function(item, $tag) { + $tag.hide().fadeIn(); + }, + trimValue: false, + allowDuplicates: false, + triggerChange: true + }; + + /** + * Constructor function + */ + function TagsInput(element, options) { + this.isInit = true; + this.itemsArray = []; + + this.$element = $(element); + this.$element.hide(); + + this.isSelect = (element.tagName === 'SELECT'); + this.multiple = (this.isSelect && element.hasAttribute('multiple')); + this.objectItems = options && options.itemValue; + this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : ''; + this.inputSize = Math.max(1, this.placeholderText.length); + + this.$container = $('
'); + this.$container.addClass(this.$element.attr('class')); + this.$input = $('').appendTo(this.$container); + + this.$element.before(this.$container); + + this.build(options); + this.isInit = false; + } + + TagsInput.prototype = { + constructor: TagsInput, + + /** + * Adds the given item as a new tag. Pass true to dontPushVal to prevent + * updating the elements val() + */ + add: function(item, dontPushVal, options) { + let self = this; + + if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags) + return; + + // Ignore falsey values, except false + if (item !== false && !item) + return; + + // Trim value + if (typeof item === "string" && self.options.trimValue) { + item = $.trim(item); + } + + // Throw an error when trying to add an object while the itemValue option was not set + if (typeof item === "object" && !self.objectItems) + throw("Can't add objects when itemValue option is not set"); + + // Ignore strings only containg whitespace + if (item.toString().match(/^\s*$/)) + return; + + // If SELECT but not multiple, remove current tag + if (self.isSelect && !self.multiple && self.itemsArray.length > 0) + self.remove(self.itemsArray[0]); + + if (typeof item === "string" && this.$element[0].tagName === 'INPUT') { + var delimiter = (self.options.delimiterRegex) ? self.options.delimiterRegex : self.options.delimiter; + var items = item.split(delimiter); + if (items.length > 1) { + for (var i = 0; i < items.length; i++) { + this.add(items[i], true); + } + + if (!dontPushVal) + self.pushVal(self.options.triggerChange); + return; + } + } + + var itemValue = self.options.itemValue(item), + itemText = self.options.itemText(item), + tagClass = self.options.tagClass(item), + itemTitle = self.options.itemTitle(item), + itemThumb = self.options.itemThumb(item); + + // Ignore items allready added + var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0]; + if (existing && !self.options.allowDuplicates) { + // Invoke onTagExists + if (self.options.onTagExists) { + var $existingTag = $(".tag", self.$container).filter(function() { return $(this).data("item") === existing; }); + self.options.onTagExists(item, $existingTag); + } + return; + } + + // if length greater than limit + if (self.items().toString().length + item.length + 1 > self.options.maxInputLength) + return; + + // raise beforeItemAdd arg + var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false, options: options}); + self.$element.trigger(beforeItemAddEvent); + if (beforeItemAddEvent.cancel) + return; + + // register item in internal array and map + self.itemsArray.push(item); + + // add a tag element + var $tag = $('' + + (itemThumb !== null ? '' : '') + + htmlEncode(itemText) + '' + + ''); + $tag.data('item', item); + self.findInputWrapper().before($tag); + $tag.after(' '); + + // Check to see if the tag exists in its raw or uri-encoded form + var optionExists = ( + $('option[value="' + encodeURIComponent(itemValue) + '"]', self.$element).length || + $('option[value="' + htmlEncode(itemValue) + '"]', self.$element).length + ); + + // add