Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jonathan Roberts 409 posts 1063 karma points
    Aug 01, 2017 @ 15:24
    Jonathan Roberts
    0

    Macro side panel - delete item closes panel

    Hi,

    I have an accordion type Macro control which has its properties residing in the side panel.

    I can add panels to the accordion fine but if I want to Delete a panel from the accordion I use the splice to remove the item from the scope array but before I get chance to save the accordion the side panel closes.

    My HTML looks like this:

    <div class="simple-slider-list simple-slider-list-field" ng-class="{'simple-slider-open':selected == slide}" ng-click="select(slide)" ng-repeat="slide in model.value | orderBy: 'order'">
    
            <span class="simple-slider-list-number">
                {{slide.name}}
                <!--<i class="icon right icon-navigation"></i>-->
                <i ng-click="removeAccordionPanel(slide)" class="icon right icon-delete"></i>
            </span> 
            <div class="simple-slider-list-field">
                Order:   <select name="mySelect" id="mySelect" style="width: 60px !important;"
                                 ng-options="option for option in availableOptions track by option"
                                 ng-model="slide.liveorder"></select>
            </div>
            <div class="simple-slider-list-field">
                Title: <input type="text" placeholder="Title" ng-model="slide.name" />
            </div>
            <umb-editor model="slide.rte" ng-model="slide.rte"></umb-editor>
        </div>
    
    </div>
    
    <div class="simple-slider-list-add-row">
        <i ng-click="add()" class="icon right icon-add"></i>
    </div>
    

    My AngularJS controller looks like:

    angular.module("umbraco").controller("AccordionEditor.controller",
    function ($scope, assetsService, $http, dialogService, mediaHelper) {
    
        var defaultItem = {
            name: "", summary: "", img: "", link: undefined, order: undefined, liveorder: undefined, rte: {
                label: 'bodyText',
                description: '...',
                view: 'rte',
                config: {
                    editor: {
                        toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                        stylesheets: [],
                        dimensions: {
                            height: 200
                        }
                    }
                }
            }
        };
    
        if (!$scope.model.value) {
            $scope.model.value = [];
            $scope.availableOptions = [];
        }
    
        if ($scope.model.value.length > 0) {
            $scope.selected = $scope.model.value[0];
            var count = 0;
            $scope.availableOptions = [];
            angular.forEach($scope.model.value, function (value, key) {
                count = count + 1;
                $scope.availableOptions.push(count);
            });
    
        }
    
        $scope.select = function (index) {
            $scope.selected = index;
            $scope.SelectedIndex = this.$index;
    
        };
    
        $scope.add = function () {
            $scope.model.value.splice($scope.model.value.length + 1, 0, angular.copy(defaultItem));
            $scope.selected = $scope.model.value[$scope.model.value.length - 1];
            $scope.SelectedIndex = $scope.model.value.length - 1;
            $scope.availableOptions.push($scope.model.value.length);
            $scope.model.value[$scope.model.value.length - 1].liveorder = $scope.model.value.length;
        };
    
        $scope.pick = function (slide) {
            dialogService.mediaPicker({
                multiPicker: false,
                callback: function (data) {
                    slide.img = mediaHelper.resolveFile(data, false);
                }
            });
        };
    
        $scope.pickContent = function (slide) {
            dialogService.treePicker({
                multiPicker: false,
                section: "content",
                treeAlias: "content",
                callback: function (data) {
                    slide.link = { name: data.name, id: data.id };
                }
            });
        };
    
    
        $scope.$on("formSubmitting", function (ev, args) {
    
            angular.forEach($scope.model.value, function (value, key) {
                value.rte = $scope.regrouppanels(value);
                value.order = value.liveorder;
            });
        });
    
        $scope.regrouppanels = function (slide) {
            return slide.rte = {
                label: 'bodyText',
                description: '...',
                view: 'rte',
                value: slide.rte.value,
                config: {
                    editor: {
                        toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                        stylesheets: [],
                        dimensions: {
                            height: 200
                        }
                    }
                }
            }
        };
    
        $scope.removeAccordionPanel = function (index) {
            $scope.model.value.splice($scope.model.value.indexOf(index), 1);
        };
    
        assetsService.loadCss("/App_Plugins/CarouselEditor/assets/CarouselEditor.css");
    
    });
    

    Looking at the code above this is my Delete panel function:

    $scope.removeAccordionPanel = function (index) {
            $scope.model.value.splice($scope.model.value.indexOf(index), 1);
        };
    

    As soon as the $scope.model.value is reduced in size it closes the panel - It doesnt throw an error.

    Any ideas?

    Jon

  • Jonathan Roberts 409 posts 1063 karma points
    Mar 21, 2018 @ 14:33
    Jonathan Roberts
    0

    Does anyone have any ideas?

  • Jonathan Roberts 409 posts 1063 karma points
    Mar 21, 2018 @ 15:11
    Jonathan Roberts
    0

    Just found the issue: My delete button looks like:

    <i ng-click="removeAccordionPanel(slide)" class="icon right icon-delete"></i>
    

    If I change this to a Button it works:

    <button type="button" ng-click="removeAccordionPanel(slide)" class="icon right icon-delete"></button>
    
Please Sign in or register to post replies

Write your reply to:

Draft