Add files via upload

assets/css/highContrast.css

@@ -390,6 +390,31 @@
       height: 75%;
     }
   }
+
+  /* Promotions */
+.promotions {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+}
+.promotions img {
+  width: 100%;
+  height: 150px;
+  background-size: cover;
+}
+.promotions button {
+  margin-top: 5%;
+}
+.controls {
+  text-align: center;
+}
+/* Responsive layout */
+@media (max-width: 750px) {
+  .promotions img {
+    width: 100%;
+    height: 50px;
+  }
+}
   
   /* Text Box */
   .textbox {

assets/css/main.css

@@ -426,6 +426,31 @@ main img {
   width: 100%;
 }
 
+/* Promotions */
+.promotions {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+}
+.promotions img {
+  width: 100%;
+  height: 150px;
+  background-size: cover;
+}
+.promotions button {
+  margin-top: 5%;
+}
+.controls {
+  text-align: center;
+}
+/* Responsive layout */
+@media (max-width: 750px) {
+  .promotions img {
+    width: 100%;
+    height: 50px;
+  }
+}
+
 
 /* Percentage bar */
 .bar {

assets/js/promotions.js

@@ -0,0 +1,83 @@
+window.onload = function (promotions) {
+    // Variables
+    const IMAGENES = [
+        '../img/promos/promo_vuelve.jpg',
+        '../img/promos/promo_palomitas.jpg',
+        '../img/promos/promo_miercoles.jpg'
+    ];
+    const TIEMPO_INTERVALO_MILESIMAS_SEG = 3500;
+    let posicionActual = 0;
+    let $botonRetroceder = document.querySelector('#retroceder');
+    let $botonAvanzar = document.querySelector('#avanzar');
+    let $imagen = document.querySelector('.imagen');
+    let $botonPlay = document.querySelector('#play');
+    let $botonStop = document.querySelector('#stop');
+    let intervalo;
+
+    // Funciones
+
+    /**
+     * Funcion que cambia la foto en la siguiente posicion
+     */
+    function pasarFoto() {
+        if(posicionActual >= IMAGENES.length - 1) {
+            posicionActual = 0;
+        } else {
+            posicionActual++;
+        }
+        renderizarImagen();
+    }
+
+    /**
+     * Funcion que cambia la foto en la anterior posicion
+     */
+    function retrocederFoto() {
+        if(posicionActual <= 0) {
+            posicionActual = IMAGENES.length - 1;
+        } else {
+            posicionActual--;
+        }
+        renderizarImagen();
+    }
+
+    /**
+     * Funcion que actualiza la imagen de imagen dependiendo de posicionActual
+     */
+    function renderizarImagen () {
+        $imagen.style.backgroundImage = `url(${IMAGENES[posicionActual]})`;
+    }
+
+    /**
+     * Activa el autoplay de la imagen
+     */
+    function playIntervalo() {
+        intervalo = setInterval(pasarFoto, TIEMPO_INTERVALO_MILESIMAS_SEG);
+        // Desactivamos los botones de control
+        //$botonAvanzar.setAttribute('disabled', true);
+        //$botonRetroceder.setAttribute('disabled', true);
+        $botonPlay.setAttribute('disabled', true);
+        $botonStop.removeAttribute('disabled');
+
+    }
+
+    /**
+     * Para el autoplay de la imagen
+     */
+    function stopIntervalo() {
+        clearInterval(intervalo);
+        // Activamos los botones de control
+        $botonAvanzar.removeAttribute('disabled');
+        $botonRetroceder.removeAttribute('disabled');
+        $botonPlay.removeAttribute('disabled');
+        $botonStop.setAttribute('disabled', true);
+    }
+
+    // Eventos
+    $botonAvanzar.addEventListener('click', pasarFoto);
+    $botonRetroceder.addEventListener('click', retrocederFoto);
+    $botonPlay.addEventListener('click', playIntervalo);
+    $botonStop.addEventListener('click', stopIntervalo);
+    // Iniciar
+    renderizarImagen();
+    playIntervalo(); 
+} 

assets/php/common/formUploadFiles.php

@@ -0,0 +1,125 @@
+<?php
+require_once('../assets/php/form.php');
+
+class FormUploadFiles extends Form {
+    //Constants:
+    const HTML5_EMAIL_REGEXP = '^[a-zA-Z0-9.!#$%&\'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$'; 
+
+    public function __construct() {
+        $options = array('enctype' => 'multipart/form-data');
+        parent::__construct('formUploadFiles', $options);
+    }
+    
+    protected function generaCamposFormulario($datos, $errores = array()) {
+
+        // Se generan los mensajes de error si existen.
+        $htmlErroresGlobales = self::generaListaErroresGlobales($errores);
+        $errorFile = self::createMensajeError($errores, 'archivo', 'span', array('class' => 'error'));
+
+        foreach($datos as $key => $value){
+            $dats = $key." ".$value."  ";
+        }
+
+        // Se genera el HTML asociado a los campos del formulario y los mensajes de error.
+        $html = '
+                <p><label for="archivo">Imagen:</label><input type="file" name="archivo" id="archivo" /></p><pre>'.$htmlErroresGlobales.'</pre>
+                <p><input type="submit" id="submit" value="Subir" class="primary" /><pre>'.$errorFile.'</pre>
+                '.$dats.'
+                ';
+
+        return $html;
+    }
+
+    protected function procesaFormulario($datos) {
+        // Solo se pueden definir arrays como constantes en PHP >= 5.6
+        global $ALLOWED_EXTENSIONS;
+        
+        $result = array();
+        $ok = count($_FILES) == 1 && $_FILES['archivo']['error'] == UPLOAD_ERR_OK;
+        
+        if ( $ok ) {
+            $archivo = $_FILES['archivo'];
+            $nombre = $_FILES['archivo']['name'];
+            /* 1.a) Valida el nombre del archivo */
+            $ok = check_file_uploaded_name($nombre) && check_file_uploaded_length($nombre) ;
+            /* 1.b) Sanitiza el nombre del archivo 
+            $ok = sanitize_file_uploaded_name($nombre);
+            */
+            /* 1.c) Utilizar un id de la base de datos como nombre de archivo */
+
+            /* 2. comprueba si la extensión está permitida*/
+            $ok = $ok && in_array(pathinfo($nombre, PATHINFO_EXTENSION), $ALLOWED_EXTENSIONS);
+
+            /* 3. comprueba el tipo mime del archivo correspode a una imagen image/* */
+            $finfo = finfo_open(FILEINFO_MIME_TYPE);
+            $mimeType = finfo_file($finfo, $_FILES['archivo']['tmp_name']);
+            $ok = preg_match('/image\/*./', $mimeType);
+            finfo_close($finfo);
+
+            if ( $ok ) {
+            $tmp_name = $_FILES['archivo']['tmp_name'];
+
+            if ( !move_uploaded_file($tmp_name, FILMS_DIR.$nombre) ) {
+                $result[] = 'Error al mover el archivo';
+            }
+
+            // 4. Si fuese necesario guardar en la base de datos la ruta relativa $nombre del archivo
+            return "index.php#img=".urlencode('img/'.$nombre);
+            } else {
+                $result["errorFile"] = 'El archivo tiene un nombre o tipo no soportado';
+            }
+        } else {
+            $result[] = 'Error al subir el archivo.';
+        }
+        return $result;
+    }
+
+
+    /**
+     * Check $_FILES[][name]
+     *
+     * @param (string) $filename - Uploaded file name.
+     * @author Yousef Ismaeil Cliprz
+     * @See http://php.net/manual/es/function.move-uploaded-file.php#111412
+     */
+    function check_file_uploaded_name ($filename) {
+        return (bool) ((mb_ereg_match('/^[0-9A-Z-_\.]+$/i',$filename) === 1) ? true : false );
+    }
+
+    /**
+     * Sanitize $_FILES[][name]. Remove anything which isn't a word, whitespace, number
+     * or any of the following caracters -_~,;[]().
+     *
+     * If you don't need to handle multi-byte characters you can use preg_replace
+     * rather than mb_ereg_replace.
+     * 
+     * @param (string) $filename - Uploaded file name.
+     * @author Sean Vieira
+     * @see http://stackoverflow.com/a/2021729
+     */
+    function sanitize_file_uploaded_name($filename) {
+        /* Remove anything which isn't a word, whitespace, number
+        * or any of the following caracters -_~,;[]().
+        * If you don't need to handle multi-byte characters
+        * you can use preg_replace rather than mb_ereg_replace
+        * Thanks @Łukasz Rysiak!
+        */
+        $newName = mb_ereg_replace("([^\w\s\d\-_~,;\[\]\(\).])", '', $filename);
+        // Remove any runs of periods (thanks falstro!)
+        $newName = mb_ereg_replace("([\.]{2,})", '', $newName);
+
+        return $newName;
+    }
+
+    /**
+     * Check $_FILES[][name] length.
+     *
+     * @param (string) $filename - Uploaded file name.
+     * @author Yousef Ismaeil Cliprz.
+     * @See http://php.net/manual/es/function.move-uploaded-file.php#111412
+     */
+    function check_file_uploaded_length ($filename) {
+        return (bool) ((mb_strlen($filename,'UTF-8') < 250) ? true : false);
+    }
+}
+?>

assets/php/config.php

@@ -19,6 +19,11 @@
     define('FILMS_DIR', dirname(RAIZ_APP).'img/films/tmp');
     define('FILMS_DIR_PROTECTED', RAIZ_APP.'img/films/tmp');
 
+    /**
+     * Allowed extensions for image files.
+     */
+    $ALLOWED_EXTENSIONS = array('gif','jpg','jpe','jpeg','png');
+
     /**
     * Utf-8 support settings, location (language and country) and time zone.
     */

assets/php/form.php

@@ -95,7 +95,7 @@ abstract class Form {
         $opciones = array_merge($opcionesPorDefecto, $opciones);
 
         $this->ajax     = $opciones['ajax'];
-        $this->action = $opciones['action'];
+        $this->action   = $opciones['action'];
         $this->classAtt = $opciones['class'];
         $this->enctype  = $opciones['enctype'];
         

assets/php/template.php

@@ -495,6 +495,7 @@
     //Print generic Footer:
     function print_footer(){
         $prefix = $this->prefix;
+        $page = $this->page;
 
         /* TODO */
         $css = "{$prefix}assets/css/highContrast.css";
@@ -516,7 +517,9 @@
 
         echo"
         <!-- Scripts -->
-        <script src='{$prefix}assets/js/cambiarCSS.js'></script>\n";
+        <script src='{$prefix}assets/js/cambiarCSS.js'></script>
+        ";
+        if($page === "FDI-Cines") echo"<script src='{$prefix}assets/js/promotions.js'></script>\n";
     }
 
     }

contacto/includes/formContact.php

@@ -85,4 +85,5 @@ class FormContact extends Form {
         
         return $result;
     }
-}
+}
+?>

index.php

@@ -11,6 +11,19 @@
                 </div>
             </div>
         </section>
+        <section id="promociones" class="row">
+            <div class="code">
+                <section class="promotions">
+                    <button id="retroceder">Anterior</button>
+                    <img class="imagen" />
+                    <button id="avanzar">Siguiente</button>
+                </section>
+                <section class="controls">
+                    <button id="play">Play</button>
+                    <button id="stop" disabled>Stop</button>
+                </section>
+            </div>
+        </section>
         ';
 
     //General page content: