client-ui/source/modals/modal-link-directive.js

Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront

(function () {
    'use strict';

    angular.module('clientApp').directive('modalLink', modalLinkController);
    modalLinkController.$inject = ['modalLinkService'];

    function modalLinkController(modalLinkService) {
        return {
            restrict: 'EA',
            scope: {
                src: "=",
                title: "@"
            },
            link: function (scope, element) {

                scope.init = function () {
                    element.text(scope.title);
                    element.click(function () {
                        scope.clicked = true;
                        scope.openForDevice();
                    });
                };

                scope.$watch("src", function () {
                    scope.openForDevice();
                });

                scope.openForDevice = function () {
                    if(scope.clicked && scope.src){
                        if ($(window).width() > 768) {
                            scope.clicked = false;
                            modalLinkService.open({
                                title: scope.title,
                                src: scope.src
                            });
                        } else if ($(window).width() <= 768) {
                            scope.clicked = false;
                            scope.openInNewTab(scope.src);
                        }
                    }
                };

                scope.openInNewTab = function (url) {
                    var win = window.open(url, '_blank');
                    win.focus();
                };

                scope.init();
            }
        };
    }

    angular.module(moduleName).service('modalLinkService', modalLinkService);
    modalLinkService.$inject = ["$modal", "$timeout"];

    function modalLinkService($modal, $timeout) {
        var self = this;
        self.modal = false;

        function open(attributes) {
            self.modal = $modal.open({
                templateUrl: "modals/doc-modal-template.html",
                controller: "mlModalCtrl",
                size: 'lg',
                windowClass: 'app-modal-window',
                backdrop: true,
                resolve: {
                    modalContent: function () {
                        return {
                            attributes: attributes
                        };
                    }
                }
            });

            self.modal.rendered.then(function () {
                $('.modal-content-inner').height(parseInt(($(window).height() - $('.modal-content .modal-header').height()) * .8, 10));
            });
        }

        function close() {
            $timeout(function() {
                self.modal.close();
            });
        }

        self.close = close;
        self.open = open;
    }

    angular.module('clientApp').controller('mlModalCtrl', mlModalCtrl);
    mlModalCtrl.$inject = ['$scope', '$modalInstance', 'modalContent'];

    function mlModalCtrl($scope, $modalInstance, modalContent) {
        $scope.title = modalContent.attributes.title;
        $scope.src = modalContent.attributes.src;

        $modalInstance.updateSource = function (newSource) {
            $scope.src = newSource;
        };

        $scope.ok = function () {
            $modalInstance.close(true);
        };
    }
})();