Browse Source

Ajout fenêtre modale

master
Erase 3 years ago
parent
commit
0446eb6a19
6 changed files with 128 additions and 5 deletions
  1. +6
    -0
      css/alertify.min.css
  2. +6
    -0
      css/bootstrap.min.css
  3. +42
    -0
      css/style.css
  4. +15
    -0
      index.html
  5. +3
    -0
      js/alertify.min.js
  6. +56
    -5
      js/app.js

+ 6
- 0
css/alertify.min.css
File diff suppressed because it is too large
View File


+ 6
- 0
css/bootstrap.min.css View File

@ -0,0 +1,6 @@
/**
* alertifyjs 1.11.1 http://alertifyjs.com
* AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.
* Copyright 2018 Mohammad Younes <Mohammad@alertifyjs.com> (http://alertifyjs.com)
* Licensed under GPL 3 <https://opensource.org/licenses/gpl-3.0>*/
.alertify .ajs-dimmer{background-color:#000;opacity:.5}.alertify .ajs-dialog{max-width:600px;min-height:122px;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5);border-radius:6px}.alertify .ajs-header{color:#333;border-bottom:1px solid #e5e5e5;border-radius:6px 6px 0 0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px}.alertify .ajs-body{font-family:Roboto,sans-serif;color:#000}.alertify.ajs-maximized:not(.ajs-resizable) .ajs-content,.alertify.ajs-resizable .ajs-content{top:58px;bottom:68px}.alertify .ajs-footer{background-color:#fff;padding:15px;border-top:1px solid #e5e5e5;border-radius:0 0 6px 6px}.alertify-notifier .ajs-message{background:rgba(255,255,255,.95);color:#000;text-align:center;border:solid 1px #ddd;border-radius:2px}.alertify-notifier .ajs-message.ajs-success{color:#fff;background:rgba(91,189,114,.95);text-shadow:-1px -1px 0 rgba(0,0,0,.5)}.alertify-notifier .ajs-message.ajs-error{color:#fff;background:rgba(217,92,92,.95);text-shadow:-1px -1px 0 rgba(0,0,0,.5)}.alertify-notifier .ajs-message.ajs-warning{background:rgba(252,248,215,.95);border-color:#999}

+ 42
- 0
css/style.css View File

@ -132,3 +132,45 @@ input:focus {
padding:25px;
}
#addLinkForm{
display: none;
text-align:center;
padding: 20px;
color:white;
padding-bottom: 30px;
}
#addLinkForm div{
margin:10px 0;
}
#addLinkForm label{
display: block;
}
#addLinkForm input{
padding: 0.75rem 1%;
background-color: #222;
border-radius: 2px;
font-size: 1.1rem;
background:#fff;
max-width: 98%;
}
#addLinkForm input[type=submit]{
cursor: pointer;
}
.ajs-dialog,
.alertify .ajs-header,
.alertify .ajs-footer{
background-color: #222222 !important;
border:0 none !important;
color:white !important;
text-transform: uppercase;
font-weight: bold;
}
.alertify .ajs-footer{
display: none;
}

+ 15
- 0
index.html View File

@ -14,11 +14,14 @@
<link rel="stylesheet" href="https://cdn.green-effect.fr/goofi/goofi.php?family=Lato:300:latin">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/alertify.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.simpleWeather.min.js" type="text/javascript"></script>
<script src="js/jstorage.min.js" type="text/javascript"></script>
<script src="js/alertify.min.js" type="text/javascript"></script>
</head>
<body>
@ -41,6 +44,18 @@
<a title="Warrior du dimanche" href="https://warriordudimanche.net/" class="small-box">Bronco</a>
<a title="Green Effect" href="https://www.green-effect.fr" class="small-box">Erase</a>
</div>
<form id="addLinkForm">
<div>
<label for="titre"> Titre du lien </label>
<input type="text" id="titre" value="">
</div>
<div>
<label for="cible"> Cible du lien </label>
<input type="text" id="cible" value="">
</div>
<input type="submit" value="Ajouter">
</form>
</div>
<script src="js/app.js" type="text/javascript"></script>


+ 3
- 0
js/alertify.min.js
File diff suppressed because it is too large
View File


+ 56
- 5
js/app.js View File

@ -64,7 +64,7 @@ function loadLinks(){
if(_links && _links.length){
var html = '';
$.each(_links, function(k, r){
html += '<a href="'+r.cible+'" class="small-box" title="'+r.titre+'">'+r.titre+'</a>';
html += '<a href="'+r.cible+'" class="small-box" title="'+r.titre+' - Clic droit pour supprimer">'+r.titre+'</a>';
});
html += '<span class="small-box" id="add">+</span>';
$('.grid').html(html);
@ -77,9 +77,26 @@ function loadLinks(){
$('.grid').html('<span class="small-box" id="add">+</span>');
}
$('#add').click(function(){
var nom = prompt("Titre du lien");
var cible = prompt("Cible du lien");
addLink(nom, cible);
$titre = $('#titre');
$form = $('#addLinkForm');
$cible = $('#cible');
$titre.val("");
$cible.val("");
$form.on('submit', function (evt) {
evt.preventDefault();
var reg = /^(http|https)?:\/\/[a-zA-Z0-9-\.]+\.[a-z]{2,4}/;
if($titre && $titre.val() !== "" && $cible && $cible.val() !== "" && reg.test($cible.val())){
addLink($titre.val(), $cible.val());
alertify.success('Le lien a été correctement ajouté.');
alertify.genericDialog().close().set('closable', true);
}else{
alertify.error('Erreur dans le titre ou la cible du lien.');
}
});
alertify.defaults.glossary.title = "Ajouter un lien";
alertify.genericDialog($form[0]);
$form.show();
});
}
@ -100,6 +117,7 @@ function removeLink(nom){
var _links = $.jStorage.get('links');
if(_links && _links.length){
var index = null;
nom = nom.replace(" - Clic droit pour supprimer", "");
$.each(_links, function(k, r){
if(r.titre === nom){
index = k;
@ -192,7 +210,7 @@ $(function() {
Cmdr.init({
default: defaultSearchBaseURL,
commands: [
{ key: 's', name: 'Shaalo', url: 'https://www.shaarlo.fr', search: '/index.php?from=20130000&to=90130000&q=' },
{ key: 's', name: 'Shaarlo', url: 'https://www.shaarlo.fr', search: '/index.php?from=20130000&to=90130000&q=' },
{ key: 'b', name: 'Googl by Bronco', url: 'https://search.green-effect.fr', search: '/?lang=fr&mod=web&q=' },
{ key: 'g', name: 'GitHub', url: 'https://github.com', search: '/search?q=' },
{ key: 'm', name: 'Gmail', url: 'https://mail.google.com', search: '/mail/u/0/#search/' },
@ -206,4 +224,37 @@ $(function() {
loadWeather(defaultWeatherLocation, '');
loadLinks();
alertify.genericDialog || alertify.dialog('genericDialog',function(){
return {
main:function(content){
this.setContent(content);
},
setup:function(){
return {
focus:{
element:function(){
return this.elements.body.querySelector(this.get('selector'));
},
select:true
},
options:{
maximizable:false,
resizable:false,
padding:false
}
};
},
settings:{
selector:undefined
}
};
});
}());

Loading…
Cancel
Save