<commit_before>﻿@using NetCoreCMS.Framework.Utility
@using NetCoreCMS.Framework.Modules
@using System.Linq;

@{
    Layout = Constants.AdminLayoutName;
}

<div class="row">

    <div class="col-lg-12">
        <div class="col-lg-7">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Widgets
                </div>
                <div class="panel-body">
                    @foreach (IModule item in ViewBag.Modules)
                    {
                        if (item.Widgets.Count > 0)
                        {
                            <div class="col-md-6">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">@item.ModuleTitle</div>
                                    <div id="Container_@item.ModuleId" data-module-id="@item.ModuleId"  class="panel-body"  ondrop="dropBack(event)" ondragover="allowDrop(event)">
                                        @foreach (IWidget widget in item.Widgets)
                                        {                                            
                                            <div id="SRC_@widget.WidgetId" data-widget-id="@widget.WidgetId" data-module-id="@item.ModuleId" class="panel panel-default" draggable="true" ondragstart="drag(event)">
                                                <div class="panel-heading">
                                                    <i class="glyphicon glyphicon-move margin-right-10"></i>&nbsp;
                                                    <a data-toggle="collapse" href="#collapse_@widget.WidgetId.Replace('.', '_')">@widget.Title</a>
                                                </div>
                                                <div id="collapse_@widget.WidgetId.Replace('.', '_')" class="panel-collapse collapse">
                                                    <div class="panel-body">
                                                        @widget.Description
                                                    </div>
                                                </div>
                                            </div>                                            
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                    }
                </div>
            </div>
        </div>
        <div class="col-lg-5">

            <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                    Layout Zones
                </div>
                <div class="panel-body">
                    <ul class="nav nav-tabs">
                        @{
                            var active = "active";
                            var ariaExpanded = "aria-expanded=\"true\"";
                        }
                        @foreach (var layout in GlobalConfig.ActiveTheme.Layouts)
                        {
                            var tabName = "#tab_" + layout.Name.Replace(' ', '_');

                            <li class="@active">
                                <a href="@tabName" data-toggle="tab" @ariaExpanded  > @layout.Name.Replace("Layout", "") </a>
                            </li> 

                            active = "";
                            ariaExpanded = "";
                        }
                    </ul>
                    <div class="tab-content">
                        <br/>
                        @{
                            active = "active";
                        }
                        @foreach (var layout in GlobalConfig.ActiveTheme.Layouts)
                        {
                            var tabName = "tab_" + layout.Name.Replace(' ','_');
                                                      
                            <div class="tab-pane @active" id="@tabName">
                                <div>Widget Sections for layout <strong>@layout.Name</strong> </div>
                                @foreach (var zone in layout.LayoutZones)
                                {   
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            @zone
                                        </div>
                                        <div data-theme-id="@GlobalConfig.ActiveTheme.ThemeId"  data-layout-name="@layout.Name" data-layout-zone="@zone" class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
                                            Drop widget here
                                            @{
                                                var wZones = ((List<NccWebSiteWidget>)ViewBag.WebsiteWidgetZones).Where(x => x.Zone == zone && x.LayoutName == layout.Name).ToList();
                                                foreach (var wZone in wZones)
                                                {
                                                    var wList = new List<IWidget>();
                                                    foreach( var x in (List<NetCoreCMS.Framework.Modules.IModule>)ViewBag.Modules){
                                                        wList.AddRange(x.Widgets);
                                                    }
                                                    var w = wList.Where(x => x.WidgetId == wZone.WidgetId).FirstOrDefault();

                                                    if (w != null) {
                                                        <div id="@wZone.Id" data-widget-id="@wZone.WidgetId" data-module-id="@wZone.ModuleId" data-theme-id="@wZone.ThemeId"  data-layout-name="@wZone.LayoutName" data-layout-zone="@wZone.Zone" class="panel panel-default" draggable="true" ondragstart="drag(event)" >
                                                        <div class="panel-heading">
                                                            <i class="glyphicon glyphicon-move margin-right-10"></i>&nbsp;
                                                            <a data-toggle="collapse" href="#collapse_@wZone.Id">@w.Title</a>
                                                        </div>
                                                        <div id="collapse_@wZone.Id" class="panel-collapse collapse">
                                                            <div class="panel-body">
                                                                 @w.Description
                                                            </div>
                                                        </div>
                                                    </div>
                                                    }
                                                }
                                            }
                                        </div>
                                    </div>
                                }
                            </div>
                                
                            active = ""; 
                        } 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("widgetId", ev.target.id);
    }

    function drop(ev) {
        console.log("Drop");
        ev.preventDefault();
        var targetDiv = ev.target;
        var divId = ev.dataTransfer.getData("widgetId");
        var div = document.getElementById(divId);
        targetDiv.appendChild(div);
        //var div1 = document.getElementById(divId);
        //var destinationDiv = document.getElementById("Container_" + $(div1).attr("data-module-id"));
        //destinationDiv.appendChild(div1);
        var moduleId = $(div).attr("data-module-id");
        var zone = $(targetDiv).attr("data-layout-zone");
        var layout = $(targetDiv).attr("data-layout-name");
        var theme = $(targetDiv).attr("data-theme-id");
        var widgetId = $(div).attr("data-widget-id");

        $(div).attr("data-theme-id", theme);
        $(div).attr("data-layout-name", layout);
        $(div).attr("data-layout-zone", zone);
        NccPageMask.ShowLoadingMask();
        $.ajax({
            method: 'POST',
            url: '/CmsWidget/SaveZoneWidget',
            data: { module: moduleId, theme: theme, layout: layout, zone: zone, widget: widgetId },
            success: function (rsp) {
                NccPageMask.HideLoadingMask();
                console.log(rsp);
                NccGlobalAlert.ShowSuccess(rsp.message);
            },
            error: function (rsp) {
                NccPageMask.HideLoadingMask();
                NccGlobalAlert.ShowError("Error occoured. Please try again after refresh the page.");
            }
        });
    }

    function removeWidget(moduleId, theme, layout, zone, widgetId) {
        NccPageMask.ShowLoadingMask();
        $.ajax({
            method: 'POST',
            url: '/CmsWidget/RemoveZoneWidget',
            data: { module: moduleId, theme: theme, layout: layout, zone: zone, widget: widgetId },
            success: function (rsp) {
                NccPageMask.HideLoadingMask();
                console.log(rsp);
                NccGlobalAlert.ShowSuccess(rsp.message);
            },
            error: function (rsp) {
                NccPageMask.HideLoadingMask();
                NccGlobalAlert.ShowError("Error occoured. Please try again after refresh the page.");
            }
        });
    }

    function dropBack(ev) {
        console.log("Drop back");
        ev.preventDefault();
        var targetDiv = ev.target;
        var divId = ev.dataTransfer.getData("widgetId");
        var div = document.getElementById(divId);
        var destModuleId = $(targetDiv).attr("data-module-id");
        var srcModuleId = $(div).attr("data-module-id");

        if (srcModuleId != destModuleId) {
            NccGlobalAlert.ShowError("Different module widget. Drop into it's module panel.");
        }
        else {

            var zone = $(div).attr("data-layout-zone");
            var layout = $(div).attr("data-layout-name");
            var theme = $(div).attr("data-theme-id");
            var widgetId = $(div).attr("data-widget-id");

            targetDiv.appendChild(div);
            removeWidget(destModuleId, theme, layout, zone, widgetId);
        }
    }

</script><commit_msg>widget drag drop improved.<commit_after>﻿@using NetCoreCMS.Framework.Utility
@using NetCoreCMS.Framework.Modules
@using System.Linq;

@{
    Layout = Constants.AdminLayoutName;
}

<style>
    .ncc-widget-box-container .ncc-widget-box {
        width:48%;
        float:left;
        margin-right: 2%;
    }
</style>

<div class="row">

    <div class="col-lg-12">
        <div class="col-lg-7">
            <div id="ncc-module-widget-box-container" class="panel panel-default" ondrop="dropBack(event)" ondragover="allowDrop(event)">
                <div class="panel-heading">
                    Widgets
                </div>
                <div class="panel-body ncc-widget-box-container">
                    @foreach (IModule item in ViewBag.Modules)
                    {
                        if (item.Widgets.Count > 0)
                        {
                            @*<div class="col-md-6">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">@item.ModuleTitle</div>
                                    <div id="Container_@item.ModuleId" data-module-id="@item.ModuleId"  class="panel-body"  ondrop="dropBack(event)" ondragover="allowDrop(event)">*@
                                        @foreach (IWidget widget in item.Widgets)
                                        {   <div id="@Guid.NewGuid().ToString()" class="ncc-widget-box" data-widget-id="@widget.WidgetId" data-module-id="@item.ModuleId"  draggable="true" ondragstart="drag(event)">                                     
                                                <div class="panel panel-default" >
                                                    <div class="panel-heading">
                                                        <i class="glyphicon glyphicon-move margin-right-10"></i>&nbsp;
                                                        <a draggable="false" data-toggle="collapse" href="#collapse_@widget.WidgetId.Replace('.', '_')">@widget.Title (@item.ModuleTitle)</a>
                                                    </div>
                                                    <div id="collapse_@widget.WidgetId.Replace('.', '_')" class="panel-collapse collapse">
                                                        <div class="panel-body">
                                                            @widget.Description
                                                        </div>
                                                    </div>
                                                </div>                    
                                            </div>
                                        }
                                    @*</div>
                                </div>
                            </div>*@
                        }
                    }
                </div>
            </div>
        </div>
        <div class="col-lg-5">

            <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                    Layout Zones
                </div>
                <div class="panel-body">
                    <ul class="nav nav-tabs">
                        @{
                            var active = "active";
                            var ariaExpanded = "aria-expanded=\"true\"";
                        }
                        @foreach (var layout in GlobalConfig.ActiveTheme.Layouts)
                        {
                            var tabName = "#tab_" + layout.Name.Replace(' ', '_');

                            <li class="@active">
                                <a href="@tabName" data-toggle="tab" @ariaExpanded  > @layout.Name.Replace("Layout", "") </a>
                            </li> 

                            active = "";
                            ariaExpanded = "";
                        }
                    </ul>
                    <div class="tab-content">
                        <br/>
                        @{
                            active = "active";
                        }
                        @foreach (var layout in GlobalConfig.ActiveTheme.Layouts)
                        {
                            var tabName = "tab_" + layout.Name.Replace(' ','_');
                                                      
                            <div class="tab-pane @active" id="@tabName">
                                <div>Widget Sections for layout <strong>@layout.Name</strong> </div>
                                @foreach (var zone in layout.LayoutZones)
                                {   
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            @zone
                                        </div>
                                        <div data-theme-id="@GlobalConfig.ActiveTheme.ThemeId"  data-layout-name="@layout.Name" data-layout-zone="@zone" class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
                                            Drop widget here
                                            @{
                                                var wZones = ((List<NccWebSiteWidget>)ViewBag.WebsiteWidgetZones).Where(x => x.Zone == zone && x.LayoutName == layout.Name).ToList();
                                                foreach (var wZone in wZones)
                                                {
                                                    var wList = new List<IWidget>();
                                                    foreach( var x in (List<NetCoreCMS.Framework.Modules.IModule>)ViewBag.Modules){
                                                        wList.AddRange(x.Widgets);
                                                    }
                                                    var w = wList.Where(x => x.WidgetId == wZone.WidgetId).FirstOrDefault();

                                                    if (w != null) {
                                                        <div id="@Guid.NewGuid().ToString()" data-widget-id="@wZone.WidgetId" data-module-id="@wZone.ModuleId" data-theme-id="@wZone.ThemeId"  data-layout-name="@wZone.LayoutName" data-layout-zone="@wZone.Zone"  draggable="true" ondragstart="drag(event)">
                                                            <div class="panel panel-default"  >
                                                                <div class="panel-heading">
                                                                    <i class="glyphicon glyphicon-move margin-right-10"></i>&nbsp;
                                                                    <a draggable="false" data-toggle="collapse" href="#collapse_@wZone.Id">@w.Title</a>
                                                                </div>
                                                                <div id="collapse_@wZone.Id" class="panel-collapse collapse">
                                                                    <div class="panel-body">
                                                                         @w.Description
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    }
                                                }
                                            }
                                        </div>
                                    </div>
                                }
                            </div>
                                
                            active = ""; 
                        } 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="ncc-widget-treash" style="width:1px;height:1px;"></div>

<script>

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {     
        ev.dataTransfer.setData("widgetId", ev.target.id);        
    }

    function drop(ev) {

        console.log("Drop");
        ev.preventDefault();
        var targetDiv = ev.target;

        var divId = ev.dataTransfer.getData("widgetId");
        var div = document.getElementById(divId);
        //targetDiv.appendChild(div);
        var clonedDiv = $(div).clone();
        var uid = GUID.NewGUID();
        $(clonedDiv).attr("id",uid);
        clonedDiv.appendTo(targetDiv);
        //$(div).clone().appendTo("#ncc-module-widget-box-container");
        
        var moduleId = $(div).attr("data-module-id");
        var zone = $(targetDiv).attr("data-layout-zone");
        var layout = $(targetDiv).attr("data-layout-name");
        var theme = $(targetDiv).attr("data-theme-id");
        var widgetId = $(div).attr("data-widget-id");

        $(clonedDiv).attr("data-theme-id", theme);
        $(clonedDiv).attr("data-layout-name", layout);
        $(clonedDiv).attr("data-layout-zone", zone);

        NccPageMask.ShowLoadingMask();
        $.ajax({
            method: 'POST',
            url: '/CmsWidget/SaveZoneWidget',
            data: { module: moduleId, theme: theme, layout: layout, zone: zone, widget: widgetId },
            success: function (rsp) {
                NccPageMask.HideLoadingMask();
                console.log(rsp);
                NccGlobalAlert.ShowSuccess(rsp.message);
            },
            error: function (rsp) {
                NccPageMask.HideLoadingMask();
                NccGlobalAlert.ShowError("Error occoured. Please try again after refresh the page.");
            }
        });
    }

    function removeWidget(moduleId, theme, layout, zone, widgetId) {
        NccPageMask.ShowLoadingMask();
        $.ajax({
            method: 'POST',
            url: '/CmsWidget/RemoveZoneWidget',
            data: { module: moduleId, theme: theme, layout: layout, zone: zone, widget: widgetId },
            success: function (rsp) {
                NccPageMask.HideLoadingMask();
                console.log(rsp);
                NccGlobalAlert.ShowSuccess(rsp.message);
            },
            error: function (rsp) {
                NccPageMask.HideLoadingMask();
                NccGlobalAlert.ShowError("Error occoured. Please try again after refresh the page.");
            }
        });
    }

    function dropBack(ev) {
        console.log("Drop back");

        ev.preventDefault();
        var targetDiv = ev.target;
        var divId = ev.dataTransfer.getData("widgetId");

        console.log(divId);

        var div = document.getElementById(divId);
        console.log(div);
         
        var zone = $(div).attr("data-layout-zone");
        var layout = $(div).attr("data-layout-name");
        var theme = $(div).attr("data-theme-id");
        var widgetId = $(div).attr("data-widget-id");
        var srcModuleId = $(div).attr("data-module-id");

        console.log(zone, layout, theme, widgetId, srcModuleId);
        removeWidget(srcModuleId, theme, layout, zone, widgetId); 

        $("#ncc-widget-treash").append(div).empty();
        
        
    }

</script>
{'fraction_non_alphanumeric': 0.11475335096197684, 'fraction_numerical': 0.0012765569435579465, 'mean_word_length': 0.9408069368253407, 'pattern_counts': {'":': 0, '<': 167, '<?xml version=': 0, '>': 173, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 11, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 202, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '534511', 'n_tokens_mistral': 4845, 'n_tokens_neox': 4655, 'n_words': 866}