diff --git a/kitsune/sumo/static/sumo/js/wiki.editor.js b/kitsune/sumo/static/sumo/js/wiki.editor.js index 7aaf4ea2666..832698f32e7 100644 --- a/kitsune/sumo/static/sumo/js/wiki.editor.js +++ b/kitsune/sumo/static/sumo/js/wiki.editor.js @@ -1,15 +1,4 @@ -import "@selectize/selectize"; - -(function($) { - // Improve the interface for restricting articles. - $(function () { - $("select[id='id_restrict_to_groups']").selectize({ - closeAfterSelect: true, - plugins: ["clear_button", "remove_button"], - placeholder: "Restrict visibility to selected group(s) ", - }); - }); -})(jQuery); +import TomSelect from "tom-select"; function intersection(setA, setB) { // Use this function instead of the Set.intersection method, @@ -27,7 +16,7 @@ function handleTopicRelationships(topic) { // If we've checked a subtopic, automatically check its topic. if (topic.classList.contains("level-2-topic") && topic.checked) { document.getElementById(`id_topic_${topic.dataset.parentTopicId}`).checked = true; - // If we've unchecked a topic, automatically uncheck its subtopics. + // If we've unchecked a topic, automatically uncheck its subtopics. } else if (topic.classList.contains("level-1-topic") && !topic.checked) { document.querySelectorAll( '#relevant-topics input[type="checkbox"][name="topics"]' + @@ -173,34 +162,49 @@ function clearSelected(name) { // called by the time the following code is run, because it always // waits until all deferred scripts have been loaded, and the code // in this file is always bundled into a script that is deferred. -document.addEventListener("DOMContentLoaded", function() { +document.addEventListener("DOMContentLoaded", function () { // Enable/disable products and topics based on initial selections. handleUpdate(); document.querySelectorAll( '#relevant-topics input[type="checkbox"][name="topics"]' - ).forEach(function(topic) { - topic.addEventListener("click", function() { + ).forEach(function (topic) { + topic.addEventListener("click", function () { handleTopicRelationships(topic); handleUpdate(); }); }); document.querySelectorAll( '#relevant-products input[type="checkbox"][name="products"]' - ).forEach(function(product) { - product.addEventListener("click", function() { + ).forEach(function (product) { + product.addEventListener("click", function () { handleUpdate(); }); }); document.getElementById( "relevant-topics-clear-selected" - ).addEventListener("click", function(event) { + ).addEventListener("click", function (event) { event.preventDefault(); clearSelected("topics"); }); document.getElementById( "relevant-products-clear-selected" - ).addEventListener("click", function(event) { + ).addEventListener("click", function (event) { event.preventDefault(); clearSelected("products"); }); + + new TomSelect("select[id='id_restrict_to_groups']", { + closeAfterSelect: true, + plugins: { + clear_button: { + title: "Clear All", + }, + remove_button: { + title: "Remove Item" + }, + }, + placeholder: "Restrict visibility to selected group(s)", + persist: false, + create: true, + }); }); diff --git a/kitsune/sumo/static/sumo/scss/components/_wiki.scss b/kitsune/sumo/static/sumo/scss/components/_wiki.scss index 297a09db647..5922ca4f02f 100644 --- a/kitsune/sumo/static/sumo/scss/components/_wiki.scss +++ b/kitsune/sumo/static/sumo/scss/components/_wiki.scss @@ -1,7 +1,7 @@ @use '../config' as c; @use 'protocol/css/includes/lib' as p; -@import 'selectize/scss/selectize.default'; +@import 'tom-select/dist/scss/tom-select.default'; figure { &.linked-in-product { @@ -23,24 +23,24 @@ figure { #id_restrict_to_groups { // Prevents flickering by hiding the un-selectized select - // until selectize uses it to make a new one that's visible. + // until tom-select uses it to make a new one that's visible. display: none; } // These styles were pulled directly from the less files. article { - &.locked > * { + &.locked>* { opacity: 0.3; } - > * { + >* { transition: opacity 1s; } } #edit-document label { - font-weight: bold; + font-weight: bold; } .sidebar-nav { @@ -48,12 +48,13 @@ article { background-color: #fff; // margin-top: p.$spacing-md; - > li { + >li { background-color: #fff; &.selected { - > a, - > a:visited { + + >a, + >a:visited { background: #f3f3f3; border: none; border-left: p.$spacing-xs solid #000; @@ -70,124 +71,131 @@ article { } &.has-subtopics { - > a { + >a { background: #fff; } } } - > a, - > a:visited, { - color: #000; - background: #fff; - border: none; - border-left: p.$spacing-xs solid #e7e7e7; - text-transform: none; + >a, + >a:visited, + { + color: #000; + background: #fff; + border: none; + border-left: p.$spacing-xs solid #e7e7e7; + text-transform: none; - &:before { - content: none; - } + &:before { + content: none; + } - &:hover { - color: var(--color-link); - } + &:hover { + color: var(--color-link); } + } - &.subtopic-selected { - > a, - > a:visited { - background: #fff; - border-left: p.$spacing-xs solid #000; - } + &.subtopic-selected { + + >a, + >a:visited { + background: #fff; + border-left: p.$spacing-xs solid #000; } + } - > ul { - list-style: none; - margin: 0; - padding: 0; - text-transform: none; - - > li { - > a, - > a:visited { - background: #f3f3f3; - border-left: none; - color: #000; - display: block; - padding: 12px 20px; - text-decoration: none; + >ul { + list-style: none; + margin: 0; + padding: 0; + text-transform: none; - &:hover { - color: var(--color-link); - } + >li { + + >a, + >a:visited { + background: #f3f3f3; + border-left: none; + color: #000; + display: block; + padding: 12px 20px; + text-decoration: none; + + &:hover { + color: var(--color-link); } + } - &.selected { - > a, - > a:visited { - border-left: p.$spacing-xs solid #000; - font-weight: bold; + &.selected { - &:hover { - color: #000; - } + >a, + >a:visited { + border-left: p.$spacing-xs solid #000; + font-weight: bold; + + &:hover { + color: #000; } } } } } + } - .html-rtl &.topics > li { - &.selected { - > a, - > a:visited { - border-left: none; - border-right: p.$spacing-xs solid #000; - } - } + .html-rtl &.topics>li { + &.selected { - > a, - > a:visited, { + >a, + >a:visited { border-left: none; - border-right: p.$spacing-xs solid #e7e7e7; + border-right: p.$spacing-xs solid #000; } + } - &.subtopic-selected { - > a, - > a:visited { - border-left: none; - border-right: p.$spacing-xs solid #000; - } - } + >a, + >a:visited, + { + border-left: none; + border-right: p.$spacing-xs solid #e7e7e7; + } + + &.subtopic-selected { + + >a, + >a:visited { + border-left: none; + border-right: p.$spacing-xs solid #000; } } +} +} - &.related-products { - > li { - > a { - > span { - box-sizing: border-box; - display: block; - min-height: p.$spacing-lg; - padding-left: 34px; - padding-top: 3px; - position: relative; - - img { - background-repeat: no-repeat; - background-size: cover; - height: p.$spacing-lg; - left: 0; - margin-top: -12px; - position: absolute; - top: 50%; - width: p.$spacing-lg; - } +&.related-products { + >li { + >a { + >span { + box-sizing: border-box; + display: block; + min-height: p.$spacing-lg; + padding-left: 34px; + padding-top: 3px; + position: relative; + + img { + background-repeat: no-repeat; + background-size: cover; + height: p.$spacing-lg; + left: 0; + margin-top: -12px; + position: absolute; + top: 50%; + width: p.$spacing-lg; } } } } } +} #os_input, #browser_input { @@ -234,7 +242,9 @@ article { padding-top: 10px; } - a.user, a.user:visited, a.user:hover { + a.user, + a.user:visited, + a.user:hover { color: #eee; } } @@ -250,6 +260,7 @@ article { /* Document Translation page */ #localize-document { .buttons-and-preview { + /* Taken from Bootstrap V3 */ .alert { background: #FFE url("../img/warning-stripes.png") repeat-x scroll left top; @@ -297,7 +308,7 @@ article { list-style: none; padding: p.$spacing-xs; - > div { + >div { display: block; margin-bottom: p.$spacing-xs; } @@ -347,7 +358,7 @@ article { @media #{p.$mq-md} { - ul li > div { + ul li>div { display: inline-block; margin-bottom: 0; } @@ -396,6 +407,7 @@ article { height: p.$spacing-md; width: p.$spacing-md; } + .close-diff { display: none; } @@ -580,7 +592,7 @@ article { } #diff-picker-kbox { - width: 770px; + width: 770px; } #doc-source { @@ -622,6 +634,7 @@ article { right: 10px; top: 10px; z-index: 6; + &:hover { color: #999; cursor: pointer; @@ -690,13 +703,15 @@ article { } input { - width: auto !important; /* temp hack workaround */ + width: auto !important; + /* temp hack workaround */ } } } } .html-rtl { + #preview, #review-revision { .showfor { @@ -721,6 +736,7 @@ article { } } } + ul.description { li { list-style: none; @@ -818,6 +834,7 @@ div.localized { } body.translate { + /* Override the translate page to have fluid width */ .container_12 { margin: 0 25px; @@ -834,7 +851,7 @@ body.translate { /* Review */ #revision-content, #reision-html { - margin: 10px 0; + margin: 10px 0; pre { white-space: pre-wrap; @@ -872,7 +889,7 @@ body.review { div.help-text { background: #fff; border-radius: 0 0 10px 10px; - box-shadow: 0 10px 10px rgba(0,0,0,0.25), inset -1px -1px 1px rgba(0,0,0,0.125), inset 1px 0 1px rgba(255,255,255,0.25); + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25), inset -1px -1px 1px rgba(0, 0, 0, 0.125), inset 1px 0 1px rgba(255, 255, 255, 0.25); color: #000; display: none; left: 23px; @@ -884,7 +901,7 @@ body.review { &:hover { border-radius: 10px 10px 0 10px; - box-shadow: 0 0 10px rgba(0,0,0,0.25), inset -1px -1px 1px rgba(0,0,0,0.125), inset 1px 0 1px rgba(255,255,255,0.25); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.25), inset -1px -1px 1px rgba(0, 0, 0, 0.125), inset 1px 0 1px rgba(255, 255, 255, 0.25); label { position: relative; @@ -943,13 +960,13 @@ body.review { /* Style video modal */ div.video .kbox-container { - width: 680px; - height: 550px; - text-align: left; + width: 680px; + height: 550px; + text-align: left; } .html-rtl div.video .kbox-container { - text-align: right; + text-align: right; } .document-vote { @@ -984,7 +1001,7 @@ article { &:after { background: #fff; - box-shadow: -2px 2px 2px rgba(0,0,0,0.3); + box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.3); content: ''; display: block; height: 10px; @@ -1151,7 +1168,7 @@ article { .cm-variable, .cm-tag { - color: #d98484 !important; + color: #d98484 !important; } .cm-other.cm-link { @@ -1188,13 +1205,13 @@ article { .wiki-product-title { margin-left: p.$spacing-lg; - > img { + >img { float: left; padding-top: 2px; } - > a:link, - a:visited { + >a:link, + a:visited { color: #000; float: left; font-size: p.$spacing-md; @@ -1208,16 +1225,16 @@ article { margin-left: 0; margin-right: p.$spacing-lg; - > img { + >img { float: right; } - > a:link, - a:visited { - float: right; - padding-left: 0; - padding-right: 20px; - } + >a:link, + a:visited { + float: right; + padding-left: 0; + padding-right: 20px; + } } } @@ -1235,7 +1252,7 @@ article { .collapsible { .wiki-section { - > h1 { + >h1 { margin-top: p.$spacing-lg; margin-bottom: p.$spacing-lg; position: relative; @@ -1245,12 +1262,12 @@ article { &:before { background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3.515v16.97M3.515 12h16.97' stroke='%23000' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 no-repeat; background-size: auto; - background-size: 20px,20px; + background-size: 20px, 20px; -webkit-transition: transform .1s ease-in-out; -webkit-transition: -webkit-transform .1s ease-in-out; transition: -webkit-transform .1s ease-in-out; transition: transform .1s ease-in-out; - transition: transform .1s ease-in-out,-webkit-transform .1s ease-in-out; + transition: transform .1s ease-in-out, -webkit-transform .1s ease-in-out; content: ""; height: 20px; margin-top: -8px; @@ -1263,12 +1280,13 @@ article { } } } + .wiki-section.collapsed { section { display: none; } - > h1:before { + >h1:before { transform: rotate(0); } -} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 19191cb09ac..36f502faa13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "license": "MPL-2.0", "dependencies": { "@babel/runtime": "^7.20.13", - "@selectize/selectize": "^0.15.2", "@urql/svelte": "^3.0.3", "codemirror": "^5.65.11", "d3": "^3.5.17", @@ -17,6 +16,7 @@ "jquery-ui": "1.13.2", "nunjucks": "^3.2.4", "svelte-navigator": "^3.2.2", + "tom-select": "^2.3.1", "underscore": "^1.13.6" }, "devDependencies": { @@ -2019,26 +2019,27 @@ "node": ">= 8" } }, + "node_modules/@orchidjs/sifter": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.0.3.tgz", + "integrity": "sha512-zCZbwKegHytfsPm8Amcfh7v/4vHqTAaOu6xFswBYcn8nznBOuseu6COB2ON7ez0tFV0mKL0nRNnCiZZA+lU9/g==", + "license": "Apache-2.0", + "dependencies": { + "@orchidjs/unicode-variants": "^1.0.4" + } + }, + "node_modules/@orchidjs/unicode-variants": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.0.4.tgz", + "integrity": "sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ==", + "license": "Apache-2.0" + }, "node_modules/@polka/url": { "version": "1.0.0-next.21", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz", "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, - "node_modules/@selectize/selectize": { - "version": "0.15.2", - "resolved": "https://registry.npmjs.org/@selectize/selectize/-/selectize-0.15.2.tgz", - "integrity": "sha512-gY+yzYfrVTc+1ekCAaEtDvN59+upbibFzhkePyyk6PwOXT6kEb05azGA91/w3C/71lUOHPyd3nzLnfyfuRi+pA==", - "engines": { - "node": "*" - }, - "optionalDependencies": { - "jquery-ui": "^1.13.2" - }, - "peerDependencies": { - "jquery": "^1.7.0 || ^2 || ^3" - } - }, "node_modules/@sindresorhus/is": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz", @@ -6694,20 +6695,6 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", "dev": true }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -12980,6 +12967,23 @@ "url": "https://github.com/sponsors/Borewit" } }, + "node_modules/tom-select": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.3.1.tgz", + "integrity": "sha512-QS4vnOcB6StNGqX4sGboGXL2fkhBF2gIBB+8Hwv30FZXYPn0CyYO8kkdATRvwfCTThxiR4WcXwKJZ3cOmtI9eg==", + "license": "Apache-2.0", + "dependencies": { + "@orchidjs/sifter": "^1.0.3", + "@orchidjs/unicode-variants": "^1.0.4" + }, + "engines": { + "node": "*" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/tom-select" + } + }, "node_modules/totalist": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz", diff --git a/package.json b/package.json index fcc02329668..d4ed2c986b2 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "license": "MPL-2.0", "dependencies": { "@babel/runtime": "^7.20.13", - "@selectize/selectize": "^0.15.2", "@urql/svelte": "^3.0.3", "codemirror": "^5.65.11", "d3": "^3.5.17", @@ -44,6 +43,7 @@ "jquery-ui": "1.13.2", "nunjucks": "^3.2.4", "svelte-navigator": "^3.2.2", + "tom-select": "^2.3.1", "underscore": "^1.13.6" }, "devDependencies": { @@ -101,4 +101,4 @@ "webpack-cli": "^5.1.4", "webpack-merge": "^5.8.0" } -} +} \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js index f10655d7698..964f6ea7fab 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -7,7 +7,7 @@ module.exports = { mode: "development", resolve: { alias: { - selectize: "@selectize/selectize/dist", + tomselect: "tom-select/dist", protocol: "@mozilla-protocol/core/protocol", sumo: path.resolve(__dirname, "kitsune/sumo/static/sumo"), community: path.resolve(__dirname, "kitsune/community/static/community"),