From c584da7f7614b49c641439694cf4dc59732cd779 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 10 May 2016 17:56:45 +0200 Subject: [PATCH] Gestion du 'fadeOut' pour les notifications en javascript --- css/notif.scss | 39 ++++++++++++++++++++++++-------------- css/notif/expanded.css | 16 +++++++++++----- css/notif/expanded.css.map | 4 ++-- css/notif/min.css | 4 ++-- css/notif/min.css.map | 4 ++-- js/lib/notif-min.js | 6 +++--- js/lib/notif.js | 28 ++++++++++++++++++++++----- view.php | 21 +------------------- view/js/analytics-min.js | 2 +- view/js/analytics.js | 2 ++ 10 files changed, 72 insertions(+), 54 deletions(-) diff --git a/css/notif.scss b/css/notif.scss index bd661df..3bf159e 100644 --- a/css/notif.scss +++ b/css/notif.scss @@ -28,6 +28,15 @@ body > #notification-container{ pointer-events: all; + // ANIMATION DE fadeIn + fadeOut + transition: opacity .5s ease-in-out; + opacity: 0; + + &.notification-visible{ + opacity: 1; + } + + // DIFFERENTS THEMES strong[class]{ @@ -36,28 +45,30 @@ body > #notification-container{ &:before{ content: ''; - display: inline-block; - position: absolute; - top: 1.2em; - left: 1em; - width: .9em; - height: .9em; + display: inline-block; + position: absolute; + top: 1.2em; + left: 1em; + width: .9em; + height: .9em; border-radius: 50% / 50%; box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5); background-color: red; } + + // WARNING + &.warning:before{ background-color: #dd6a45; } + // INFO + &.info:before{ background-color: #2195da; } + // SUCCESS + &.success:before{ background-color: #5fca4a; } + // ERROR + &.error:before{ background-color: #d94747; } } - // WARNING - strong.warning:before{ background-color: #dd6a45; } - // INFO - strong.info:before{ background-color: #2195da; } - // SUCCESS - strong.success:before{ background-color: #5fca4a; } - // ERROR - strong.error:before{ background-color: #d94747; } + } } diff --git a/css/notif/expanded.css b/css/notif/expanded.css index 8ee9469..97ebbeb 100644 --- a/css/notif/expanded.css +++ b/css/notif/expanded.css @@ -21,6 +21,12 @@ body > #notification-container .notification-element { box-shadow: inset 0 0 1em #eee; background-color: #fff; pointer-events: all; + transition: opacity .5s ease-in-out; + opacity: 0; +} + +body > #notification-container .notification-element.notification-visible { + opacity: 1; } body > #notification-container .notification-element strong[class] { @@ -40,20 +46,20 @@ body > #notification-container .notification-element strong[class]:before { background-color: red; } -body > #notification-container .notification-element strong.warning:before { +body > #notification-container .notification-element strong[class].warning:before { background-color: #dd6a45; } -body > #notification-container .notification-element strong.info:before { +body > #notification-container .notification-element strong[class].info:before { background-color: #2195da; } -body > #notification-container .notification-element strong.success:before { +body > #notification-container .notification-element strong[class].success:before { background-color: #5fca4a; } -body > #notification-container .notification-element strong.error:before { +body > #notification-container .notification-element strong[class].error:before { background-color: #d94747; } -/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi9ub3RpZi5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiYm9keSA+ICNub3RpZmljYXRpb24tY29udGFpbmVye1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG5cbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xuXG4gICAgei1pbmRleDogMjAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cbiAgICAubm90aWZpY2F0aW9uLWVsZW1lbnR7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBtYXJnaW46IC4yZW0gYXV0bztcbiAgICAgICAgICAgIHBhZGRpbmc6IDAgMWVtO1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZDtcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNiYmI7XG4gICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAxZW0gI2VlZTtcblxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG5cblxuICAgICAgICAvLyBESUZGRVJFTlRTIFRIRU1FU1xuICAgICAgICBzdHJvbmdbY2xhc3Nde1xuXG4gICAgICAgICAgICBwYWRkaW5nLWxlZnQ6IDEuNWVtO1xuXG4gICAgICAgICAgICAmOmJlZm9yZXtcbiAgICAgICAgICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgICAgICAgICB0b3A6IDEuMmVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgbGVmdDogMWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6IC45ZW07XG4gICAgICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IC45ZW07XG5cbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCUgLyA1MCU7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgLTFweCAxcHggMnB4IHJnYmEoNTAsIDUwLCA1MCwgLjUpO1xuXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmVkO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgLy8gV0FSTklOR1xuICAgICAgICBzdHJvbmcud2FybmluZzpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICNkZDZhNDU7IH1cbiAgICAgICAgLy8gSU5GT1xuICAgICAgICBzdHJvbmcuaW5mbzpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICMyMTk1ZGE7IH1cbiAgICAgICAgLy8gU1VDQ0VTU1xuICAgICAgICBzdHJvbmcuc3VjY2VzczpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICM1ZmNhNGE7IH1cbiAgICAgICAgLy8gRVJST1JcbiAgICAgICAgc3Ryb25nLmVycm9yOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogI2Q5NDc0NzsgfVxuICAgIH1cblxufVxuIgoJXSwKCSJtYXBwaW5ncyI6ICJBQUFBLElBQUksR0FBRyx1QkFBdUIsQ0FBQTtFQUUxQixPQUFPLEVBQUUsSUFBSztFQUNkLFFBQVEsRUFBRSxRQUFTO0VBQ2YsTUFBTSxFQUFFLENBQUU7RUFDVixJQUFJLEVBQUUsQ0FBRTtFQUNSLEtBQUssRUFBRSxJQUFLO0VBRWhCLGNBQWMsRUFBRSxNQUFPO0VBQ3ZCLFNBQVMsRUFBRSxNQUFPO0VBRWxCLE9BQU8sRUFBRSxHQUFJO0VBQ2IsY0FBYyxFQUFFLElBQUs7Q0FrRHhCOztBQTlERCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQUFBO0VBQ2pCLE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDZixNQUFNLEVBQUUsU0FBVTtFQUNsQixPQUFPLEVBQUUsS0FBTTtFQUVuQixhQUFhLEVBQUUsR0FBSTtFQUNuQixNQUFNLEVBQUUsY0FBZTtFQUN2QixhQUFhLEVBQUUsY0FBZTtFQUM5QixVQUFVLEVBQUUsa0JBQW1CO0VBRS9CLGdCQUFnQixFQUFFLElBQUs7RUFFdkIsY0FBYyxFQUFFLEdBQUk7Q0FnQ3ZCOztBQTVETCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQWlCakIsTUFBTSxDQUFBLEFBQUEsS0FBQyxBQUFBLEVBQU07RUFFVCxZQUFZLEVBQUUsS0FBTTtDQWdCdkI7O0FBbERULElBQUksR0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBaUJqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0FJRixPQUFPLENBQUE7RUFDSixPQUFPLEVBQUUsRUFBRztFQUNSLE9BQU8sRUFBRSxZQUFhO0VBQ3RCLFFBQVEsRUFBRSxRQUFTO0VBQ2YsR0FBRyxFQUFFLEtBQU07RUFDWCxJQUFJLEVBQUUsR0FBSTtFQUNWLEtBQUssRUFBRSxJQUFLO0VBQ1osTUFBTSxFQUFFLElBQUs7RUFFckIsYUFBYSxFQUFFLFNBQVU7RUFDekIsVUFBVSxFQUFFLEtBQUssQ0FBRSxJQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxxQkFBSTtFQUVuQyxnQkFBZ0IsRUFBRSxHQUFJO0NBQ3pCOztBQWpEYixJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQXNDakIsTUFBTSxBQUFBLFFBQVEsQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUk7O0FBckQ3RCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQXdDakIsTUFBTSxBQUFBLEtBQUssQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUk7O0FBdkQxRCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQTBDakIsTUFBTSxBQUFBLFFBQVEsQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUk7O0FBekQ3RCxJQUFJLEdBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQTRDakIsTUFBTSxBQUFBLE1BQU0sQUFBQSxPQUFPLENBQUE7RUFBRSxnQkFBZ0IsRUFBRSxPQUFRO0NBQUkiLAoJIm5hbWVzIjogW10KfQ== */ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi9ub3RpZi5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiYm9keSA+ICNub3RpZmljYXRpb24tY29udGFpbmVye1xuXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG5cbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xuXG4gICAgei1pbmRleDogMjAwO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cbiAgICAubm90aWZpY2F0aW9uLWVsZW1lbnR7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBtYXJnaW46IC4yZW0gYXV0bztcbiAgICAgICAgICAgIHBhZGRpbmc6IDAgMWVtO1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgI2RkZDtcbiAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNiYmI7XG4gICAgICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAxZW0gI2VlZTtcblxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBhbGw7XG5cbiAgICAgICAgLy8gQU5JTUFUSU9OIERFIGZhZGVJbiArIGZhZGVPdXRcbiAgICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAuNXMgZWFzZS1pbi1vdXQ7XG4gICAgICAgIG9wYWNpdHk6IDA7XG5cbiAgICAgICAgJi5ub3RpZmljYXRpb24tdmlzaWJsZXtcbiAgICAgICAgICAgIG9wYWNpdHk6IDE7XG4gICAgICAgIH1cblxuXG5cbiAgICAgICAgLy8gRElGRkVSRU5UUyBUSEVNRVNcbiAgICAgICAgc3Ryb25nW2NsYXNzXXtcblxuICAgICAgICAgICAgcGFkZGluZy1sZWZ0OiAxLjVlbTtcblxuICAgICAgICAgICAgJjpiZWZvcmV7XG4gICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICB0b3A6IDEuMmVtO1xuICAgICAgICAgICAgICAgIGxlZnQ6IDFlbTtcbiAgICAgICAgICAgICAgICB3aWR0aDogLjllbTtcbiAgICAgICAgICAgICAgICBoZWlnaHQ6IC45ZW07XG5cbiAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCUgLyA1MCU7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgLTFweCAxcHggMnB4IHJnYmEoNTAsIDUwLCA1MCwgLjUpO1xuXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmVkO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAvLyBXQVJOSU5HXG4gICAgICAgICAgICAmLndhcm5pbmc6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjZGQ2YTQ1OyB9XG4gICAgICAgICAgICAvLyBJTkZPXG4gICAgICAgICAgICAmLmluZm86YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE5NWRhOyB9XG4gICAgICAgICAgICAvLyBTVUNDRVNTXG4gICAgICAgICAgICAmLnN1Y2Nlc3M6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjNWZjYTRhOyB9XG4gICAgICAgICAgICAvLyBFUlJPUlxuICAgICAgICAgICAgJi5lcnJvcjpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICNkOTQ3NDc7IH1cbiAgICAgICAgfVxuXG5cbiAgICB9XG5cbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFBQSxJQUFJLEdBQUcsdUJBQXVC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 */ \ No newline at end of file diff --git a/css/notif/expanded.css.map b/css/notif/expanded.css.map index 40dda84..c9c5462 100644 --- a/css/notif/expanded.css.map +++ b/css/notif/expanded.css.map @@ -5,8 +5,8 @@ "../notif.scss" ], "sourcesContent": [ - "body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n }\n\n // WARNING\n strong.warning:before{ background-color: #dd6a45; }\n // INFO\n strong.info:before{ background-color: #2195da; }\n // SUCCESS\n strong.success:before{ background-color: #5fca4a; }\n // ERROR\n strong.error:before{ background-color: #d94747; }\n }\n\n}\n" + "body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n // ANIMATION DE fadeIn + fadeOut\n transition: opacity .5s ease-in-out;\n opacity: 0;\n\n &.notification-visible{\n opacity: 1;\n }\n\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n\n // WARNING\n &.warning:before{ background-color: #dd6a45; }\n // INFO\n &.info:before{ background-color: #2195da; }\n // SUCCESS\n &.success:before{ background-color: #5fca4a; }\n // ERROR\n &.error:before{ background-color: #d94747; }\n }\n\n\n }\n\n}\n" ], - "mappings": "AAAA,IAAI,GAAG,uBAAuB,CAAA;EAE1B,OAAO,EAAE,IAAK;EACd,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,CAAE;EACV,IAAI,EAAE,CAAE;EACR,KAAK,EAAE,IAAK;EAEhB,cAAc,EAAE,MAAO;EACvB,SAAS,EAAE,MAAO;EAElB,OAAO,EAAE,GAAI;EACb,cAAc,EAAE,IAAK;CAkDxB;;AA9DD,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAAA;EACjB,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,KAAM;EAEnB,aAAa,EAAE,GAAI;EACnB,MAAM,EAAE,cAAe;EACvB,aAAa,EAAE,cAAe;EAC9B,UAAU,EAAE,kBAAmB;EAE/B,gBAAgB,EAAE,IAAK;EAEvB,cAAc,EAAE,GAAI;CAgCvB;;AA5DL,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,EAAM;EAET,YAAY,EAAE,KAAM;CAgBvB;;AAlDT,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,CAAA;EACJ,OAAO,EAAE,EAAG;EACR,OAAO,EAAE,YAAa;EACtB,QAAQ,EAAE,QAAS;EACf,GAAG,EAAE,KAAM;EACX,IAAI,EAAE,GAAI;EACV,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,IAAK;EAErB,aAAa,EAAE,SAAU;EACzB,UAAU,EAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,qBAAI;EAEnC,gBAAgB,EAAE,GAAI;CACzB;;AAjDb,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAsCjB,MAAM,AAAA,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AArD7D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAwCjB,MAAM,AAAA,KAAK,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AAvD1D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0CjB,MAAM,AAAA,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AAzD7D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA4CjB,MAAM,AAAA,MAAM,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI", + "mappings": "AAAA,IAAI,GAAG,uBAAuB,CAAA;EAE1B,OAAO,EAAE,IAAK;EACd,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,CAAE;EACV,IAAI,EAAE,CAAE;EACR,KAAK,EAAE,IAAK;EAEhB,cAAc,EAAE,MAAO;EACvB,SAAS,EAAE,MAAO;EAElB,OAAO,EAAE,GAAI;EACb,cAAc,EAAE,IAAK;CA6DxB;;AAzED,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CAAA;EACjB,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EACf,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,KAAM;EAEnB,aAAa,EAAE,GAAI;EACnB,MAAM,EAAE,cAAe;EACvB,aAAa,EAAE,cAAe;EAC9B,UAAU,EAAE,kBAAmB;EAE/B,gBAAgB,EAAE,IAAK;EAEvB,cAAc,EAAE,GAAI;EAGpB,UAAU,EAAE,uBAAwB;EACpC,OAAO,EAAE,CAAE;CAuCd;;AAvEL,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,AAmBhB,qBAAqB,CAAA;EAClB,OAAO,EAAE,CAAE;CACd;;AApCT,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,EAAM;EAET,YAAY,EAAE,KAAM;CAyBvB;;AApET,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,CAAA;EACJ,OAAO,EAAE,EAAG;EACZ,OAAO,EAAE,YAAa;EACtB,QAAQ,EAAE,QAAS;EACnB,GAAG,EAAE,KAAM;EACX,IAAI,EAAE,GAAI;EACV,KAAK,EAAE,IAAK;EACZ,MAAM,EAAE,IAAK;EAEb,aAAa,EAAE,SAAU;EACzB,UAAU,EAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,qBAAI;EAEnC,gBAAgB,EAAE,GAAI;CACzB;;AA1Db,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAoBF,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AA7D5D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAsBF,KAAK,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AA/DzD,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAwBF,QAAQ,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI;;AAjE5D,IAAI,GAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CA0BF,MAAM,AAAA,OAAO,CAAA;EAAE,gBAAgB,EAAE,OAAQ;CAAI", "names": [] } \ No newline at end of file diff --git a/css/notif/min.css b/css/notif/min.css index 03c9d4a..8772ae4 100644 --- a/css/notif/min.css +++ b/css/notif/min.css @@ -1,3 +1,3 @@ -body>#notification-container{display:flex;position:absolute;bottom:0;left:0;width:100%;flex-direction:column;flex-wrap:nowrap;z-index:200;pointer-events:none}body>#notification-container .notification-element{display:block;position:relative;margin:.2em auto;padding:0 1em;border-radius:3px;border:1px solid #ddd;border-bottom:1px solid #bbb;box-shadow:inset 0 0 1em #eee;background-color:#fff;pointer-events:all}body>#notification-container .notification-element strong[class]{padding-left:1.5em}body>#notification-container .notification-element strong[class]:before{content:'';display:inline-block;position:absolute;top:1.2em;left:1em;width:.9em;height:.9em;border-radius:50% / 50%;box-shadow:inset -1px 1px 2px rgba(50,50,50,0.5);background-color:red}body>#notification-container .notification-element strong.warning:before{background-color:#dd6a45}body>#notification-container .notification-element strong.info:before{background-color:#2195da}body>#notification-container .notification-element strong.success:before{background-color:#5fca4a}body>#notification-container .notification-element strong.error:before{background-color:#d94747} +body>#notification-container{display:flex;position:absolute;bottom:0;left:0;width:100%;flex-direction:column;flex-wrap:nowrap;z-index:200;pointer-events:none}body>#notification-container .notification-element{display:block;position:relative;margin:.2em auto;padding:0 1em;border-radius:3px;border:1px solid #ddd;border-bottom:1px solid #bbb;box-shadow:inset 0 0 1em #eee;background-color:#fff;pointer-events:all;transition:opacity .5s ease-in-out;opacity:0}body>#notification-container .notification-element.notification-visible{opacity:1}body>#notification-container .notification-element strong[class]{padding-left:1.5em}body>#notification-container .notification-element strong[class]:before{content:'';display:inline-block;position:absolute;top:1.2em;left:1em;width:.9em;height:.9em;border-radius:50% / 50%;box-shadow:inset -1px 1px 2px rgba(50,50,50,0.5);background-color:red}body>#notification-container .notification-element strong[class].warning:before{background-color:#dd6a45}body>#notification-container .notification-element strong[class].info:before{background-color:#2195da}body>#notification-container .notification-element strong[class].success:before{background-color:#5fca4a}body>#notification-container .notification-element strong[class].error:before{background-color:#d94747} -/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbm90aWYuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJImJvZHkgPiAjbm90aWZpY2F0aW9uLWNvbnRhaW5lcntcblxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBmbGV4LXdyYXA6IG5vd3JhcDtcblxuICAgIHotaW5kZXg6IDIwMDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXG4gICAgLm5vdGlmaWNhdGlvbi1lbGVtZW50e1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICAgICAgbWFyZ2luOiAuMmVtIGF1dG87XG4gICAgICAgICAgICBwYWRkaW5nOiAwIDFlbTtcblxuICAgICAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7XG4gICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjYmJiO1xuICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMWVtICNlZWU7XG5cbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogYWxsO1xuXG5cbiAgICAgICAgLy8gRElGRkVSRU5UUyBUSEVNRVNcbiAgICAgICAgc3Ryb25nW2NsYXNzXXtcblxuICAgICAgICAgICAgcGFkZGluZy1sZWZ0OiAxLjVlbTtcblxuICAgICAgICAgICAgJjpiZWZvcmV7XG4gICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgICAgICAgICAgdG9wOiAxLjJlbTtcbiAgICAgICAgICAgICAgICAgICAgICAgIGxlZnQ6IDFlbTtcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiAuOWVtO1xuICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiAuOWVtO1xuXG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlIC8gNTAlO1xuICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IGluc2V0IC0xcHggMXB4IDJweCByZ2JhKDUwLCA1MCwgNTAsIC41KTtcblxuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFdBUk5JTkdcbiAgICAgICAgc3Ryb25nLndhcm5pbmc6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjZGQ2YTQ1OyB9XG4gICAgICAgIC8vIElORk9cbiAgICAgICAgc3Ryb25nLmluZm86YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE5NWRhOyB9XG4gICAgICAgIC8vIFNVQ0NFU1NcbiAgICAgICAgc3Ryb25nLnN1Y2Nlc3M6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjNWZjYTRhOyB9XG4gICAgICAgIC8vIEVSUk9SXG4gICAgICAgIHN0cm9uZy5lcnJvcjpiZWZvcmV7IGJhY2tncm91bmQtY29sb3I6ICNkOTQ3NDc7IH1cbiAgICB9XG5cbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFBQSxJQUFJLENBQUcsdUJBQXVCLEFBQUEsQ0FFMUIsT0FBTyxDQUFFLElBQUssQ0FDZCxRQUFRLENBQUUsUUFBUyxDQUNmLE1BQU0sQ0FBRSxDQUFFLENBQ1YsSUFBSSxDQUFFLENBQUUsQ0FDUixLQUFLLENBQUUsSUFBSyxDQUVoQixjQUFjLENBQUUsTUFBTyxDQUN2QixTQUFTLENBQUUsTUFBTyxDQUVsQixPQUFPLENBQUUsR0FBSSxDQUNiLGNBQWMsQ0FBRSxJQUFLLENBa0R4QixBQTlERCxJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixBQUFBLENBQ2pCLE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLFFBQVMsQ0FDZixNQUFNLENBQUUsU0FBVSxDQUNsQixPQUFPLENBQUUsS0FBTSxDQUVuQixhQUFhLENBQUUsR0FBSSxDQUNuQixNQUFNLENBQUUsY0FBZSxDQUN2QixhQUFhLENBQUUsY0FBZSxDQUM5QixVQUFVLENBQUUsa0JBQW1CLENBRS9CLGdCQUFnQixDQUFFLElBQUssQ0FFdkIsY0FBYyxDQUFFLEdBQUksQ0FnQ3ZCLEFBNURMLElBQUksQ0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBaUJqQixNQUFNLENBQUEsQUFBQSxLQUFDLEFBQUEsQ0FBTSxDQUVULFlBQVksQ0FBRSxLQUFNLENBZ0J2QixBQWxEVCxJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQWlCakIsTUFBTSxDQUFBLEFBQUEsS0FBQyxBQUFBLENBSUYsT0FBTyxBQUFBLENBQ0osT0FBTyxDQUFFLEVBQUcsQ0FDUixPQUFPLENBQUUsWUFBYSxDQUN0QixRQUFRLENBQUUsUUFBUyxDQUNmLEdBQUcsQ0FBRSxLQUFNLENBQ1gsSUFBSSxDQUFFLEdBQUksQ0FDVixLQUFLLENBQUUsSUFBSyxDQUNaLE1BQU0sQ0FBRSxJQUFLLENBRXJCLGFBQWEsQ0FBRSxTQUFVLENBQ3pCLFVBQVUsQ0FBRSxLQUFLLENBQUUsSUFBRyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsa0JBQUksQ0FFbkMsZ0JBQWdCLENBQUUsR0FBSSxDQUN6QixBQWpEYixJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQXNDakIsTUFBTSxBQUFBLFFBQVEsQUFBQSxPQUFPLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxPQUFRLENBQUksQUFyRDdELElBQUksQ0FBRyx1QkFBdUIsQ0FlMUIscUJBQXFCLENBd0NqQixNQUFNLEFBQUEsS0FBSyxBQUFBLE9BQU8sQUFBQSxDQUFFLGdCQUFnQixDQUFFLE9BQVEsQ0FBSSxBQXZEMUQsSUFBSSxDQUFHLHVCQUF1QixDQWUxQixxQkFBcUIsQ0EwQ2pCLE1BQU0sQUFBQSxRQUFRLEFBQUEsT0FBTyxBQUFBLENBQUUsZ0JBQWdCLENBQUUsT0FBUSxDQUFJLEFBekQ3RCxJQUFJLENBQUcsdUJBQXVCLENBZTFCLHFCQUFxQixDQTRDakIsTUFBTSxBQUFBLE1BQU0sQUFBQSxPQUFPLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxPQUFRLENBQUkiLAoJIm5hbWVzIjogW10KfQ== */ \ No newline at end of file +/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibWluLmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbm90aWYuc2NzcyIKCV0sCgkic291cmNlc0NvbnRlbnQiOiBbCgkJImJvZHkgPiAjbm90aWZpY2F0aW9uLWNvbnRhaW5lcntcblxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBib3R0b206IDA7XG4gICAgICAgIGxlZnQ6IDA7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBmbGV4LXdyYXA6IG5vd3JhcDtcblxuICAgIHotaW5kZXg6IDIwMDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXG4gICAgLm5vdGlmaWNhdGlvbi1lbGVtZW50e1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICAgICAgbWFyZ2luOiAuMmVtIGF1dG87XG4gICAgICAgICAgICBwYWRkaW5nOiAwIDFlbTtcblxuICAgICAgICBib3JkZXItcmFkaXVzOiAzcHg7XG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkZGQ7XG4gICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjYmJiO1xuICAgICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMWVtICNlZWU7XG5cbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogYWxsO1xuXG4gICAgICAgIC8vIEFOSU1BVElPTiBERSBmYWRlSW4gKyBmYWRlT3V0XG4gICAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgLjVzIGVhc2UtaW4tb3V0O1xuICAgICAgICBvcGFjaXR5OiAwO1xuXG4gICAgICAgICYubm90aWZpY2F0aW9uLXZpc2libGV7XG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICB9XG5cblxuXG4gICAgICAgIC8vIERJRkZFUkVOVFMgVEhFTUVTXG4gICAgICAgIHN0cm9uZ1tjbGFzc117XG5cbiAgICAgICAgICAgIHBhZGRpbmctbGVmdDogMS41ZW07XG5cbiAgICAgICAgICAgICY6YmVmb3Jle1xuICAgICAgICAgICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICAgICAgdG9wOiAxLjJlbTtcbiAgICAgICAgICAgICAgICBsZWZ0OiAxZW07XG4gICAgICAgICAgICAgICAgd2lkdGg6IC45ZW07XG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAuOWVtO1xuXG4gICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlIC8gNTAlO1xuICAgICAgICAgICAgICAgIGJveC1zaGFkb3c6IGluc2V0IC0xcHggMXB4IDJweCByZ2JhKDUwLCA1MCwgNTAsIC41KTtcblxuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgLy8gV0FSTklOR1xuICAgICAgICAgICAgJi53YXJuaW5nOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogI2RkNmE0NTsgfVxuICAgICAgICAgICAgLy8gSU5GT1xuICAgICAgICAgICAgJi5pbmZvOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogIzIxOTVkYTsgfVxuICAgICAgICAgICAgLy8gU1VDQ0VTU1xuICAgICAgICAgICAgJi5zdWNjZXNzOmJlZm9yZXsgYmFja2dyb3VuZC1jb2xvcjogIzVmY2E0YTsgfVxuICAgICAgICAgICAgLy8gRVJST1JcbiAgICAgICAgICAgICYuZXJyb3I6YmVmb3JleyBiYWNrZ3JvdW5kLWNvbG9yOiAjZDk0NzQ3OyB9XG4gICAgICAgIH1cblxuXG4gICAgfVxuXG59XG4iCgldLAoJIm1hcHBpbmdzIjogIkFBQUEsSUFBSSxDQUFHLHVCQUF1QixBQUFB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 */ \ No newline at end of file diff --git a/css/notif/min.css.map b/css/notif/min.css.map index 5207933..f249898 100644 --- a/css/notif/min.css.map +++ b/css/notif/min.css.map @@ -5,8 +5,8 @@ "../notif.scss" ], "sourcesContent": [ - "body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n }\n\n // WARNING\n strong.warning:before{ background-color: #dd6a45; }\n // INFO\n strong.info:before{ background-color: #2195da; }\n // SUCCESS\n strong.success:before{ background-color: #5fca4a; }\n // ERROR\n strong.error:before{ background-color: #d94747; }\n }\n\n}\n" + "body > #notification-container{\n\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n\n flex-direction: column;\n flex-wrap: nowrap;\n\n z-index: 200;\n pointer-events: none;\n\n\n .notification-element{\n display: block;\n position: relative;\n margin: .2em auto;\n padding: 0 1em;\n\n border-radius: 3px;\n border: 1px solid #ddd;\n border-bottom: 1px solid #bbb;\n box-shadow: inset 0 0 1em #eee;\n\n background-color: #fff;\n\n pointer-events: all;\n\n // ANIMATION DE fadeIn + fadeOut\n transition: opacity .5s ease-in-out;\n opacity: 0;\n\n &.notification-visible{\n opacity: 1;\n }\n\n\n\n // DIFFERENTS THEMES\n strong[class]{\n\n padding-left: 1.5em;\n\n &:before{\n content: '';\n display: inline-block;\n position: absolute;\n top: 1.2em;\n left: 1em;\n width: .9em;\n height: .9em;\n\n border-radius: 50% / 50%;\n box-shadow: inset -1px 1px 2px rgba(50, 50, 50, .5);\n\n background-color: red;\n }\n\n // WARNING\n &.warning:before{ background-color: #dd6a45; }\n // INFO\n &.info:before{ background-color: #2195da; }\n // SUCCESS\n &.success:before{ background-color: #5fca4a; }\n // ERROR\n &.error:before{ background-color: #d94747; }\n }\n\n\n }\n\n}\n" ], - "mappings": "AAAA,IAAI,CAAG,uBAAuB,AAAA,CAE1B,OAAO,CAAE,IAAK,CACd,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,CAAE,CACV,IAAI,CAAE,CAAE,CACR,KAAK,CAAE,IAAK,CAEhB,cAAc,CAAE,MAAO,CACvB,SAAS,CAAE,MAAO,CAElB,OAAO,CAAE,GAAI,CACb,cAAc,CAAE,IAAK,CAkDxB,AA9DD,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,AAAA,CACjB,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,KAAM,CAEnB,aAAa,CAAE,GAAI,CACnB,MAAM,CAAE,cAAe,CACvB,aAAa,CAAE,cAAe,CAC9B,UAAU,CAAE,kBAAmB,CAE/B,gBAAgB,CAAE,IAAK,CAEvB,cAAc,CAAE,GAAI,CAgCvB,AA5DL,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAAM,CAET,YAAY,CAAE,KAAM,CAgBvB,AAlDT,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAiBjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,AAAA,CACJ,OAAO,CAAE,EAAG,CACR,OAAO,CAAE,YAAa,CACtB,QAAQ,CAAE,QAAS,CACf,GAAG,CAAE,KAAM,CACX,IAAI,CAAE,GAAI,CACV,KAAK,CAAE,IAAK,CACZ,MAAM,CAAE,IAAK,CAErB,aAAa,CAAE,SAAU,CACzB,UAAU,CAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI,CAEnC,gBAAgB,CAAE,GAAI,CACzB,AAjDb,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAsCjB,MAAM,AAAA,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AArD7D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CAwCjB,MAAM,AAAA,KAAK,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AAvD1D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0CjB,MAAM,AAAA,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AAzD7D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA4CjB,MAAM,AAAA,MAAM,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI", + "mappings": "AAAA,IAAI,CAAG,uBAAuB,AAAA,CAE1B,OAAO,CAAE,IAAK,CACd,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,CAAE,CACV,IAAI,CAAE,CAAE,CACR,KAAK,CAAE,IAAK,CAEhB,cAAc,CAAE,MAAO,CACvB,SAAS,CAAE,MAAO,CAElB,OAAO,CAAE,GAAI,CACb,cAAc,CAAE,IAAK,CA6DxB,AAzED,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,AAAA,CACjB,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CACf,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,KAAM,CAEnB,aAAa,CAAE,GAAI,CACnB,MAAM,CAAE,cAAe,CACvB,aAAa,CAAE,cAAe,CAC9B,UAAU,CAAE,kBAAmB,CAE/B,gBAAgB,CAAE,IAAK,CAEvB,cAAc,CAAE,GAAI,CAGpB,UAAU,CAAE,uBAAwB,CACpC,OAAO,CAAE,CAAE,CAuCd,AAvEL,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,AAmBhB,qBAAqB,AAAA,CAClB,OAAO,CAAE,CAAE,CACd,AApCT,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAAM,CAET,YAAY,CAAE,KAAM,CAyBvB,AApET,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAIF,OAAO,AAAA,CACJ,OAAO,CAAE,EAAG,CACZ,OAAO,CAAE,YAAa,CACtB,QAAQ,CAAE,QAAS,CACnB,GAAG,CAAE,KAAM,CACX,IAAI,CAAE,GAAI,CACV,KAAK,CAAE,IAAK,CACZ,MAAM,CAAE,IAAK,CAEb,aAAa,CAAE,SAAU,CACzB,UAAU,CAAE,KAAK,CAAE,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAI,CAEnC,gBAAgB,CAAE,GAAI,CACzB,AA1Db,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAoBF,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AA7D5D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAsBF,KAAK,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AA/DzD,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CAwBF,QAAQ,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI,AAjE5D,IAAI,CAAG,uBAAuB,CAe1B,qBAAqB,CA0BjB,MAAM,CAAA,AAAA,KAAC,AAAA,CA0BF,MAAM,AAAA,OAAO,AAAA,CAAE,gBAAgB,CAAE,OAAQ,CAAI", "names": [] } \ No newline at end of file diff --git a/js/lib/notif-min.js b/js/lib/notif-min.js index 316b216..9eb84d7 100644 --- a/js/lib/notif-min.js +++ b/js/lib/notif-min.js @@ -1,4 +1,4 @@ -var NotificationClass=function(a){this.container=a};NotificationClass.prototype={container:this.container,stack:[],types:["warning","info","success","error"]};NotificationClass.prototype.pushStack=function(a,d,e){if(!(a instanceof Array&&e instanceof Array))return null;var c=-1,b;for(b in a)if(-1'+d+": "+e+"

";this.container.appendChild(b.element);var f=this.pushStack(this.stack,b,[null]);b.element.id=f;var g=this;b.timeout=setTimeout(function(){g.hide(f)}, -c)}; +NotificationClass.prototype.show=function(a,d,e,c){a=-1'+d+": "+e+"

";this.container.appendChild(b.element);var f=this.pushStack(this.stack,b,[null]);b.element.id=f;var g=this;b.element.className= +"notification-element notification-visible";setTimeout(function(){b.element.className="notification-element"},500+c);b.timeout=setTimeout(function(){g.hide(f)},500+c+500);b.element.addEventListener("click",function(a){g.hide(f)},!1)}; diff --git a/js/lib/notif.js b/js/lib/notif.js index 73a3863..8796051 100644 --- a/js/lib/notif.js +++ b/js/lib/notif.js @@ -17,7 +17,8 @@ NotificationClass.prototype = { 'info', 'success', 'error' - ] + ], + defaultTimeout: 2000 // Temps d'apparition par défaut }; @@ -93,7 +94,7 @@ NotificationClass.prototype.hide = function(id){ * @type Type de notification parmi 'warning', 'info', 'success', 'error' * @title Titre de la notification * @message Message de la notification -* @timeout Temps d'apparition de la notification en ms (millisecondes) +* @timeout Temps d'apparition de la notification en ms (millisecondes) + 2 * 500ms (fadeIn+fadeOut) * */ NotificationClass.prototype.show = function(type, title, message, timeout){ @@ -109,7 +110,7 @@ NotificationClass.prototype.show = function(type, title, message, timeout){ message = typeof message == 'string' ? message : '...'; /* (4) Vérification de @timeout */ - timeout = typeof timeout == 'number' ? timeout : 400; + timeout = typeof timeout == 'number' ? timeout : this.defaultTimeout; /* (1) Construction de l'élément ---------------------------------------------------------*/ @@ -124,7 +125,7 @@ NotificationClass.prototype.show = function(type, title, message, timeout){ /* (2) Construction de l'élément */ stackItem.element.className = 'notification-element'; - stackItem.element.innerHTML = '

'+title+': '+message+'

'; + stackItem.element.innerHTML = '

'+title+': '+message+'

'; /* (2) Ajout à la pile et au DOM ---------------------------------------------------------*/ @@ -135,8 +136,25 @@ NotificationClass.prototype.show = function(type, title, message, timeout){ /* (3) Gestion du temps d'apparition ---------------------------------------------------------*/ var ptr = this; + + // {1} fadeIn START // + stackItem.element.className = 'notification-element notification-visible'; + + // {2} fadeOut START // + setTimeout(function(){ + stackItem.element.className = 'notification-element'; + }, 500+timeout); + + // {3} fadeOut STOP + animation STOP // stackItem.timeout = setTimeout(function(){ ptr.hide(id); - }, timeout); + }, 500+timeout+500); + + + /* (4) Gestion du clic qui ferme la notification + ---------------------------------------------------------*/ + stackItem.element.addEventListener('click', function(e){ + ptr.hide(id); + }, false); }; diff --git a/view.php b/view.php index 9467945..8e02cff 100755 --- a/view.php +++ b/view.php @@ -74,26 +74,7 @@ -

- -
+
diff --git a/view/js/analytics-min.js b/view/js/analytics-min.js index 0d0e220..29c5a99 100644 --- a/view/js/analytics-min.js +++ b/view/js/analytics-min.js @@ -1 +1 @@ -var instance=new FormDeflater(document.getElementById("myform"),["input"],["name","data-name"]);console.log(instance.deflate());Notification=new NotificationClass($("#notification-container")); +var instance=new FormDeflater(document.getElementById("myform"),["input"],["name","data-name"]);console.log(instance.deflate());Notification=new NotificationClass($("#notification-container"));Notification.show("warning","ERREUR","Une erreur de chargement est intervenue.."); diff --git a/view/js/analytics.js b/view/js/analytics.js index 4021355..307d3fc 100644 --- a/view/js/analytics.js +++ b/view/js/analytics.js @@ -9,3 +9,5 @@ console.log( instance.deflate() ); Notification = new NotificationClass( $('#notification-container') ); + +Notification.show( 'warning', 'ERREUR', 'Une erreur de chargement est intervenue..' );