Skip to content

Commit ccee5f2

Browse files
marc92wmarc92w
committed
Use Local- or SessionStorage to store settings and data instead of cookies.
- Remove angular-cookie as dependency. - Add new service 'Storage' for saving data in Local- or SessionStorage. - Fix open and collapse of navigation bar menu not working without jQuery. - Make range input look the same in firefox and chrome. - Rename literals -> dataTypes and TypeExtractor -> DataTypeExtractor. - Fix unit tests. - Add comments.
1 parent 3166f96 commit ccee5f2

33 files changed

+368
-328
lines changed

‎app/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import routing from './app.config';
1111
import runBlock from './app.run';
1212

1313
// create main app module
14-
export default angular.module('ldVOWLApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'ngCookies',
14+
export default angular.module('ldVOWLApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap',
1515
components.name,
1616
filters.name,
1717
services.name,

‎app/components/graph/nodelink-graph.drv.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Grap
101101
'nodes': Nodes.getNodes(),
102102
'properties': Properties.getProperties(),
103103
'prefixes': Prefixes.getPrefixes(),
104-
'showTypes': Filters.getIncludeLiterals(),
104+
'showTypes': Filters.getIncludeDataTypes(),
105105
'showLoops': Filters.getIncludeLoops(),
106106
'showDisjointNode': Filters.getIncludeDisjointNode(),
107107
'showSubclassRelations': Filters.getIncludeSubclassRelations(),
@@ -114,13 +114,13 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Grap
114114
scope.render(scope.data);
115115
});
116116

117-
scope.$watch('data.nodes.size', function () {
117+
scope.$watch('data.nodes.size', function nodeNumberChanged() {
118118
$log.debug('[Graph] Number of nodes has changed!');
119119
return scope.render(scope.data);
120120
});
121121

122122
scope.$watch(function () {
123-
return Filters.getIncludeLiterals();
123+
return Filters.getIncludeDataTypes();
124124
},
125125
function (newVal) {
126126
scope.data.showTypes = newVal;
@@ -888,7 +888,7 @@ function NodeLinkGraph($window, $log, Properties, Nodes, Prefixes, Filters, Grap
888888
scope.tick = function () {
889889
scope.link.attr('d', scope.recalculateLines);
890890
scope.directLink.attr('d', scope.recalculateDirectLines);
891-
scope.node.attr('transform', function(d) { return `translate(${d.x},${d.y})`; });
891+
scope.node.attr('transform', function nodeTransform(d) { return `translate(${d.x},${d.y})`; });
892892
};
893893
} // end of link()
894894
}; // end of returned directive

‎app/components/header/header.ctrl.js

+9
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ function HeaderCtrl($scope, $location) {
1111

1212
const header = this;
1313

14+
header.collapse = true;
15+
1416
header.loading = false;
1517

1618
header.appVersion = (__VERSION__ !== undefined) ? __VERSION__ : '0.0'; // eslint-disable-line no-undef
@@ -19,6 +21,13 @@ function HeaderCtrl($scope, $location) {
1921
header.loading = pending > 0;
2022
});
2123

24+
/**
25+
* Toggle navigation bar menu on small screens.
26+
*/
27+
header.toggleCollapse = function() {
28+
header.collapse = !header.collapse;
29+
};
30+
2231
/**
2332
* Returns true if the given view location is the current one, false otherwise.
2433
*

‎app/components/header/header.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="navbar-header">
44

55
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
6-
data-target="#js-navbar-collapse">
6+
data-target="#js-navbar-collapse" ng-click="header.toggleCollapse()">
77
<span class="sr-only">Toggle navigation</span>
88
<span class="icon-bar"></span>
99
<span class="icon-bar"></span>
@@ -20,7 +20,7 @@
2020

2121
</div>
2222

23-
<div class="collapse navbar-collapse" id="js-navbar-collapse">
23+
<div class="navbar-collapse" id="js-navbar-collapse" ng-class="{collapse: header.collapse}">
2424
<ul class="nav navbar-nav">
2525
<li ng-class="{ active: header.isActive('/graph') }">
2626
<a ng-href="#/graph">

‎app/components/settings/settings.ctrl.js

+43-25
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @name SettingsCtrl
44
*
55
* @param {$log} $log
6-
* @param {$cookies} $cookies
6+
* @param {Storage} Storage
77
* @param {PREFIX} PREFIX
88
* @param {PROPERTY_BLACKLIST} PROPERTY_BLACKLIST
99
* @param {CLASS_BLACKLIST} CLASS_BLACKLIST
@@ -14,13 +14,11 @@
1414
*
1515
* @ngInject
1616
*/
17-
function settingsCtrl($log, $cookies, PREFIX, PROPERTY_BLACKLIST, CLASS_BLACKLIST, RequestConfig, Data, ClassExtractor,
17+
function settingsCtrl($log, Storage, PREFIX, PROPERTY_BLACKLIST, CLASS_BLACKLIST, RequestConfig, Data, ClassExtractor,
1818
RelationExtractor) {
1919

2020
const vm = this;
2121

22-
const cookiePrefix = 'ldvowl_';
23-
2422
//TODO move default settings into a constant
2523
vm.currentLanguage = RequestConfig.getLabelLanguage() || 'en';
2624
vm.currentLimit = RequestConfig.getLimit();
@@ -40,21 +38,40 @@ function settingsCtrl($log, $cookies, PREFIX, PROPERTY_BLACKLIST, CLASS_BLACKLIS
4038
vm.enabled = [];
4139

4240
vm.initialize = function () {
43-
var classItems = ClassExtractor.getBlacklist();
44-
var propertyItems = RelationExtractor.getBlacklist();
41+
const classItems = ClassExtractor.getBlacklist();
42+
const propertyItems = RelationExtractor.getBlacklist();
4543

4644
vm.propsOrdered = RequestConfig.getPropertiesOrdered();
4745

48-
let cookieFlag = [];
49-
cookieFlag['RDF'] = $cookies.get(cookiePrefix + 'blacklist_rdf');
50-
cookieFlag['RDFS'] = $cookies.get(cookiePrefix + 'blacklist_rdfs');
51-
cookieFlag['OWL'] = $cookies.get(cookiePrefix + 'blacklist_owl');
52-
cookieFlag['SKOS'] = $cookies.get(cookiePrefix + 'blacklist_skos');
46+
let savedFlags = [];
47+
savedFlags['RDF'] = Storage.getItem('blacklist_rdf');
48+
savedFlags['RDFS'] = Storage.getItem('blacklist_rdfs');
49+
savedFlags['OWL'] = Storage.getItem('blacklist_owl');
50+
savedFlags['SKOS'] = Storage.getItem('blacklist_skos');
51+
52+
if (savedFlags['RDF'] !== undefined && savedFlags['RDF'] !== null) {
53+
vm.enabled['RDF'] = savedFlags['RDF'] === 'true';
54+
} else {
55+
vm.enabled['RDF'] = true;
56+
}
57+
58+
if (savedFlags['RDFS'] !== undefined && savedFlags['RDFS'] !== null) {
59+
vm.enabled['RDFS'] = savedFlags['RDFS'] === 'true';
60+
} else {
61+
vm.enabled['RDFS'] = true;
62+
}
63+
64+
if (savedFlags['OWL'] !== undefined && savedFlags['OWL'] !== null) {
65+
vm.enabled['OWL'] = savedFlags['OWL'] === 'true';
66+
} else {
67+
vm.enabled['OWL'] = true;
68+
}
5369

54-
vm.enabled['RDF'] = (cookieFlag['RDF'] !== undefined) ? (cookieFlag['RDF'] === 'true') : true;
55-
vm.enabled['RDFS'] = (cookieFlag['RDFS'] !== undefined) ? (cookieFlag['RDFS'] === 'true') : true;
56-
vm.enabled['OWL'] = (cookieFlag['OWL'] !== undefined) ? (cookieFlag['OWL'] === 'true') : true;
57-
vm.enabled['SKOS'] = (cookieFlag['SKOS'] !== undefined) ? (cookieFlag['SKOS'] === 'true') : false;
70+
if (savedFlags['SKOS'] !== undefined && savedFlags['SKOS'] !== null) {
71+
vm.enabled['SKOS'] = savedFlags['SKOS'] === 'true';
72+
} else {
73+
vm.enabled['SKOS'] = false;
74+
}
5875

5976
vm.classBlacklistInput = classItems.join(vm.separator);
6077
vm.propertyBlacklistInput = propertyItems.join(vm.separator);
@@ -84,14 +101,14 @@ function settingsCtrl($log, $cookies, PREFIX, PROPERTY_BLACKLIST, CLASS_BLACKLIS
84101
};
85102

86103
vm.saveBlacklists = function () {
87-
var input = vm.propertyBlacklistInput.replace(/(\r\n|\n|\r|\s)/gm,'');
88-
var items = input.split(',');
104+
const input = vm.propertyBlacklistInput.replace(/(\r\n|\n|\r|\s)/gm, '');
105+
const items = input.split(',');
89106

90107
// update blacklist in extractor
91108
RelationExtractor.setBlacklist(items);
92109

93-
var classInput = vm.classBlacklistInput.replace(/(\r\n|\n|\r|\s)/gm,'');
94-
var classItems = classInput.split(',');
110+
const classInput = vm.classBlacklistInput.replace(/(\r\n|\n|\r|\s)/gm, '');
111+
const classItems = classInput.split(',');
95112
ClassExtractor.setBlacklist(classItems);
96113

97114
// delete all loaded data
@@ -102,14 +119,14 @@ function settingsCtrl($log, $cookies, PREFIX, PROPERTY_BLACKLIST, CLASS_BLACKLIS
102119
const owlState = (vm.enabled['OWL']) ? 'true' : 'false';
103120
const skosState = (vm.enabled['SKOS']) ? 'true' : 'false';
104121

105-
$cookies.put(cookiePrefix + 'blacklist_rdf', rdfState);
106-
$cookies.put(cookiePrefix + 'blacklist_rdfs', rdfsState);
107-
$cookies.put(cookiePrefix + 'blacklist_owl', owlState);
108-
$cookies.put(cookiePrefix + 'blacklist_skos', skosState);
122+
Storage.setItem('blacklist_rdf', rdfState);
123+
Storage.setItem('blacklist_rdfs', rdfsState);
124+
Storage.setItem('blacklist_owl', owlState);
125+
Storage.setItem('blacklist_skos', skosState);
109126

110127
// save inputs
111-
$cookies.put(cookiePrefix + 'class_blacklist', vm.classBlacklistInput);
112-
$cookies.put(cookiePrefix + 'property_blacklist', vm.propertyBlacklistInput);
128+
Storage.setItem('class_blacklist', vm.classBlacklistInput);
129+
Storage.setItem('property_blacklist', vm.propertyBlacklistInput);
113130
};
114131

115132
/**
@@ -122,6 +139,7 @@ function settingsCtrl($log, $cookies, PREFIX, PROPERTY_BLACKLIST, CLASS_BLACKLIS
122139
vm.enabled['SKOS'] = false;
123140

124141
vm.restoreListDefaults();
142+
vm.saveBlacklists();
125143
};
126144

127145
/**

‎app/components/settings/settings.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,8 @@ <h2>Blacklists</h2>
123123
<div class="form-group">
124124
<div class="col-sm-12">
125125
<div class= "pull-right">
126-
<button type="button" class="btn btn-default" ng-click="vm.restoreDefaults(); bl.$setPristine()"
126+
<button type="button" class="btn btn-default"
127+
ng-click="vm.restoreDefaults(); bl.$setPristine(); lists.$setPristine()"
127128
ng-disabled="bl.clazz.$pristine && bl.prop.$pristine && vm.enabled.RDF && vm.enabled.RDFS &&
128129
vm.enabled.OWL && !vm.enabled.SKOS">
129130
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>

‎app/components/sidebar/groups/filter-group/filter-group.ctrl.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function filterGroupCtrl(Filters, TBoxExtractor) {
1010

1111
const vm = this;
1212

13-
vm.filterTypes = !Filters.getIncludeLiterals();
13+
vm.filterDataTypes = !Filters.getIncludeDataTypes();
1414
vm.filterLoops = !Filters.getIncludeLoops();
1515
vm.filterDisjointNodes = !Filters.getIncludeDisjointNode();
1616
vm.filterSubclassRelations = !Filters.getIncludeSubclassRelations();
@@ -20,9 +20,9 @@ function filterGroupCtrl(Filters, TBoxExtractor) {
2020
/**
2121
* Toggle whether data types should be shown in the graph.
2222
*/
23-
vm.toggleTypes = function () {
24-
vm.filterTypes = !Filters.toggleLiterals();
25-
if (!vm.filterTypes) {
23+
vm.toggleDataTypes = function () {
24+
vm.filterDataTypes = !Filters.toggleDataTypes();
25+
if (!vm.filterDataTypes) {
2626
TBoxExtractor.extractDataTypes();
2727
}
2828
};

‎app/components/sidebar/groups/filter-group/filter-group.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<form class="form-horizontal">
22

33
<div class="checkbox">
4-
<label for="showLiterals">
5-
<input id="showLiterals" type="checkbox" ng-model="vm.filterTypes" ng-change="vm.toggleTypes()">
4+
<label for="showDataTypes">
5+
<input id="showDataTypes" type="checkbox" ng-model="vm.filterDataTypes" ng-change="vm.toggleDataTypes()">
66
datatypes
77
</label>
88
</div>

‎app/components/sidebar/groups/graph-settings-group/graph-settings-group.ctrl.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function graphSettingsCtrl($rootScope, $log, Prefixes, Links) {
1919
graphSettings.ccEdgeLength = Links.getClassToClassDistance();
2020

2121
// length of edges between data type and class
22-
graphSettings.ctEdgeLength = Links.getClassToDatatyoeDistance();
22+
graphSettings.ctEdgeLength = Links.getClassToDatatypeDistance();
2323

2424
graphSettings.layoutPaused = false;
2525

@@ -32,7 +32,7 @@ function graphSettingsCtrl($rootScope, $log, Prefixes, Links) {
3232
};
3333

3434
graphSettings.updateClassToDatatypeLength = function() {
35-
const newLength = parseInt(graphSettings.ctEdgeLength)
35+
const newLength = parseInt(graphSettings.ctEdgeLength);
3636
Links.setClassToDatatypeDistance(newLength);
3737

3838
// node link graph must be informed
@@ -44,6 +44,7 @@ function graphSettingsCtrl($rootScope, $log, Prefixes, Links) {
4444
*/
4545
graphSettings.toggleDifferentColors = function () {
4646
graphSettings.differentColors = Prefixes.toggleDifferentColors();
47+
$log.debug(`[GraphSettings] ${graphSettings.differentColors ? 'Use' : "Don't use"} different colors in graph.`);
4748
};
4849

4950
/**
@@ -52,6 +53,7 @@ function graphSettingsCtrl($rootScope, $log, Prefixes, Links) {
5253
graphSettings.toggleLayout = function () {
5354
graphSettings.layoutPaused = !graphSettings.layoutPaused;
5455
$rootScope.$broadcast('toggled-layout', graphSettings.layoutPaused);
56+
$log.debug(`[GraphSettings] ${graphSettings.layoutPaused ? 'Pause' : 'Resume'} force-directed layout.`);
5557
};
5658

5759
}

‎app/components/sidebar/groups/graph-settings-group/graph-settings.css

+24-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,18 @@ input[type=range] {
44
background: transparent;
55
}
66

7+
input[type=range]:focus {
8+
outline: none;
9+
}
10+
11+
input[type=range]::-webkit-slider-runnable-track {
12+
width: 100%;
13+
height: 0.8em;
14+
border: 1px solid #aaa;
15+
border-radius: 4px;
16+
margin: 10px 0 10px 0;
17+
}
18+
719
input[type=range]::-webkit-slider-thumb {
820
-webkit-appearance: none;
921
height: 1.4em;
@@ -14,20 +26,27 @@ input[type=range]::-webkit-slider-thumb {
1426
margin-top: -0.4em;
1527
}
1628

17-
input[type=range]::-webkit-slider-thumb:hover {
29+
input[type=range]::-webkit-slider-thumb:hover,
30+
input[type=range]::-moz-range-thumb:hover {
1831
border: 1px solid #999;
1932
}
2033

21-
input[type=range]::-webkit-slider-runnable-track{
34+
input[type=range]::-moz-range-track {
2235
width: 100%;
23-
height: 0.8em;
36+
height: 0.7em;
2437
border: 1px solid #aaa;
2538
border-radius: 4px;
2639
margin: 10px 0 10px 0;
40+
background: transparent;
2741
}
2842

29-
input[type=range]:focus {
30-
outline: none;
43+
input[type=range]::-moz-range-thumb {
44+
height: 1.3em;
45+
width: 1.3em;
46+
border: 1px solid #d3d3d3;
47+
border-radius: 4px;
48+
background: #f5f5f5;
49+
margin-top: -0.4em;
3150
}
3251

3352
input[type=range]::-ms-track {

‎app/components/sidebar/groups/namespace-group/namespace-group.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
({{ vm.prefixes.length }}):
1212
</strong>
1313
</p>
14-
<div class="prop-list" style="max-height: 140px;" ng-if="vm.prefixes.length > 0">
14+
<div class="prop-list" ng-if="vm.prefixes.length > 0">
1515
<table class="table table-condensed">
1616
<tr ng-repeat="pre in vm.prefixes | limitTo: vm.numberOfPrefixes">
1717
<td>

‎app/core/vendor.js

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ module.exports = function () {
44
require('angular');
55
require('angular-route');
66
require('angular-animate');
7-
require('angular-cookies');
87
require('bootstrap-loader');
98
require('angular-ui-bootstrap');
109

‎app/services/extractors/class-extractor.srv.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ class ClassExtractor extends Extractor {
88

99
/**
1010
* Create a new ClassExtractor.
11-
* @param {$cookies} $cookies
11+
* @param {Storage} Storage
1212
* @param {$http} $http
1313
* @param {$q} $q
1414
* @param {$log} $log
@@ -21,7 +21,7 @@ class ClassExtractor extends Extractor {
2121
*
2222
* @ngInject
2323
*/
24-
constructor ($cookies, $http, $q, $log, PREFIX, CLASS_BLACKLIST, RequestConfig, QueryFactory, Nodes, Promises) {
24+
constructor (Storage, $http, $q, $log, PREFIX, CLASS_BLACKLIST, RequestConfig, QueryFactory, Nodes, Promises) {
2525

2626
// call constructor of Extractor
2727
super();
@@ -34,11 +34,10 @@ class ClassExtractor extends Extractor {
3434
this.queryFactory = QueryFactory;
3535
this.nodes = Nodes;
3636
this.promises = Promises;
37-
38-
//TODO move cookie name into a constant
39-
let blacklistStr = $cookies.get('ldvowl_class_blacklist');
4037

41-
if (typeof blacklistStr !== 'undefined') {
38+
let blacklistStr = Storage.getItem('class_blacklist');
39+
40+
if (blacklistStr !== undefined && blacklistStr !== null) {
4241
// use last blacklist
4342
let classInput = blacklistStr.replace(/(\r\n|\n|\r|\s)/gm,'');
4443
this.setBlacklist(classInput.split(','));
@@ -142,8 +141,6 @@ class ClassExtractor extends Extractor {
142141
self.$log.warn('[Class Extractor] Class extraction was canceled!');
143142
deferred.reject(classIds);
144143
} else {
145-
self.$log.error(err);
146-
147144
if (!self.reqConfig.getUseProxy()) {
148145
self.$log.warn('[Class Extractor] Might need a proxy here, try again...');
149146
self.reqConfig.setUseProxy(true);

0 commit comments

Comments
 (0)