import edit toggle button from panikdb

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
index f5e89cac47f9db3fc13f36b8bebcf3507d1ee86b..720242f0e4e71da587447070e924fc985499e744 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -259,9 +259,52 @@ div[contenteditable=true]:focus-within {
        }
 }
 
-button#save {
+#quickedit {
        position: sticky;
        bottom: 10px;
+       display: flex;
+       justify-content: flex-end;
+       label {
+               display: inline-block;
+               margin-left: 6px;
+               cursor: pointer;
+       }
+       input {
+               display: none;
+       }
+
+       button,
+       span {
+               display: inline-block;
+               font-weight: normal;
+               background: white;
+               border: 1px solid #386ede;
+               box-shadow: 0 0 0 5px white;
+               padding: 1ex;
+               border-radius: 3px;
+               color: #386ede;
+               font-size: inherit;
+               letter-spacing: inherit;
+               line-height: inherit;
+       }
+       button:hover {
+               &:hover {
+                       color: white;
+                       background: #386ede;
+               }
+       }
+       button.error {
+               background: red;
+               color: white;
+               &:hover {
+                       background: darken(red, 10%);
+               }
+       }
+
+       input:checked + span {
+               background: #386ede;
+               color: white;
+       }
 }
 
 main.post {

diff --git a/chloro/phyll/static/js/chloro.js b/chloro/phyll/static/js/chloro.js
index 880af04da2dd3a8b1b652fce4c918feb4fd69ed8..14ccdb97e9052afe9e27fe0d8844a11be3f10917 100644 (file)
--- a/chloro/phyll/static/js/chloro.js
+++ b/chloro/phyll/static/js/chloro.js
@@ -1,3 +1,38 @@
+// from django/contrib/admin/static/admin/js/urlify.js
+var LATIN_MAP = {
+    'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE',
+    'Ç': 'C', 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I',
+    'Î': 'I', 'Ï': 'I', 'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O',
+    'Õ': 'O', 'Ö': 'O', 'Ő': 'O', 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U',
+    'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', 'Ÿ': 'Y', 'ß': 'ss', 'à': 'a',
+    'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c',
+    'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i',
+    'ï': 'i', 'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o',
+    'ö': 'o', 'ő': 'o', 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u',
+    'ű': 'u', 'ý': 'y', 'þ': 'th', 'ÿ': 'y'
+};
+
+function downcode(string) {
+  return string.toLowerCase().replace(/[^A-Za-z0-9\[\] ]/g,function(a){ return LATIN_MAP[a]||a }).replace(/[^-\w\s]/g, '').replace(/^\s+|\s+$/g, '').replace(/[-\s]+/g, '-');
+};
+
+function remove_auto_anchors() {
+  $('article .wiki-anchor-auto').each(function(idx, anchor) {
+          $(anchor).parent().removeAttr('id');
+          $(anchor).remove();
+  });
+}
+
+function auto_anchors() {
+  $('article div.textcell h1, article div.textcell h2, article div.textcell h3, article div.textcell h4').each(function(idx, elem) {
+    var $elem = $(elem);
+    if ($elem.attr('id')) return;
+    if ($elem.find('.wiki-anchor').length) return;
+    $elem.attr('id', downcode($elem.text()));
+    $('<a class="wiki-anchor wiki-anchor-auto" href="#' + $elem.attr('id') + '">¶</a>').appendTo($elem);
+  });
+}
+
 (function(window, document, undefined) {
   var Phylly = {
     BLOCKS: [
@@ -438,16 +473,41 @@
 }(window, document));
 
 $(function() {
-  Phylly.init(),
-  $('div[contenteditable]').each(function(i, elem) {Phylly.bind_events(elem)});
-  $('#save').on('click', function() {
-    var text = $('div[contenteditable]')[0].innerHTML;
-    var csrf = $('[name=csrfmiddlewaretoken]').val();
-    $.post('api-save/',
-      { text: text, csrfmiddlewaretoken: csrf}
-    ).fail(function() {
-      $('#save').css('background', 'red');
-    });
-    return false;
+  $('#quickedit input').on('change', function() {
+    var enable = $(this).is(':checked');
+    if (enable) {
+      remove_auto_anchors();
+      $('div[data-editable]').each(function(i, elem) {
+        $(elem).attr('contenteditable', 'true');
+        var $button = $('<button class="save">Enregistrer</button>');
+        $button[0].div_zone = elem;
+        $button.insertBefore($('#quickedit label'));
+      });
+      Phylly.init(),
+      $('div[data-editable]').each(function(i, elem) {
+        Phylly.bind_events(elem);
+      });
+      $('.save').on('click', function() {
+        var text = $('div[contenteditable]')[0].innerHTML;
+        var csrf = $('[name=csrfmiddlewaretoken]').val();
+        $.post('api-save/',
+          { text: text, csrfmiddlewaretoken: csrf}
+        ).fail(function() {
+          $('.save').addClass('error');
+        }).done(function() {
+          $('.save').removeClass('error');
+        });
+        return false;
+      });
+    } else {
+      auto_anchors();
+      Phylly.off(),
+      $('button.save').remove();
+      $('div[data-editable]').each(function(i, elem) {
+        $(elem).attr('contenteditable', 'false');
+        Phylly.unbind_events(elem);
+      });
+    }
   });
+  $('#quickedit input').trigger('change');
 });

diff --git a/chloro/phyll/templates/phyll/note_detail.html b/chloro/phyll/templates/phyll/note_detail.html
index 16135e5f1da381aeda7271730ac8f372ebf3f803..ecd1ce6bbac05ea520bc0a2fdf2c1ec99cca5af1 100644 (file)
--- a/chloro/phyll/templates/phyll/note_detail.html
+++ b/chloro/phyll/templates/phyll/note_detail.html
@@ -8,9 +8,14 @@
 {% block body %}
 <article>
 <h2>{{ object.title }}</h2>
-<div {% if request.user.is_staff %}contenteditable="true"{% endif %}>{{ object.text|safe }}</div>
+<div {% if request.user.is_staff %}data-editable{% endif %}>{{ object.text|safe }}</div>
+
 {% if request.user.is_staff %}
-{% csrf_token %}<button id="save">{% trans "Save" %}</button>
+{% csrf_token %}
+<div id="quickedit">
+  <label><input type="checkbox"><span>Mode édition</span></label>
+</div>
+
 {% endif %}
 
 <div class="meta">{{ object.creation_timestamp|date:"j E Y, H:i"|lower }}</div>