From b57c81608e24a6919d780703faf49f38ae2bbb94 Mon Sep 17 00:00:00 2001 From: horville Date: Sun, 26 Mar 2023 17:40:15 +0200 Subject: [PATCH] =?UTF-8?q?Structuration++=20&=20D=C3=A9but=20JS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/school-info.riot | 4 +- components/search.riot | 1 + index.html | 14 ++--- javascript/school-info.js | 6 +- javascript/search.js | 120 ++++++++++++++++++++++++++++++++++++ loader.js | 12 ++++ riot.min.js | 1 + 7 files changed, 143 insertions(+), 15 deletions(-) create mode 100644 javascript/search.js create mode 100644 loader.js create mode 100644 riot.min.js diff --git a/components/school-info.riot b/components/school-info.riot index 682c225..51da083 100644 --- a/components/school-info.riot +++ b/components/school-info.riot @@ -1,6 +1,4 @@ - -
@@ -9,7 +7,7 @@ diff --git a/components/search.riot b/components/search.riot index 3f734d2..dd5b3a1 100644 --- a/components/search.riot +++ b/components/search.riot @@ -10,6 +10,7 @@ import model from '../javascript/modelSearch.js'; import Controller from '../javascript/controllerSearch.js'; import View from '../javascript/viewSearch.js'; + export default function search(){ return { onBeforeMount(props, state) { diff --git a/index.html b/index.html index cb2fe7c..74d0517 100644 --- a/index.html +++ b/index.html @@ -4,19 +4,13 @@ Parcoursup - - + + + - - + diff --git a/javascript/school-info.js b/javascript/school-info.js index 02e0133..f024830 100644 --- a/javascript/school-info.js +++ b/javascript/school-info.js @@ -1,9 +1,11 @@ var schoolInfo = { css: null, exports: { - onMounted() {} + onMounted() { + console.log("Test!"); + } }, - template: (template, expressionTypes, bindingTypes, getComponent) => template('
', []), + template: (template, expressionTypes, bindingTypes, getComponent) => template('
', []), name: 'school-info' }; diff --git a/javascript/search.js b/javascript/search.js new file mode 100644 index 0000000..ad7b098 --- /dev/null +++ b/javascript/search.js @@ -0,0 +1,120 @@ +let model = { + getFormations(search) { + return new Promise((resolve, reject) => { + let xhr = new XMLHttpRequest(); + xhr.open("GET", "/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin"); + xhr.responseType = "json"; + xhr.onload = ev => { + if (xhr.status == 200) resolve(xhr.response); + }; + xhr.onerror = () => { + reject("error"); + }; + xhr.send(); + }); + } +}; + +class Controller { + constructor(view, model) { + this.view = view; + this.model = model; + this.loading = false; + this.lastSearch = null; + this.error = null; + this.results = []; + this.view.setLoading(false); + this.view.bindSearch(this.search.bind(this)); + } + reset() { + this.loading = false; + this.error = null; + this.results = []; + } + async search(formation) { + this.model.getFormations(formation).then(response => { + let table = response["facet groups"][0]["facets"]; + this.view.renderList(table); + }).catch(error => { + this.view.renderMessage(error); + }); + } +} + +function debounce(fn, wait) { + let timeout; + return (...args) => { + clearTimeout(timeout); + timeout = setTimeout(() => fn(...args), wait); + }; +} +class View { + constructor() { + this.listFormations = document.querySelector("#list-formations"); + this.inputSearch = document.querySelector("input"); + this.message = document.querySelector("p.error"); + } + _getInput() { + return this.inputSearch.value; + } + renderMessage(error) { + this.message.style.display = "block"; + this.message.textContent = error; + } + renderList(formations) { + let ul = document.createElement("ul"); + formations.forEach(formation => { + let li = document.createElement("li"); + let a = document.createElement("a"); + let span = document.createElement("span"); + //a.href = `test` + a.target = "_blank"; + a.textContent = formation.name; + span.textContent = formation.name; + li.appendChild(a); + li.appendChild(span); + ul.appendChild(li); + }); + this.listFormations.replaceChildren(ul); + } + bindSearch(handler) { + this.inputSearch.addEventListener("input", debounce(e => { + handler(this._getInput()); + }, 500)); + } +} + +var search = { + css: null, + exports: function search() { + return { + onBeforeMount(props, state) { + // initial state + this.state = { + formation: props.formation + }; + }, + search() { + console.log("test1"); + const view = new View(); + new Controller(view, model); + } + }; + }, + template: (template, expressionTypes, bindingTypes, getComponent) => template('', [{ + redundantAttribute: 'expr1', + selector: '[expr1]', + expressions: [{ + type: expressionTypes.EVENT, + name: 'oninput', + evaluate: _scope => _scope.search + }, { + type: expressionTypes.ATTRIBUTE, + name: 'placeholder', + evaluate: _scope => _scope.state.formation + }] + }]), + name: 'search' +}; + +export { search as default }; diff --git a/loader.js b/loader.js new file mode 100644 index 0000000..aa52194 --- /dev/null +++ b/loader.js @@ -0,0 +1,12 @@ +/* + Charge tous les fichiers riot compilés. +*/ + +import SchoolInfo from './javascript/school-info.js' +import Search from './javascript/search.js' + +riot.register("school-info", SchoolInfo) +riot.register("search", Search) + +riot.mount("school-info") +riot.mount("search") \ No newline at end of file diff --git a/riot.min.js b/riot.min.js new file mode 100644 index 0000000..e5d6ae5 --- /dev/null +++ b/riot.min.js @@ -0,0 +1 @@ +var t,e;t=this,e=function(t){"use strict";const e={EACH:0,IF:1,SIMPLE:2,TAG:3,SLOT:4};function n(t,e){return typeof t===e}function r(t){const e=t.ownerSVGElement;return!!e||null===e}function s(t){return"template"===t.tagName.toLowerCase()}function o(t){return n(t,"function")}function i(t){return!u(t)&&t.constructor===Object}function u(t){return null==t}const a=new Map,c=Symbol(),l=new Set,h="mount",d="update",p="unmount",m="props",f="slots",b="root",g=Symbol(),v=Symbol(),y=Symbol(),O=Symbol(),j=Symbol();function N(t){return t.replace(/-(\w)/g,((t,e)=>e.toUpperCase()))}function x(t){for(;t.firstChild;)t.removeChild(t.firstChild)}const M=t=>t.remove(),E=(t,e)=>e&&e.parentNode&&e.parentNode.insertBefore(t,e),A={ATTRIBUTE:0,EVENT:1,TEXT:2,VALUE:3};function T(){return this}function w(t){return o(t)?t.prototype&&t.prototype.constructor?new t:t():t}function S(t){const e=new Map,n=n=>(e.has(n)||e.set(n,t.call(this,n)))&&e.get(n);return n.cache=e,n}function C(t){return t.reduce(((t,e)=>{const{value:n,type:r}=e;switch(!0){case!e.name&&0===r:return Object.assign({},t,n);case 3===r:t.value=e.value;break;default:t[N(e.name)]=e.value}return t}),{})}function D(t,e,n,r){return void 0===r&&(r={}),Object.defineProperty(t,e,Object.assign({value:n,enumerable:!1,writable:!1,configurable:!0},r)),t}function k(t,e,n){return Object.entries(e).forEach((e=>{let[r,s]=e;D(t,r,s,n)})),t}function L(t,e){return Object.entries(e).forEach((e=>{let[n,r]=e;t[n]||(t[n]=r)})),t}const U=Object.freeze({[h]:T,[d]:T,[p]:T}),B=Object.assign({},U,{clone:T,createDOM:T}),I=Symbol(),P=Symbol(),_=Symbol(),$={nodes:[],mount(t,e){return this.update(t,e)},update(t,e){const{placeholder:n,nodes:r,childrenMap:s}=this,o=t===_?null:this.evaluate(t),i=o?Array.from(o):[],{newChildrenMap:u,batches:a,futureNodes:c}=function(t,e,n,r){const{condition:s,template:o,childrenMap:i,itemName:u,getKey:a,indexName:c,root:l,isTemplateTag:h}=r,d=new Map,p=[],m=[];return t.forEach(((t,r)=>{const f=function(t,e){let{itemName:n,indexName:r,index:s,item:o}=e;return D(t,n,o),r&&D(t,r,s),t}(Object.create(e),{itemName:u,indexName:c,index:r,item:t}),b=a?a(f):r,g=i.get(b),v=[];if(function(t,e){return!!t&&!t(e)}(s,f))return;const y=!g,O=g?g.template:o.clone(),j=O.el||l.cloneNode(),N=h&&y?function(t){const e=t.dom.cloneNode(!0),{head:n,tail:r}=function(){const t=document.createTextNode(""),e=document.createTextNode("");return t[I]=!0,e[P]=!0,{head:t,tail:e}}();return{avoidDOMInjection:!0,fragment:e,head:n,tail:r,children:[n,...Array.from(e.childNodes),r]}}(O):O.meta;y?p.push((()=>O.mount(j,f,n,N))):p.push((()=>O.update(f,n))),h?v.push(...N.children):v.push(j),i.delete(b),m.push(...v),d.set(b,{nodes:v,template:O,context:f,index:r})})),{newChildrenMap:d,batches:p,futureNodes:m}}(i,t,e,this);return((t,e,n,r)=>{const s=e.length;let o=t.length,i=s,u=0,a=0,c=null;for(;ur-a){const s=n(t[u],0);for(;a{if(r<0){const n=t[t.length-1];if(n){const{template:r,nodes:s,context:o}=n;s.pop(),s.length||(t.pop(),r.unmount(o,e,null))}}return n}}(Array.from(s.values()),e),n),a.forEach((t=>t())),this.childrenMap=u,this.nodes=c,this},unmount(t,e){return this.update(_,e),this}},z={mount(t,e){return this.update(t,e)},update(t,e){const n=!!this.evaluate(t),r=!this.value&&n,s=this.value&&!n,o=()=>{const n=this.node.cloneNode();E(n,this.placeholder),this.template=this.template.clone(),this.template.mount(n,t,e)};switch(!0){case r:o();break;case s:this.unmount(t);break;default:n&&this.template.update(t,e)}return this.value=n,this},unmount(t,e){return this.template.unmount(t,e,!0),this}},H="undefined"==typeof Element?{}:Element.prototype,K=S((t=>H.hasOwnProperty(t))),R=/^on/,Y={handleEvent(t){this[t.type](t)}},F=new WeakMap;function V(t){return u(t)?"":t}const q=(t,e)=>{const n=t.childNodes[e];if(n.nodeType===Node.COMMENT_NODE){const e=document.createTextNode("");return t.replaceChild(e,n),e}return n},G={0:function t(e,r,s,u){let{name:a}=r;if(!a)return u&&function(t,e,n){const r=e?Object.keys(e):[];Object.keys(n).filter((t=>!r.includes(t))).forEach((e=>t.removeAttribute(e)))}(e,s,u),void(s&&function(e,n){Object.entries(n).forEach((n=>{let[r,s]=n;return t(e,{name:r},s)}))}(e,s));!K(a)&&(function(t){return n(t,"boolean")}(s)||i(s)||o(s))&&(e[a]=s),function(t){return!t&&0!==t}(s)?e.removeAttribute(a):function(t){return!0===t||["string","number"].includes(typeof t)}(s)&&e.setAttribute(a,function(t,e){return!0===e?t:e}(a,s))},1:function(t,e,n){let{name:r}=e;const s=r.replace(R,""),o=F.get(t)||(t=>{const e=Object.create(Y);return F.set(t,e),e})(t),[i,u]=(t=>Array.isArray(t)?t:[t,!1])(n),a=o[s],c=i&&!a;a&&!i&&t.removeEventListener(s,o),c&&t.addEventListener(s,o,u),o[s]=i},2:function(t,e,n){t.data=V(n)},3:function(t,e,n){t.value=V(n)}},W={mount(t){return this.value=this.evaluate(t),X(this,this.value),this},update(t){const e=this.evaluate(t);return this.value!==e&&(X(this,e),this.value=e),this},unmount(){return 1===this.type&&X(this,null),this}};function X(t,e){return G[t.type](t.node,t,e,t.value)}function Z(t,e){return Object.assign({},W,e,{node:2===e.type?q(t,e.childNodeIndex):t})}const J=(t,e)=>t[y]||e,Q={attributes:[],getTemplateScope(t,e){return function(t,e,n){if(!t||!t.length)return n;const r=t.map((t=>Object.assign({},t,{value:t.evaluate(e)})));return Object.assign(Object.create(n||null),C(r))}(this.attributes,t,e)},mount(t,e){const n=!!t.slots&&t.slots.find((t=>{let{id:e}=t;return e===this.name})),{parentNode:r}=this.node,s=J(t,e);return this.template=n&&ut(n.html,n.bindings).createDOM(r),this.template&&(x(this.node),this.template.mount(this.node,this.getTemplateScope(t,s),s),this.template.children=Array.from(this.node.childNodes)),tt(this.node),M(this.node),this},update(t,e){if(this.template){const n=J(t,e);this.template.update(this.getTemplateScope(t,n),n)}return this},unmount(t,e,n){return this.template&&this.template.unmount(this.getTemplateScope(t,e),null,n),this}};function tt(t){const e=t&&t.firstChild;e&&(E(e,t),tt(t))}function et(t){return t.reduce(((t,e)=>{let{bindings:n}=e;return t.concat(n)}),[])}const nt={mount(t){return this.update(t)},update(t,e){const n=this.evaluate(t);return n&&n===this.name?this.tag.update(t):(this.unmount(t,e,!0),this.name=n,this.tag=(r=this.getComponent(n),void 0===(s=this.slots)&&(s=[]),void 0===(o=this.attributes)&&(o=[]),r?r({slots:s,attributes:o}):ut(function(t){return t.reduce(((t,e)=>t+e.html),"")}(s),[...et(s),{expressions:o.map((t=>Object.assign({type:0},t)))}])),this.tag.mount(this.node,t)),this;var r,s,o},unmount(t,e,n){return this.tag&&this.tag.unmount(n),this}},rt={1:function(t,e){let{evaluate:n,template:r}=e;const s=document.createTextNode("");return E(s,t),M(t),Object.assign({},z,{node:t,evaluate:n,placeholder:s,template:r.createDOM(t)})},2:function(t,e){let{expressions:n}=e;return Object.assign({},(r=n.map((e=>Z(t,e))),["mount","update","unmount"].reduce(((t,e)=>Object.assign({},t,{[e]:t=>r.map((n=>n[e](t)))&&void 0})),{})));var r},0:function(t,e){let{evaluate:n,condition:r,itemName:o,indexName:i,getKey:u,template:a}=e;const c=document.createTextNode(""),l=t.cloneNode();return E(c,t),M(t),Object.assign({},$,{childrenMap:new Map,node:t,root:l,condition:r,evaluate:n,isTemplateTag:s(l),template:a.createDOM(t),getKey:u,indexName:i,itemName:o,placeholder:c})},3:function(t,e){let{evaluate:n,getComponent:r,slots:s,attributes:o}=e;return Object.assign({},nt,{node:t,evaluate:n,slots:s,attributes:o,getComponent:r})},4:function(t,e){let{name:n,attributes:r}=e;return Object.assign({},Q,{attributes:r,node:t,name:n})}};function st(t,e){return t.map((t=>2===t.type?Object.assign({},t,{childNodeIndex:t.childNodeIndex+e}):t))}function ot(t,e,n){const{selector:r,type:s,redundantAttribute:o,expressions:i}=e,u=r?t.querySelector(r):t;o&&u.removeAttribute(o);const a=i||[];return(rt[s]||rt[2])(u,Object.assign({},e,{expressions:n&&!r?st(a,n):a}))}const it={createDOM(t){return this.dom=this.dom||function(t,e){return e&&("string"==typeof e?function(t,e){return r(t)?function(t,e){return e.ownerDocument.importNode((new window.DOMParser).parseFromString(`${t}`,"application/xml").documentElement,!0)}(e,t):function(t,e){const n=s(e)?e:document.createElement("template");return n.innerHTML=t,n.content}(e,t)}(t,e):e)}(t,this.html)||document.createDocumentFragment(),this},mount(t,e,n,o){void 0===o&&(o={}),this.el&&this.unmount(e);const{fragment:i,children:u,avoidDOMInjection:a}=o,{parentNode:c}=u?u[0]:t,l=s(t),h=l?function(t,e,n){const r=Array.from(t.childNodes);return Math.max(r.indexOf(e),r.indexOf(n.head)+1,0)}(c,t,o):null;this.createDOM(t);const d=i||this.dom.cloneNode(!0);return this.el=l?c:t,this.children=l?u||Array.from(d.childNodes):null,!a&&d&&function(t,e){switch(!0){case r(t):!function(t,e){for(;t.firstChild;)e.appendChild(t.firstChild)}(e,t);break;case s(t):t.parentNode.replaceChild(e,t);break;default:t.appendChild(e)}}(t,d),this.bindings=this.bindingsData.map((t=>ot(this.el,t,h))),this.bindings.forEach((t=>t.mount(e,n))),this.meta=o,this},update(t,e){return this.bindings.forEach((n=>n.update(t,e))),this},unmount(t,e,n){void 0===n&&(n=!1);const r=this.el;if(!r)return this;switch(this.bindings.forEach((r=>r.unmount(t,e,n))),!0){case r[g]||null===n:break;case Array.isArray(this.children):!function(t){for(let e=0;et[c]=e;function ct(t){return[h,d,p].reduce(((e,n)=>(e[n]=t(n),e)),{})}function lt(t){return Array.isArray(t)?t:/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(t))&&"number"==typeof t.length?Array.from(t):[t]}function ht(t,e){return lt("string"==typeof t?(e||document).querySelectorAll(t):t)}const dt=Object.freeze({$(t){return ht(t,this.root)[0]},$$(t){return ht(t,this.root)}}),pt=Object.freeze({shouldUpdate:T,onBeforeMount:T,onMounted:T,onBeforeUpdate:T,onUpdated:T,onBeforeUnmount:T,onUnmounted:T}),mt=t=>1===t.length?t[0]:t;function ft(t,e,n){const r="object"==typeof e?e:{[e]:n},s=Object.keys(r);return lt(t).forEach((t=>{s.forEach((e=>t.setAttribute(e,r[e])))})),t}const bt=new Map;var gt;const vt={CSS_BY_NAME:bt,add(t,e){return bt.has(t)||(bt.set(t,e),this.inject()),this},inject(){return(gt||(ft(gt=ht("style[riot]")[0]||document.createElement("style"),"type","text/css"),gt.parentNode||document.head.appendChild(gt),gt)).innerHTML=[...bt.values()].join("\n"),this},remove(t){return bt.has(t)&&(bt.delete(t),this.inject()),this}};function yt(t){for(var e=arguments.length,n=Array(e>1?e-1:0),r=1;rmt(r.map((e=>t.getAttribute(e)))))))}(t)||t.tagName.toLowerCase()}function jt(t,e){return Object.assign({},t,w(e))}function Nt(t,e){let{slots:n,attributes:r,props:s}=e;return u=function(t){return[...l].reduce(((t,e)=>e(t)||t),t)}(k(i(t)?Object.create(t):t,{mount(e,o,i){return void 0===o&&(o={}),D(e,g,!1),this[y]=i,this[O]=function(t,e){void 0===e&&(e=[]);const n=e.map((e=>Z(t,e))),r={};return Object.assign(r,Object.assign({expressions:n},ct((t=>e=>(n.forEach((n=>n[t](e))),r)))))}(e,r).mount(i),D(this,m,Object.freeze(Object.assign({},function(t,e){return void 0===e&&(e={}),Object.assign({},function(t){return Array.from(t.attributes).reduce(((t,e)=>(t[N(e.name)]=e.value,t)),{})}(t),w(e))}(e,s),C(this[O].expressions)))),this.state=jt(this.state,o),this[j]=this.template.createDOM(e).clone(),at(e,this),t.name&&function(t,e){Ot(t)!==e&&ft(t,"is",e)}(e,t.name),D(this,b,e),D(this,f,n),this.onBeforeMount(this.props,this.state),this[j].mount(e,this,i),this.onMounted(this.props,this.state),this},update(t,e){void 0===t&&(t={}),e&&(this[y]=e,this[O].update(e));const n=C(this[O].expressions);if(!1!==this.shouldUpdate(n,this.props))return D(this,m,Object.freeze(Object.assign({},this.props,n))),this.state=jt(this.state,t),this.onBeforeUpdate(this.props,this.state),this[v]||(this[v]=!0,this[j].update(this,this[y])),this.onUpdated(this.props,this.state),this[v]=!1,this},unmount(t){return this.onBeforeUnmount(this.props,this.state),this[O].unmount(),this[j].unmount(this,this[y],null===t?null:!t),this.onUnmounted(this.props,this.state),this}})),Object.keys(t).filter((e=>o(t[e]))).forEach((t=>{u[t]=u[t].bind(u)})),u;var u}function xt(t){let{css:e,template:n,componentAPI:r,name:s}=t;return e&&s&&vt.add(s,e),yt(Nt)(k(L(r,Object.assign({},pt,{[m]:{},state:{}})),Object.assign({[f]:null,[b]:null},dt,{name:s,css:e,template:n})))}const Mt=S(Et);function Et(t){const{css:n,template:r,exports:s,name:o}=t,i=r?function(t,n,r){return t(ut,A,e,r)}(r,0,(t=>{const e=(void 0===(n=t.exports?t.exports.components:{})&&(n={}),Object.entries(w(n)).reduce(((t,e)=>{let[n,r]=e;var s;return t[(s=n,s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())]=Et(r),t}),{}));var n;return n=>n===t.name?Mt(t):e[n]||a.get(n)})(t)):B;return t=>{let{slots:e,attributes:u,props:a}=t;if(s&&s[g])return function(t,e){let{slots:n,attributes:r,props:s,css:o,template:i}=e;const u=L(t({slots:n,attributes:r,props:s}),U);return ct((t=>function(){for(var e=arguments.length,n=Array(e),r=0;rl.mount(t,n,e),update:(t,e)=>l.update(e,t),unmount:t=>l.unmount(t)}}}const At={cssManager:vt,DOMBindings:{template:ut,createBinding:ot,createExpression:Z,bindingTypes:e,expressionTypes:A},globals:{DOM_COMPONENT_INSTANCE_PROPERTY:c,PARENT_KEY_SYMBOL:y}};t.__=At,t.component=function(t){return function(e,n,r){let{slots:s,attributes:o,parentScope:i}=void 0===r?{}:r;return function(){for(var t=arguments.length,e=Array(t),n=0;nfunction(){return t(e(...arguments))}))}((t=>t.mount(e,i)),(t=>t({props:n,slots:s,attributes:o})),Et)(t)}},t.install=function(t){return o(t),l.has(t),l.add(t),l},t.mount=function(t,e,n){return ht(t).map((t=>function(t,e,n,r){const s=n||Ot(t);return a.has(s),a.get(s)({props:e,slots:void 0}).mount(t)}(t,e,n)))},t.pure=function(t){return o(t),t[g]=!0,t},t.register=function(t,e){let{css:n,template:r,exports:s}=e;return a.has(t),a.set(t,Et({name:t,css:n,template:r,exports:s})),a},t.uninstall=function(t){return l.has(t),l.delete(t),l},t.unmount=function(t,e){return ht(t).map((t=>(t[c]&&t[c].unmount(e),t)))},t.unregister=function(t){return a.has(t),a.delete(t),vt.remove(t),a},t.version="v7.1.0",t.withTypes=t=>t},"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).riot={}); \ No newline at end of file