Skip to content

Instantly share code, notes, and snippets.

@YossiCohen

YossiCohen/modal-dialog.service.js

Last active June 13, 2021 17:29
Show Gist options
  • Save YossiCohen/a3626ca019f30f98e88ecc4bc1f12b5e to your computer and use it in GitHub Desktop.
Save YossiCohen/a3626ca019f30f98e88ecc4bc1f12b5e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. YossiCohen revised this gist Dec 3, 2016. 1 changed file with 13 additions and 13 deletions.
    26 changes: 13 additions & 13 deletions modal-dialog.service.js
    View file
    Original file line number Diff line number Diff line change
    @@ -55,19 +55,19 @@ araritApp.service('ModalDialogService', ['$uibModal', '$templateCache','$state',
    }
    }

    $uibModal.open({
    template: $templateCache.get('modal-dialog.view.html'),
    controller: 'modalDialogController',
    resolve: {
    titleValue: function () {
    return title;
    },
    textValue: function () {
    return text;
    },
    buttons: function () {
    return buttons;
    }
    $uibModal.open({
    template: $templateCache.get('modal-dialog.view.html'),
    controller: 'modalDialogController',
    resolve: {
    titleValue: function () {
    return title;
    },
    textValue: function () {
    return text;
    },
    buttons: function () {
    return buttons;
    }
    },
    backdrop: 'static', /* this prevent user interaction with the background */
    keyboard: false
  2. YossiCohen created this gist Dec 3, 2016.
    92 changes: 92 additions & 0 deletions modal-dialog.service.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    araritApp.controller('modalDialogController', ['$scope','$state', '$uibModal', '$uibModalInstance', 'titleValue', 'textValue', 'buttons',
    function ($scope, $state, $uibModal, $uibModalInstance, titleValue, textValue, buttons) {
    $scope.title = titleValue;
    $scope.text = textValue;
    $scope.buttons = buttons;

    $scope.btnClicked = function (callback) {
    $uibModalInstance.close();
    callback();
    };

    $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
    if ($scope.buttons.cancelButton) {
    $scope.buttons.cancelButton.callbackFunction();
    }
    };

    }]);

    araritApp.service('ModalDialogService', ['$uibModal', '$templateCache','$state',
    function ($uibModal, $templateCache,$state) {
    /*
    * send Alert with buttons:
    format:
    [{buttonText, callbackFunction, buttonStyle},...]
    example:
    buttons = {
    buttonSet: [{
    buttonText: "OK",
    callbackFunction: function () {
    console.info("OK clicked")
    },
    buttonStyle: "btn-primary"
    }],
    cancelButton: {
    buttonText: "Cancel",
    callbackFunction: function () {
    console.info("Cancel clicked")
    },
    buttonStyle: "btn-primary"
    }
    }
    */
    this.alert = function (title, text, buttons) {
    if (!buttons) {
    buttons = {
    buttonSet: [{
    buttonText: "OK",
    callbackFunction: function () {
    console.info("OK clicked")
    },
    buttonStyle: "submit-button"
    }]
    }
    }

    $uibModal.open({
    template: $templateCache.get('modal-dialog.view.html'),
    controller: 'modalDialogController',
    resolve: {
    titleValue: function () {
    return title;
    },
    textValue: function () {
    return text;
    },
    buttons: function () {
    return buttons;
    }
    },
    backdrop: 'static', /* this prevent user interaction with the background */
    keyboard: false
    });
    };

    this.confirmationAlert = function (title, text, onOK, onCancel) {
    var modalWindow = {
    buttonSet: [{
    buttonText: "OK",
    callbackFunction: onOK,
    buttonStyle: "modal-contect-appealInterface submit-button"
    }],
    cancelButton: {
    buttonText: "Cancel",
    callbackFunction: onCancel,
    buttonStyle: "modal-contect-appealInterface submit-button"
    }
    };
    this.alert(title, text, modalWindow);
    };
    }]);
    18 changes: 18 additions & 0 deletions modal-dialog.view.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <div name="modalWindow" class="modal-content">
    <div class="modal-header">
    <button type="button" class="closeNotElement" data-dismiss="modal" aria-hidden="true"
    ng-click="cancel()">&times;</button>
    <h4 class="modal-title" id="myModalLabel">{{title }}</h4>
    </div>
    <div class="modal-body">
    {{ text }}
    </div>
    <div class="modal-footer">
    <button type="button" class="btn" ng-class="buttons.cancelButton.buttonStyle" data-dismiss="modal"
    ng-show="buttons.cancelButton" ng-click="cancel()">{{buttons.cancelButton.buttonText}}
    </button>
    <button ng-repeat="btn in buttons.buttonSet" type="button" class="btn" ng-class="btn.buttonStyle"
    data-dismiss="modal" ng-click="btnClicked(btn.callbackFunction)">{{btn.buttonText }}
    </button>
    </div>
    </div>
    43 changes: 43 additions & 0 deletions otherFile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@

    /////Now we can Test them by calling the TestModal methods from the scope

    $scope.testModal1 = function () {

    var onOK = function(){
    alert('OK!');
    };

    var onCancel = function(){
    alert('Cancel!');
    };
    ModalDialogService.confirmationAlert('title', 'modal window content', onOK, onCancel);
    };

    $scope.testModal2 = function () {
    var modalMultiButtonExample = {
    buttonSet: [{
    buttonText: "Yes",
    callbackFunction: function () {
    alert('YES!');
    },
    buttonStyle: "btn-primary"
    },
    {
    buttonText: "No",
    callbackFunction: function () {
    alert('NO!');
    },
    buttonStyle: "btn-info"
    }
    ],
    cancelButton: {
    buttonText: "Cancel",
    callbackFunction: function () {
    alert('cancel')
    },
    buttonStyle: "btn-default"
    }
    };

    ModalDialogService.alert('Title', ' Modal Window Content ', modalMultiButtonExample);
    };