-
Notifications
You must be signed in to change notification settings - Fork 2
/
CircularIconsGroup.js
76 lines (68 loc) · 2.69 KB
/
CircularIconsGroup.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
sap.ui.core.Control.extend('sap.dennisseah.CircularIconsGroup', {
metadata: {
properties: {
borderwidth: {type: "sap.ui.core.CSSSize", defaultValue: '50px'},
diameter: {type: "sap.ui.core.CSSSize", defaultValue: '100px'},
color: {type: "sap.ui.core.CSSColor", defaultValue: '#007cc0'},
btncolor: {type: "sap.ui.core.CSSColor", defaultValue: '#005990'}
},
aggregations: {
icons: {type: "sap.ui.core.Icon"}
}
},
_style: function() {
var styles = [
'height: ' + this.getDiameter(),
'width: ' + this.getDiameter(),
'border-color: ' + this.getColor(),
'border-width: ' + this.getBorderwidth()
];
return styles.join('; ');
},
renderer: function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addClass("sap-dennisseah-circular-icons-group");
oRm.writeClasses();
oRm.write(' style="' + oControl._style() + '">');
var icons = oControl.getAggregation('icons');
for (var i = 0; i < icons.length; i++) {
var icon = icons[i];
icon.addStyleClass('sap-dennisseah-circular-icons-group-btn');
oRm.renderControl(icon);
}
oRm.write("</div>");
},
onAfterRendering: function() {
var that = this;
function center() {
var element = that.$()[0];
var d = element.getBoundingClientRect();
return { cx: d.left + d.width/2, cy: d.top + d.height/2 };
}
var icons = this.getAggregation('icons');
if (icons.length === 0) {
return;
}
var angle = 0;
var borderwidth = parseInt(this.getBorderwidth().replace('px',''));
var width = parseInt(this.getDiameter().replace('px',''));
var center = center();
var step = (2*Math.PI) / icons.length;
for (var i = 0; i < icons.length; i++) {
var ic = icons[i];
var ic_obj = $('#' + ic.getId());
var iradius = Math.max(ic_obj.width(), ic_obj.height());
var base = ((width + borderwidth)/2);
var offset = (iradius/2) + 5; // 5 = padding
var x = Math.round(base * Math.cos(angle)) + center.cx - offset;
var y = Math.round(base * Math.sin(angle)) + center.cy - offset;
ic_obj.css('background-color', this.getBtncolor());
ic_obj.css('width', iradius + 'px');
ic_obj.css('height', iradius + 'px');
ic_obj.css('left', x + 'px');
ic_obj.css('top', y + 'px');
angle += step;
}
}
});