first commit
This commit is contained in:
parent
c8faaf3a9e
commit
db15d385b1
40
README.md
40
README.md
|
|
@ -1,3 +1,43 @@
|
||||||
# rolls-calculator-template
|
# rolls-calculator-template
|
||||||
|
|
||||||
Single page template for Wordpress GeneratePress theme that contains a javascript code and form to allow calculate rolls
|
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;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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();
|
||||||
Loading…
Reference in New Issue