forked from MirrorHub/synapse
File organisation sanity: put directives and filters into dedicated files
This commit is contained in:
Emmanuel ROHEE
parent
f4839ea042
commit
ecce301632
6 changed files with 254 additions and 197 deletions
38
webclient/app-directive.js
Normal file
38
webclient/app-directive.js
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
/*
|
||||||
|
Copyright 2014 matrix.org
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('matrixWebClient')
|
||||||
|
.directive('ngEnter', function () {
|
||||||
|
return function (scope, element, attrs) {
|
||||||
|
element.bind("keydown keypress", function (event) {
|
||||||
|
if(event.which === 13) {
|
||||||
|
scope.$apply(function () {
|
||||||
|
scope.$eval(attrs.ngEnter);
|
||||||
|
});
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.directive('ngFocus', ['$timeout', function($timeout) {
|
||||||
|
return {
|
||||||
|
link: function(scope, element, attr) {
|
||||||
|
$timeout(function() { element[0].focus(); }, 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
79
webclient/app-filter.js
Normal file
79
webclient/app-filter.js
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
/*
|
||||||
|
Copyright 2014 matrix.org
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('matrixWebClient')
|
||||||
|
.filter('duration', function() {
|
||||||
|
return function(time) {
|
||||||
|
if (!time) return;
|
||||||
|
var t = parseInt(time / 1000);
|
||||||
|
var s = t % 60;
|
||||||
|
var m = parseInt(t / 60) % 60;
|
||||||
|
var h = parseInt(t / (60 * 60)) % 24;
|
||||||
|
var d = parseInt(t / (60 * 60 * 24));
|
||||||
|
if (t < 60) {
|
||||||
|
return s + "s";
|
||||||
|
}
|
||||||
|
if (t < 60 * 60) {
|
||||||
|
return m + "m "; // + s + "s";
|
||||||
|
}
|
||||||
|
if (t < 24 * 60 * 60) {
|
||||||
|
return h + "h "; // + m + "m";
|
||||||
|
}
|
||||||
|
return d + "d "; // + h + "h";
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter('orderMembersList', function($sce) {
|
||||||
|
return function(members) {
|
||||||
|
var filtered = [];
|
||||||
|
|
||||||
|
var displayNames = {};
|
||||||
|
angular.forEach(members, function(value, key) {
|
||||||
|
value["id"] = key;
|
||||||
|
filtered.push( value );
|
||||||
|
if (value["displayname"]) {
|
||||||
|
if (!displayNames[value["displayname"]]) {
|
||||||
|
displayNames[value["displayname"]] = [];
|
||||||
|
}
|
||||||
|
displayNames[value["displayname"]].push(key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// FIXME: we shouldn't disambiguate displayNames on every orderMembersList
|
||||||
|
// invocation but keep track of duplicates incrementally somewhere
|
||||||
|
angular.forEach(displayNames, function(value, key) {
|
||||||
|
if (value.length > 1) {
|
||||||
|
// console.log(key + ": " + value);
|
||||||
|
for (i=0; i < value.length; i++) {
|
||||||
|
var v = value[i];
|
||||||
|
members[v].displayname += " (" + v + ")";
|
||||||
|
// console.log(v + " " + members[v]);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
filtered.sort(function (a, b) {
|
||||||
|
return ((a["mtime_age"] || 10e10) > (b["mtime_age"] || 10e10) ? 1 : -1);
|
||||||
|
});
|
||||||
|
return filtered;
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter('unsafe', ['$sce', function($sce) {
|
||||||
|
return function(text) {
|
||||||
|
return $sce.trustAsHtml(text);
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
|
@ -83,84 +83,3 @@ matrixWebClient.run(['$location', 'matrixService', 'eventStreamService', functio
|
||||||
eventStreamService.resume();
|
eventStreamService.resume();
|
||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
matrixWebClient
|
|
||||||
.directive('ngEnter', function () {
|
|
||||||
return function (scope, element, attrs) {
|
|
||||||
element.bind("keydown keypress", function (event) {
|
|
||||||
if(event.which === 13) {
|
|
||||||
scope.$apply(function () {
|
|
||||||
scope.$eval(attrs.ngEnter);
|
|
||||||
});
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.directive('ngFocus', ['$timeout', function($timeout) {
|
|
||||||
return {
|
|
||||||
link: function(scope, element, attr) {
|
|
||||||
$timeout(function() { element[0].focus() }, 0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}])
|
|
||||||
.filter('duration', function() {
|
|
||||||
return function(time) {
|
|
||||||
if (!time) return;
|
|
||||||
var t = parseInt(time / 1000);
|
|
||||||
var s = t % 60;
|
|
||||||
var m = parseInt(t / 60) % 60;
|
|
||||||
var h = parseInt(t / (60 * 60)) % 24;
|
|
||||||
var d = parseInt(t / (60 * 60 * 24));
|
|
||||||
if (t < 60) {
|
|
||||||
return s + "s"
|
|
||||||
}
|
|
||||||
if (t < 60 * 60) {
|
|
||||||
return m + "m "; // + s + "s";
|
|
||||||
}
|
|
||||||
if (t < 24 * 60 * 60) {
|
|
||||||
return h + "h "; // + m + "m";
|
|
||||||
}
|
|
||||||
return d + "d "; // + h + "h";
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.filter('orderMembersList', function($sce) {
|
|
||||||
return function(members) {
|
|
||||||
var filtered = [];
|
|
||||||
|
|
||||||
var displayNames = {};
|
|
||||||
angular.forEach(members, function(value, key) {
|
|
||||||
value["id"] = key;
|
|
||||||
filtered.push( value );
|
|
||||||
if (value["displayname"]) {
|
|
||||||
if (!displayNames[value["displayname"]]) {
|
|
||||||
displayNames[value["displayname"]] = [];
|
|
||||||
}
|
|
||||||
displayNames[value["displayname"]].push(key);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// FIXME: we shouldn't disambiguate displayNames on every orderMembersList
|
|
||||||
// invocation but keep track of duplicates incrementally somewhere
|
|
||||||
angular.forEach(displayNames, function(value, key) {
|
|
||||||
if (value.length > 1) {
|
|
||||||
// console.log(key + ": " + value);
|
|
||||||
for (i=0; i < value.length; i++) {
|
|
||||||
var v = value[i];
|
|
||||||
members[v].displayname += " (" + v + ")";
|
|
||||||
// console.log(v + " " + members[v]);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
filtered.sort(function (a, b) {
|
|
||||||
return ((a["mtime_age"] || 10e10) > (b["mtime_age"] || 10e10) ? 1 : -1);
|
|
||||||
});
|
|
||||||
return filtered;
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.filter('unsafe', ['$sce', function($sce) {
|
|
||||||
return function(text) {
|
|
||||||
return $sce.trustAsHtml(text);
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,11 @@
|
||||||
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
|
<script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script>
|
||||||
<script src="app.js"></script>
|
<script src="app.js"></script>
|
||||||
<script src="app-controller.js"></script>
|
<script src="app-controller.js"></script>
|
||||||
|
<script src="app-directive.js"></script>
|
||||||
|
<script src="app-filter.js"></script>
|
||||||
<script src="login/login-controller.js"></script>
|
<script src="login/login-controller.js"></script>
|
||||||
<script src="room/room-controller.js"></script>
|
<script src="room/room-controller.js"></script>
|
||||||
|
<script src="room/room-directive.js"></script>
|
||||||
<script src="rooms/rooms-controller.js"></script>
|
<script src="rooms/rooms-controller.js"></script>
|
||||||
<script src="user/user-controller.js"></script>
|
<script src="user/user-controller.js"></script>
|
||||||
<script src="components/matrix/matrix-service.js"></script>
|
<script src="components/matrix/matrix-service.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -15,122 +15,6 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
angular.module('RoomController', ['ngSanitize'])
|
angular.module('RoomController', ['ngSanitize'])
|
||||||
|
|
||||||
.directive('autoComplete', ['$timeout', function ($timeout) {
|
|
||||||
return function (scope, element, attrs) {
|
|
||||||
element.bind("keydown keypress", function (event) {
|
|
||||||
// console.log("event: " + event.which);
|
|
||||||
if (event.which === 9) {
|
|
||||||
if (!scope.autoCompleting) { // cache our starting text
|
|
||||||
// console.log("caching " + element[0].value);
|
|
||||||
scope.autoCompleteOriginal = element[0].value;
|
|
||||||
scope.autoCompleting = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.shiftKey) {
|
|
||||||
scope.autoCompleteIndex--;
|
|
||||||
if (scope.autoCompleteIndex < 0) {
|
|
||||||
scope.autoCompleteIndex = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
scope.autoCompleteIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
var searchIndex = 0;
|
|
||||||
var targetIndex = scope.autoCompleteIndex;
|
|
||||||
var text = scope.autoCompleteOriginal;
|
|
||||||
|
|
||||||
// console.log("targetIndex: " + targetIndex + ", text=" + text);
|
|
||||||
|
|
||||||
// FIXME: use the correct regexp to recognise userIDs
|
|
||||||
var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
|
|
||||||
if (targetIndex === 0) {
|
|
||||||
element[0].value = text;
|
|
||||||
}
|
|
||||||
else if (search && search[1]) {
|
|
||||||
// console.log("search found: " + search);
|
|
||||||
var expansion;
|
|
||||||
|
|
||||||
// FIXME: could do better than linear search here
|
|
||||||
angular.forEach(scope.members, function(item, name) {
|
|
||||||
if (item.displayname && searchIndex < targetIndex) {
|
|
||||||
if (item.displayname.toLowerCase().indexOf(search[1].toLowerCase()) == 0) {
|
|
||||||
expansion = item.displayname;
|
|
||||||
searchIndex++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (searchIndex < targetIndex) { // then search raw mxids
|
|
||||||
angular.forEach(scope.members, function(item, name) {
|
|
||||||
if (searchIndex < targetIndex) {
|
|
||||||
if (name.toLowerCase().indexOf(search[1].toLowerCase()) == 1) {
|
|
||||||
expansion = name;
|
|
||||||
searchIndex++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchIndex === targetIndex) {
|
|
||||||
// xchat-style tab complete
|
|
||||||
if (search[0].length === text.length)
|
|
||||||
expansion += " : ";
|
|
||||||
else
|
|
||||||
expansion += " ";
|
|
||||||
element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion);
|
|
||||||
// cancel blink
|
|
||||||
element[0].className = "";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// console.log("wrapped!");
|
|
||||||
element[0].className = "blink"; // XXX: slightly naughty to bypass angular
|
|
||||||
$timeout(function() {
|
|
||||||
element[0].className = "";
|
|
||||||
}, 150);
|
|
||||||
element[0].value = text;
|
|
||||||
scope.autoCompleteIndex = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
scope.autoCompleteIndex = 0;
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
else if (event.which != 16 && scope.autoCompleting) {
|
|
||||||
scope.autoCompleting = false;
|
|
||||||
scope.autoCompleteIndex = 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}])
|
|
||||||
|
|
||||||
// A directive to anchor the scroller position at the bottom when the browser is resizing.
|
|
||||||
// When the screen resizes, the bottom of the element remains the same, not the top.
|
|
||||||
.directive('keepScroll', ['$window', function($window) {
|
|
||||||
return {
|
|
||||||
link: function(scope, elem, attrs) {
|
|
||||||
|
|
||||||
scope.windowHeight = $window.innerHeight;
|
|
||||||
|
|
||||||
// Listen to window size change
|
|
||||||
angular.element($window).bind('resize', function() {
|
|
||||||
|
|
||||||
// If the scroller is scrolled to the bottom, there is nothing to do.
|
|
||||||
// The browser will move it as expected
|
|
||||||
if (elem.scrollTop() + elem.height() !== elem[0].scrollHeight) {
|
|
||||||
// Else, move the scroller position according to the window height change delta
|
|
||||||
var windowHeightDelta = $window.innerHeight - scope.windowHeight;
|
|
||||||
elem.scrollTop(elem.scrollTop() - windowHeightDelta);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Store the new window height for the next screen size change
|
|
||||||
scope.windowHeight = $window.innerHeight;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}])
|
|
||||||
|
|
||||||
.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
|
.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
|
||||||
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
|
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
|
||||||
134
webclient/room/room-directive.js
Normal file
134
webclient/room/room-directive.js
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
/*
|
||||||
|
Copyright 2014 matrix.org
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('RoomController')
|
||||||
|
.directive('autoComplete', ['$timeout', function ($timeout) {
|
||||||
|
return function (scope, element, attrs) {
|
||||||
|
element.bind("keydown keypress", function (event) {
|
||||||
|
// console.log("event: " + event.which);
|
||||||
|
if (event.which === 9) {
|
||||||
|
if (!scope.autoCompleting) { // cache our starting text
|
||||||
|
// console.log("caching " + element[0].value);
|
||||||
|
scope.autoCompleteOriginal = element[0].value;
|
||||||
|
scope.autoCompleting = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.shiftKey) {
|
||||||
|
scope.autoCompleteIndex--;
|
||||||
|
if (scope.autoCompleteIndex < 0) {
|
||||||
|
scope.autoCompleteIndex = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scope.autoCompleteIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
var searchIndex = 0;
|
||||||
|
var targetIndex = scope.autoCompleteIndex;
|
||||||
|
var text = scope.autoCompleteOriginal;
|
||||||
|
|
||||||
|
// console.log("targetIndex: " + targetIndex + ", text=" + text);
|
||||||
|
|
||||||
|
// FIXME: use the correct regexp to recognise userIDs
|
||||||
|
var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
|
||||||
|
if (targetIndex === 0) {
|
||||||
|
element[0].value = text;
|
||||||
|
}
|
||||||
|
else if (search && search[1]) {
|
||||||
|
// console.log("search found: " + search);
|
||||||
|
var expansion;
|
||||||
|
|
||||||
|
// FIXME: could do better than linear search here
|
||||||
|
angular.forEach(scope.members, function(item, name) {
|
||||||
|
if (item.displayname && searchIndex < targetIndex) {
|
||||||
|
if (item.displayname.toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
|
||||||
|
expansion = item.displayname;
|
||||||
|
searchIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (searchIndex < targetIndex) { // then search raw mxids
|
||||||
|
angular.forEach(scope.members, function(item, name) {
|
||||||
|
if (searchIndex < targetIndex) {
|
||||||
|
if (name.toLowerCase().indexOf(search[1].toLowerCase()) === 1) {
|
||||||
|
expansion = name;
|
||||||
|
searchIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchIndex === targetIndex) {
|
||||||
|
// xchat-style tab complete
|
||||||
|
if (search[0].length === text.length)
|
||||||
|
expansion += " : ";
|
||||||
|
else
|
||||||
|
expansion += " ";
|
||||||
|
element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion);
|
||||||
|
// cancel blink
|
||||||
|
element[0].className = "";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// console.log("wrapped!");
|
||||||
|
element[0].className = "blink"; // XXX: slightly naughty to bypass angular
|
||||||
|
$timeout(function() {
|
||||||
|
element[0].className = "";
|
||||||
|
}, 150);
|
||||||
|
element[0].value = text;
|
||||||
|
scope.autoCompleteIndex = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
scope.autoCompleteIndex = 0;
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
else if (event.which !== 16 && scope.autoCompleting) {
|
||||||
|
scope.autoCompleting = false;
|
||||||
|
scope.autoCompleteIndex = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}])
|
||||||
|
|
||||||
|
// A directive to anchor the scroller position at the bottom when the browser is resizing.
|
||||||
|
// When the screen resizes, the bottom of the element remains the same, not the top.
|
||||||
|
.directive('keepScroll', ['$window', function($window) {
|
||||||
|
return {
|
||||||
|
link: function(scope, elem, attrs) {
|
||||||
|
|
||||||
|
scope.windowHeight = $window.innerHeight;
|
||||||
|
|
||||||
|
// Listen to window size change
|
||||||
|
angular.element($window).bind('resize', function() {
|
||||||
|
|
||||||
|
// If the scroller is scrolled to the bottom, there is nothing to do.
|
||||||
|
// The browser will move it as expected
|
||||||
|
if (elem.scrollTop() + elem.height() !== elem[0].scrollHeight) {
|
||||||
|
// Else, move the scroller position according to the window height change delta
|
||||||
|
var windowHeightDelta = $window.innerHeight - scope.windowHeight;
|
||||||
|
elem.scrollTop(elem.scrollTop() - windowHeightDelta);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store the new window height for the next screen size change
|
||||||
|
scope.windowHeight = $window.innerHeight;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
|
||||||
Loading…
Reference in a new issue