Comments

Yavsc/wwwroot/css/main/site.css

@@ -50,8 +50,8 @@
 
 .smalltofhol {
     align-self: left;
-    padding: .5em;
-    border-radius: 32px;
+    padding: .1em;
+    border-radius: 50%;
 }
 
 .commentmeta {

Yavsc/wwwroot/css/main/site.min.css

@@ -1 +1 @@
-.discussion,.notif,.pv{font-family:monospace}#targets,.userinfo{display:block}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}#discussion,.blogphoto{float:left}.navbar-brand,.navbar-link,.navbar-nav .dropdown>a{background-color:rgba(0,0,0,.2);border-radius:2em;vertical-align:center}.navbar-brand:focus,.navbar-brand:hover,.navbar-link:focus,.navbar-link:hover{background-color:rgba(0,0,0,.4)}.ql-editor{border:1em outset #ee903e;padding:1em}.badge{margin:1em}.badge img{height:2em}.userinfo{padding:.8em .8em .8em 2em;margin:.6em;background-repeat:no-repeat;background-attachment:local;background-size:contain;background-image:url(/images/lis.svg);overflow:auto}.performer{border-radius:1.5em;background-color:#f1e4f1;padding:1em}.performer ul{margin-left:2.5em}.smalltofhol{align-self:left;padding:1em}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:large}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}tr.visiblepost,tr.visiblepost img{max-height:3em}tr.hiddenpost{max-height:2em;background-color:#888;font-size:smaller}tr.hiddenpost img{max-height:3em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{display:inline-block;margin:1em;color:#000;background-color:inherit;border:1px solid #000}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .carousel-caption-s{-webkit-transition:-webkit-transform 2s background-color 2s color 2s;-moz-transition:transform 2s background-color 2s color 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .item.active .carousel-caption-s{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}.disabled{color:#999;background-color:#555}.carousel-caption-s p{-webkit-text-shadow:3px 3px 7px #000;animation:mymove 4s infinite;font-family:Arial;font-weight:800;font-size:x-large;text-shadow:3px 3px 7px #00003c;color:#fff;background-color:rgba(94,24,194,.15);border-radius:.5em}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@media (max-width:767px){main.container{padding-right:.3em;padding-left:.3em;margin-left:.3em;margin-right:.3em}.navbar-brand{float:left;height:50px;padding:5px;font-size:16px;line-height:18px}.carousel-caption-s p{margin:.2em;padding:.2em}}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}footer{vertical-align:bottom;padding:1.5em}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#ff8;padding:.1em;border-radius:.5em;background-color:#210912}footer{color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{margin:1em}.dl-horizontal dd{margin-left:20%}
+.discussion,.notif,.pv{font-family:monospace}#targets,.userinfo{display:block}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}#discussion,.blogphoto{float:left}.navbar-brand,.navbar-link,.navbar-nav .dropdown>a{background-color:rgba(0,0,0,.2);border-radius:2em;vertical-align:center}.navbar-brand:focus,.navbar-brand:hover,.navbar-link:focus,.navbar-link:hover{background-color:rgba(0,0,0,.4)}.ql-editor{border:1em outset #ee903e;padding:1em}.badge{margin:1em}.badge img{height:2em}.userinfo{padding:.8em .8em .8em 2em;margin:.6em;background-repeat:no-repeat;background-attachment:local;background-size:contain;background-image:url(/images/lis.svg);overflow:auto}.performer{border-radius:1.5em;background-color:#f1e4f1;padding:1em}.performer ul{margin-left:2.5em}.smalltofhol{align-self:left;padding:.5em;border-radius:32px}.commentmeta{margin:.5em;padding:.5em;border-right:#444 dashed 1px;border-top:#444 solid 1px}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:large}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}tr.visiblepost,tr.visiblepost img{max-height:3em}tr.hiddenpost{max-height:2em;background-color:#888;font-size:smaller}tr.hiddenpost img{max-height:3em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{display:inline-block;margin:1em;color:#000;background-color:inherit;border:1px solid #000}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .carousel-caption-s{-webkit-transition:-webkit-transform 2s background-color 2s color 2s;-moz-transition:transform 2s background-color 2s color 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .item.active .carousel-caption-s{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}.disabled{color:#999;background-color:#555}.carousel-caption-s p{-webkit-text-shadow:3px 3px 7px #000;animation:mymove 4s infinite;font-family:Arial;font-weight:800;font-size:x-large;text-shadow:3px 3px 7px #00003c;color:#fff;background-color:rgba(94,24,194,.15);border-radius:.5em}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@media (max-width:767px){main.container{padding-right:.3em;padding-left:.3em;margin-left:.3em;margin-right:.3em}.navbar-brand{float:left;height:50px;padding:5px;font-size:16px;line-height:18px}.carousel-caption-s p{margin:.2em;padding:.2em}}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}footer{vertical-align:bottom;padding:1.5em}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#ff8;padding:.1em;border-radius:.5em;background-color:#210912}footer{color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{margin:1em}.dl-horizontal dd{margin-left:20%}

Yavsc/wwwroot/js/comment.js

@@ -0,0 +1,80 @@
+if (typeof jQuery === 'undefined') {
+    throw new Error('Bootstrap\'s JavaScript requires jQuery')
+}
+
++
+(function($) {
+    $.widget("psc.blogcomment", {
+        options: {
+            apictrlr: null,
+            omob: '#ffe08030',
+            omof: '#501208',
+            bgc: '#fff',
+            fgc: '#000',
+            lang: 'fr-FR'
+        },
+        editable: false,
+        editting: false,
+        edctrl: null,
+        _create: function() {
+            var _this = this;
+            this.element.addClass("blogcomment");
+            var date = new Date(this.element.data("date"));
+            var username = this.element.data("username");
+            this.editable = this.element.data("allow-edit");
+            this.element.prepend('<div class="commentmeta"><div class="avatar"><img src="/Avatars/' + username + '.xs.png" class="smalltofhol" />' + username + '</div><div class="cmtdatetime">' +
+                date.toLocaleDateString(this.options.lang) + ' ' + date.toLocaleTimeString(this.options.lang) + '</div></div>')
+            this.element.on("mouseenter", this.onMouseEnter);
+            this.element.on("mouseleave", this.onMouseLeave);
+            if (this.editable) {
+                this.element.on("click", function(ev) { _this.toggleEdit(_this, ev) })
+            }
+        },
+        toggleEdit: function(_this, ev) {
+            if (!_this.edctrl) {
+                // TODO click on button
+                _this.edctrl = $("<button class=\"btn btn-default\">Delete</button>");
+                _this.edctrl.on("click", function(ev) { _this.doDeleteComment(_this, ev) }).appendTo(_this.element);
+            } else {
+                _this.edctrl.remove();
+                _this.edctrl = null;
+            }
+        },
+        onMouseEnter: function() {
+            $(this).animate({
+                backgroundColor: $.psc.blogcomment.prototype.options.omob,
+                color: $.psc.blogcomment.prototype.options.omof
+            }, 400);
+        },
+        onMouseLeave: function() {
+            $(this).animate({
+                backgroundColor: $.psc.blogcomment.prototype.options.bgc,
+                color: $.psc.blogcomment.prototype.options.fgc
+            }, 400);
+        },
+        doDeleteComment: function(_this, ev) {
+            var cmtid = $(_this.element).data("id");
+            var cmtapi = _this.options.apictrlr;
+            $.ajax({
+                async: true,
+                cache: false,
+                type: 'POST',
+                method: 'DELETE',
+                error: function(xhr, data) {
+                    $('span.field-validation-valid[data-valmsg-for="Content"]').html(
+                        "Une erreur est survenue : " + xhr.status + "<br/>"
+                    ).focus()
+                },
+                success: function(data) {
+                    _this.element.remove()
+                },
+                url: cmtapi + '/' + cmtid
+            });
+        }
+
+    });
+
+    $(document).ready(function() {
+        $("[data-type='blogcomment']").blogcomment();
+    })
+})(jQuery);