#wip: Segunda round de la Jam. Carga de Polls casi completada. Queda selección.

PHP/GamUsino.php

@@ -9,6 +9,9 @@
             if($data){
                 if(isset($data["action"])){
                     switch($data["action"]){
+                        case "load_polls":
+                            $this->response(200, $this->get_polls($this->load_database()));
+                        break;
                         case "add_poll":
                             $database = $this->load_database();
                             isset($database["polls"]) || ($database["polls"] = []);
@@ -17,14 +20,14 @@
                                 "options" => []
                             ];
                             $this->save_database($database);
-                            $this->response(200, $database["polls"]);
+                            $this->response(200, $this->get_polls($database));
                         break;
                         case "get_poll":
                             $database = $this->load_database();
-                            $poll = isset($database["polls"]) && isset($database["polls"][$data["name"]]) ? $database["polls"][$data["name"]] : null;
+                            $poll = isset($database["polls"]) && isset($database["polls"][$data["i"]]) ? $database["polls"][$data["i"]] : null;
                             $this->response($poll ? 200 : 404, $poll ?? [
                                 "message" => "poll_not_exists", 
-                                "name" => $data["name"]
+                                "i" => $data["i"]
                             ]);
                         break;
                         case "add_option":
@@ -64,6 +67,10 @@
 
         }
 
+        private function get_polls($database){
+            return isset($database["polls"]) ? array_map(fn($poll) => ["name" => $poll["name"]], $database["polls"]) : [];
+        }
+
         private function response($code, $data){
 
             echo json_encode([

Public/ecma/GamUsino.ecma.js

@@ -7,11 +7,17 @@ GamUsino = function(custom){
               autostart : true, 
               timeout : 2000
           }, 
-          settings = {};
+          settings = {}, 
+          fragments = {};
     let started = false, 
-        ajax_timeout = 2000;
+        ajax_timeout = 2000, 
+        preload_timeout = 2000;
 
-    const constructor = () => {};
+    const constructor = () => {
+
+        self.settings("autostart") && self.start();
+
+    };
 
     this.start = callback => {
 
@@ -24,8 +30,35 @@ GamUsino = function(custom){
         started = true;
 
         ajax_timeout = self.settings(["ajax_timeout", "timeout"]);
+        preload_timeout = self.settings(["preload_timeout", "timeout"]);
 
-        end(true);
+        self.send({action : "load_polls"}, data => {
+            self.preload(".polls-box>.polls", () => {
+
+                let html = document.querySelector(".html-structure-fragments").innerHTML, 
+                    matches;
+
+                while(matches = html.match(/<\!\-{2}\s*\[{2}([^\[\]]+)\]{2}\s*\-{2}>/)){
+
+                    const key = matches[1];
+                    let l;
+
+                    html = html.substring(matches.index + matches[0].length);
+
+                    if((l = html.indexOf(matches[0])) == -1)
+                        continue;
+
+                    fragments[key] = html.substring(0, l);
+
+                    html = html.substring(l + matches[0].length);
+
+                };
+
+                build_polls(data.content);
+
+            });
+            end(true);
+        });
 
         return true;
     };
@@ -36,7 +69,7 @@ GamUsino = function(custom){
 
     this.settings = (keys, inputs, _default, nulls) => {
 
-        const m = (keys = (typeof keys == "object" && keys instanceof Array ? keys : keys).filter(key => key && typeof key == "string")).length;
+        const m = (keys = (typeof keys == "object" && keys instanceof Array ? keys : [keys]).filter(key => key && typeof key == "string")).length;
 
         if(m){
 
@@ -58,7 +91,24 @@ GamUsino = function(custom){
         let ended = false;
         const ajax = new XMLHttpRequest(), 
               date = Date.now(), 
-              end = error => !ended && (ended = true) && typeof callback == "function" && callback(ajax.responseText && JSON.parse(ajax.responseText) || ajax.responseText, ajax.status, ajax.readyState, error == "OK", error);
+              end = error => {
+                  if(ended)
+                      return;
+                  ended = true;
+                  if(typeof callback != "function")
+                      return;
+                  
+                  let data = ajax.responseText;
+
+                  try{
+                      data = JSON.parse(data);
+                  }catch(exception){
+                      data = ajax.responseText;
+                  };
+
+                  callback(data, ajax.status, ajax.readyState, error == "OK", error);
+
+              };
 
         ajax.open("post", "/api.php", true);
         ajax.timeout = ajax_timeout;
@@ -104,6 +154,78 @@ GamUsino = function(custom){
 
     };
 
+    this.preload = (selector, callback) => {
+        if(!selector){
+            callback(null, false);
+            return;
+        };
+        if(selector.nodeName || selector.tagName){
+            callback(selector, false);
+            return;
+        };
+        if(typeof selector != "string"){
+            callback(false, false);
+            return;
+        };
+
+        let item;
+
+        try{
+            if(item = document.querySelector(selector)){
+                callback(item, false);
+                return;
+            };
+        }catch(exception){
+            callback(null, false);
+            return;
+        };
+
+        const date = Date.now();
+        let preload = setInterval(() => {
+            if(item = document.querySelector(selector)){
+                clearInterval(preload);
+                callback(item, true);
+                return;
+            }else if(Date.now() - date > preload_timeout){
+                clearInterval(preload);
+                callback(null, true);
+                return;
+            };
+        }, 1000 / frames_per_second);
+
+    };
+
+    this.string_variables = (string, variables, _default) => {
+
+        const l = (variables = (
+            typeof variables == "object" ? variables instanceof Array ? variables : [variables] : []
+        ).filter(subset => subset && typeof subset == "object")).length;
+
+        return string.replace(/\{([^\{\}]+)\}/g, (all, key) => {
+            for(let i = 0; i < l; i ++)
+                if(variables[i][key] !== undefined)
+                    return variables[i][key];
+            return _default !== undefined ? _default : all;
+        });
+    };
+
+    const build_polls = polls => document.querySelector(".polls-box>.polls").innerHTML = polls.map((poll, i) => self.string_variables(fragments.poll_menu_fragment, {
+        ...poll, 
+        i : i
+    })).join("");
+
+    this.show_poll = (item, event) => {
+        document.querySelectorAll(".polls-box>.polls [data-seleted=true]").forEach(item => item.setAttribute("data-selected", false));
+        item.setAttribute("data-selected", true);
+        self.send({
+            action : "get_poll", 
+            i : Number(item.getAttribute("data-i"))
+        }, data => {
+            console.log(data);
+            document.querySelector(".poll-box>.poll").innerHTML = data.content.name;
+        });
+    };
+
     constructor();
 
 };

Public/index.html

@@ -5,6 +5,10 @@
         <meta http-equiv="content-type" content="text/html;charset=utf-8" />
         <meta charset="utf-8" />
 
+        <style data-type="text/css" data-language="CSS2" data-rel="stylesheet" charset="utf-8">
+            .html-structure-fragments{display : none;}
+        </style>
+
         <script data-type="text/javascript" data-lang="ECMAScript 2015" src="ecma/GamUsino.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
 
         <script data-type="text/javascript" data-lang="ECMAScript 2015" charset="utf-8">
@@ -15,6 +19,15 @@
 
     </head>
     <body>
+        <div class="html-structure-fragments">
+            <!-- [[poll_menu_fragment]] -->
+            <li class="poll-menu-item" data-i="{i}" data-i18n="{name}" data-i18n-without="true" title="{name}" onclick="gamusino.show_poll(this, event);" data-selected="false">
+                <span data-icon="menu_item_selected"></span>
+                <span data-icon="{name}"></span>
+                <span data-i18n="{name}">{name}</span>
+            </li>
+            <!-- [[poll_menu_fragment]] -->
+        </div>
         <header>
             <h1 data-i18n="gamusino" title="GAM-USINO" data-i18n-without="true">
                 <a href="#" target="_self">
@@ -27,7 +40,7 @@
             </h1>
         </header>
         <main>
-            <section class="polls">
+            <section class="polls-box">
                 <div class="group">
                     <span class="input"><input type="text" name="poll" data-i18n="poll" data-i18n-without="true" placeholder="Encuesta..." /></span>
                     <span class="input"><button data-i18n="add" data-i18n-without="true" title="Añadir" onclick="gamusino.add_poll(this, event);">
@@ -39,7 +52,7 @@
                     <ul></ul>
                 </nav>
             </section>
-            <section class="poll">
+            <section class="poll-box">
                 <h2 data-i18n="poll">Encuesta</h2>
                 <div class="group">
                     <span class="input"><input type="text" name="option" data-i18n="option" data-i18n-without="true" placeholder="Opción..." /></span>
@@ -48,7 +61,7 @@
                         <span data-i18n="add">Añadir</span>
                     </button></span>
                 </div>
-                <nav>
+                <nav class="poll">
                     <ul></ul>
                 </nav>
             </section>