first commit

This commit is contained in:
Roger Pàmies Fabra 2023-06-15 07:39:31 +02:00
parent c8faaf3a9e
commit db15d385b1
3 changed files with 306 additions and 1 deletions

View File

@ -1,3 +1,43 @@
# rolls-calculator-template
Single page template for Wordpress GeneratePress theme that contains a javascript code and form to allow calculate rolls
## CSS
Add this css code to style.css into Wordpress child theme:
```
.gb-container-rolls {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
margin-top:80px;
margin-bottom: 80px;
display:flex;
align-items:center;
justify-content:center;
}
.gb-inner-rolls {
width:50%;
}
input.error-data-roll {
border:1px solid red;
}
input.data-roll {
margin-bottom:20px;
width:100%;
}
#errorrolls {
color:red;
}
#resultrolls {
font-size:24px;
margin-top:20px;
text-align: center;
}
```

212
content-roll.php Normal file
View File

@ -0,0 +1,212 @@
<?php
/**
* The template used for displaying page content in single-roll.php
*
* @package GeneratePress
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_do_microdata( 'article' ); ?>>
<div class="inside-article">
<?php
/**
* generate_before_content hook.
*
* @since 0.1
*
* @hooked generate_featured_page_header_inside_single - 10
*/
do_action( 'generate_before_content' );
if ( generate_show_entry_header() ) :
?>
<header class="entry-header">
<?php
/**
* generate_before_page_title hook.
*
* @since 2.4
*/
do_action( 'generate_before_page_title' );
if ( generate_show_title() ) {
$params = generate_get_the_title_parameters();
the_title( $params['before'], $params['after'] );
}
/**
* generate_after_page_title hook.
*
* @since 2.4
*/
do_action( 'generate_after_page_title' );
?>
</header>
<?php
endif;
/**
* generate_after_entry_header hook.
*
* @since 0.1
*
* @hooked generate_post_image - 10
*/
do_action( 'generate_after_entry_header' );
$itemprop = '';
if ( 'microdata' === generate_get_schema_type() ) {
$itemprop = ' itemprop="text"';
}
?>
<div class="entry-content"<?php echo $itemprop; // phpcs:ignore -- No escaping needed. ?>>
<div class="gb-container gb-container-rolls">
<div class="gb-inside-container gb-inner-rolls">
<p>
<b>Calcular mi cantidad de papel pintado.</b> Determina el número de rollos necesarios para tus paredes:
</p>
<?php
the_content();?>
<script>
jQuery(document).ready(function($) {
$("#getrolls").click(function(){
$("#resultrolls").empty();
$("#errorrolls").text("");
$("#widthwall").removeClass("error-data-roll")
$("#heightwall").removeClass("error-data-roll")
$("#widthroll").removeClass("error-data-roll")
$("#heightroll").removeClass("error-data-roll")
$("#caseroll").removeClass("error-data-roll")
var dataErrors = false;
var wWidth = $("#widthwall").val();
if(isNaN(wWidth) || wWidth === 0 || wWidth === "") {
dataErrors = true;
$("#widthwall").addClass("error-data-roll")
}
var wHeight = $("#heightwall").val();
if(isNaN(wHeight) || wHeight === 0 || wHeight === "") {
dataErrors = true;
$("#heightwall").addClass("error-data-roll")
}
var rWidth = $("#widthroll").val();
if(isNaN(rWidth) || rWidth === 0 || rWidth === "") {
dataErrors = true;
$("#widthroll").addClass("error-data-roll")
}
var rHeight = $("#heightroll").val();
if(isNaN(rHeight) || rHeight === 0 || rHeight === "") {
dataErrors = true;
$("#heightroll").addClass("error-data-roll")
}
var rCase = $("#caseroll").val();
if(isNaN(rCase) || rCase === "") {
dataErrors = true;
$("#caseroll").addClass("error-data-roll")
}
if(dataErrors) {
$("#errorrolls").text("Hay errores en los datos introducidos");
} else {
wWidth = wWidth * 100; //to cm
wHeight = wHeight * 100; //to cm
rHeight = rHeight * 100; //to cm
rWidth = Number(rWidth);
rCase = Number(rCase);
var rolls = (rHeight >= wHeight) ? getRollsIfHeightWallLessThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) :
getRollsIfHeightWallGreaterThanRoll(wWidth, wHeight, rWidth, rHeight, rCase)
$("#resultrolls").append("Necesitas <b>" + rolls + "</b> rollos");
}
});
function getRollsIfHeightWallGreaterThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) {
//obtenemos rollos para la altura
var rolls = Math.ceil(wHeight / rHeight);
//contamos rollos para la anchura de pared y los sumamos a los previos
return Math.trunc(wWidth / rWidth) + rolls
}
function getRollsIfHeightWallLessThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) {
//obtenemos tiras para la altura
var tiras = Math.trunc(rHeight / wHeight);
var numTiras = 0;
if(rCase > 0) {
let accHeight = 0;
for(let i = 1; i <= tiras; i++) {
if(i === 1) accHeight = accHeight + wHeight
else accHeight = accHeight + wHeight + rCase
//update tiras with case
if(accHeight > rHeight) {
numTiras = i-1;
break;
}
else numTiras = i
}
}
//calcular rollos ancho
var coveredWidth = numTiras * rWidth;
return Math.ceil(wWidth / coveredWidth)
}
});
</script>
<label for="width-wall">Ancho de la pared (en m):</label><br>
<small>Anchura total de las paredes que desea empapelar.</small>
<input type="number" step="0.01" min="0.01" id="widthwall" placeholder="Ejemplo: 3.5" class="data-roll"/><br>
<label for="height-wall">Altura de la pared (en m):</label><br>
<small>Altura total desde el suelo hasta el techo (descontado el rodapié y/o la moldura).</small>
<input type="number" step="0.01" min="0.01" id="heightwall" placeholder="Ejemplo: 2.4" class="data-roll"/><br>
<label for="height-roll">Longitud del rollo (en m):</label><br>
<small>datos incluidos en la hoja de descripción del producto.</small>
<input type="number" step="0.01" min="0.01" id="heightroll" placeholder="Ejemplo: 10" class="data-roll"/><br>
<label for="width-roll">Anchura del rollo (en cm):</label><br>
<small>datos incluidos en la hoja de descripción del producto.</small>
<input type="number" step="1" min="1" id="widthroll" placeholder="Ejemplo: 53" class="data-roll"/><br>
<label for="case-roll">Case o Rapport del rollo (en cm):</label><br>
<small>Repetición del patrón: datos incluidos en la hoja de descripción del producto.</small>
<input type="number" step="1" min="1" id="caseroll" placeholder="Ejemplo: 64" class="data-roll"/><br>
<input type="button" value="Calcular" id="getrolls"/><br>
<div id="resultrolls">
</div>
<div id="errorrolls">
</div>
<?php
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'generatepress' ),
'after' => '</div>',
)
);
?>
</div>
</div>
</div>
<?php
/**
* generate_after_content hook.
*
* @since 0.1
*/
do_action( 'generate_after_content' );
?>
</div>
</article>

53
single-roll.php Normal file
View File

@ -0,0 +1,53 @@
<?php
/*
Template Name: Roll
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
get_header(); ?>
<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
<?php
/**
* generate_before_main_content hook.
*
* @since 0.1
*/
do_action( 'generate_before_main_content' );
if ( generate_has_default_loop() ) {
while ( have_posts() ) :
the_post();
get_template_part( 'content', 'roll' );
endwhile;
} ?>
<?php
/**
* generate_after_main_content hook.
*
* @since 0.1
*/
do_action( 'generate_after_main_content' );
?>
</main>
</div>
<?php
/**
* generate_after_primary_content_area hook.
*
* @since 2.0
*/
do_action( 'generate_after_primary_content_area' );
generate_construct_sidebars();
get_footer();