https://leksikon.si/portals/_default/visuallHelper/app.js?v=3

1var visualHelper = (function() {
2	
3	function hasEnabled(key) {
4		var enabled = JSON.parse(localStorage.getItem(key));
5		if(enabled && enabled == true) {
6			return true;
7		}
8		return false;
9	}
10	
11	function setEnabled(key, value) {
12		localStorage.setItem(key, JSON.stringify(value));
13	}
14	
15	function addControls(targetSelector) {
16		$('html').append('<div id="ravnilo"><div class="container"><h4>Pripomoček pri branju - ravnilo</h4><p>Z miškinim kazalcem se pomikajte po strani in ravnilo vam bo sledilo.</p></div>');
17		$(targetSelector).append('<div id="visuallContainer"></div>');
18		
19		$("#visuallContainer").append('<button data-set="fontminus" class="btn btn-sm" type="button" title="Zmanjšajte pisavo"><i class="fas fa-chevron-down"></i></button>');
20		$("#visuallContainer").append('<button data-set="fontreset" class="btn btn-sm" type="button" title="Ponastavite pisavo"><i class="fas fa-font"></i></button>');
21		$("#visuallContainer").append('<button data-set="fontplus" class="btn btn-sm" type="button" title="Povečajte pisavo"><i class="fas fa-chevron-up"></i></button>');
22		
23		$("#visuallContainer").append('<button data-set="ravnilo" class="btn btn-sm" type="button" title="Vklopite ali izklopite ravnilo za branje"><i class="fas fa-ruler-horizontal"></i></button>');
24		$("#visuallContainer").append('<button data-set="slabovidnost" class="btn btn-sm" type="button" title="Prilagodite stran slabovidnim uporabnikom"><i class="fas fa-eye"></i></button>');
25		$("#visuallContainer").append('<button data-set="dislektik" class="btn btn-sm" type="button" title="Prilagodite stran dislektikom"><i class="fas fa-adjust"></i></button>');
26		$("#visuallContainer").append('<button data-set="inverted" class="btn btn-sm" type="button" title="Inversne barve"><i class="fas fa-fill-drip"></i></button>');
27		$("#visuallContainer").append('<button data-set="hue" class="btn btn-sm" type="button" title="Barvni zamik"><i class="fas fa-tint-slash"></i></button>');
28		$("#visuallContainer").append('<button data-set="grayscale" class="btn btn-sm" type="button" title="Črno bela grafika"><i class="fas fa-paint-roller"></i></button>');
29	}
30	
31	
32	
33	function toggle(set, en) {
34		var enable = en || !visualHelper.hasEnabled(set);
35		if(enable == true) {
36			$('html').addClass(set);
37			$('#visuallContainer .btn[data-set="'+set+'"]').addClass('active');
38			visualHelper.setEnabled(set, true);
39		} else {
40			$('html').removeClass(set);
41			$('#visuallContainer .btn[data-set="'+set+'"]').removeClass('active');
42			visualHelper.setEnabled(set, false);
43		}
44	}
45	
46	function setFont(step) {
47		var scale = JSON.parse(localStorage.getItem('font')) || 100;
48		if(step == 'fontminus') {
49			scale -= 5;
50		} else if(step == 'fontplus') {
51			scale += 5;
52		} else if(step == 'fontreset') {
53			scale = 100;
54		}
55		$( "body" ).css( 'zoom', scale + '%');
56		localStorage.setItem('font', JSON.stringify(scale));
57	}
58	
59	return {
60		toggle: toggle,
61		hasEnabled: hasEnabled,
62		setEnabled: setEnabled,
63		addControls: addControls,
64		setFont: setFont
65	}
66}());
67
68
69
70
71$(document).ready(function() {
72	$('head').prepend('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>');
73	visualHelper.addControls('#visualHelperContainer');
74	
75	if(visualHelper.hasEnabled('ravnilo')) {
76		visualHelper.toggle('ravnilo', true);
77	}
78	
79	if(visualHelper.hasEnabled('slabovidnost')) {
80		visualHelper.toggle('slabovidnost', true);
81	}
82	
83	if(visualHelper.hasEnabled('dislektik')) {
84		visualHelper.toggle('dislektik', true);
85	}
86	
87	if(visualHelper.hasEnabled('inverted')) {
88		visualHelper.toggle('inverted', true);
89	}
90	
91	if(visualHelper.hasEnabled('hue')) {
92		visualHelper.toggle('hue', true);
93	}
94	
95	if(visualHelper.hasEnabled('grayscale')) {
96		visualHelper.toggle('grayscale', true);
97	}
98	
99	visualHelper.setFont();
100

101    $('html').mousemove(function(event) {
102		var y = event.pageY;
103		$("#ravnilo").animate({top: y + 6 + 'px'}, 10);
104    });
105	
106	$('body').on('click', '#visuallContainer .btn', function(event) {
107		var set = $(this).data('set');
108		switch(set) {
109			case 'fontminus':
110			case 'fontreset':
111			case 'fontplus':
112				visualHelper.setFont(set);
113				break;
114			case 'ravnilo':
115			case 'dislektik':
116			case 'slabovidnost':
117			case 'inverted':
118			case 'hue':
119			case 'grayscale':
120				visualHelper.toggle(set);
121				break;
122			
123		}
124	});
125	
126	
127});