[GS] - Comment créer une boite de dialogue dans une sideBar ?
Comment créer une boite de dialogue personnalisable dans une sideBar ?
Le CSS est souvent considéré comme un language de programmation pas comme le javascript.
Avec ce tuto vous vous le verrais d’un oeil différent...
Le css est le principal moteur de la création de cette boite de dialogue dans une sideBar.
Le code
Code.gs
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('SideBar...')
.addItem('IMORTXML', 'formulaire')
.addToUi;
}
function formulaire() {
const html = HtmlService.createHtmlOutputFromFile('sidebar').setTitle('IMPORTXML ?');
SpreadsheetApp.getUi().showSidebar(html);
}sidebar.html
<!DOCTYPE html>
<html>
<head>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: blue;
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: -moz-linear-gradient(#2edbe8, #01a6b2);
background: -webkit-linear-gradient(#2edbe8, #01a6b2);
background: -o-linear-gradient(#2edbe8, #01a6b2);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #6ed1d8; }
</style>
</head>
<body>
<h2>IMPORTXML</h2>
<a href="#openModal">Boîte</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Boîte de Dialogue interne</h2>
<p>L’xpath</p>
<ul>
<li>//title</li>
</ul>
<button onclick="alert('Ceci est une boite de dialogue non personnalisable.')">Cliquez-moi</button>
</div>
<a href="#close" title="Close" class="close">x</a>
</div>
</body>
</html>Explication dans le post suivant...
Le CSS:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: blue;
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: -moz-linear-gradient(#2edbe8, #01a6b2);
background: -webkit-linear-gradient(#2edbe8, #01a6b2);
background: -o-linear-gradient(#2edbe8, #01a6b2);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #6ed1d8; }
</style>Pour créer cette boite de dialogue, on utilise des fonctionnalités propres au CSS3, tel que -moz-linear-gradient... Le CSS utilise entièrement des liens avec les attributs class. Cette utilisation est conseillé pour l'utilisation du CSS.
Le squelette HTML:
Et les a et div en HTML
<a href="#openModal">Boîte</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<!--Contenu-->
</div>
<a href="#close" title="Close" class="close">x</a>
</div>Les éléments a permettent de déclencher l'ouverture et la fermeture de la boite de dialogue qui est masqué à l'ouverture de la page HTML.Les #nom déclenchent les ouvertures et fermetures grâce à un lien interne au document.
Quand au div, ils contiennent le contenu et les différentes zones ou le style est ajouté.
Bonne Chance et Bonne Journée