fronty-gem 0.1.0

data/vendor/assets/images/svg/logo.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 125" style="enable-background:new 0 0 500 125;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:url(#SVGID_3_);}
+	.st3{fill:url(#SVGID_4_);}
+	.st4{fill:url(#SVGID_5_);}
+</style>
+<g id="Layer_1">
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="229.9" y1="50.45" x2="486.1" y2="50.45" gradientTransform="matrix(1 0 0 -1 0 126)">
+		<stop offset="0" style="stop-color:#666666"/>
+		<stop offset="1" style="stop-color:#8D8E92"/>
+	</linearGradient>
+	<path class="st0" d="M266.2,32.8v7.4H239v20h25v7.3h-25.1v26.9h-9V32.8H266.2z M273.1,94.5v-46h6.5l1.5,9.2   c1.1-2.9,2.9-5.3,5.5-7.1c2.5-1.8,5.5-2.7,8.8-2.7c1.7,0,3.1,0.1,4.2,0.4c1.1,0.3,2.1,0.6,3,1l-1.7,7.5c-0.8-0.4-1.6-0.7-2.6-1   c-0.9-0.3-2.1-0.4-3.4-0.4c-1.9,0-3.6,0.3-5.2,1s-3,1.6-4.2,2.9c-1.2,1.3-2.2,2.9-2.8,4.8c-0.7,1.9-1,4.1-1,6.6v23.8H273.1z    M349.5,71c0,3.9-0.6,7.3-1.8,10.3c-1.2,3-2.8,5.6-4.8,7.7c-2.1,2.1-4.5,3.7-7.2,4.8s-5.7,1.6-8.9,1.6c-3.2,0-6.2-0.5-8.9-1.5   s-5.1-2.5-7.1-4.5s-3.6-4.4-4.7-7.3s-1.7-6.2-1.7-10c0-3.9,0.6-7.3,1.8-10.3c1.2-3,2.8-5.5,4.8-7.6s4.5-3.6,7.2-4.7   c2.7-1.1,5.7-1.6,8.9-1.6c3.2,0,6.2,0.5,8.9,1.5c2.7,1,5.1,2.4,7.1,4.4s3.6,4.4,4.7,7.3C348.9,63.9,349.5,67.2,349.5,71z    M340.5,71.5c0-3.1-0.4-5.7-1.2-7.8c-0.8-2.2-1.8-3.9-3.1-5.3c-1.3-1.4-2.7-2.4-4.4-3c-1.6-0.6-3.3-0.9-5-0.9s-3.4,0.3-5,0.8   s-3.1,1.4-4.3,2.7c-1.2,1.3-2.2,3.1-3,5.2c-0.8,2.2-1.1,4.9-1.1,8.3c0,3.1,0.4,5.7,1.2,7.9c0.8,2.2,1.8,4,3.1,5.3s2.7,2.4,4.4,3   c1.6,0.7,3.3,1,5,1s3.4-0.3,5-0.8c1.6-0.6,3.1-1.5,4.3-2.8c1.2-1.3,2.2-3.1,3-5.3C340.1,77.6,340.5,74.8,340.5,71.5z M368.6,94.5   H360v-46h6.8l1.3,6.4c2.3-2.3,4.7-4,7.2-5.2s5.4-1.8,8.7-1.8c4.7,0,8.4,1.3,11.1,4c2.7,2.6,4,6.3,4,11v31.7h-8.6V64   c0-2.8-0.7-5-2.2-6.7s-3.7-2.5-6.7-2.5c-4.6,0-8.8,2.1-12.8,6.2v33.5H368.6z M436,54.9h-13.5v26.7c0,2.3,0.6,3.8,1.7,4.6   c1.1,0.8,2.6,1.2,4.5,1.2c1.3,0,2.7-0.1,4.3-0.4c1.6-0.3,2.9-0.6,4.1-1l1.4,6.6c-1.3,0.5-3,1-5,1.4s-4.1,0.6-6.4,0.6   c-4.6,0-7.9-1-10-3s-3.1-4.9-3.1-8.7v-28h-6.9v-6.5h6.9V33.8h8.5v14.7H436V54.9z M442.6,48.5h9.2l9.8,26.3l3.3,11h0.2l3.3-11   l8.9-26.3h8.8l-17.7,49.9c-2,5.5-4.4,9.9-7.4,13s-6.5,5.4-10.6,6.9l-3.7-6.9c3.1-1.2,5.8-2.9,8.2-5.1c2.4-2.2,4.2-5.3,5.5-9.2   l0.9-2.6L442.6,48.5z"/>
+</g>
+<g id="Layer_2">
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="55.3656" y1="16.2" x2="55.3656" y2="111.2">
+		<stop offset="0" style="stop-color:#FF2D55;stop-opacity:0.8"/>
+		<stop offset="1" style="stop-color:#FF2676;stop-opacity:0.8"/>
+	</linearGradient>
+	<polygon class="st1" points="58.7,16.2 96.4,16.2 52,63.7 96.4,111.2 58.7,111.2 14.3,63.7  "/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="160.1625" y1="16.2" x2="160.1625" y2="111.2">
+		<stop offset="0" style="stop-color:#007AFF;stop-opacity:0.8"/>
+		<stop offset="1" style="stop-color:#00B9FF;stop-opacity:0.8"/>
+	</linearGradient>
+	<polygon class="st2" points="156.8,111.2 119.1,111.2 163.5,63.7 119.1,16.2 156.8,16.2 201.2,63.7  "/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="88.1656" y1="16.2" x2="88.1656" y2="111.2">
+		<stop offset="0" style="stop-color:#000000;stop-opacity:0.7"/>
+		<stop offset="1" style="stop-color:#000000;stop-opacity:0.7"/>
+	</linearGradient>
+	<polygon class="st3" points="124.4,16.2 85.2,63.7 124.4,111.2 91.1,111.2 51.9,63.7 91.1,16.2  "/>
+	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="127.3625" y1="16.2" x2="127.3625" y2="111.2">
+		<stop offset="0" style="stop-color:#FFCC00;stop-opacity:0.7"/>
+		<stop offset="1" style="stop-color:#FF8D00;stop-opacity:0.7"/>
+	</linearGradient>
+	<polygon class="st4" points="91.1,111.2 130.3,63.7 91.1,16.2 124.4,16.2 163.6,63.7 124.4,111.2  "/>
+</g>
+</svg>

data/vendor/assets/javascript/fronty-designer-init.js

@@ -0,0 +1,491 @@
+const token = $('meta[name="csrf-token"]').attr('content');
+
+
+function getCurrentPage() {
+    return window.location.hash.split('#')[1].split('/')[1];
+}
+
+
+function showAlert(message, type) {
+    let flashAlert = $('.flash-message');
+
+    if (type === 'error') {
+        type = 'danger'
+    }
+
+    flashAlert.find('.alert-text').text(message);
+    flashAlert.addClass(`bg-${type}`);
+    flashAlert.removeClass('d-none');
+
+    setTimeout(function () {
+        flashAlert.addClass('d-none');
+    }, 3000);
+}
+
+
+function loadPages() {
+    $('.alert-close').on('click', function() {
+        $('.flash-message').addClass('d-none');
+    });
+    // let x = $('select[name=startTemplateUrl]');
+
+    fetch('/get_pages', {
+        method: 'GET',
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-CSRF-Token': token
+        },
+        credentials: 'same-origin'
+    }).then(function (response) {
+        return response.json();
+    }).then(function (routes) {
+        let newRoutes = [];
+        for (let i = 0; i < routes.length; i++) {
+            newRoutes.push({
+                name: routes[i]['id'],
+                title: routes[i]['title'],
+                url: routes[i]['route'],
+                thumbnail: routes[i]['thumbnail'],
+                redirect_to: routes[i]['redirect_to']
+            });
+        }
+
+        Fronty.Gui.init();
+        Fronty.FileManager.init();
+
+        Fronty.FileManager.addPages = function (pages) {
+            for (page in pages) {
+                this.pages[pages[page]['name']] = {
+                    title: pages[page]['title'],
+                    url: pages[page]['url'],
+                    thumbnail: pages[page]['thumbnail'],
+                    redirect_to: pages[page]['redirect']
+                };
+
+                this.tree.append(
+                    tmpl("fronty-filemanager-page-custom", {
+                        name: pages[page]['name'],
+                        title: pages[page]['title'],
+                        url: pages[page]['url'],
+                        thumbnail: pages[page]['thumbnail'],
+                        redirect_to: pages[page]['redirect_to']
+                    })
+                );
+
+
+                $('select[name="startTemplateUrl"]').append($(`<option value="${pages[page]['url']}">${pages[page]['title']}</option>`));
+            }
+        };
+
+        Fronty.FileManager.addPages(newRoutes);
+
+        let currentPageRoute = getCurrentPage();
+
+        if (!currentPageRoute) {
+            currentPageRoute = newRoutes[0].name;
+        }
+
+        Fronty.FileManager.loadPage(currentPageRoute);
+
+        return newRoutes;
+    }).then(function (newRoutes) {
+        $('a[rel="popover"]').popover({
+            html: true,
+            content: function () {
+                if ($(this).data('thumbnail'))
+                    return '<img src="' + $(this).data('thumbnail') + '" alt="" width="90" class="rounded">';
+                if ($(this).data('redirect'))
+                    return $(this).data('redirect');
+            },
+            template: '<div class="popover shadow-sm" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body p-0"></div></div>'
+        });
+    });
+}
+
+
+(function () {
+    // Add image editor icon on select menu
+    $('#drag-btn').after($(' <a id="edit-image-btn" href="" title="Edit image"><i class="la la-pencil"></i></a>'));
+
+
+    $("#edit-image-btn").on("mousedown", function (event) {
+        jQuery("#select-box").hide();
+
+        $('#image-edit-modal').modal();
+
+        var node = Fronty.Builder.selectedEl.get(0);
+
+        var imageEditor = new tui.ImageEditor('#tui-image-editor', {
+            includeUI: {
+                loadImage: {
+                    path: node.src,
+                    name: 'SampleImage'
+                },
+                theme: blackTheme,
+                menuBarPosition: 'bottom'
+            },
+            usageStatistics: false,
+            cssMaxWidth: 800,
+            cssMaxHeight: 800
+        });
+
+        $(document).off('click', '.apply-image-changes');
+
+        $('.tui-image-editor-download-btn').hide().after('<button class="apply-image-changes">Apply</button>');
+
+        $(document).on('click', '.apply-image-changes', function (event) {
+            node.src = imageEditor.toDataURL();
+
+            $('#image-edit-modal').modal('hide');
+
+            event.preventDefault();
+            return false;
+        });
+
+        event.preventDefault();
+        return false;
+    });
+
+    $('#top-panel').append($(`
+        <div class="btn-group mr-3" role="group">
+            <button class="btn btn-light" title="Update from Repo" id="git-pull">
+                <i class="la la-cloud-download"></i>
+            </button>
+            <button class="btn btn-light" title="Commit to Repo" id="git-push">
+                <i class="la la-cloud-upload"></i>
+            </button>
+        </div>
+    `));
+
+    let filesList = $('.tree ol');
+
+    $('#git-pull').on('click', function () {
+        fetch('/designer/git_pull', {
+            method: 'POST',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-Token': token,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            credentials: 'same-origin'
+        }).then(function (response) {
+            return response.json()
+        }).then(function (data) {
+            console.log(data);
+        })
+    });
+
+    $('#git-push').on('click', function () {
+        fetch('/designer/git_push', {
+            method: 'POST',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-Token': token,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            credentials: 'same-origin'
+        }).then(function (response) {
+            return response.json()
+        }).then(function (data) {
+            console.log(data);
+        })
+    });
+
+    Fronty.Builder.init();
+    loadPages();
+
+
+    $('input[name="is_home"]').change(function () {
+        let routeInput = $('input[name="route"]');
+        if (this.checked) {
+            routeInput.val('/');
+            routeInput.prop('disabled', true);
+        } else {
+            routeInput.val('');
+            routeInput.prop('disabled', false);
+        }
+    });
+
+    // New Page modal radio
+    $('input[name="new_page_type"]').on('change', function () {
+        var value = $('input[name="new_page_type"]:checked').val();
+        $('.page-type').addClass('d-none');
+        $('.page-type.' + value).removeClass('d-none');
+    });
+
+    $('#save-btn').on('click', function (e) {
+        e.preventDefault();
+
+        let route = Fronty.FileManager.getCurrentUrl();
+        let html = Fronty.Builder.getHtml();
+
+        let formData = new FormData();
+        formData.append('authenticity_token', token);
+        formData.append('route', route);
+        formData.append('html', html);
+
+        $.ajax({
+            type: "POST",
+            url: '/designer/save',
+            data: formData,
+            contentType: false,
+            processData: false,
+            success: function (data, response) {
+                showAlert('Data successfully saved!', 'success');
+                loadPages();
+            },
+            error: function () {
+                showAlert('Document not saved!', 'error');
+            }
+        });
+    });
+
+    filesList.on('click', 'a[rel="popover"]', function (e) {
+        e.preventDefault();
+        if (!$(this).data('redirect')) {
+            window.location.hash = '#/' + $(this).parent().attr('for');
+            // $('a[rel="popover"]').popover('dispose');
+            $(this).parent('label').trigger('click');
+            // $(this).parent().next('input').prop('checked', true)
+            console.log('asd', this)
+            // loadPages();
+        }
+    });
+
+    filesList.on('click', '.page-remove', function (e) {
+        e.preventDefault();
+        let self = this;
+
+        fetch('/designer/remove', {
+            method: 'POST',
+            body: JSON.stringify({
+                route: $(self).parent().data('url')
+            }),
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-Token': token,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            credentials: 'same-origin'
+        }).then(function (response) {
+            return response.json();
+        }).then(function (response) {
+            loadPages();
+        })
+    });
+
+    filesList.on('click', '.page-edit', function (e) {
+        e.preventDefault();
+
+        let editModal = $('#editModal'),
+            redirectField = $('form[name="editForm"] input[name="redirect"]'),
+            routeField = $('form[name="editForm"] input[name="route"]'),
+            titleField = $('form[name="editForm"] input[name="title"]'),
+            nameField = $('form[name="editForm"] input[name="name"]'),
+            idField = $('form[name="editForm"] input[name="id"]');
+
+        editModal.modal('show');
+        let route = $(this).parent().data('url');
+
+        fetch('/designer/get_page_by_route', {
+            method: 'POST',
+            body: JSON.stringify({
+                route: route,
+            }),
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-Token': token,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            credentials: 'same-origin'
+        }).then(function (response) {
+            return response.json();
+        }).then(function (data) {
+            let redirectTo = data.redirect_to,
+                route = data.route,
+                title = data.title,
+                name = data.name,
+                id = data.id;
+
+            redirectField.val(redirectTo);
+            routeField.val(route);
+            titleField.val(title);
+            nameField.val(name);
+            idField.val(id);
+        });
+    });
+
+    $('#new-page-modal').on('shown.bs.modal', function (e) {
+        let $form = $(this).find('form');
+
+        $form.off().submit(function (e) {
+            e.preventDefault();
+            let formData = new FormData();
+
+            let attachment = $form.find('input[name=image]'),
+                template = $form.find('select[name=startTemplateUrl]'),
+                titleField = $form.find('input[name=title]'),
+                routeField = $form.find('input[name=route]'),
+                redirectField = $form.find('input[name=redirectUrl]');
+
+            formData.append('image', attachment[0].files[0]);
+            formData.append('template', template.val());
+            formData.append('title', titleField.val());
+            formData.append('route', routeField.val());
+
+            let preLoading;
+            if (!template.val()) {
+                console.log(template);
+                let $progressBar = $(`<div class="progress"><div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>`);
+
+                $('#new-page-modal .modal-body .form-group').hide();
+                $('#new-page-modal .modal-footer').empty();
+                $('#new-page-modal .modal-body').append($progressBar);
+
+                let s = 0;
+                preLoading = setInterval(function () {
+                    if (s === 10) {
+                        clearInterval(preLoading);
+                    }
+                    $('.progress .progress-bar').text(s + '%');
+                    $('.progress .progress-bar').attr('style', `width: ${s}%;`);
+                    s++;
+                }, 1000);
+            }
+
+            $.ajax({
+                type: "POST",
+                url: '/designer/create',
+                data: formData,
+                contentType: false,
+                processData: false,
+                success: function (data) {
+                    if (data.status === 'success') {
+
+                        window.location.hash = '#/' + data.id;
+                        $('#new-page-modal').modal('hide');
+                        loadPages()
+                        return
+                    }
+
+                    clearInterval(preLoading);
+
+                    let thumbnailUrl = data.thumbnail;
+                    var job_id = data.job_id;
+                    var start = 10;
+                    var maxPercent = 11;
+                    var timer = setInterval(function () {
+                        fetch('/designer/get_status/' + job_id, {
+                            method: 'GET',
+                            headers: {
+                                'Accept': 'application/json',
+                                'Content-Type': 'application/json',
+                                'X-Requested-With': 'XMLHttpRequest',
+                                'X-CSRF-Token': token
+                            },
+                            credentials: 'same-origin'
+                        }).then(function (response) {
+                            return response.json();
+                        }).then(function (response) {
+                            var maxPercentFromServer = response.data.meta.percent;
+                            if (maxPercent === maxPercentFromServer && start < maxPercent) {
+                                start += 1
+                            } else if (maxPercent < maxPercentFromServer) {
+                                start = maxPercent;
+                                maxPercent = maxPercentFromServer
+                            }
+                            $('.progress .progress-bar').text(start + '%');
+                            $('.progress .progress-bar').attr('style', `width: ${start}%;`);
+                            if (['finished', 'failed'].includes(response.data.status)) {
+                                clearInterval(timer);
+                                var formData = new FormData();
+
+                                let route = routeField.val();
+                                if (route[0] !== '/') {
+                                    route = '/' + route;
+                                }
+
+                                formData.append('title', titleField.val());
+                                formData.append('route', route);
+                                formData.append('uid', response.data.meta.uid);
+                                formData.append('redirect', redirectField.val());
+                                formData.append('thumbnail', thumbnailUrl);
+                                fetch('/designer/create_new_page', {
+                                    method: 'POST',
+                                    headers: {
+                                        'X-Requested-With': 'XMLHttpRequest',
+                                        'X-CSRF-Token': token
+                                    },
+                                    credentials: 'same-origin',
+                                    body: formData
+                                }).then(function (response) {
+                                    return response.json();
+                                }).then(function (data) {
+                                    window.location.hash = '#/' + data.id;
+                                    $('#new-page-modal').modal('hide');
+                                    loadPages()
+                                })
+                            }
+                        })
+                    }, 1000);
+                },
+                beforeSend: function (xhr) {
+                    xhr.setRequestHeader('X-CSRF-Token', token)
+                }
+            });
+        })
+    });
+
+
+    $('form[name="editForm"] button').on('click', function (e) {
+        e.preventDefault();
+
+        let redirect = $('form[name="editForm"] input[name="redirect"]').val(),
+            route = $('form[name="editForm"] input[name="route"]').val(),
+            title = $('form[name="editForm"] input[name="title"]').val(),
+            id = $('form[name="editForm"] input[name="id"]').val();
+
+        console.log(redirect);
+
+        if (route[0] !== '/') {
+            route = '/' + route;
+        }
+
+        fetch('/designer/update', {
+            method: 'POST',
+            body: JSON.stringify({
+                redirect: redirect,
+                route: route,
+                title: title,
+                id: id
+            }),
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-Token': token,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            credentials: 'same-origin'
+        }).then(function (response) {
+            return response.json();
+        }).then(function (response) {
+            $('#editModal').modal('hide');
+            showAlert('Data successfully updated!', 'success');
+            loadPages();
+        }).catch(function () {
+            showAlert('Document not updated!', 'error');
+        })
+    });
+
+    // Fronty.Builder.frameHtml.on("click", function(event) {
+    //     jQuery("#select-box").find('#edit-image-btn').hide();
+    //
+    //     if(Fronty.Builder.selectedEl.get(0).nodeName == "IMG") {
+    //         jQuery("#select-box").find('#edit-image-btn').show();
+    //     }
+    // });
+})();