Skip to content

Commit

Permalink
include some examples for internationalization and bug corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
@dealfonso
dealfonso committed Nov 18, 2021
1 parent 8c2fca3 commit 8607443
Showing 1 changed file with 96 additions and 4 deletions.
100 changes: 96 additions & 4 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,35 @@
overflow: auto;
}
</style>
<script>
function spanish() {
// Modal dialog texts in Spanish
window.confirmation.config({
titletxt: "Esta acción requiere confirmación",
confirmtxt: "Confirmar",
canceltxt: "Cancelar",
confirm: "Por favor confirme la acción"
});
}
function english() {
// Modal dialog texts in English
window.confirmation.config({
titletxt: "This action requires confirmation",
confirmtxt: "Confirm",
canceltxt: "Cancel",
confirm: "Please confirm your action"
});
}
function french() {
// Modal dialog texts in French
window.confirmation.config({
titletxt: "Cette action nécessite votre confirmation",
confirmtxt: "Confirmer",
canceltxt: "Annuler",
confirm: "Veuillez confirmer votre action"
});
}
</script>
</head>
<body class="w-75 mx-auto py-5">
<h3>Dummy button that asks for confirmation but does nothing.</h3>
Expand All @@ -32,9 +61,21 @@ <h3>Simple button that shows an alert upon confirming.</h3>
<button type="button" class="first btn btn-primary" onclick="alert('confirmed');">clickme</button>
<code>
<button type="button" class="first btn btn-primary" onclick="alert('confirmed');">clickme</button>
<script>
window.confirmation.addConfirmation(document.querySelector('button.first'), {
confirm: "Are you really sure?"
})
</script>
</code>
</pre>
<h3>Simple button that shows an alert upon confirming (using jQuery)</h3>
<p class="small">The "confirm" attribute is set, and a click handler is also set.</p>
<button type="button" class="second btn btn-primary" onclick="alert('confirmed');">clickme</button>
<code>
<button type="button" class="second btn btn-primary" onclick="alert('confirmed');">clickme</button>
<script>
$(function() {
$('button.first').confirmButton({
$('button.second').confirmButton({
confirm: "Are you really sure?"
});
});
Expand Down Expand Up @@ -119,13 +160,64 @@ <h3>Are you sure you want to save data?</h3>
<button confirm data-dialog="#myconfirmdlg" data-confirmbtn="button.save" type="submit">Send</button>
</form>
</code>
<h3>Using in a link</h3>
<h3>Internationalization (locally, per element) using declarative mechanism</h3>
<p class="small">Each of the texts in the dialog is customized for each language.</p>
<button type="button" class="btn btn-primary" onclick="alert('confirmado');" confirm="Por favor confirme su acción" data-confirmtxt="Confirmar" data-canceltxt="Cancelar" data-titletxt="Esta acción requiere confirmación">púlsame</button>
<button type="button" class="btn btn-primary" onclick="alert('confirm');" confirm="Please confirm your action" data-confirmtxt="Confirm" data-canceltxt="Cancel" data-titletxt="This action requires confirmation">press me</button>
<button type="button" class="btn btn-primary" onclick="alert('confirmer');" confirm="Veuillez confirmer votre action" data-confirmtxt="Confirmer" data-canceltxt="Annuler" data-titletxt="Cette action nécessite votre confirmation">presse moi</button>
<code>
<button type="button" class="btn btn-primary" onclick="alert('confirmado');" confirm="Por favor confirme su acción" data-confirmtxt="Confirmar" data-canceltxt="Cancelar" data-titletxt="Esta acción requiere confirmación">púlsame</button>
<button type="button" class="btn btn-primary" onclick="alert('confirm');" confirm="Please confirm your action" data-confirmtxt="Confirm" data-canceltxt="Cancel" data-titletxt="This action requires confirmation">press me</button>
<button type="button" class="btn btn-primary" onclick="alert('confirmer');" confirm="Veuillez confirmer votre action" data-confirmtxt="Confirmer" data-canceltxt="Annuler" data-titletxt="Cette action nécessite votre confirmation">presse moi</button>
</code>
</pre>
<h3>Internationalization (globally) using library configuration</h3>
<p class="small">Each link calls to a function that will configure the library globally</p>
<a href="#" onclick="english();return false;" confirm="Want to set the texts of the library to english?">english</a> |
<a href="#" onclick="spanish();return false;" confirm="¿Quiere utilizar los textos de la librería en español?">spanish</a> |
<a href="#" onclick="french();return false;" confirm="Vous souhaitez utiliser les textes de la librairie en français?">french</a>
<code>
<script>
function spanish() {
// Modal dialog texts in Spanish
window.confirmation.config({
titletxt: "Esta acción requiere confirmación",
confirmtxt: "Confirmar",
canceltxt: "Cancelar",
confirm: "Por favor confirme la acción"
});
}
function english() {
// Modal dialog texts in English
window.confirmation.config({
titletxt: "This action requires confirmation",
confirmtxt: "Confirm",
canceltxt: "Cancel",
confirm: "Please confirm your action"
});
}
function french() {
// Modal dialog texts in French
window.confirmation.config({
titletxt: "Cette action nécessite votre confirmation",
confirmtxt: "Confirmer",
canceltxt: "Annuler",
confirm: "Veuillez confirmer votre action"
});
}
</script>
<a href="#" onclick="english();return false;" confirm="Want to set the texts of the library to english?">english</a> |
<a href="#" onclick="spanish();return false;" confirm="¿Quiere utilizar los textos de la librería en español?">spanish</a> |
<a href="#" onclick="french();return false;" confirm="Vous souhaitez utiliser les textes de la librairie en français?">french</a>

</code>
<h3>Confirmation in a link</h3>
<p class="small">The "confirm" attribute is set to the &lt;a&gt; tag</p>
<a href="https://www.google.es" confirm="Want to go to google?">clickme</a>
<code>
<a href="https://www.google.es" confirm="Want to go to google?">clickme</a>
</code>
<h3>Using in a list</h3>
<h3>Confirmation of elements in a list</h3>
<p class="small">The "confirm" attribute is set to the different &lt;li&gt; items.</p>
<ul>
<li confirm="Confirm item 1">item 1</li>
Expand All @@ -139,7 +231,7 @@ <h3>Using in a list</h3>
<li confirm="Confirm item 3">item 3</li>
</ul>
</code>
<h3>Using in an image</h3>
<h3>Confirmation of an image</h3>
<p class="small">The "confirm" attribute is set to the svg image.</p>
<svg confirm="thank you for clicking!" width="250" height="85" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
Expand Down

0 comments on commit 8607443

Please sign in to comment.