andreabazerla/Observer.jsp

## init.js
'use strict';

// import subject from './subject/subject'
// import observer from './observer/observer'

class Subject {

    attach(observer) {
        this.observers.push(observer);
    }

    dettach(observer) {
        for(var i in this.observers)
            if(this.observers[i] === observer)
                this.observers.splice(i, 1);
    }

    notify() {
        for(var i in this.observers){
            this.observers[i].update(this);
        }
    }

}

class ConcreteSubject extends Subject {

    constructor(id) {
        super();

        this.id = id;
        this.value = null;
        this.observers = [];

        switch (document.getElementById(id).type) {
	        case "button": {
	        	document.getElementById(id).addEventListener('click', (e) => {
	    			this.setValue(null);
	    	    });
	          break;
	        }
	        case "text": {
	        	document.getElementById(id).addEventListener('input', (e) => {
	    			this.setValue(e.target.value);
	    	    });
	          break;
	        }
	        case "checkbox": {
	        	document.getElementById(id).addEventListener('click', (e) => {
	    			this.setValue(e.target.checked);
	    	    });
	          break;
	        }
	        case "radio": {
	        	document.getElementById(id).addEventListener('click', (e) => {
	        		this.setValue(e.target.value);
	        	});
	        	break;
	        }
	        default: {}
        }

    }

    getId() {
    	return this.id;
    }

    getValue() {
        return this.value;
    }

    setValue(value) {
        this.value = value;
        this.notify();
    }

}

class Observer {
    update(subject) {}
}

class ConcreteObserver extends Observer {

    constructor(trigger) {
        super()
        this.trigger = trigger;
        this.triggerList = [];
    }

    update(subject) {
        console.log("update() : " + subject.getValue());
        if (this.trigger) window[this.trigger]();
    }

    addTrigger(trigger) {
    	this.triggerList.push(trigger);
    }

}

class Trigger {}

class ConcreteTrigger extends Trigger {

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

}

function trigger1() {
	console.log("trigger1");
};

function trigger2() {
	console.log("trigger2");
};

function trigger3() {
	console.log("trigger3");
};

function init() {

	var subjectIdArray = [
		"checkbox", "text"
	];

	var observer1 = new ConcreteObserver("trigger1");
	var observer2 = new ConcreteObserver("trigger1");
	var observer3 = new ConcreteObserver();
	var observer4 = new ConcreteObserver();
	observer4.addTrigger("");
	var observer5 = new ConcreteObserver();
	var observer6 = new ConcreteObserver();
	var observer7 = new ConcreteObserver();

	var subjectButton = new ConcreteSubject("button");
	var subjectText = new ConcreteSubject("text");
	var subjectCheckbox = new ConcreteSubject("checkbox");
	var subjectRadio = new ConcreteSubject("radio");

	subjectButton.attach(observer1);
	subjectText.attach(observer2);
	subjectText.attach(observer3);
	subjectCheckbox.attach(observer4);
	subjectRadio.attach(observer5);
	subjectRadio.attach(observer6);
	subjectRadio.attach(observer7);

}

## Observer.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html lang="en">

	<head>
		<title>Observer</title>
		<script src="<c:url value="/resources/js/init.js" />"></script>
	</head>

	<body>

		<input type="button" class="input button" id="button" value="button" />
		<input type="text" class="input text" id="text" />
		<input type="checkbox" class="input checkbox" id="checkbox" />
		<input type="radio" class="input radio" id="radio" />

		<script type="text/javascript">
			init();
		</script>

	</body>

</html>
	'use strict';

	// import subject from './subject/subject'
	// import observer from './observer/observer'

	class Subject {

	attach(observer) {
	this.observers.push(observer);
	}

	dettach(observer) {
	for(var i in this.observers)
	if(this.observers[i] === observer)
	this.observers.splice(i, 1);
	}

	notify() {
	for(var i in this.observers){
	this.observers[i].update(this);
	}
	}

	}

	class ConcreteSubject extends Subject {

	constructor(id) {
	super();

	this.id = id;
	this.value = null;
	this.observers = [];

	switch (document.getElementById(id).type) {
	case "button": {
	document.getElementById(id).addEventListener('click', (e) => {
	this.setValue(null);
	});
	break;
	}
	case "text": {
	document.getElementById(id).addEventListener('input', (e) => {
	this.setValue(e.target.value);
	});
	break;
	}
	case "checkbox": {
	document.getElementById(id).addEventListener('click', (e) => {
	this.setValue(e.target.checked);
	});
	break;
	}
	case "radio": {
	document.getElementById(id).addEventListener('click', (e) => {
	this.setValue(e.target.value);
	});
	break;
	}
	default: {}
	}

	}

	getId() {
	return this.id;
	}

	getValue() {
	return this.value;
	}

	setValue(value) {
	this.value = value;
	this.notify();
	}

	}

	class Observer {
	update(subject) {}
	}

	class ConcreteObserver extends Observer {

	constructor(trigger) {
	super()
	this.trigger = trigger;
	this.triggerList = [];
	}

	update(subject) {
	console.log("update() : " + subject.getValue());
	if (this.trigger) window[this.trigger]();
	}

	addTrigger(trigger) {
	this.triggerList.push(trigger);
	}

	}

	class Trigger {}

	class ConcreteTrigger extends Trigger {

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

	}

	function trigger1() {
	console.log("trigger1");
	};

	function trigger2() {
	console.log("trigger2");
	};

	function trigger3() {
	console.log("trigger3");
	};

	function init() {

	var subjectIdArray = [
	"checkbox", "text"
	];

	var observer1 = new ConcreteObserver("trigger1");
	var observer2 = new ConcreteObserver("trigger1");
	var observer3 = new ConcreteObserver();
	var observer4 = new ConcreteObserver();
	observer4.addTrigger("");
	var observer5 = new ConcreteObserver();
	var observer6 = new ConcreteObserver();
	var observer7 = new ConcreteObserver();

	var subjectButton = new ConcreteSubject("button");
	var subjectText = new ConcreteSubject("text");
	var subjectCheckbox = new ConcreteSubject("checkbox");
	var subjectRadio = new ConcreteSubject("radio");

	subjectButton.attach(observer1);
	subjectText.attach(observer2);
	subjectText.attach(observer3);
	subjectCheckbox.attach(observer4);
	subjectRadio.attach(observer5);
	subjectRadio.attach(observer6);
	subjectRadio.attach(observer7);

	}
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

	<!DOCTYPE html>

	<html lang="en">

	<head>
	<title>Observer</title>
	<script src="<c:url value="/resources/js/init.js" />"></script>
	</head>

	<body>

	<input type="button" class="input button" id="button" value="button" />
	<input type="text" class="input text" id="text" />
	<input type="checkbox" class="input checkbox" id="checkbox" />
	<input type="radio" class="input radio" id="radio" />

	<script type="text/javascript">
	init();
	</script>

	</body>

	</html>