select 2 builder

core/static/core/js/sith-select2.js

@@ -0,0 +1,258 @@
+/**
+ * Builders to use Select2 in our templates.
+ *
+ * This comes with two flavours : local data or remote data.
+ *
+ * # Local data source
+ *
+ * To use local data source, you must define an array
+ * in your JS code, having the fields `id` and `text`.
+ *
+ * ```js
+ * const data = [
+ *   {id: 1, text: "foo"},
+ *   {id: 2, text: "bar"},
+ * ];
+ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
+ *   element: document.getElementById("select2-input"),
+ *   data_source: local_data_source(data)
+ * }));
+ * ```
+ *
+ * You can also define a callback that return ids to exclude :
+ *
+ * ```js
+ * const data = [
+ *   {id: 1, text: "foo"},
+ *   {id: 2, text: "bar"},
+ *   {id: 3, text: "to exclude"},
+ * ];
+ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
+ *   element: document.getElementById("select2-input"),
+ *   data_source: local_data_source(data, {
+ *     excluded: () => data.filter((i) => i.text === "to exclude").map((i) => parseInt(i))
+ *   })
+ * }));
+ * ```
+ *
+ * # Remote data source
+ *
+ * Select2 with remote data sources are similar to those with local
+ * data, but with some more parameters, like `result_converter`,
+ * which takes a callback that must return a `Select2Object`.
+ *
+ * ```js
+ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
+ *   element: document.getElementById("select2-input"),
+ *   data_source: remote_data_source("/api/user/search", {
+ *     excluded: () => [1, 2],  // exclude users 1 and 2 from the search
+ *     result_converter: (user) => Object({id: user.id, text: user.first_name})
+ *   })
+ * }));
+ * ```
+ *
+ * # Overrides
+ *
+ * Dealing with a select2 may be complex.
+ * That's why, when defining a select,
+ * you may add an override parameter,
+ * in which you can declare any parameter defined in the
+ * Select2 documentation.
+ *
+ * ```js
+ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
+ *   element: document.getElementById("select2-input"),
+ *   data_source: remote_data_source("/api/user/search", {
+ *     result_converter: (user) => Object({id: user.id, text: user.first_name}),
+ *     overrides: {
+ *      delay: 500
+ *     }
+ *   })
+ * }));
+ * ```
+ *
+ * # Caveats with exclude
+ *
+ * With local data source, select2 evaluates the data only once.
+ * Thus, modify the exclude after the initialisation is a no-op.
+ *
+ * With remote data source, the exclude list will be evaluated
+ * after each api response.
+ * It makes it possible to bind the data returned by the callback
+ * to some reactive data, thus making the exclude list dynamic.
+ *
+ * # Images
+ *
+ * Sometimes, you would like to display an image besides
+ * the text on the select items.
+ * In this case, fill the `picture_getter` option :
+ *
+ * ```js
+ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
+ *   element: document.getElementById("select2-input"),
+ *   data_source: remote_data_source("/api/user/search", {
+ *     result_converter: (user) => Object({id: user.id, text: user.first_name})
+ *   })
+ *   picture_getter: (user) => user.profile_pict,
+ * }));
+ * ```
+ *
+ * # Binding with alpine
+ *
+ * You can declare your select2 component in an Alpine data.
+ *
+ * ```html
+ * <body>
+ *   <div x-data="select2_test">
+ *     <select x-ref="search" x-ref="select"></select>
+ *     <p x-text="current_selection.id"></p>
+ *     <p x-text="current_selection.text"></p>
+ *   </div>
+ * </body>
+ *
+ * <script>
+ * document.addEventListener("alpine:init", () => {
+ *   Alpine.data("select2_test", () => ({
+ *     selector: undefined,
+ *     current_select: {id: "", text: ""},
+ *
+ *     init() {
+ *       this.selector = sithSelect2({
+ *         element: $(this.$refs.select),
+ *         data_source: local_data_source(
+ *           [{id: 1, text: "foo"}, {id: 2, text: "bar"}]
+ *         ),
+ *       });
+ *       this.selector.on("select2:select", (event) => {
+ *         // select2 => Alpine signals here
+ *         this.current_select = this.selector.select2("data")
+ *       });
+ *       this.$watch("current_selected" (value) => {
+ *          // Alpine => select2 signals here
+ *       });
+ *     },
+ *   }));
+ * })
+ * </script>
+ */
+
+/**
+ * @typedef Select2Object
+ * @property {number} id
+ * @property {string} text
+ */
+
+/**
+ * @typedef Select2Options
+ * @property {Element} element
+ * @property {Object} data_source
+ *      the data source, built with `local_data_source` or `remote_data_source`
+ * @property {number[]} excluded A list of ids to exclude from search
+ * @property {undefined | function(Object): string} picture_getter
+ *      A callback to get the picture field from the API response
+ * @property {Object | undefined} overrides
+ *      Any other select2 parameter to apply on the config
+ */
+
+/**
+ * @param {Select2Options} options
+ */
+function sithSelect2(options) {
+  const elem = $(options.element);
+  return elem.select2({
+    theme: elem[0].multiple ? "classic" : "default",
+    minimumInputLength: 2,
+    templateResult: select_item_builder(options.picture_getter),
+    ...options.data_source,
+    ...(options.overrides || {}),
+  });
+}
+
+/**
+ * @typedef LocalSourceOptions
+ * @property {undefined | function(): number[]} excluded
+ *        A callback to the ids to exclude from the search
+ */
+
+/**
+ * Build a data source for a Select2 from a local array
+ * @param {Select2Object[]} source The array containing the data
+ * @param {RemoteSourceOptions} options
+ */
+function local_data_source(source, options) {
+  if (!!options.excluded) {
+    const ids = options.excluded();
+    return { data: source.filter((i) => !ids.includes(i.id)) };
+  }
+  return { data: source };
+}
+
+/**
+ * @typedef RemoteSourceOptions
+ * @property {undefined | function(): number[]} excluded
+ *     A callback to the ids to exclude from the search
+ * @property {undefined | function(): Select2Object} result_converter
+ *     A converter for a value coming from the remote api
+ * @property {undefined | Object} overrides
+ *     Any other select2 parameter to apply on the config
+ */
+
+/**
+ * Build a data source for a Select2 from a remote url
+ * @param {string} source The url of the endpoint
+ * @param {RemoteSourceOptions} options
+ */
+function remote_data_source(source, options) {
+  jQuery.ajaxSettings.traditional = true;
+  let params = {
+    url: source,
+    dataType: "json",
+    cache: true,
+    delay: 250,
+    data: function (params) {
+      return {
+        search: params.term,
+        exclude: [
+          ...(this.val() || []).map((i) => parseInt(i)),
+          ...(options.excluded ? options.excluded() : []),
+        ],
+      };
+    },
+  };
+  if (!!options.result_converter) {
+    params["processResults"] = function (data) {
+      return { results: data.results.map(options.result_converter) };
+    };
+  }
+  if (!!options.overrides) {
+    Object.assign(params, options.overrides);
+  }
+  console.log(params);
+  return { ajax: params };
+}
+
+function item_formatter(user) {
+  if (user.loading) {
+    return user.text;
+  }
+}
+
+/**
+ * Build a function to display the results
+ * @param {null | function(Object):string} picture_getter
+ * @return {function(string): jQuery|HTMLElement}
+ */
+function select_item_builder(picture_getter) {
+  return (item) => {
+    const picture =
+      typeof picture_getter === "function" ? picture_getter(item) : null;
+    const img_html = picture
+      ? `<img src="${picture_getter(item)}" alt="item.text"/>`
+      : "";
+
+    return $(`<div class="select-item">
+        ${img_html}
+         <span class="select-item-text">${item.text}</span>
+         </div>`);
+  };
+}

core/static/core/select2/select2.min.css

@@ -0,0 +1 @@
+.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0;max-width:100%;resize:none;height:18px;vertical-align:bottom;font-family:sans-serif;overflow:hidden;word-break:keep-all}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px;position:relative}.select2-container--default .select2-selection--multiple.select2-selection--clearable{padding-right:25px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;font-weight:bold;height:20px;margin-right:10px;marginLine truncated

core/static/core/select2/select2.min.js

@@ -0,0 +1,2 @@
+/*! Select2 4.0.13 | https://github.com/select2/select2/blob/master/LICENSE.md */
+!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(e,t){return void 0===t&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(e)),n(t),t}:n(jQuery)}(function(t){var e,n,s,p,r,o,h,f,g,m,y,v,i,a,_,s=((u=t&&t.fn&&t.fn.select2&&t.fn.select2.amd?t.fn.select2.amd:u)&&u.requirejs||(u?n=u:u={},g={},m={},y={},v={},i=Object.prototype.hasOwnProperty,a=[].slice,_=/\.js$/,h=function(e,t){var n,s,i=c(e),r=i[0],t=t[1];return e=i[1],r&&(n=x(r=l(r,t))),r?e=n&&n.normalize?n.normalize(e,(s=t,function(e){return l(e,s)})):l(e,t):(r=(i=c(e=l(e,t)))[0],e=i[1],r&&(n=x(r))),{f:r?r+"!"+e:e,n:e,pr:r,p:n}},f={require:function(e){return w(e)},exports:function(e){var t=g[e];return void 0!==t?t:g[e]={}},module:function(e){return{id:e,uri:"",exports:g[e],config:(t=e,function(){return y&&y.config&&y.config[t]||{}})};var t}},r=function(e,t,n,s){var i,r,o,a,l,c=[],u=typeof n,d=A(s=s||e);if("undefined"==u||"function"==u){for(t=!t.length&&n.length?["require","exports","module"]:t,a=0;a<t.length;a+=1)if("require"===(r=(o=h(t[a],d)).f))c[a]=f.require(e);else if("exports"===r)c[a]=f.exports(e),l=!0;else if("module"===r)i=c[a]=f.module(e);else if(b(g,r)||b(m,r)||b(v,r))c[a]=x(r);else{if(!o.p)throw new Error(e+" missing "+r);o.p.load(o.n,w(s,!0),function(t){return function(e){g[t]=e}}(r),{}),c[a]=g[r]}u=n?n.apply(g[e],c):void 0,e&&(i&&i.exports!==p&&i.exports!==g[e]?g[e]=i.exports:u===p&&l||(g[e]=u))}else e&&(g[e]=n)},e=n=o=function(e,t,n,s,i){if("string"==typeof e)return f[e]?f[e](t):x(h(e,A(t)).f);if(!e.splice){if((y=e).deps&&o(y.deps,y.callback),!t)return;t.splice?(e=t,t=n,n=null):e=p}return t=t||function(){},"function"==typeof n&&(n=s,s=i),s?r(p,e,t,n):setTimeout(function(){r(p,e,t,n)},4),o},o.config=function(e){return o(e)},e._defined=g,(s=function(e,t,n){if("string"!=typeof e)throw new Error("See almond README: incorrect module build, no module name");t.splice||(n=t,t=[]),b(g,e)||b(m,e)||(m[e]=[e,t,n])}).amd={jQuery:!0},u.requirejs=e,u.require=n,u.define=s),u.define("almond",function(){}),u.define("jquery",[],function(){var e=t||$;return null==e&&console&&console.error&&console.error("Select2: An instance of jQuery or a jQuery-compatible library was not found. Make sure that you are including jQuery before Select2 on your web page."),e}),u.define("select2/utils",["jquery"],function(r){var s={};function c(e){var t,n=e.prototype,s=[];for(t in n)"function"==typeof n[t]&&"constructor"!==t&&s.push(t);return s}s.Extend=function(e,t){var n,s={}.hasOwnProperty;function i(){this.constructor=e}for(n in t)s.call(t,n)&&(e[n]=t[n]);return i.prototype=t.prototype,e.prototype=new i,e.__super__=t.prototype,e},s.Decorate=function(s,i){var e=c(i),t=c(s);function r(){var e=Array.prototype.unshift,t=i.prototype.constructor.length,n=s.prototype.constructor;0<t&&(e.call(arguments,s.prototype.constructor),n=i.prototype.constructor),n.apply(this,arguments)}i.displayName=s.displayName,r.prototype=new function(){this.constructor=r};for(var n=0;n<t.length;n++){var o=t[n];r.prototype[o]=s.prototype[o]}for(var a=0;a<e.length;a++){var l=e[a];r.prototype[l]=function(e){var t=function(){};e in r.prototype&&(t=r.prototype[e]);var n=i.prototype[e];return function(){return Array.prototype.unshift.call(arguments,t),n.apply(this,arguments)}}(l)}return r};function e(){this.listeners={}}e.prototype.on=function(e,t){this.listeners=this.listeners||{},e in this.listeners?this.listeners[e].push(t):this.listeners[e]=[t]},e.prototype.trigger=function(e){var t=Array.prototype.slice,n=t.call(arguments,1);this.listeners=this.listeners||{},0===(n=null==n?[]:n).length&&n.push({}),(n[0]._type=e)in this.listeners&&this.invoke(this.listeners[e],t.call(arguments,1)),"*"in this.listeners&&this.invoke(this.listeners["*"],arguments)},e.prototype.invoke=function(e,t){for(var n=0,s=e.length;n<s;n++)e[n].apply(this,t)},s.Observable=e,s.generateChars=function(e){for(var t="",n=0;n<e;n++)t+=Math.floor(36*Math.random()).toString(36);return t},s.bind=function(e,t){return function(){e.apply(t,arguments)}},s._convertData=function(e){for(var t in e){var n=t.split("-"),s=e;if(1!==n.length){for(var i=0;i<n.length;i++){var r=n[i];(r=r.substring(0,1).toLowerCase()+r.substring(1))in s||(s[r]={}),i==n.length-1&&(s[r]=e[t]),s=s[r]}delete e[t]}}return e},s.hasScroll=function(e,t){var n=r(t),s=t.style.overflowX,i=t.style.overflowY;return(s!==i||"hidden"!==i&&"visible"!==i)&&("scroll"===s||"scroll"===i||(n.innerHeight()<t.scrollHeight||n.innerWidth()<t.scrollWidth))},s.escapeMarkup=function(e){var t={"\\":"&#92;","&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#47;"};return"string"!=typeof e?e:String(e).replace(/[&<>"'\/\\]/g,function(e){return t[e]})},s.__cache={};var n=0;return s.GetUniqueElementId=function(e){var t=e.getAttribute("data-select2-id");return null!=t||(t=e.id?"select2-data-"+e.id:"select2-data-"+(++n).toString()+"-"+s.generateChars(4),e.setAttribute("data-select2-id",t)),t},s.StoreData=Line truncated

core/static/core/style.scss

@@ -615,6 +615,38 @@ a:not(.button) {
   }
 }
 
+
+  .select2 {
+    margin: 0;
+    max-width: 100%;
+    min-width: 100%;
+
+    ul {
+      margin: 0;
+    }
+
+    textarea {
+      background-color: inherit;
+    }
+
+    .select2-container--default {
+      color: black;
+    }
+  }
+  .select2-results {
+    .select-item {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      align-items: center;
+
+      img {
+        max-height: 40px;
+        border-radius: 50%;
+      }
+    }
+  }
+
 #news_details {
   display: inline-block;
   margin-top: 20px;
@@ -1170,13 +1202,6 @@ u,
   }
 }
 
-/* XXX This seems to be used in the SAS */
-#pict {
-  display: inline-block;
-  width: 80%;
-  background: hsl(0, 0%, 20%);
-  border: solid hsl(0, 0%, 20%) 2px;
-}
 /*--------------------------------MATMAT-------------------------------*/
 .matmat_results {
   display: flex;

sith/settings.py

@@ -759,4 +759,5 @@ SITH_FRONT_DEP_VERSIONS = {
     "https://github.com/vasturiano/three-spritetext": "1.6.5",
     "https://github.com/vasturiano/3d-force-graph/": "1.70.19",
     "https://github.com/vasturiano/d3-force-3d": "3.0.3",
+    "https://github.com/select2/select2/": "4.0.13",
 }