Wagtail integration

hypereditor/fields.py

@@ -6,8 +6,9 @@
 from django.db import models
 from django.utils.safestring import mark_safe
 
-from .blocks import get_block_class_for
-from .blocks.base import CodeRenderer
+from hypereditor.blocks import get_block_class_for
+from hypereditor.blocks.base import CodeRenderer
+from hypereditor import settings
 from django.template.loader import render_to_string
 
 
@@ -56,6 +57,22 @@ def __str__(self):
         return self.get_prep_value()
 
 
+if settings.WAGTAIL_EXISTS:
+    from wagtail.admin.edit_handlers import FieldPanel
+
+
+    class HyperEditorFieldPanel(FieldPanel):
+        object_template = "hypereditor/edit_handlers/hyper_editor_field_panel.html"
+
+        def render_as_object(self):
+            return mark_safe(render_to_string(self.object_template, {
+                'self': self,
+                self.TEMPLATE_VAR: self,
+                'field': self.bound_field,
+                'identifier': ''.join(random.choices(string.ascii_uppercase + string.digits, k=6))
+            }))
+
+
 class HyperField(models.Field):
 
     def get_internal_type(self):
@@ -92,3 +109,8 @@ def get_prep_value(self, value):
     def value_to_string(self, obj):
         value = self.value_from_object(obj)
         return self.get_prep_value(value)
+
+    if settings.WAGTAIL_EXISTS:
+
+        def get_panel(self):
+            return HyperFieldPanel

hypereditor/settings.py

@@ -1,6 +1,8 @@
 from django.conf import settings
+from django.apps import apps
 from hypereditor import utils
 
+WAGTAIL_EXISTS = apps.is_installed('wagtail.core')
 
 HYPER_SETTINGS = {
     'BLOCK_CONFIG': {},

hypereditor/templates/hypereditor/edit_handlers/hyper_editor_field_panel.html

@@ -0,0 +1,22 @@
+{% load wagtailadmin_tags static %}
+
+{% with 'hef_'|add:identifier as field_id %}
+    {% with 'hei_'|add:identifier as iframe_id %}
+
+        <fieldset style="margin-right:0px;width: 100%;max-width: 100%;">
+
+            <legend>{{ self.heading }}</legend>
+
+            <ul class="fields">
+                <li id="{{ field_id }}" , style="display:none">
+                    {% include "wagtailadmin/shared/field.html" with show_label=False show_help_text=False %}
+                </li>
+            </ul>
+
+            {% include 'hypereditor/partials/editor_iframe.html' with field_id=field_id iframe_id=iframe_id %}
+
+        </fieldset>
+
+    {% endwith %}
+{% endwith %}
+

hypereditor/templates/hypereditor/partials/editor_iframe.html

@@ -0,0 +1,73 @@
+<iframe name="editorIframe" src="#" frameborder="0" width="100%" marginheight="0" marginwidth="0"
+        id="{{ iframe_id }}"></iframe>
+
+<script>
+    (function () {
+        var field_id = '{{ field_id }}'
+        var iframe_id = '{{ iframe_id }}'
+
+        function guid() {
+            function s4() {
+                return Math.floor((1 + Math.random()) * 0x10000)
+                    .toString(16)
+                    .substring(1);
+            }
+
+            return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+        }
+
+        // generate an unique id param
+        var id = guid()
+
+        // initialize iframe
+        var iframe = document.querySelector('#' + iframe_id);
+        iframe.src = '{% url 'hypereditor:editor' %}' + '?id=' + id
+
+        // get iframe window object
+        var iframeWindow = (iframe.contentWindow || iframe.contentDocument);
+
+        function getHiddenEditor() {
+            return document.querySelector('#' + field_id + ' #hyperHiddenField')
+        }
+
+        // get hidden textarea
+        var hiddenEditor = getHiddenEditor()
+
+        // polyfill window localtion origin
+        if (!window.location.origin) {
+            window.location.origin = window.location.protocol + "//"
+                + window.location.hostname
+                + (window.location.port ? ':' + window.location.port : '');
+        }
+
+        function set_height() {
+            var height = Math.max(iframe.contentWindow.document.body.scrollHeight, 500)
+            iframe.height = height + "px"
+        }
+
+        iframe.onload = function () {
+
+            if (hiddenEditor.value && hiddenEditor.value != '') {
+                iframeWindow.postMessage({
+                    id: id,
+                    state: hiddenEditor.value
+                }, window.location.origin)
+            } else {
+                iframeWindow.postMessage({
+                    id: id,
+                    state: '[]'
+                }, window.location.origin)
+            }
+
+            window.addEventListener('message', function (e) {
+                if (e.data && e.data.id == id) {
+                    getHiddenEditor().value = e.data.state
+                    set_height()
+                }
+
+            }, false);
+
+            set_height()
+        }
+    })()
+</script>

hypereditor/templates/hypereditor/widgets/hyper_widget.html

@@ -1,81 +1,14 @@
 {% load static %}
-{% with 'hef_'|add:identifier as field_id_str %}
-{% with 'hei_'|add:identifier as iframe_id_str %}
-<div id="{{ field_id_str }}">
-    <textarea style="display:none" name="{{ widget.name }}" class="no-widget-init" id="hyperHiddenField">
-    {% if widget.value %}{{ widget.value }}{% endif %}</textarea>
 
+{% with 'hef_'|add:identifier as field_id %}
+    {% with 'hei_'|add:identifier as iframe_id %}
 
-        <iframe name="editorIframe" src="#" frameborder="0" width="100%" marginheight="0" marginwidth="0" id="{{ iframe_id_str }}"></iframe>
+        <div id="{{ field_id }}">
 
-        <script>
-            (function () {
-                var field_id = '{{ field_id_str }}'
-                var iframe_id = '{{ iframe_id_str }}'
+            <textarea style="display:none" name="{{ widget.name }}" class="no-widget-init"
+                      id="hyperHiddenField">{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
 
-                function guid() {
-                    function s4() {
-                        return Math.floor((1 + Math.random()) * 0x10000)
-                        .toString(16)
-                        .substring(1);
-                    }
-                    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-                }
-
-                // generate an unique id param
-                var id = guid()
-
-                // initialize iframe
-                var iframe = document.querySelector('#'+iframe_id);
-                iframe.src = '{% url 'hypereditor:editor' %}' + '?id=' + id
-
-                // get iframe window object
-                var iframeWindow = (iframe.contentWindow || iframe.contentDocument);
-
-                function getHiddenEditor() {
-                    return document.querySelector('#'+field_id + ' #hyperHiddenField')
-                }
-                // get hidden textarea
-                var hiddenEditor = getHiddenEditor()
-
-                // polyfill window localtion origin
-                if (!window.location.origin) {
-                    window.location.origin = window.location.protocol + "//"
-                        + window.location.hostname
-                        + (window.location.port ? ':' + window.location.port : '');
-                }
-
-                function set_height() {
-                    var height = Math.max(iframe.contentWindow.document.body.scrollHeight, 500)
-                    iframe.height= height + "px"
-                }
-
-                iframe.onload = function() {
-
-                    if (hiddenEditor.value && hiddenEditor.value != '') {
-                        iframeWindow.postMessage({
-                            id: id,
-                            state: hiddenEditor.value
-                        }, window.location.origin)
-                    } else {
-                        iframeWindow.postMessage({
-                            id: id,
-                            state: '[]'
-                        }, window.location.origin)
-                    }
-
-                    window.addEventListener('message',function(e) {
-                        if (e.data && e.data.id == id) {
-                            getHiddenEditor().value = e.data.state
-                            set_height()
-                        }
-
-                    },false);
-
-                    set_height()
-                }
-            })()
-        </script>
-</div>
-{% endwith %}
+            {% include 'hypereditor/partials/editor_iframe.html' with field_id=field_id iframe_id=iframe_id %}
+        </div>
+    {% endwith %}
 {% endwith %}