INGADA/GamUsino
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
KyMAN 2024-04-05 15:19:43 +02:00
parent f8eeb437a3
commit 3d79c2cf16
3 changed files with 154 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
PHP/GamUsino.php
View File

@ -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([

132
Public/ecma/GamUsino.ecma.js
View File

@ -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"]);
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();
};

19
Public/index.html
View File

@ -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>