From 084b77f91919a138f6e968466ef0858f1e581fbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= Date: Wed, 17 Aug 2016 00:46:31 +0200 Subject: [PATCH] Panier K-Psul MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ajout affichage panier - Ajout possibilité d'ajouter des articles, charges et retraits au panier - Ajout de l'affichage des articles correspondants à l'autocomplétion en cours - Affichage compte + responsive - Ajout raccourcis : F1 soft reset, F2 charge, F3 retrait, F10 hard reset - Ajout suite focus automatiques: trigramme: si valide -> article sélection: si trouvé -> article nb: si enter et valide -> article sélection.... --- kfet/static/kfet/css/index.css | 1 + kfet/static/kfet/css/jconfirm-kfet.css | 62 +++ kfet/static/kfet/css/jquery-confirm.css | 519 ++++++++++++++++++++ kfet/static/kfet/css/kpsul.css | 153 ++++-- kfet/static/kfet/css/kpsul_grid.css | 10 + kfet/static/kfet/js/jquery-confirm.js | 605 ++++++++++++++++++++++++ kfet/templates/kfet/base.html | 2 + kfet/templates/kfet/kpsul.html | 357 +++++++++++--- 8 files changed, 1608 insertions(+), 101 deletions(-) create mode 100644 kfet/static/kfet/css/jconfirm-kfet.css create mode 100644 kfet/static/kfet/css/jquery-confirm.css create mode 100644 kfet/static/kfet/css/kpsul_grid.css create mode 100644 kfet/static/kfet/js/jquery-confirm.js diff --git a/kfet/static/kfet/css/index.css b/kfet/static/kfet/css/index.css index b7cf2e09..241785ae 100644 --- a/kfet/static/kfet/css/index.css +++ b/kfet/static/kfet/css/index.css @@ -1,5 +1,6 @@ @import url("nav.css"); @import url("kpsul.css"); +@import url("jconfirm-kfet.css"); body { margin-top:50px; diff --git a/kfet/static/kfet/css/jconfirm-kfet.css b/kfet/static/kfet/css/jconfirm-kfet.css new file mode 100644 index 00000000..8509c274 --- /dev/null +++ b/kfet/static/kfet/css/jconfirm-kfet.css @@ -0,0 +1,62 @@ +.jconfirm .jconfirm-box { + padding:0; + border-radius:0 !important; + font-family:"Roboto Mono"; +} + +.jconfirm .jconfirm-box div.title-c .title { + display: block; + + padding:0 15px; + height:40px; + line-height:40px; + + font-size:20px; + font-weight:bold; + + color:#FFF; + background-color:#C8102E; +} + +.jconfirm .jconfirm-box .content-pane { + margin:0 !important; +} + +.jconfirm .jconfirm-box .content { + border-bottom:1px solid #ddd; +} + +.jconfirm .jconfirm-box input { + width:100%; + height:70px; + + border:0; + + font-size:40px; + + text-align:center; +} + +.jconfirm .jconfirm-box .buttons { + margin-top:-5px; /* j'arrive pas à voir pk y'a un espace au dessus sinon... */ + padding:0; + height:40px; +} + +.jconfirm .jconfirm-box .buttons button { + height:100%; + margin:0; + margin:0 !important; +} + +.jconfirm .jconfirm-box .buttons button:first-child:focus, +.jconfirm .jconfirm-box .buttons button:first-child:hover { + color:#FFF !important; + background:#009011 !important; +} + +.jconfirm .jconfirm-box .buttons button:nth-child(2):focus, +.jconfirm .jconfirm-box .buttons button:nth-child(2):hover { + color:#FFF !important; + background:#C8102E !important; +} diff --git a/kfet/static/kfet/css/jquery-confirm.css b/kfet/static/kfet/css/jquery-confirm.css new file mode 100644 index 00000000..e11388ef --- /dev/null +++ b/kfet/static/kfet/css/jquery-confirm.css @@ -0,0 +1,519 @@ +/*! + * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/) + * Author: boniface pereira + * Website: www.craftpip.com + * Contact: hey@craftpip.com + * + * Copyright 2013-2016 jquery-confirm + * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE) + */ +@-webkit-keyframes jconfirm-rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes jconfirm-rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +body.jconfirm-noscroll { + overflow: hidden !important; +} +.jconfirm { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99999999; + font-family: inherit; + overflow: hidden; +} +.jconfirm .jconfirm-bg { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + -webkit-transition: all .4s; + transition: all .4s; +} +.jconfirm .jconfirm-bg.seen { + opacity: 1; +} +.jconfirm .jconfirm-scrollpane { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow-y: auto; + -webkit-perspective: 500px; + perspective: 500px; + -webkit-perspective-origin: center; + perspective-origin: center; +} +.jconfirm .jconfirm-box { + background: white; + border-radius: 4px; + position: relative; + outline: none; + padding: 15px 15px 0; +} +.jconfirm .jconfirm-box div.closeIcon { + height: 20px; + width: 20px; + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; + opacity: .6; + text-align: center; + -webkit-transition: opacity 0.1s ease-in; + transition: opacity 0.1s ease-in; + display: none; + font-size: 27px; + line-height: 14px; +} +.jconfirm .jconfirm-box div.closeIcon .fa { + font-size: 16px; +} +.jconfirm .jconfirm-box div.closeIcon .glyphicon { + font-size: 16px; +} +.jconfirm .jconfirm-box div.closeIcon .zmdi { + font-size: 16px; +} +.jconfirm .jconfirm-box div.closeIcon:hover { + opacity: 1; +} +.jconfirm .jconfirm-box div.title-c { + display: block; + font-size: 22px; + line-height: 20px; +} +.jconfirm .jconfirm-box div.title-c .icon-c { + font-size: inherit; + padding-bottom: 15px; + display: inline-block; + margin-right: 8px; + vertical-align: middle; +} +.jconfirm .jconfirm-box div.title-c .icon-c i { + vertical-align: middle; +} +.jconfirm .jconfirm-box div.title-c .icon-c:empty { + display: none; +} +.jconfirm .jconfirm-box div.title-c .title { + font-size: inherit; + font-family: inherit; + display: inline-block; + vertical-align: middle; + padding-bottom: 15px; +} +.jconfirm .jconfirm-box div.title-c .title:empty { + display: none; +} +.jconfirm .jconfirm-box div.content-pane { + margin-bottom: 15px; + height: auto; + -webkit-transition: height 0.4s ease-in; + transition: height 0.4s ease-in; + display: inline-block; + width: 100%; + position: relative; +} +.jconfirm .jconfirm-box div.content-pane .content { + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; + right: 0; +} +.jconfirm .jconfirm-box div.content-pane .content img { + width: 100%; + height: auto; +} +.jconfirm .jconfirm-box div.content-pane .content:empty { + display: none; +} +.jconfirm .jconfirm-box div.content-pane .content:empty.loading { + height: 40px; + position: relative; + opacity: 0.6; + display: block; +} +.jconfirm .jconfirm-box div.content-pane .content:empty.loading:before { + content: ''; + height: 20px; + width: 20px; + border: solid 2px transparent; + position: absolute; + left: 50%; + margin-left: -10px; + border-radius: 50%; + -webkit-animation: jconfirm-rotate 1s infinite linear; + animation: jconfirm-rotate 1s infinite linear; + border-bottom-color: #aaa; + top: 50%; + margin-top: -10px; +} +.jconfirm .jconfirm-box div.content-pane .content:empty.loading:after { + content: ''; + position: absolute; + left: 50%; + margin-left: -15px; +} +.jconfirm .jconfirm-box .buttons { + padding-bottom: 15px; +} +.jconfirm .jconfirm-box .buttons button + button { + margin-left: 5px; +} +.jconfirm .jquery-clear { + clear: both; +} +.jconfirm.rtl { + direction: rtl; +} +.jconfirm.rtl div.closeIcon { + left: 12px; + right: auto; +} +.jconfirm.jconfirm-white .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.2); +} +.jconfirm.jconfirm-white .jconfirm-box { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + border-radius: 5px; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons { + float: right; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons button { + border: none; + background-image: none; + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + text-shadow: none; + -webkit-transition: background .1s; + transition: background .1s; + color: white; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default { + box-shadow: none; + color: #333; +} +.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default:hover { + background: #ddd; +} +.jconfirm.jconfirm-black .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.5); +} +.jconfirm.jconfirm-black .jconfirm-box { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + background: #444; + border-radius: 5px; + color: white; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons { + float: right; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons button { + border: none; + background-image: none; + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + text-shadow: none; + -webkit-transition: background .1s; + transition: background .1s; + color: white; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default { + box-shadow: none; + color: #fff; + background: none; +} +.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default:hover { + background: #666; +} +.jconfirm .jconfirm-box.hilight { + -webkit-animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +@-webkit-keyframes hilight { + 10%, + 90% { + -webkit-transform: translate3d(-2px, 0, 0); + transform: translate3d(-2px, 0, 0); + } + 20%, + 80% { + -webkit-transform: translate3d(4px, 0, 0); + transform: translate3d(4px, 0, 0); + } + 30%, + 50%, + 70% { + -webkit-transform: translate3d(-8px, 0, 0); + transform: translate3d(-8px, 0, 0); + } + 40%, + 60% { + -webkit-transform: translate3d(8px, 0, 0); + transform: translate3d(8px, 0, 0); + } +} +@keyframes hilight { + 10%, + 90% { + -webkit-transform: translate3d(-2px, 0, 0); + transform: translate3d(-2px, 0, 0); + } + 20%, + 80% { + -webkit-transform: translate3d(4px, 0, 0); + transform: translate3d(4px, 0, 0); + } + 30%, + 50%, + 70% { + -webkit-transform: translate3d(-8px, 0, 0); + transform: translate3d(-8px, 0, 0); + } + 40%, + 60% { + -webkit-transform: translate3d(8px, 0, 0); + transform: translate3d(8px, 0, 0); + } +} +/*Transition rules*/ +.jconfirm { + -webkit-perspective: 400px; + perspective: 400px; +} +.jconfirm .jconfirm-box { + opacity: 1; + -webkit-transition-property: -webkit-transform, opacity, box-shadow; + transition-property: transform, opacity, box-shadow; +} +.jconfirm .jconfirm-box.anim-top, +.jconfirm .jconfirm-box.anim-left, +.jconfirm .jconfirm-box.anim-right, +.jconfirm .jconfirm-box.anim-bottom, +.jconfirm .jconfirm-box.anim-opacity, +.jconfirm .jconfirm-box.anim-zoom, +.jconfirm .jconfirm-box.anim-scale, +.jconfirm .jconfirm-box.anim-none, +.jconfirm .jconfirm-box.anim-rotate, +.jconfirm .jconfirm-box.anim-rotatex, +.jconfirm .jconfirm-box.anim-rotatey, +.jconfirm .jconfirm-box.anim-scaley, +.jconfirm .jconfirm-box.anim-scalex { + opacity: 0; +} +.jconfirm .jconfirm-box.anim-rotate { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.jconfirm .jconfirm-box.anim-rotatex { + -webkit-transform: rotateX(90deg); + transform: rotateX(90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-rotatexr { + -webkit-transform: rotateX(-90deg); + transform: rotateX(-90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-rotatey { + -webkit-transform: rotatey(90deg); + -ms-transform: rotatey(90deg); + transform: rotatey(90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-rotateyr { + -webkit-transform: rotatey(-90deg); + -ms-transform: rotatey(-90deg); + transform: rotatey(-90deg); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-scaley { + -webkit-transform: scaley(1.5); + -ms-transform: scaley(1.5); + transform: scaley(1.5); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-scalex { + -webkit-transform: scalex(1.5); + -ms-transform: scalex(1.5); + transform: scalex(1.5); + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.jconfirm .jconfirm-box.anim-top { + -webkit-transform: translate(0px, -100px); + -ms-transform: translate(0px, -100px); + transform: translate(0px, -100px); +} +.jconfirm .jconfirm-box.anim-left { + -webkit-transform: translate(-100px, 0px); + -ms-transform: translate(-100px, 0px); + transform: translate(-100px, 0px); +} +.jconfirm .jconfirm-box.anim-right { + -webkit-transform: translate(100px, 0px); + -ms-transform: translate(100px, 0px); + transform: translate(100px, 0px); +} +.jconfirm .jconfirm-box.anim-bottom { + -webkit-transform: translate(0px, 100px); + -ms-transform: translate(0px, 100px); + transform: translate(0px, 100px); +} +.jconfirm .jconfirm-box.anim-zoom { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +.jconfirm .jconfirm-box.anim-scale { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); +} +.jconfirm .jconfirm-box.anim-none { + display: none; +} +.jconfirm.jconfirm-supervan .jconfirm-bg { + background-color: rgba(54, 70, 93, 0.95); +} +.jconfirm.jconfirm-supervan .jconfirm-box { + background-color: transparent; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon { + color: white; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.title-c { + text-align: center; + color: white; + font-size: 28px; + font-weight: normal; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.title-c > * { + padding-bottom: 25px; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.content-pane { + margin-bottom: 25px; +} +.jconfirm.jconfirm-supervan .jconfirm-box div.content { + text-align: center; + color: white; +} +.jconfirm.jconfirm-supervan .jconfirm-box .buttons { + text-align: center; +} +.jconfirm.jconfirm-supervan .jconfirm-box .buttons button { + font-size: 16px; + border-radius: 2px; + background: #303f53; + text-shadow: none; + border: none; + color: white; + padding: 10px; + min-width: 100px; +} +.jconfirm.jconfirm-material .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.67); +} +.jconfirm.jconfirm-material .jconfirm-box { + background-color: white; + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); + padding: 30px 25px 10px 25px; +} +.jconfirm.jconfirm-material .jconfirm-box div.closeIcon { + color: rgba(0, 0, 0, 0.87); +} +.jconfirm.jconfirm-material .jconfirm-box div.title-c { + color: rgba(0, 0, 0, 0.87); + font-size: 22px; + font-weight: bold; +} +.jconfirm.jconfirm-material .jconfirm-box div.content { + text-align: left; + color: rgba(0, 0, 0, 0.87); +} +.jconfirm.jconfirm-material .jconfirm-box .buttons { + text-align: right; +} +.jconfirm.jconfirm-material .jconfirm-box .buttons button { + text-transform: uppercase; + font-weight: 500; +} +.jconfirm.jconfirm-bootstrap .jconfirm-bg { + background-color: rgba(0, 0, 0, 0.21); +} +.jconfirm.jconfirm-bootstrap .jconfirm-box { + background-color: white; + box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2); + border: solid 1px rgba(0, 0, 0, 0.4); + padding: 15px 0 0; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box div.closeIcon { + color: rgba(0, 0, 0, 0.87); +} +.jconfirm.jconfirm-bootstrap .jconfirm-box div.title-c { + color: rgba(0, 0, 0, 0.87); + font-size: 22px; + font-weight: bold; + padding-left: 15px; + padding-right: 15px; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box div.content { + text-align: left; + color: rgba(0, 0, 0, 0.87); + padding: 0px 15px; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons { + text-align: right; + padding: 0px 0 0px; + margin: -5px 0 0px; + border-top: solid 1px #ddd; + overflow: hidden; + border-radius: 0 0 4px 4px; +} +.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons button { + font-weight: 500; + border-radius: 0px; + margin: 0; + border-left: solid 1px #ddd; +} diff --git a/kfet/static/kfet/css/kpsul.css b/kfet/static/kfet/css/kpsul.css index 40008749..21be5417 100644 --- a/kfet/static/kfet/css/kpsul.css +++ b/kfet/static/kfet/css/kpsul.css @@ -1,3 +1,13 @@ +input[type=number] { + -moz-appearance:textfield; +} + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + /* * Top row */ @@ -16,7 +26,7 @@ #account { border:1px solid #ddd; color:black; - height:160px; + height:120px; } #account[data-balance="ok"] { border-color:#009011; } @@ -46,52 +56,62 @@ background:#ddd; font-family:'Roboto Mono'; - font-size:70px; + font-size:50px; font-weight:bold; text-align:center; text-transform:uppercase; } -@media (min-width: 768px) { - #account { - margin-right:0; - } - - #account_form input { - font-size:85px; - } - - @media (min-width: 992px) { - #account_form input { - font-size:100px; - } - } -} - #account_data { height:100%; } #account_data .data_line { - line-height:24px; + line-height:16px; font-family:'Roboto Mono'; - font-size:14px; + font-size:12px; } -#account_data #account-balance{ - height:60px; - line-height:60px; +#account_data #account-balance { + height:40px; + line-height:40px; - font-size:60px; + font-size:35px; font-weight:bold; } -#account_data #account-name { +#account-name { font-weight:bold; } +@media (min-width: 600px) { + #account_form input { font-size:60px; } + + @media (min-width: 768px) { + #account{ height:160px; } + #account_form input { font-size: 70px; } + #account_name { font-size:60px; } + #account_data .data_line { + font-size:14px; + line-height:24px; + } + #account_data #account-balance { + font-size:50px; + line-height:60px; + height:60px; + } + + #account { margin-right:0; } + #account_form input { font-size:85px; } + + @media (min-width: 992px) { + #account_form input { font-size:100px; } + } + } +} + /* Checkout */ #checkout { @@ -210,17 +230,6 @@ border-left:0; } -#article_selection input[type=number] { - -moz-appearance:textfield; -} - -#article_selection input[type=number]::-webkit-inner-spin-button, -#article_selection input[type=number]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; -} - - #article_autocomplete { width:95%; padding-left:10px; @@ -233,4 +242,76 @@ /* Article data */ +#articles_data { + border:1px solid #ddd; + border-top:0; + overflow:auto; + max-height:500px; +} + +#articles_data table { + width: 100%; +} + +#articles_data table tr.article { + height:25px; + font-size:14px; +} + +#articles_data table tr.article>td:first-child { + padding-left:10px; +} + +#articles_data table tr.category { + height:35px; + background-color:#ddd; + font-size:16px; + font-weight:bold; +} + +#articles_data table tr.category>td:first-child { + padding-left:20px; +} + +/* Second part - Left - bottom */ + +.kpsul_middle_left_bottom { + height:160px; + margin:15px 0; + border:1px solid #ddd; +} + +.kpsul_middle_left_bottom > div { + height:100%; + padding:0; +} + +#basket { + overflow:auto; +} + +#basket_rel { + border-left:1px solid #ddd; +} + +#basket table { + width:100%; +} + +#basket table tr { + height:25px; + font-size:14px; +} + +#basket tr .amount { + width:70px; + padding-right:10px; + text-align:right; +} + +#basket tr .number { + width:50px; + padding-right:10px; + text-align:right; +} diff --git a/kfet/static/kfet/css/kpsul_grid.css b/kfet/static/kfet/css/kpsul_grid.css new file mode 100644 index 00000000..e8121f1c --- /dev/null +++ b/kfet/static/kfet/css/kpsul_grid.css @@ -0,0 +1,10 @@ +@media (min-width:768px) { + html { height:100%; } + body { height:calc(100% - 50px); } + .container-fluid { height:100%; } + .kpsul_middle { height:calc(100% - 175px); } + .kpsul_middle_left_col { height:calc(100% - 15px); } + .kpsul_middle_left_top { height:calc(100% - 190px); min-height:80px; } + .kpsul_middle_left { height:100%; } + #articles_data { height: calc(100% - 80px); } +} diff --git a/kfet/static/kfet/js/jquery-confirm.js b/kfet/static/kfet/js/jquery-confirm.js new file mode 100644 index 00000000..77d708e7 --- /dev/null +++ b/kfet/static/kfet/js/jquery-confirm.js @@ -0,0 +1,605 @@ +/*! + * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/) + * Author: Boniface Pereira + * Website: www.craftpip.com + * Contact: hey@craftpip.com + * + * Copyright 2013-2015 jquery-confirm + * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE) + * + * Modifié par: Aurélien Delobelle + * Contact: aure.delo@gmail.com + * Contenu des modifications: + * Cas où il y a un input avec autofocus dans 'content' -> Fix + */ + +if (typeof jQuery === 'undefined') { + throw new Error('jquery-confirm requires jQuery'); +} + +var jconfirm, Jconfirm; +(function ($) { + "use strict"; + + $.fn.confirm = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + + }; + /* + * Alias of $.confirm to emulate native confirm() + */ + $(this).each(function () { + var $this = $(this); + $this.on('click', function (e) { + e.preventDefault(); + var jcOption = $.extend({}, options); + if ($this.attr('data-title')) + jcOption['title'] = $this.attr('data-title'); + if ($this.attr('data-content')) + jcOption['content'] = $this.attr('data-content'); + + jcOption['$target'] = $this; + if ($this.attr('href') && !options['confirm']) + jcOption['confirm'] = function () { + location.href = $this.attr('href'); + }; + $.confirm(jcOption); + }); + }); + return $(this); + }; + $.confirm = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + }; + /* + * Alias of jconfirm + */ + return jconfirm(options); + }; + $.alert = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + }; + /* + * Alias of jconfirm + */ + options.cancelButton = false; + return jconfirm(options); + }; + $.dialog = function (options, option2) { + if (typeof options === 'undefined') options = {}; + if (typeof options === 'string') + options = { + content: options, + title: (option2) ? option2 : false + }; + /* + * Alias of jconfirm + */ + options.cancelButton = false; + options.confirmButton = false; + options.confirmKeys = [13]; + return jconfirm(options); + }; + jconfirm = function (options) { + if (typeof options === 'undefined') options = {}; + /* + * initial function for calling. + */ + if (jconfirm.defaults) { + /* + * Merge global defaults with plugin defaults + */ + $.extend(jconfirm.pluginDefaults, jconfirm.defaults); + } + /* + * merge options with plugin defaults. + */ + var options = $.extend({}, jconfirm.pluginDefaults, options); + return new Jconfirm(options); + }; + Jconfirm = function (options) { + /* + * constructor function Jconfirm, + * options = user options. + */ + $.extend(this, options); + this._init(); + }; + Jconfirm.prototype = { + _init: function () { + var that = this; + this._rand = Math.round(Math.random() * 99999); + this._buildHTML(); + this._bindEvents(); + setTimeout(function () { + that.open(); + that._watchContent(); + }, 0); + }, + _buildHTML: function () { + var that = this; + /* + * Prefixing animations. + */ + this.animation = 'anim-' + this.animation.toLowerCase(); + this.closeAnimation = 'anim-' + this.closeAnimation.toLowerCase(); + this.theme = 'jconfirm-' + this.theme.toLowerCase(); + if (this.animation == 'anim-none') + this.animationSpeed = 0; + + this._lastFocused = $('body').find(':focus'); + + /* + * Append html. + */ + this.$el = $(this.template).appendTo(this.container).addClass(this.theme); + this.$el.find('.jconfirm-box-container').addClass(this.columnClass); + this.$el.find('.jconfirm-bg').css(this._getCSS(this.animationSpeed, 1)); + this.$el.find('.jconfirm-bg').css('opacity', this.opacity); + this.$b = this.$el.find('.jconfirm-box').css(this._getCSS(this.animationSpeed, this.animationBounce)).addClass(this.animation); + this.$body = this.$b; // alias + + /* + * Add rtl class if rtl option has selected + */ + if (this.rtl) + this.$el.addClass("rtl"); + + this._contentReady = $.Deferred(); + this._modalReady = $.Deferred(); + + /* + * Setup title contents + */ + this.$title = this.$el.find('.title'); + this.contentDiv = this.$el.find('div.content'); + this.$content = this.contentDiv; // alias + this.$contentPane = this.$el.find('.content-pane'); + this.$icon = this.$el.find('.icon-c'); + this.$closeIcon = this.$el.find('.closeIcon'); + this.$contentPane.css(this._getCSS(this.animationSpeed, 1)); + this.setTitle(); + this.setIcon(); + this._setButtons(); + + if (this.closeIconClass) + this.$closeIcon.html(''); + + that._contentHash = this._hash(that.$content.html()); + $.when(this._contentReady, this._modalReady).then(function () { + that.setContent(); + that.setTitle(); + that.setIcon(); + }); + + this._getContent(); + this._imagesLoaded(); + + if (this.autoClose) + this._startCountDown(); + }, + _unwatchContent: function () { + clearInterval(this._timer); + }, + _hash: function () { + return btoa((encodeURIComponent(this.$content.html()))); + }, + _watchContent: function () { + var that = this; + this._timer = setInterval(function () { + var now = that._hash(that.$content.html()); + if (that._contentHash != now) { + that._contentHash = now; + that.setDialogCenter(); + that._imagesLoaded(); + } + }, this.watchInterval); + }, + _bindEvents: function () { + var that = this; + var boxClicked = false; + + this.$el.find('.jconfirm-scrollpane').click(function (e) { + // ignore propagated clicks + if (!boxClicked) { + // background clicked + if (that.backgroundDismiss) { + that.cancel(); + that.close(); + } else { + that.$b.addClass('hilight'); + setTimeout(function () { + that.$b.removeClass('hilight'); + }, 800); + } + } + boxClicked = false; + }); + + this.$el.find('.jconfirm-box').click(function (e) { + boxClicked = true; + }); + + if (this.$confirmButton) { + this.$confirmButton.click(function (e) { + e.preventDefault(); + var r = that.confirm(that.$b); + that._stopCountDown(); + that.onAction('confirm'); + if (typeof r === 'undefined' || r) + that.close(); + }); + } + if (this.$cancelButton) { + this.$cancelButton.click(function (e) { + e.preventDefault(); + var r = that.cancel(that.$b); + that._stopCountDown(); + that.onAction('cancel'); + + if (typeof r === 'undefined' || r) + that.close(); + }); + } + if (this.$closeButton) { + this.$closeButton.click(function (e) { + e.preventDefault(); + that._stopCountDown(); + that.cancel(); + that.onAction('close'); + that.close(); + }); + } + if (this.keyboardEnabled) { + setTimeout(function () { + $(window).on('keyup.' + this._rand, function (e) { + that.reactOnKey(e); + }); + }, 500); + } + + $(window).on('resize.' + this._rand, function () { + that.setDialogCenter(true); + }); + }, + _getCSS: function (speed, bounce) { + return { + '-webkit-transition-duration': speed / 1000 + 's', + 'transition-duration': speed / 1000 + 's', + '-webkit-transition-timing-function': 'cubic-bezier(.36,1.1,.2, ' + bounce + ')', + 'transition-timing-function': 'cubic-bezier(.36,1.1,.2, ' + bounce + ')' + }; + }, + _imagesLoaded: function () { + var that = this; + $.each(this.$content.find('img:not(.loaded)'), function (i, a) { + var interval = setInterval(function () { + var h = $(a).css('height'); + if (h !== '0px') { + $(a).addClass('loaded'); + that.setDialogCenter(); + clearInterval(interval); + } + }, 40); + }) + }, + _setButtons: function () { + /* + * Settings up buttons + */ + this.$btnc = this.$el.find('.buttons'); + if (this.confirmButton && $.trim(this.confirmButton) !== '') { + this.$confirmButton = $('').appendTo(this.$btnc).addClass(this.confirmButtonClass); + } + if (this.cancelButton && $.trim(this.cancelButton) !== '') { + this.$cancelButton = $('').appendTo(this.$btnc).addClass(this.cancelButtonClass); + } + if (!this.confirmButton && !this.cancelButton) { + this.$btnc.hide(); + } + if (!this.confirmButton && !this.cancelButton && this.closeIcon === null) { + this.$closeButton = this.$b.find('.closeIcon').show(); + } + if (this.closeIcon === true) { + this.$closeButton = this.$b.find('.closeIcon').show(); + } + }, + setTitle: function (string) { + this.title = (typeof string !== 'undefined') ? string : this.title; + this.$title.html(this.title || ''); + }, + setIcon: function (iconClass) { + this.title = (typeof string !== 'undefined') ? iconClass : this.title; + this.$icon.html(this.icon ? '' : ''); + }, + setContent: function (string) { + // only set the content on the modal. + var that = this; + this.content = (typeof string == 'undefined') ? this.content : string; + + if (this.content == '') { + this.$content.html(this.content); + this.$contentPane.hide(); + } else { + this.$content.html(this.content); + this.$contentPane.show(); + } + if (this.$content.hasClass('loading')) { + this.$content.removeClass('loading');// it was loading via ajax. + this.$btnc.find('button').prop('disabled', false); + } + }, + _getContent: function (string) { + // get content from remote & stuff. + var that = this; + string = (string) ? string : this.content; + this._isAjax = false; + /* + * Set content. + */ + if (!this.content) { // if the content is falsy + this.content = ''; + this.setContent(this.content); + this._contentReady.reject(); + } else if (typeof this.content === 'string') { + if (this.content.substr(0, 4).toLowerCase() === 'url:') { + this._isAjax = true; + this.$content.addClass('loading'); + this.$btnc.find('button').prop('disabled', true); + var url = this.content.substring(4, this.content.length); + $.get(url).done(function (html) { + that.content = html; + that._contentReady.resolve(); + }).always(function (data, status, xhr) { + if (typeof that.contentLoaded === 'function') + that.contentLoaded(data, status, xhr); + }); + } else { + this.setContent(this.content); + this._contentReady.reject(); + } + } else if (typeof this.content === 'function') { + this.$content.addClass('loading'); + this.$btnc.find('button').attr('disabled', 'disabled'); + var promise = this.content(this); + if (typeof promise !== 'object') { + console.error('The content function must return jquery promise.'); + } else if (typeof promise.always !== 'function') { + console.error('The object returned is not a jquery promise.'); + } else { + this._isAjax = true; + promise.always(function (data, status) { + that._contentReady.resolve(); + }); + } + } else { + console.error('Invalid option for property content, passed: ' + typeof this.content); + } + this.setDialogCenter(); + }, + _stopCountDown: function () { + clearInterval(this.timerInterval); + if (this.$cd) + this.$cd.remove(); + }, + _startCountDown: function () { + var opt = this.autoClose.split('|'); + if (/cancel/.test(opt[0]) && this.type === 'alert') { + return false; + } else if (/confirm|cancel/.test(opt[0])) { + this.$cd = $('').appendTo(this['$' + opt[0] + 'Button']); + var that = this; + that.$cd.parent().click(); + var time = opt[1] / 1000; + this.timerInterval = setInterval(function () { + that.$cd.html(' (' + (time -= 1) + ')'); + if (time === 0) { + that.$cd.html(''); + that.$cd.parent().trigger('click'); + clearInterval(that.timerInterval); + } + }, 1000); + } else { + console.error('Invalid option ' + opt[0] + ', must be confirm/cancel'); + } + }, + reactOnKey: function key(e) { + + /* + * prevent keyup event if the dialog is not last! + */ + var a = $('.jconfirm'); + if (a.eq(a.length - 1)[0] !== this.$el[0]) + return false; + + var key = e.which; + // Do not react if Enter/Space is pressed on input elements + if (this.contentDiv.find(':input').is(':focus') && /13|32/.test(key)) + return false; + + if ($.inArray(key, this.cancelKeys) !== -1) { + /* + * Cancel key pressed. + */ + if (this.$cancelButton) { + this.$cancelButton.click(); + } else { + this.close(); + } + } + if ($.inArray(key, this.confirmKeys) !== -1) { + /* + * Confirm key pressed. + */ + if (this.$confirmButton) { + this.$confirmButton.click(); + } + } + }, + setDialogCenter: function () { + if (this.$contentPane.css('display') == 'none') { + var contentHeight = 0; + var paneHeight = 0; + } else { + var contentHeight = this.$content.outerHeight(); + var paneHeight = this.$contentPane.height(); + if (paneHeight == 0) + paneHeight = contentHeight; + } + var off = 100; + var w = this.$content.outerWidth(); + + //var s = '-clip-path: inset(0px 0px '+contentHeight+'px 0px);' + + // 'clip-path: inset(0px 0px '+contentHeight+'px 0px)'; + + this.$content.css({ + 'clip': 'rect(0px ' + (off + w) + 'px ' + contentHeight + 'px -' + off + 'px)' + }); + + this.$contentPane.css({ + 'height': contentHeight + }); + + var windowHeight = $(window).height(); + var boxHeight = this.$b.outerHeight() - paneHeight + contentHeight; + var topMargin = (windowHeight - boxHeight) / 2; + var minMargin = 100; + if (boxHeight > (windowHeight - minMargin)) { + var style = { + 'margin-top': minMargin / 2, + 'margin-bottom': minMargin / 2 + } + $('body').addClass('jconfirm-noscroll'); + } else { + var style = { + 'margin-top': topMargin + } + $('body').removeClass('jconfirm-noscroll'); + } + this.$b.css(style); + }, + close: function () { + var that = this; + + if (this.isClosed()) + return false; + + if (typeof this.onClose === 'function') + this.onClose(); + + this._unwatchContent(); + that._lastFocused.focus(); + + //this.observer.disconnect(); + /* + unbind the window resize & keyup event. + */ + $(window).unbind('resize.' + this._rand); + if (this.keyboardEnabled) + $(window).unbind('keyup.' + this._rand); + + that.$el.find('.jconfirm-bg').removeClass('seen'); + $('body').removeClass('jconfirm-noscroll'); + + this.$b.addClass(this.closeAnimation); + var closeTimer = (this.closeAnimation == 'anim-none') ? 0 : this.animationSpeed; + setTimeout(function () { + that.$el.remove(); + }, closeTimer * 25 / 100); + + jconfirm.record.closed += 1; + jconfirm.record.currentlyOpen -= 1; + + return true; + }, + open: function () { + var that = this; + if (this.isClosed()) + return false; + + that.$el.find('.jconfirm-bg').addClass('seen'); + this.$b.removeClass(this.animation); + jconfirm.record.opened += 1; + jconfirm.record.currentlyOpen += 1; + if (typeof this.onOpen === 'function') + this.onOpen(); + + var jcr = 'jconfirm-box' + this._rand; + this.$b.attr('aria-labelledby', jcr).attr('tabindex', -1).focus(); + this.$b.find('input[autofocus]:visible:first').focus(); + if (this.$title) + this.$title.attr('id', jcr); else if (this.$content) + this.$content.attr('id', jcr); + + setTimeout(function () { + that.$b.css({ + 'transition-property': that.$b.css('transition-property') + ', margin' + }); + that._modalReady.resolve(); + }, this.animationSpeed); + + return true; + }, + isClosed: function () { + return this.$el.css('display') === ''; + } + }; + + jconfirm.pluginDefaults = { + template: '
', + title: 'Hello', + content: 'Are you sure to continue?', + contentLoaded: function () { + }, + icon: '', + opacity: 0.2, + confirmButton: 'Okay', + cancelButton: 'Close', + confirmButtonClass: 'btn-default', + cancelButtonClass: 'btn-default', + theme: 'white', + animation: 'zoom', + closeAnimation: 'scale', + animationSpeed: 500, + animationBounce: 1.2, + keyboardEnabled: false, + rtl: false, + confirmKeys: [13], // ENTER key + cancelKeys: [27], // ESC key + container: 'body', + confirm: function () { + }, + cancel: function () { + }, + backgroundDismiss: false, + autoClose: false, + closeIcon: null, + closeIconClass: false, + watchInterval: 100, + columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1', + onOpen: function () { + }, + onClose: function () { + }, + onAction: function () { + } + }; + + jconfirm.record = { + opened: 0, + closed: 0, + currentlyOpen: 0 + }; +})(jQuery); diff --git a/kfet/templates/kfet/base.html b/kfet/templates/kfet/base.html index 8c0d4713..e57c4cbe 100644 --- a/kfet/templates/kfet/base.html +++ b/kfet/templates/kfet/base.html @@ -10,11 +10,13 @@ {# CSS #} + {# JS #} + {% block extra_head %}{% endblock %} diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html index 1874b941..06f75350 100644 --- a/kfet/templates/kfet/kpsul.html +++ b/kfet/templates/kfet/kpsul.html @@ -2,8 +2,10 @@ {% load staticfiles %} {% block extra_head %} + + {% endblock %} {% block title %}K-Psul{% endblock %} @@ -54,37 +56,41 @@
-
-
-
- - +
+
+
+
+ + +
+
+ + + +
+
+ + + +
+
-
- - - -
-
- - - - - - - - - - - -
NomCatégoriePrixStock
+
+
+ +
+
+
+
+
+
- +