doc() document the edit inline feature

batiste · Dec 13, 2016 · 67e8944 · 67e8944
1 parent 306e3f4
commit 67e8944
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/doc/index.rst b/doc/index.rst
@@ -28,6 +28,7 @@ Table of content
     placeholders.rst
     installation.rst
     display-content.rst
+    edit-content.rst
     navigation-template-tags.rst
 
     3rd-party-apps.rst

diff --git a/doc/placeholders.rst b/doc/placeholders.rst
@@ -134,8 +134,8 @@ The **shared** keyword
 
 If you add the keyword **shared** the placeholder's content
 will be the same for all the pages. In effect the placeholder is
-no linked to any particular pages and editing it in one page change
-it in all the other.
+not linked to any page and editing it change
+its content in all pages.
 
 Template syntax example::
 

diff --git a/example/templates/index.html b/example/templates/index.html
@@ -96,7 +96,9 @@
           {% block header %}
             <h1>{% placeholder 'title' %}</h1>
             <p class="lead">{% placeholder 'lead' %}</p>
-            <div>{% imageplaceholder 'header-image' %}</div>
+            {% if request.user.is_staff %}
+                <button>Change image: {% imageplaceholder 'header-image' %}</button>
+            {% endif %}
             {% page_has_content 'header-image' current_page %}
               {% imageplaceholder 'header-image' as image %}
               <img src="{{ MEDIA_URL }}{{ image }}" class="img-responsive" alt="">

diff --git a/pages/static/pages/css/inline-edit.css b/pages/static/pages/css/inline-edit.css
@@ -1,9 +1,11 @@
-.edit-placeholder:hover {
+
+[data-placeholder-name]:hover {
   outline: none;
   border-color: #9ecaed;
   box-shadow: 0 0 10px #9ecaed;
   cursor:pointer;
 }
+
 #edit-overlay {
   position:absolute;
   background-color:#fff;

diff --git a/pages/templates/pages/inline-edit.html b/pages/templates/pages/inline-edit.html
@@ -12,12 +12,12 @@
 <script>
   var plc = $("*").contents().filter(function(){
     return (this.nodeValue && this.nodeValue.startsWith("placeholder") && this.nodeType == Node.COMMENT_NODE)
-  })
+  });
+  var page_id = "{{ current_page.id }}";
+  var lang = "{{ lang }}";
+
   plc.each(function(i, el) {
-    $(el.parentNode).addClass('edit-placeholder');
     $(el.parentNode).attr('data-placeholder-name', el.nodeValue.split(";")[1]);
-    $(el.parentNode).attr('data-page-id', el.nodeValue.split(";")[2]);
-    $(el.parentNode).attr('data-language', el.nodeValue.split(";")[3]);
     $(el).remove();
   });
 
@@ -36,13 +36,10 @@
     //overlay.find('form').submit();
   });
 
-  $(document).on('click', '.edit-placeholder', function(){
+  $(document).on('click', '[data-placeholder-name]', function(){
     element = $(this);
     overlay.show();
     name = $(this).attr('data-placeholder-name');
-    page_id = $(this).attr('data-page-id');
-    lang = $(this).attr('data-language');
-
 
     var modify_url = '{% url "admin:page-modify-placeholder" current_page.id %}';
     modify_url = modify_url + '?content_type=' + name + '&language_id=' + lang