From e42349bc74bb7dd6c0a77ae01992d730654da018 Mon Sep 17 00:00:00 2001 From: Ludovic Stephan Date: Tue, 28 Jul 2020 15:46:24 +0200 Subject: [PATCH] Use ES6 modules --- kfet/static/kfet/js/kpsul.js | 155 +---------------- .../kfet/js/kpsul/managers/account_manager.js | 158 ++++++++++++++++++ .../kfet/js/{ => kpsul/models}/account.js | 11 +- kfet/templates/kfet/kpsul.html | 10 +- 4 files changed, 169 insertions(+), 165 deletions(-) create mode 100644 kfet/static/kfet/js/kpsul/managers/account_manager.js rename kfet/static/kfet/js/{ => kpsul/models}/account.js (93%) diff --git a/kfet/static/kfet/js/kpsul.js b/kfet/static/kfet/js/kpsul.js index a1ac8d37..66577ddb 100644 --- a/kfet/static/kfet/js/kpsul.js +++ b/kfet/static/kfet/js/kpsul.js @@ -1,154 +1,3 @@ -class AccountManager { - // Classe pour gérer la partie "compte" de K-Psul - // Devrait être la seule interface entre le JS de K-Psul et la logique des comptes. - constructor() { - // jQuery elements - this._$input = $("#id_trigramme"); - this._$container = $("#account"); - this._$article_select = $("#article_autocomplete") +import AccountManager from "./kpsul/managers/account_manager.js" - // Subordinated classes - this.account = new Account({ "trigramme": "" }); - this.search = new AccountSearch(this) - - // Initialization - this._init_events(); - } - - get data() { - return this.account.toJSON(); - } - - _init_events() { - var that = this; - - // L'input change ; on met à jour le compte - this._$input.on("input", () => this.update()) - - // Raccourci LIQ - this._$input.on("keydown", function (e) { - if (e.key == "ArrowDown") { - that.set("LIQ") - } - }) - - // Fonction de recherche - this._$container.on('click', '.search', function () { - that.search.open(); - }); - - this._$container.on('keydown', function (e) { - if (e.key == "f" && e.ctrlKey) { - // Ctrl + F : universal search shortcut - that.search.open(); - e.preventDefault(); - } - }); - } - - set(trigramme) { - this._$input.val(trigramme); - this.update(); - } - - update() { - var trigramme = this._$input.val().format_trigramme(); - this.account.set({ "trigramme": trigramme }) - if (trigramme.is_valid_trigramme()) { - this.account.fetch({ - "success": this._on_success.bind(this), - "error": this.reset.bind(this, false), - }) - } else { - this.reset() - } - } - - _on_success() { - // On utilise l'objet global window pour accéder aux fonctions nécessaires - this.account.render(); - this._$article_select.focus(); - window.updateBasketAmount(); - window.updateBasketRel(); - } - - reset(hard_reset = false) { - this.account.reset(); - this.account.render(); - - if (hard_reset) { - this._$input.val(""); - this.update() - } - } -} - -class AccountSearch { - - constructor(manager) { - this.manager = manager; - - this._content = '
'; - this._input = '#search_autocomplete'; - this._results_container = '#account_results'; - - } - - open() { - var that = this; - this._$dialog = $.dialog({ - title: 'Recherche de compte', - content: this._content, - backgroundDismiss: true, - animation: 'top', - closeAnimation: 'bottom', - keyboardEnabled: true, - onOpen: function () { - that._$input = $(that._input); - that._$results_container = $(that._results_container); - that._init_form() - ._init_events(); - }, - }); - } - - _init_form() { - var that = this; - - this._$input.yourlabsAutocomplete({ - url: django_urls['kfet.account.search.autocomplete'](), - minimumCharacters: 2, - id: 'search_autocomplete', - choiceSelector: '.autocomplete-value', - placeholder: "Chercher un utilisateur K-Fêt", - container: that._$results_container, - box: that._$results_container, - fixPosition: function () { }, - }); - - return this; - } - - _init_events() { - this._$input.bind('selectChoice', - (e, choice, autocomplete) => this._on_select(e, choice, autocomplete) - ); - return this; - } - - _on_select(e, choice, autocomplete) { - // Une option est de la forme " ()" - var choice_text = choice.text().trim(); - var trigramme_regex = /\((.{3})\)$/; - // le match est de la forme [, ] - trigramme = choice_text.match(trigramme_regex)[1] - this.manager.set(trigramme); - this.close(); - } - - close() { - if (this._$dialog !== undefined) { - this._$dialog.close(); - } - } -} +self.account_manager = new AccountManager(); \ No newline at end of file diff --git a/kfet/static/kfet/js/kpsul/managers/account_manager.js b/kfet/static/kfet/js/kpsul/managers/account_manager.js new file mode 100644 index 00000000..2f89fc7e --- /dev/null +++ b/kfet/static/kfet/js/kpsul/managers/account_manager.js @@ -0,0 +1,158 @@ +import Account from "../models/account.js" + +class AccountManager { + // Classe pour gérer la partie "compte" de K-Psul + // Devrait être la seule interface entre le JS de K-Psul et la logique des comptes. + constructor() { + // jQuery elements + this._$input = $("#id_trigramme"); + this._$container = $("#account"); + this._$article_select = $("#article_autocomplete") + + // Subordinated classes + this.account = new Account({ "trigramme": "" }); + this.search = new AccountSearch(this) + + // Initialization + this._init_events(); + } + + get data() { + return this.account.toJSON(); + } + + _init_events() { + var that = this; + + // L'input change ; on met à jour le compte + this._$input.on("input", () => this.update()) + + // Raccourci LIQ + this._$input.on("keydown", function (e) { + if (e.key == "ArrowDown") { + that.set("LIQ") + } + }) + + // Fonction de recherche + this._$container.on('click', '.search', function () { + that.search.open(); + }); + + this._$container.on('keydown', function (e) { + if (e.key == "f" && e.ctrlKey) { + // Ctrl + F : universal search shortcut + that.search.open(); + e.preventDefault(); + } + }); + } + + set(trigramme) { + this._$input.val(trigramme); + this.update(); + } + + update() { + var trigramme = this._$input.val().format_trigramme(); + this.account.set({ "trigramme": trigramme }) + if (trigramme.is_valid_trigramme()) { + this.account.fetch({ + "success": this._on_success.bind(this), + "error": this.reset.bind(this, false), + }) + } else { + this.reset() + } + } + + _on_success() { + // On utilise l'objet global window pour accéder aux fonctions nécessaires + this.account.render(); + this._$article_select.focus(); + window.updateBasketAmount(); + window.updateBasketRel(); + } + + reset(hard_reset = false) { + this.account.reset(); + this.account.render(); + + if (hard_reset) { + this._$input.val(""); + this.update() + } + } +} + +class AccountSearch { + + constructor(manager) { + this.manager = manager; + + this._content = '
'; + this._input = '#search_autocomplete'; + this._results_container = '#account_results'; + + } + + open() { + var that = this; + this._$dialog = $.dialog({ + title: 'Recherche de compte', + content: this._content, + backgroundDismiss: true, + animation: 'top', + closeAnimation: 'bottom', + keyboardEnabled: true, + onOpen: function () { + that._$input = $(that._input); + that._$results_container = $(that._results_container); + that._init_form() + ._init_events(); + }, + }); + } + + _init_form() { + var that = this; + + this._$input.yourlabsAutocomplete({ + url: django_urls['kfet.account.search.autocomplete'](), + minimumCharacters: 2, + id: 'search_autocomplete', + choiceSelector: '.autocomplete-value', + placeholder: "Chercher un utilisateur K-Fêt", + container: that._$results_container, + box: that._$results_container, + fixPosition: function () { }, + }); + + return this; + } + + _init_events() { + this._$input.bind('selectChoice', + (e, choice, autocomplete) => this._on_select(e, choice, autocomplete) + ); + return this; + } + + _on_select(e, choice, autocomplete) { + // Une option est de la forme " ()" + var choice_text = choice.text().trim(); + var trigramme_regex = /\((.{3})\)$/; + // le match est de la forme [, ] + trigramme = choice_text.match(trigramme_regex)[1] + this.manager.set(trigramme); + this.close(); + } + + close() { + if (this._$dialog !== undefined) { + this._$dialog.close(); + } + } +} + +export default AccountManager; \ No newline at end of file diff --git a/kfet/static/kfet/js/account.js b/kfet/static/kfet/js/kpsul/models/account.js similarity index 93% rename from kfet/static/kfet/js/account.js rename to kfet/static/kfet/js/kpsul/models/account.js index 07fd6688..903af534 100644 --- a/kfet/static/kfet/js/account.js +++ b/kfet/static/kfet/js/kpsul/models/account.js @@ -31,6 +31,7 @@ var Account = Backbone.Model.extend({ }, view: function () { + var view_class; if (this.is_empty_account()) { view_class = EmptyAccountView } else if (this.get("trigramme") == 'LIQ') { @@ -61,7 +62,7 @@ var AccountView = Backbone.View.extend({ get: function (property) { /* If the function this.get_ is defined, we call it ; else we call this.model.. */ - getter_name = `get_${property}`; + var getter_name = `get_${property}`; if (_.functions(this).includes(getter_name)) return this[getter_name]() else @@ -131,8 +132,8 @@ var EmptyAccountView = AccountView.extend({ /* Léger changement de fonctionnement : on affiche *toujours* le bouton de recherche si le compte est invalide */ - buttons = ''; - trigramme = this.model.get("trigramme") + var buttons = ''; + var trigramme = this.model.get("trigramme") if (trigramme.is_valid_trigramme()) { trigramme = encodeURIComponent(trigramme); var url_base = django_urls["kfet.account.create"](); @@ -142,4 +143,6 @@ var EmptyAccountView = AccountView.extend({ return buttons } -}) \ No newline at end of file +}) + +export default Account; \ No newline at end of file diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html index 03ade3c6..4481252d 100644 --- a/kfet/templates/kfet/kpsul.html +++ b/kfet/templates/kfet/kpsul.html @@ -9,8 +9,7 @@ - - + {% endblock %} {% block title %}K-Psul{% endblock %} @@ -209,12 +208,7 @@ $(document).ready(function() { }); } - - // ----- - // Account data management - // ----- - - var account_manager = new AccountManager(); + var triInput = $('#id_trigramme');