Merge 88fb8ec into 7d9e6a7

5monkeys · Feb 10, 2019 · c808c63 · c808c63
2 parents 7d9e6a7 + 88fb8ec
commit c808c63
Show file tree

Hide file tree

Showing 26 changed files with 154 additions and 83 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,4 +17,3 @@ htmlcov/
 node_modules/
 .next/
 example/db.sqlite3
-example/djedi/img/
diff --git a/README.md b/README.md
@@ -75,6 +75,6 @@ urlpatterns = [
 
 * [React][]: [djedi-react](djedi-react#djedi-react)
 
-[docs]: http://5monkeys.github.io/djedi-cms/
+[docs]: https://djedi-cms.org/
 [content-io]: https://github.com/5monkeys/content-io/
 [react]: https://reactjs.org/
diff --git a/djedi-react/pages/index.js b/djedi-react/pages/index.js
@@ -63,6 +63,12 @@ export default class Home extends React.Component {
           </Link>
         </p>
 
+        <p>
+          <Link href={{ pathname: "/lots" }}>
+            <a>Lots of nodes</a>
+          </Link>
+        </p>
+
         {/* Image node. */}
         <Node uri="home/image.img" />
 

diff --git a/djedi-react/pages/lots.js b/djedi-react/pages/lots.js
@@ -0,0 +1,31 @@
+import { Node } from "djedi-react";
+import Head from "next/head";
+import React from "react";
+
+import Link from "../components/Link";
+
+export default class Lots extends React.Component {
+  render() {
+    return (
+      <div>
+        <Head>
+          <title>Lots of nodes</title>
+        </Head>
+
+        <p>
+          <Link href={{ pathname: "/" }}>
+            <a>Home</a>
+          </Link>
+        </p>
+
+        {Array.from({ length: 30 }, (_, i) =>
+          Array.from({ length: i + 1 }, (_2, j) => (
+            <p key={j}>
+              <Node uri={`lots${i + 1}/node/${j + 1}`}>Test</Node>
+            </p>
+          ))
+        )}
+      </div>
+    );
+  }
+}
diff --git a/djedi/plugins/img.py b/djedi/plugins/img.py
@@ -117,21 +117,25 @@ def delete(self, data):
 
     def render(self, data):
         attrs = {
-            'src': 'http://placekitten.com/160/90',
+            # Use a data URI so that the image works without hassle even if the
+            # Djedi backend and frontend run on different domains. The base64
+            # part was made by running:
+            # $ svgo djedi/static/djedi/placeholder.svg -o - | openssl base64 | tr -d '\n'
+            # 'src': '/static/djedi/placeholder.svg',
+            'src': 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYwIDkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIG9wYWNpdHk9Ii4yNSIgZmlsbD0iIzIwYjJhYSIgZD0iTTAgMGgxNjB2OTBIMHoiLz48L3N2Zz4K',  # noqa: E501
             'width': 160,
             'height': 90
         }
         if data:
             url = data.get('url')
             width = data.get('width') or 0
             height = data.get('height') or 0
-            alt = data.get('alt')
+            alt = data.get('alt') or ''
             tag_id = data.get('id')
             tag_class = data.get('class')
             if url:
                 attrs['src'] = url
-            if alt:
-                attrs['alt'] = alt
+            attrs['alt'] = alt
             if width and height:
                 attrs['width'] = width
                 attrs['height'] = height

diff --git a/djedi/static/djedi/cms/js/cms.coffee b/djedi/static/djedi/cms/js/cms.coffee
@@ -154,7 +154,10 @@ class Search
         uri = node.uri
         color = (uri.ext[0].toUpperCase().charCodeAt() - 65) % 5 + 1
 
-        parts = (part[0].toUpperCase() + part[1..-1] for part in uri.path.split '/')
+        parts = (
+          for part in uri.path.split '/' when part != ''
+            (part[..0].toUpperCase() + part[1..-1]).replace /[_-]/g, ' '
+        )
         path = parts[1..].join " <span class=\"plugin-fg-#{color}\">/</span> "
 
         lang = uri.namespace
@@ -165,13 +168,11 @@ class Search
         if not groups[root]
           $panel = $ """
                      <div class="panel panel-default">
-                       <div class="panel-heading">
+                       <a class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#search-result" href="#node-group-#{root.toLowerCase()}">
                          <h4 class="panel-title">
-                           <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#search-result" href="#node-group-#{root.toLowerCase()}">
-                             <i class="icon-chevron-sign-down"></i> #{root}
-                           </a>
+                           <i class="icon-chevron-sign-down"></i> #{root}
                          </h4>
-                       </div>
+                       </a>
                      </div>
                      """
           $group = $ """
@@ -254,6 +255,7 @@ class Plugin
 
     # Create iframe
     @$el = $ '<iframe>'
+    @$el.attr 'id', 'editor-iframe'
     @$el.one 'load', @connect
     @navigate @uri
 
@@ -275,17 +277,6 @@ class Plugin
     @$doc.on 'node:resize', Events.handler
     @$doc.on 'page:node:fetch', (event, uri, callback) => callback data: @node.data, content: @node.getContent()
 
-    @render()
-
-  render: ->
-    # Resize and show frame
-    @resize @$doc.find('#form').outerHeight yes
-    @$el
-
-  resize: (height) ->
-    console.log 'Plugin.resize()'
-    @$el.animate {height: "#{height}px"}, 400
-
   close: ->
     @node.deselect()
     @$el.remove()

diff --git a/djedi/static/djedi/cms/js/cms.js b/djedi/static/djedi/cms/js/cms.js
diff --git a/djedi/static/djedi/placeholder.svg b/djedi/static/djedi/placeholder.svg
diff --git a/djedi/static/djedi/plugins/base/js/editor.coffee b/djedi/static/djedi/plugins/base/js/editor.coffee
@@ -263,7 +263,10 @@ class window.Editor
     uri = node.uri
     color = (uri.ext[0].toUpperCase().charCodeAt() - 65) % 5 + 1
 
-    parts = (part[0].toUpperCase() + part[1..-1] for part in uri.path.split '/')
+    parts = (
+      for part in uri.path.split '/' when part != ''
+        (part[..0].toUpperCase() + part[1..-1]).replace /[_-]/g, ' '
+    )
     path = parts.join " <span class=\"plugin-fg-#{color}\">/</span> "
 
     lang = uri.namespace.split('-')[0] if uri.scheme == 'i18n'

diff --git a/djedi/static/djedi/plugins/base/js/editor.js b/djedi/static/djedi/plugins/base/js/editor.js
diff --git a/djedi/static/djedi/plugins/img/js/img.coffee b/djedi/static/djedi/plugins/img/js/img.coffee
@@ -251,8 +251,8 @@ class window.ImageEditor extends window.Editor
     @ratioButton = $ '#ar-lock'
 
     # Field events
-    $('.dimension').on 'keyup', @resizeImage
-    $('#html-pane input').on 'keyup', => @updateImageAttributes()
+    $('.dimension').on 'input', @resizeImage
+    $('#html-pane input').on 'input', => @updateImageAttributes()
     @ratioButton.on 'click', @toggleAspectRatio
     @ratioButton.tooltip()
 

diff --git a/djedi/static/djedi/plugins/img/js/img.js b/djedi/static/djedi/plugins/img/js/img.js
diff --git a/djedi/static/djedi/themes/base/theme.less b/djedi/static/djedi/themes/base/theme.less
@@ -74,6 +74,7 @@ body {
     }
 
     .embed-shadow {
+      pointer-events: none;
       width: 10px;
       height: 100%;
       position: absolute;
@@ -97,6 +98,8 @@ iframe {
 }
 
 #search-panel {
+  max-height: calc(100vh - 50px);
+  overflow-y: auto;
 
   .search-bar {
     padding: 20px;
@@ -294,27 +297,22 @@ body {
 }
 
 .panel-heading {
+  display: block;
+
+  &:hover, &:focus {
+    text-decoration: none;
+  }
 
   &:hover {
     background-color: darken(@panel-default-heading-bg, 2%);
   }
 
   .panel-title {
     font-size: 1.1em;
-
-    a {
-      display: block;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
   }
 }
 
 .panel-collapse {
-  max-height: 170px;
-  overflow-y: scroll;
   margin-bottom: 0;
 
   &::-webkit-scrollbar {
@@ -337,8 +335,14 @@ body {
 // Editor
 // --------------------------------------------------
 
+#editor-iframe {
+  height: 395px;
+  max-height: calc(100vh - 70px);
+}
+
 #editor {
   height: 360px;
+  max-height: calc(100vh - 35px);
   padding: 20px 20px 54px 20px;
 
   textarea {

diff --git a/djedi/static/djedi/themes/darth/theme.css b/djedi/static/djedi/themes/darth/theme.css
@@ -6025,6 +6025,7 @@ body.embedded {
   overflow: hidden;
 }
 body.embedded .embed-shadow {
+  pointer-events: none;
   width: 10px;
   height: 100%;
   position: absolute;
@@ -6043,6 +6044,10 @@ iframe {
   border: 0;
   display: block;
 }
+#search-panel {
+  max-height: calc(100vh - 50px);
+  overflow-y: auto;
+}
 #search-panel .search-bar {
   padding: 20px;
 }
@@ -6268,21 +6273,19 @@ body.open .navbar-brand > a > i.dc-djedi-icon {
   box-shadow: inset 7px 6px 10px -10px #000000;
   color: #eeeeee;
 }
+.panel-heading {
+  display: block;
+}
+.panel-heading:hover, .panel-heading:focus {
+  text-decoration: none;
+}
 .panel-heading:hover {
   background-color: #1b1b1b;
 }
 .panel-heading .panel-title {
   font-size: 1.1em;
 }
-.panel-heading .panel-title a {
-  display: block;
-}
-.panel-heading .panel-title a:hover {
-  text-decoration: none;
-}
 .panel-collapse {
-  max-height: 170px;
-  overflow-y: scroll;
   margin-bottom: 0;
 }
 .panel-collapse::-webkit-scrollbar {
@@ -6296,8 +6299,13 @@ body.open .navbar-brand > a > i.dc-djedi-icon {
   border-radius: 2px;
   background: #428bca;
 }
+#editor-iframe {
+  height: 395px;
+  max-height: calc(100vh - 70px);
+}
 #editor {
   height: 360px;
+  max-height: calc(100vh - 35px);
   padding: 20px 20px 54px 20px;
 }
 #editor textarea {