16369 mapa de argentina svg estatico

dist/js/poncho.js

@@ -718,6 +718,94 @@ if (typeof exports !== "undefined") {
 }
 
 
+/**
+ * HEAD STYLE
+ * 
+ * @summary Permite agregar definiciones css dentro del head.
+ * 
+ * @author Agustín Bouillet <bouilleta@jefatura.gob.ar>
+ * @param {string} id Nombre único para identificar las asignaciones css
+ * @param {string} styleDefinitions Definiciones CSS
+ * @param {string} mediaType Definición para media query
+ * @example
+ * //<style id="custom-id">div {border: 2px solid red}</div>
+ * headStyle("custom-id", `div { border: 2px solid red}`);
+ * 
+ * //<style id="custom-id" media="all and (max-width: 500px)">
+ * //    div {border: 2px solid red}
+ * //</div>
+ * headStyle(
+ *     "custom-id", 
+ *     `div { border: 2px solid red}`,
+ *     "all and (max-width: 500px)"
+ * );
+ * @returns {undefined}
+ * 
+ * MIT License
+ * 
+ * Copyright (c) 2023 Argentina.gob.ar
+ * 
+ * Permission is hereby granted, free of charge, to any person
+ * obtaining a copy of this software and associated documentation
+ * files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rightsto use, copy, modify, merge,
+ * publish, distribute, sublicense, and/or sell copies of the Software,
+ * and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+ * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const headStyle = (id, styleDefinitions, mediaType) => {
+    if (typeof id !== "string" || id.trim() === "") {
+        console.warn("No se ha provisto un _id_ válido. Se usará: "
+            + "'argob-custom-css'.");
+        id = "argob-custom-css";
+    }
+
+    if (typeof styleDefinitions !== "string" || styleDefinitions.trim() == ""){
+        console.warn("No se ha provisto definición de estilos. "
+            + "Se pasa por alto la petición.");
+        return;
+    }
+
+    const styleExists = document.getElementById(id);
+    if (styleExists !== null) {
+        if (styleExists.textContent.trim() === styleDefinitions.trim()) {
+            console.warn("[addHeadStyle] Una definición de estilos "
+                + "con las mismas definiciones ya existe.");
+            return;
+
+        } else {
+            styleExists.remove();
+            console.warn("[addHeadStyle] Un estilo con el mismo _id_ "
+                + "existe, pero tiene definiciones distintas. Se pisa.");
+        }
+    }
+
+    document.querySelectorAll("head").forEach(h => {
+        const tag = document.createElement("style");
+        tag.setAttribute("rel", "stylesheet");
+        tag.id = id;
+        if(typeof mediaType === "string" && mediaType.trim() !== ""){
+            tag.setAttribute("media", mediaType);
+        }
+
+        tag.textContent = styleDefinitions;
+
+        h.appendChild(tag);
+    });
+};
+
 function flattenNestedObjects(entries) {
     return entries.map(entry => {
         return flattenObject(entry, "");

gulpfile.js

@@ -21,6 +21,7 @@ const ponchoMinList = [
     './src/js/utils/connect.js',
     './src/js/utils/string.js',
     './src/js/utils/html.js',
+    './src/js/utils/document.js',
     './src/js/utils/collections.js',
     './src/js/poncho-table/poncho-table.js',
     './src/js/poncho-agenda/src/js/poncho-agenda.js',

src/js/mapa-argentina/demo/css/main.css

@@ -0,0 +1,26 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background-color:#f4f4f4;
+  height: 100%;
+}
+
+.doc-nav {
+  display: block;
+  background-color: #5a6a6a;
+  border-radius: 15px;
+  padding:.75em 1.5em;
+  color: white;
+  margin: .5em .5em 1.5em ;
+}
+.doc-nav * {color:white; text-decoration: none;}
+.doc-nav > .list-unstyled { margin: 0;}
+
+pre.demo-style {
+  background-color:#eee;
+  color:var(--mute);
+  border-radius: 12px;
+  padding: 1em 1.5em !important;
+  border-color: #ddd;
+}

src/js/mapa-argentina/demo/example-1.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="profile" href="http://www.w3.org/1999/xhtml/vocab" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
+  <link rel="stylesheet"
+    href="https://www.argentina.gob.ar/profiles/argentinagobar/themes/contrib/poncho/css/poncho.min.css" />
+  <link rel="stylesheet" href="./css/main.css">
+  <title>Mapa de Argentina SVG | Ejemplo 1</title>
+</head>
+<body>
+  <nav class="doc-nav">
+    <ul class="list-unstyled">
+      <li><a href="./index.html">Inicio</a></li>
+    </ul>
+  </nav>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+        <h1 class="h2 text-primary">Ejemplo 1</h1>
+        <div class="mapa" id="js-mapa-svg"></div>
+      </div>
+      <div class="col-md-12">
+        <hr>
+        <h3>🚀 Uso</h3>
+        <div><pre>&lt;script src="js-mapa-svg"&gt;&lt;/script&gt;</pre></div>
+        <div><pre>&lt;div id="js-mapa-svg"&gt;&lt;/div&gt;</pre></div>
+        <div data-code-from="js-map"  data-styles="text-arandano,h5,m-t-2" data-htmltag="h3" data-title="Script para el mapa SVG"></div>
+        <div data-code-from="js-headstyle" data-styles="text-arandano,h5,m-t-2" data-htmltag="h3" data-title="Agrega estilos en el head"></div>
+      </div>
+    </div>
+  </div>
+    <div class="container m-t-4">
+      <div class="row">
+        <div class="col-md-12 ">
+        <footer class="p-y-1">
+    <img src="https://github.githubassets.com/assets/github-mark-9be88460eaa6.svg" alt="Github" />
+    <a href="https://github.com/argob/poncho">argob/poncho</a>
+    </div>
+  </footer>
+  </div>
+</div>
+  <script src="https://www.argentina.gob.ar/profiles/argentinagobar/themes/contrib/poncho/js/poncho.min.js"></script>
+  <script src="../mapa-argentina.js"></script>
+  <script src="../../utils/document.js"></script>
+  <script id="js-headstyle">
+    headStyle(
+        "mapa-svg", 
+        `.mapa {
+            height: auto;
+            overflow: auto;
+            width: 400px;
+            padding: 1em;
+            border-radius: 15px;
+            background-color: white;
+        }`
+    );
+  </script>
+<script src="./js/demo.js"></script>
+<script id="js-map">
+document.addEventListener('DOMContentLoaded', () => {
+    const options = {
+        provinces: ["AR-C", "AR-B", "AR-E", "AR-V"],
+        color: "var(--secondary, orange)",
+        strokeColor: "#ccc",
+        strokeWidth: 1,
+        defaultColor: '#F4F4F4',
+    };
+    const arg = new ArgentinaMap(options);
+    arg.render();
+});
+</script>
+</body>
+</html>

src/js/mapa-argentina/demo/example-2.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="profile" href="http://www.w3.org/1999/xhtml/vocab" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
+  <link rel="stylesheet"
+    href="https://www.argentina.gob.ar/profiles/argentinagobar/themes/contrib/poncho/css/poncho.min.css" />
+  <link rel="stylesheet" href="./css/main.css">
+  <title>Mapa de Argentina SVG | Ejemplo 2</title>
+</head>
+
+<body>
+  <nav class="doc-nav">
+    <ul class="list-unstyled">
+      <li><a href="./index.html">Inicio</a></li>
+    </ul>
+  </nav>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+        <h1 class="h2 text-primary">Ejemplo 2</h1>
+        <div class="mapa" id="js-mapa-svg"></div>
+      </div>
+      <div class="col-md-12">
+        <hr>
+        <h3>🚀 Uso</h3>
+        <div><pre>&lt;script src="js-mapa-svg"&gt;&lt;/script&gt;</pre></div>
+        <div><pre>&lt;div id="js-mapa-svg"&gt;&lt;/div&gt;</pre></div>
+        <div data-code-from="js-map"  data-styles="text-arandano,h5,m-t-2" data-htmltag="h3" data-title="Script para el mapa SVG"></div>
+        <div data-code-from="js-headstyle" data-styles="text-arandano,h5,m-t-2" data-htmltag="h3" data-title="Agrega estilos en el head"></div>
+
+      </div>
+    </div>
+  </div>
+    <div class="container m-t-4">
+      <div class="row">
+        <div class="col-md-12 ">
+        <footer class="p-y-1">
+
+    <img src="https://github.githubassets.com/assets/github-mark-9be88460eaa6.svg" alt="Github" />
+      <a href="https://github.com/argob/poncho">argob/poncho</a>
+    </div>
+
+  </footer>
+  </div>
+</div>
+
+
+<script src="https://www.argentina.gob.ar/profiles/argentinagobar/themes/contrib/poncho/js/poncho.min.js"></script>
+<script src="../mapa-argentina.js"></script>
+<script src="./js/demo.js"></script>
+<script src="../../utils/document.js"></script>
+<script id="js-headstyle">
+  headStyle(
+    "mapa-svg", 
+    `.mapa {
+        height: auto;
+        overflow: auto;
+        width: 400px;
+        padding: 1em;
+        border-radius: 15px;
+        background-color: white;}`);
+</script>
+<script id="js-map">
+document.addEventListener('DOMContentLoaded', () => {
+    const options = {
+        color: "var(--verde-jade)",
+        strokeColor: "#ddd",
+        strokeWidth: 1,
+        svgTitle: "Argentina afectadas por la inundación",
+        svgDesc: "Esta es la descripción del SVG",
+        provincesTitleAndDesc: [        
+            ["AR-A", "Salta"],
+            ["AR-B", "Buenos Aires"],
+            ["AR-C", "Ciudad Autónoma de Buenos Aires"],
+            ["AR-D", "San Luis"],
+            ["AR-E", "Entre Ríos"],
+            ["AR-F", "La Rioja"],
+            ["AR-G", "Santiago del Estero"],
+            ["AR-H", "Chaco"],
+            ["AR-J", "San Juan"],
+            ["AR-K", "Catamarca"],
+            ["AR-L", "La Pampa"],
+            ["AR-M", "Mendoza"],
+            ["AR-N", "Misiones"],
+            ["AR-P", "Formosa"],
+            ["AR-Q", "Neuquén"],
+            ["AR-R", "Río Negro"],
+            ["AR-S", "Santa Fe"],
+            ["AR-T", "Tucumán"],
+            ["AR-U", "Chubut"],
+            ["AR-V", "Tierra del Fuego, Antártida e Islas del Atlántico Sur"],
+            ["AR-W", "Corrientes"],
+            ["AR-X", "Córdoba"],
+            ["AR-Y", "Jujuy"],
+            ["AR-Z", "Santa Cruz"]
+        ],
+    };
+
+    const arg = new ArgentinaMap(options);
+    arg.render();
+});
+</script>
+</body>
+</html>