Commit 730d50aa authored by Chancellier Pierre-Jean's avatar Chancellier Pierre-Jean
Browse files

Refresh iframe to reload animation

parent 5e1aabd4
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/w3.css">
<link rel="stylesheet" href="styles/font_awesome.min.css">
<link rel="stylesheet" href="styles/generator.css">
<title>Génération de votre barre de financement</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/w3.css">
<link rel="stylesheet" href="styles/font_awesome.min.css">
<link rel="stylesheet" href="styles/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="styles/generator.css">
<title>Génération de votre barre de financement</title>
</head>
<body>
<a class="github-fork-ribbon" href="https://git.duniter.org/paidge/barre-de-financement-int-grable" data-ribbon="Fork me on Gitlab" title="Fork me on Duniter's Gitlab">Fork me on Duniter's Gitlab</a>
<header>
<div class="w3-panel w3-padding-16 w3-display-middle w3-center w3-theme-d2">
<h1 class="w3-jumbo">Générez votre barre de financement</h1>
......@@ -141,7 +143,7 @@
</section>
<section id="display_result" class="w3-padding-32 w3-container w3-theme-d1">
<div class="w3-content">
<h1>Résultat :</h1>
<h2>Résultat :</h2>
<p>Copier-coller le code suivant pour l'intégrer sur votre site web/blog/forum :</p>
<textarea id="result" onclick="select();" onfocus="select();" readonly></textarea>
<div id="buttons" class="w3-bar w3-center w3-hide">
......@@ -149,6 +151,7 @@
<span class="tooltiptext">Copié !</span></div>
<button id="reset" class="w3-btn w3-theme-l5 w3-padding-large w3-large w3-margin-top w3-hover-theme">Réinitialiser</button>
</div>
<h2 id="preview_label" class="w3-hide">Prévisualisation :</h2>
<div id="preview" class="w3-margin-top w3-center">
</div>
</div>
......@@ -157,6 +160,7 @@
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</div>
<footer class="w3-container w3-padding-16 w3-center w3-theme-d5">
<p>Code source disponible sur <a href="https://git.duniter.org" target="_blank">le Gitlab Duniter</a></p>
<p>Développé par <a href="https://g1.duniter.fr/#/app/wot/27b1j7BPssdjbXmGNMYU2JJrRotqrZMruu5p5AWowUEy/" target="_blank">Paidge</a></p>
<div class="w3-xlarge">
<a href="https://www.facebook.com/pjchancellier" target="_blank"><i class="fab fa-facebook-f w3-margin-right"></i></a>
......
......@@ -11,7 +11,7 @@
/*[ Back to top ]
===========================================================*/
var windowH = $(window).height()/2;
var windowH = $(window).height()*1.2;
$(window).on('scroll',function(){
if ($(this).scrollTop() > windowH) {
......@@ -45,10 +45,14 @@
$('#display_button').prop( "checked", false );
$('#display_graph').prop( "checked", false );
$('#logo option[value="no-logo"]').prop('selected', true);
$('#p-logo').addClass("w3-hide");
$('#p-display_button').removeClass("w3-hide");
$('#p-display_graph').removeClass("w3-hide");
$('#background_color').val('#ffffff');
$('#font_color').val('#212529');
$('#progress_color').val('#ffc107');
$('#border_color').val('#343a40');
$('#preview_label').addClass("w3-hide");
$('#result').val('');
for (var param in params){params[param] = '';}
}
......@@ -168,6 +172,8 @@
var final_result = generatUrl(type);
if (final_result){
$('form').on("submit", function(){
$('#preview_label').removeClass("w3-hide");
$('#preview').css("visibility","hidden");
$('#preview').children().remove();
$('#result').val(final_result);
$('html, body').animate({scrollTop: $('#display_result').offset().top}, 750);
......@@ -176,10 +182,15 @@
$('iframe').on('load', function() {
var iframe_height = document.getElementsByTagName('iframe')[0].contentWindow.document.body.scrollHeight;
$('iframe').height(iframe_height);
// Pour relancer l'animation
$('#preview').html($('#preview').html());
});
}
$('#result').focus();
$('#buttons').removeClass("w3-hide");
setTimeout(function(){
$('#preview').css("visibility","visible");
},1000);
return false;
});
}
......
body, html{height: 100%;}
.github-fork-ribbon{position:fixed;}
header{
min-height:100%;
background: linear-gradient(
......@@ -90,6 +91,7 @@ iframe{border:none;}
#back-to-top:hover {
opacity: 1;
cursor: pointer;
border:1px solid white;
}
@media screen and (max-width: 800px) {
header h1.w3-jumbo{font-size:25px !important;}
......
/*!
* "Fork me on GitHub" CSS ribbon v0.2.3 | MIT License
* https://github.com/simonwhitaker/github-fork-ribbon-css
*/.github-fork-ribbon{width:12.1em;height:12.1em;position:absolute;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px}.github-fork-ribbon.fixed{position:fixed}.github-fork-ribbon:active,.github-fork-ribbon:hover{background-color:rgba(0,0,0,0)}.github-fork-ribbon:after,.github-fork-ribbon:before{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);-moz-box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,.5);pointer-events:auto}.github-fork-ribbon:after{content:attr(data-ribbon);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,.7)}.github-fork-ribbon.left-bottom,.github-fork-ribbon.left-top{right:auto;left:0}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before{right:auto;left:-3.23em}.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{top:auto;bottom:3.23em}.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-top:before,.github-fork-ribbon.right-bottom:after,.github-fork-ribbon.right-bottom:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment