Nouvelle compilation des scripts en JS.

src/build/firstExample.js

@@ -34,9 +34,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { FreeDatas2HTML, Pagination, Selector, SortingField } from "./freeDatas2HTML";
+import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./freeDatas2HTML";
 var initialise = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var mySort, converter, pagination, filtre1, filtre2, filtre3, sortingField1, sortingField2, sortingField3, sortingField4, e_1;
+    var mySort, converter, myRender, pagination, filtre1, filtre2, filtre3, sortingField1, sortingField2, sortingField3, sortingField4, e_1;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -60,11 +60,30 @@ var initialise = function () { return __awaiter(void 0, void 0, void 0, function
             case 1:
                 _a.sent();
                 converter.datasSortingFunctions = [{ datasFieldNb: 4, sort: mySort }];
+                myRender = new Render(converter);
+                if (window.innerWidth < 800) {
+                    myRender.settings =
+                        {
+                            allBegining: "<h4>Affichage petits écrans !</h4>",
+                            allEnding: "",
+                            linesBegining: "<ul>",
+                            linesEnding: "</ul>",
+                            lineBegining: "<li><ul>",
+                            lineEnding: "</ul></li>",
+                            dataDisplaying: "<li><b>#FIELDNAME :</b> #VALUE</li>",
+                        };
+                    converter.datasRender = myRender;
+                }
+                else {
+                    myRender.settings.allBegining = "<table class='table-hover'>";
+                    converter.datasRender = myRender;
+                }
                 pagination = new Pagination(converter, { id: "pages" }, "Page à afficher :");
                 pagination.options = { displayElement: { id: "paginationOptions" }, values: [10, 20, 50, 500], name: "Choix de pagination :" };
                 pagination.selectedValue = 10;
                 converter.pagination = pagination;
                 pagination.rend2HTML();
+                converter.datasCounter = { id: "compteur" };
                 return [4, converter.run()];
             case 2:
                 _a.sent();
@@ -76,6 +95,7 @@ var initialise = function () { return __awaiter(void 0, void 0, void 0, function
                 filtre3.separator = ",";
                 filtre3.selector2HTML();
                 converter.datasSelectors = [filtre1, filtre2, filtre3];
+                if (window.innerWidth >= 800) {
                     sortingField1 = new SortingField(converter, 0);
                     sortingField1.field2HTML();
                     sortingField2 = new SortingField(converter, 1);
@@ -85,6 +105,7 @@ var initialise = function () { return __awaiter(void 0, void 0, void 0, function
                     sortingField4 = new SortingField(converter, 4);
                     sortingField4.field2HTML();
                     converter.datasSortingFields = [sortingField1, sortingField2, sortingField3, sortingField4];
+                }
                 return [3, 4];
             case 3:
                 e_1 = _a.sent();

src/build/freeDatas2HTML.js

@@ -37,9 +37,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 var Papa = require("papaparse");
 var errors = require("./errors.js");
 var compare = require('natural-orderby').compare;
+import { Render } from "./freeDatas2HTMLRender";
 var FreeDatas2HTML = (function () {
     function FreeDatas2HTML() {
-        this._datasViewElt = { id: "", eltDOM: undefined };
+        this._datasViewElt = undefined;
         this.datasHTML = "";
         this._datasSourceUrl = "";
         this.parseMetas = undefined;
@@ -49,6 +50,8 @@ var FreeDatas2HTML = (function () {
         this._datasSortingFunctions = [];
         this.datasSelectors = [];
         this.datasSortingFields = [];
+        this._datasCounter = {};
+        this.datasRender = new Render(this);
     }
     FreeDatas2HTML.checkInDOMById = function (checkedElt) {
         var searchEltInDOM = document.getElementById(checkedElt.id);
@@ -95,6 +98,19 @@ var FreeDatas2HTML = (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(FreeDatas2HTML.prototype, "datasCounter", {
+        set: function (counterDisplayElement) {
+            this._datasCounter = { displayElement: FreeDatas2HTML.checkInDOMById(counterDisplayElement), value: undefined };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FreeDatas2HTML.prototype.getDatasCounterValue = function () {
+        if (this._datasCounter !== undefined && this._datasCounter.value != undefined)
+            return this._datasCounter.value;
+        else
+            return undefined;
+    };
     FreeDatas2HTML.prototype.getSortingFunctionForField = function (datasFieldNb) {
         for (var i in this._datasSortingFunctions) {
             if (this._datasSortingFunctions[i].datasFieldNb === datasFieldNb)
@@ -142,8 +158,6 @@ var FreeDatas2HTML = (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (this._datasViewElt.eltDOM === undefined)
-                            throw new Error(errors.converterNeedDatasElt);
                         if (this._datasSourceUrl === "")
                             throw new Error(errors.parserNeedUrl);
                         return [4, this.parse()];
@@ -163,16 +177,17 @@ var FreeDatas2HTML = (function () {
         });
     };
     FreeDatas2HTML.prototype.refreshView = function () {
-        if (this.parseMetas === undefined || this.parseMetas.fields === undefined || this._datasViewElt.eltDOM === undefined)
+        if (this.parseMetas === undefined || this.parseMetas.fields === undefined)
             throw new Error(errors.converterRefreshFail);
-        this.datasHTML = this.createDatasHTML(this.parseMetas.fields, this.parseDatas);
+        this.datasHTML = this.createDatas2Display(this.parseMetas.fields, this.parseDatas);
+        if (this._datasViewElt !== undefined && this._datasViewElt.eltDOM !== undefined)
             this._datasViewElt.eltDOM.innerHTML = this.datasHTML;
         for (var i in this.datasSortingFields) {
             var field = this.datasSortingFields[i];
             field.field2HTML();
         }
     };
-    FreeDatas2HTML.prototype.createDatasHTML = function (fields, datas) {
+    FreeDatas2HTML.prototype.createDatas2Display = function (fields, datas) {
         if (this.datasSortedField !== undefined && this.datasSortedField.datasFieldNb !== undefined) {
             var field_1 = fields[this.datasSortedField.datasFieldNb];
             var fieldOrder_1 = this.datasSortedField.order;
@@ -187,10 +202,7 @@ var FreeDatas2HTML = (function () {
         if (this.pagination !== undefined && this.pagination.selectedValue !== undefined && this.pagination.pages !== undefined && this.pagination.pages.selectedValue !== undefined)
             firstData = this.pagination.selectedValue * (this.pagination.pages.selectedValue - 1);
         var maxData = (this.pagination !== undefined && this.pagination.selectedValue !== undefined) ? this.pagination.selectedValue : datas.length + 1;
-        var datasHTML = "<table><thead>";
+        var datas2Display = [];
-        for (var i in fields)
-            datasHTML += "<th>" + fields[i] + "</th>";
-        datasHTML += "</thead><tbody>";
         var nbVisible = 0, nbTotal = 0;
         for (var row in datas) {
             var visible = true;
@@ -202,26 +214,25 @@ var FreeDatas2HTML = (function () {
                 }
             }
             if (visible && nbTotal >= firstData && nbVisible < maxData) {
-                datasHTML += "<tr>";
+                datas2Display.push(datas[row]);
-                for (var field in datas[row]) {
-                    if (fields.indexOf(field) !== -1)
-                        datasHTML += "<td>" + datas[row][field] + "</td>";
-                }
-                datasHTML += "</tr>";
                 nbVisible++;
                 nbTotal++;
             }
             else if (visible)
                 nbTotal++;
         }
-        datasHTML += "</tbody></table>";
+        if (this._datasCounter !== undefined && this._datasCounter.displayElement !== undefined) {
+            this._datasCounter.value = nbTotal;
+            this._datasCounter.displayElement.eltDOM.innerHTML = "" + nbTotal;
+        }
         if (this.pagination !== undefined)
             this.pagination.creaPageSelector(nbTotal);
-        return datasHTML;
+        return this.datasRender.rend2HTML(datas2Display);
     };
     return FreeDatas2HTML;
 }());
 export { FreeDatas2HTML };
 export { Pagination } from "./freeDatas2HTMLPagination";
+export { Render } from "./freeDatas2HTMLRender";
 export { Selector } from "./freeDatas2HTMLSelector";
 export { SortingField } from "./freeDatas2HTMLSortingField";