Site app v.3.2.1

Author: Leonid Vakulenko

wa-apps/site/css/site.min.css

@@ -51,6 +51,10 @@ class BlockStorage
         return this.data[block_id]?.data || null;
     }
 
+    getParents(block_id) {
+        return this.data[block_id]?.parents || [];
+    }
+
     setFile(block_id, key, file) {
         if (!this.data[block_id]) {
             this.data[block_id] = {

wa-apps/site/img/site.png

@@ -538,6 +538,23 @@ class SiteEditor {
         }
     }
 
+    /*checkElementsSize($block_wrapper) {
+        const $is_block = $block_wrapper.hasClass('js-seq-wrapper') ? $block_wrapper : $block_wrapper.find('.js-seq-wrapper').eq(0);
+        console.log('checkElementsSize', $is_block)
+        if ($is_block.length) {
+            const is_vertical_block = $is_block.hasClass('vseq-wrapper');
+            const is_horiz_block = $is_block.hasClass('hseq-wrapper');
+            const $elements_collection = $is_block.children().find('> .js-add-element').closest('.seq-child');
+            $elements_collection.each(function(){
+                if (is_vertical_block) {
+                        if ($(this).height() < 40 && !$(this).hasClass('small-height')) $(this).addClass('small-height');
+                } else if(is_horiz_block) {
+                        if ($(this).width() < 40 && !$(this).hasClass('small-width')) $(this).addClass('small-width'); 
+                }
+            })
+        }
+    }*/
+
     // @see copy SiteEditor.js
     sanitizeHTML(str) {
         if (!str) {

wa-apps/site/img/site16.png

@@ -13,7 +13,6 @@ var FormConstructor = ( function($) {
 
         function FormConstructor(options) {
             var that = this;
-            //const { ref } = Vue;
 
             // CONST
             //that.block_id = options["block_id"];
@@ -23,7 +22,6 @@ var FormConstructor = ( function($) {
             that.storage_data = $.form_storage.data;
             that.media_prop =  options["media_prop"];
 
-            //that.block_elements = options["form_config"].elements || null;
             that.states = {
                 block_id: options["block_id"],
                 form_config: options["form_config"],
@@ -48,10 +46,10 @@ var FormConstructor = ( function($) {
             that.vue_custom_components = that.components.custom_components;
             // CONST
 
+            //append :root styles from blockpage.wrapper.html
+            appendIframeWrapperStyles(that.$iframe_wrapper);
             // INIT
             that.vue_model = that.initVue();
-
-
         }
 
         FormConstructor.prototype.init = function(vue_model) {
@@ -94,8 +92,6 @@ var FormConstructor = ( function($) {
         FormConstructor.prototype.initVue = function() {
             var that = this;
 
-            const { reactive } = Vue;
-
             const i18n = VueI18n.createI18n({
                 locale: $.site.lang,
                 legacy: false,
@@ -107,12 +103,11 @@ var FormConstructor = ( function($) {
                 fallbackLocale: 'en',
                 messages: $.form_storage.translate
             });
-           // i18n.global.locale.value = $.site.lang;
+
             if (typeof $.vue_app === "object" && typeof $.vue_app.unmount === "function") {
                 $.vue_app.unmount();
             }
 
-
             $.vue_app = Vue.createApp({
 
                 data() {
@@ -249,7 +244,6 @@ var FormConstructor = ( function($) {
                             let arr_options = that.storage_data[this.group_config.type];
 
                             let active_option = this.block_data?.block_props?.[form_type];
-                            const form_type_custom = 'custom';
 
                             const header_name = this.group_config.name;
 
@@ -259,7 +253,7 @@ var FormConstructor = ( function($) {
                         delimiters: ['{ { ', ' } }'],
                         components: {
                             'ButtonStyleDropdown': that.vue_custom_components['component-button-color-dropdown'],
-                          },
+                        },
                         methods: {
                             change: function(option) { //put classes to remove in temp_active_option
                                 let self = this;
@@ -1636,17 +1630,8 @@ var FormConstructor = ( function($) {
                                     that.$iframe_wrapper[0].execCommand('foreColor', false, '#' + option);
                                     $(self.getSelectionBoundaryElement(false)).removeAttr("class");
                                 }
-                                //console.log(that.$iframe_wrapper[0].getSelection().focusNode, self.getSelectionBoundaryElement(true), self.getSelectionBoundaryElement(false))
-                                //if (that.$iframe_wrapper[0].getSelection().focusNode.parentNode.nodeName === "FONT")  that.$iframe_wrapper[0].getSelection().focusNode.parentNode.classList = [];
-                                //that.$iframe_wrapper[0].execCommand('removeformat');
-
                                 self.block_data.html = $editable.html();
 
-                                //self.active_option = { type: 'self_color', value: '#' + option, name: 'Self color'};
-                                /*$.wa.editor._block_settings_drawer_promise.then(function(bs) {
-                                    bs.saveBlockData(self.block_data);
-                                });
-                                console.log('saveBlockData', self.block_data)*/
                             },
                             changePalette: function(option) {
                                 let self = this;
@@ -1662,17 +1647,11 @@ var FormConstructor = ( function($) {
                                     sel.addRange(rng)
                                     //that.$iframe_wrapper[0].execCommand("SelectAll");
                                }
-                                    //that.$iframe_wrapper[0].execCommand('removeformat');
-                                    //that.$iframe_wrapper[0].execCommand('formatblock', false, 'font');
-                                    //console.log($(self.getSelectionBoundaryElement(true)).find('font'))
                                     $(self.getSelectionBoundaryElement(true)).find('font').each(function(){$(this).removeAttr("class")});
-                                    that.$iframe_wrapper[0].execCommand('foreColor', false, '#000');
-
-                                    //$(self.getSelectionBoundaryElement(true)).attr('class', option.value);
+                                    that.$iframe_wrapper[0].execCommand('foreColor', false, '#010203');
                                     that.$iframe_wrapper[0].getSelection().focusNode.parentNode.color = '';
                                     that.$iframe_wrapper[0].getSelection().focusNode.parentNode.classList = [option.value];
 
-
                                 self.block_data.html = $editable.html();
                                 $.wa.editor._block_settings_drawer_promise.then(function(bs) {
                                     bs.saveBlockData(self.block_data);
@@ -4125,8 +4104,43 @@ var FormConstructor = ( function($) {
                 }
             return false; // Возвращаем false, если все iframe имеют закрывающие теги
             }
+
         };
 
+        function appendIframeWrapperStyles(iframe_document) {
+            const root_style = Array.from(iframe_document[0].styleSheets)
+                .filter(
+                    sheet =>
+                    sheet.href === null
+                )
+                .reduce(
+                    (acc, sheet) =>
+                    (acc = [
+                        ...acc,
+                        ...Array.from(sheet.cssRules).reduce(
+                        (def, rule) =>
+                            (def =
+                            rule.selectorText === ":root"
+                                ? [
+                                    ...def,
+                                    rule
+                                ]
+                                : def),
+                        []
+                        )
+                    ]),
+                    []
+                );
+
+                if (root_style.length) {
+                    const style = document.createElement('style');
+                    style.textContent = root_style[0]?.cssText || '';
+                    document.head.appendChild(style);
+                }
+
+                //console.log(iframe_document[0].styleSheets)
+            }
+
         return FormConstructor;
 
 })(jQuery);