gistfile1.js

// Basic directive
// ===================================================================================================

class BasicDirective {

    constructor(moduleName) {
        this.moduleName = moduleName;
    }

    getClassName() {
        var str = this.constructor.toString();
        str = str.substr('function '.length);
        str = str.substr(0, str.indexOf('('));
        return str;
    }

    getDirectiveName() {
        var directiveName = this.getClassName();
        return directiveName.charAt(0).toLowerCase() + directiveName.slice(1);
    }

    register(directiveName, moduleName) {
        if (arguments.length < 2) {
            moduleName = directiveName;
            directiveName = this.getDirectiveName();
        }
        angular
            .module(moduleName || this.moduleName)
            .directive(directiveName, () => {
                return this
            })
    }
}


// Component
// ===================================================================================================

class Component extends BasicDirective {

    constructor(link, controller) {
        super('components');

        this.restrict = 'A';
        this.replace = true;
        this.scope = {
            label: '@',
            name: '@'
        };

        this.link = link;
        this.controller = controller;
    }
}

// Text Field
// ===================================================================================================

class TextField extends Component {

    constructor() {
        super(undefined, this.controller);
        this.templateUrl = 'common/fields/textfield.template';
    }
    controller($scope, $element, $attrs) {
        //console.log('test field controller');
    }
}


// Email
// ===================================================================================================

class EmailField extends Component {

    constructor() {
        super(this.link, this.controller);
        this.scope.type = '@';
        this.templateUrl = 'common/fields/emailfield.template';
    }
    link() {
        // console.log('email link')
    }
    controller($scope, $element, $attrs, ValidationServiceSubscriber) {

        var subscriber = new ValidationServiceSubscriber($scope);
        subscriber.register.INVALID(invalid);
        subscriber.register.VALID(valid);

        $scope.isValid = true;

        $scope.change = function() {
            subscriber.componentChange($scope.email);
        };

        function invalid(data) {
            $scope.isValid = false;
            $scope.message = data.message;
        }

        function valid() {
            $scope.isValid = true;
            $scope.message = '';
        }
    }
}


// Location
// ===================================================================================================

class LocationField extends Component {

    constructor() {
        super(this.link, this.controller);
        this.template = '<div>location</div>'
    }
    link() {
        // console.log('location link')
    }
    controller($scope, $element, $attrs, $location) {
       // console.log('location field controller');
       // console.log($location.absUrl())
    }
}


// Init
// ===================================================================================================

new EmailField().register();
new TextField().register();
new LocationField().register();


// Business layer SERVICE
// ===================================================================================================

angular
    .module('core')
    .service('ValidationService', validationService);

function validationService($rootScope) {

    const INVALID = 'INVALID';
    const VALID = 'VALID';
    const DATA = 'DATA';

    var self = this;

    var model = {};
    self.rules = {};

    self.messageCodes = [VALID, INVALID, DATA];
    self.isValid = true;

    self.globalLogic = undefined;
    self.beforeValidation = undefined;
    self.afterValidation = undefined;

    self.componentChange = function(componentName, data) {
        var isValid = true;
        if (typeof self.beforeValidation === 'function') self.beforeValidation();

        model[componentName] = data;

        if (typeof self.rules[componentName] !== 'undefined') {
            isValid = isValid && self.rules[componentName](componentName);
        }

        if (typeof self.globalLogic === 'function') isValid = isValid && self.globalLogic();

        self.isValid = isValid;

        if (typeof self.afterValidation === 'function') self.afterValidation(self.isValid);
    };

    self.sendMessage = function(code, message, ...componentNames) {
        for (let componentName of componentNames) {
            $rootScope.$emit(`ValidationServiceMessage::${componentName}`, {
                code: code,
                message: message
            })
        }
    };

    self.sendInvalidMessage = function(message, ...componentNames) {
        self.sendMessage(INVALID, message, ...componentNames)
    };

    self.sendValidMessage = function(message, ...componentNames) {
        self.sendMessage(VALID, message, ...componentNames)
    };

    self.model = function(fieldName, fieldValue) {
        if (typeof fieldValue === 'undefined') {
            if (typeof fieldName === 'undefined') return JSON.parse(JSON.stringify(model));
            return model[fieldName];
        }
        model[fieldName] = fieldValue;
    }
}


// Business layer subscriber
// ===================================================================================================

angular
    .module('core')
    .factory('ValidationServiceSubscriber', validationServiceSubscriber);

function validationServiceSubscriber($rootScope, ValidationService) {

    return function ($scope) {
        var self = this;
        self.fieldName = $scope.name;
        self.subscriptions = {};
        self.register = {};

        self.componentChange = function(data) {
            ValidationService.componentChange(self.fieldName, data);
        };

        for (let code of ValidationService.messageCodes) {
            self.register[code] = function(handler) {
                self.subscriptions[code] = handler;
            }
        }

        $rootScope.$on(`ValidationServiceMessage::${$scope.name}`, function(e, data) {
            if (typeof self.subscriptions[data.code] === 'function') {
                return self.subscriptions[data.code](data);
            }
        });
    };
}


// Application level code
// ===================================================================================================

angular
    .module('app')
    .service('AppValidationService', AppValidationService);

function AppValidationService(ValidationService) {

    ValidationService.rules = {
        long_field_name_email: emailsTheSame,
        long_field_name_email_second: emailsTheSame
    };

    function emailsTheSame() {
        var valid = true;

        if (typeof ValidationService.model('long_field_name_email') !== 'undefined' &&
            typeof ValidationService.model('long_field_name_email_second') !== 'undefined') {
            valid = ValidationService.model('long_field_name_email') === ValidationService.model('long_field_name_email_second');
        }

        if (!valid) {
            var msg = "Emails must be equal";
            ValidationService.sendInvalidMessage(msg, 'long_field_name_email', 'long_field_name_email_second')
        }
        else {
            ValidationService.sendValidMessage(undefined, 'long_field_name_email', 'long_field_name_email_second')
        }
    }
}