first commit
This commit is contained in:
parent
c8faaf3a9e
commit
db15d385b1
42
README.md
42
README.md
|
|
@ -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
|
||||
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