@everymatrix/player-account-gaming-limits-wrapper-2 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.html
CHANGED
|
@@ -14,6 +14,32 @@
|
|
|
14
14
|
}
|
|
15
15
|
</style>
|
|
16
16
|
<script src='dist/player-account-gaming-limits-wrapper-2.js'></script>
|
|
17
|
+
<script>
|
|
18
|
+
window.addEventListener("load", function () {
|
|
19
|
+
// store tabs variable
|
|
20
|
+
var myTabs = document.querySelectorAll("ul.nav-tabs > li");
|
|
21
|
+
function myTabClicks(tabClickEvent) {
|
|
22
|
+
for (var i = 0; i < myTabs.length; i++) {
|
|
23
|
+
myTabs[i].classList.remove("active");
|
|
24
|
+
}
|
|
25
|
+
var clickedTab = tabClickEvent.currentTarget;
|
|
26
|
+
clickedTab.classList.add("active");
|
|
27
|
+
tabClickEvent.preventDefault();
|
|
28
|
+
var myContentPanes = document.querySelectorAll(".tab-pane");
|
|
29
|
+
for (i = 0; i < myContentPanes.length; i++) {
|
|
30
|
+
myContentPanes[i].classList.remove("active");
|
|
31
|
+
}
|
|
32
|
+
var anchorReference = tabClickEvent.target;
|
|
33
|
+
var activePaneId = anchorReference.getAttribute("href");
|
|
34
|
+
var activePane = document.querySelector(activePaneId);
|
|
35
|
+
activePane.classList.add("active");
|
|
36
|
+
}
|
|
37
|
+
for (i = 0; i < myTabs.length; i++) {
|
|
38
|
+
myTabs[i].addEventListener("click", myTabClicks)
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
</script>
|
|
17
43
|
</head>
|
|
18
44
|
|
|
19
45
|
<body>
|
|
@@ -24,14 +50,94 @@
|
|
|
24
50
|
.header__name { color: #fff; }
|
|
25
51
|
.header__name span { margin-right: 10px; font-weight: bold; }
|
|
26
52
|
.webcomponent { padding: 10px 20px; }
|
|
53
|
+
.container--tabs {
|
|
54
|
+
margin: 2rem;
|
|
55
|
+
}
|
|
56
|
+
.container--tabs .nav-tabs {
|
|
57
|
+
float: left;
|
|
58
|
+
width: 100%;
|
|
59
|
+
margin: 0;
|
|
60
|
+
list-style-type: none;
|
|
61
|
+
border-bottom: 1px solid #ddd;
|
|
62
|
+
}
|
|
63
|
+
.container--tabs .nav-tabs > li {
|
|
64
|
+
float: left;
|
|
65
|
+
margin-bottom: -1px;
|
|
66
|
+
}
|
|
67
|
+
.container--tabs .nav-tabs > li > a {
|
|
68
|
+
float: left;
|
|
69
|
+
margin-right: 2px;
|
|
70
|
+
line-height: 1.42857143;
|
|
71
|
+
padding: 10px;
|
|
72
|
+
border: 1px solid transparent;
|
|
73
|
+
border-radius: 4px 4px 0 0;
|
|
74
|
+
}
|
|
75
|
+
.container--tabs .nav-tabs > li > a:hover {
|
|
76
|
+
border-color: #eee #eee #ddd;
|
|
77
|
+
}
|
|
78
|
+
.container--tabs .nav-tabs > li.active > a, .container--tabs .nav-tabs > li.active > a:hover, .container--tabs .nav-tabs > li.active > a:focus {
|
|
79
|
+
color: #555;
|
|
80
|
+
cursor: default;
|
|
81
|
+
background-color: #fff;
|
|
82
|
+
border: 1px solid #ddd;
|
|
83
|
+
border-bottom-color: transparent;
|
|
84
|
+
}
|
|
85
|
+
.container--tabs .tab-content {
|
|
86
|
+
float: left;
|
|
87
|
+
width: 100%;
|
|
88
|
+
}
|
|
89
|
+
.container--tabs .tab-content > .tab-pane {
|
|
90
|
+
display: none;
|
|
91
|
+
}
|
|
92
|
+
.container--tabs .tab-content > .tab-pane.active {
|
|
93
|
+
display: block;
|
|
94
|
+
padding: 2.5% 3.5%;
|
|
95
|
+
background-color: #efefef;
|
|
96
|
+
}
|
|
97
|
+
.container--tabs .tab-content > .active {
|
|
98
|
+
display: block;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
27
103
|
</style>
|
|
28
104
|
|
|
29
105
|
<div class="webcomponent">
|
|
106
|
+
<div class="container--tabs">
|
|
107
|
+
<section class="row">
|
|
108
|
+
<ul class="nav nav-tabs">
|
|
109
|
+
<li class="active"><a href="#tab-1">Tab 1</a></li>
|
|
110
|
+
<li class=""><a href="#tab-2">Tab 2</a></li>
|
|
111
|
+
<li class=""><a href="#tab-3">Tab 3</a></li>
|
|
112
|
+
</ul>
|
|
113
|
+
<div class="tab-content">
|
|
114
|
+
<div id="tab-1" class="tab-pane active">
|
|
115
|
+
<span class="glyphicon glyphicon-leaf glyphicon--home--feature two columns text-center"></span>
|
|
116
|
+
<span class="col-md-10">
|
|
117
|
+
<h3>Feature 1</h3>
|
|
118
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
119
|
+
</span>
|
|
120
|
+
</div>
|
|
121
|
+
<div id="tab-2" class="tab-pane">
|
|
122
|
+
<span class="glyphicon glyphicon-fire glyphicon--home--feature two columns text-center"></span>
|
|
123
|
+
<span class="col-md-10">
|
|
30
124
|
<player-account-gaming-limits-wrapper-2 endpoint="https://betathome-com-stage-api.stage.norway.everymatrix.com/"
|
|
31
125
|
session="23752d9b-b55b-49b9-a6c2-7f7ac29fe376" userid="4500790" currency="EUR" includedlimits="deposit:10-99999999"
|
|
32
126
|
tablabels="Deposit" historyenabled="false" apiversion="gmcore"
|
|
33
127
|
clientstylingurl="https://storage.googleapis.com/css-upload/bahLimit-2.css" lang="en">
|
|
34
128
|
</player-account-gaming-limits-wrapper-2>
|
|
129
|
+
</span>
|
|
130
|
+
</div>
|
|
131
|
+
<div id="tab-3" class="tab-pane">
|
|
132
|
+
<span class="glyphicon glyphicon-tint glyphicon--home--feature two columns text-center"></span>
|
|
133
|
+
<span class="col-md-10">
|
|
134
|
+
<h3>Feature 3</h3>
|
|
135
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
136
|
+
</span>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</section>
|
|
140
|
+
</div>
|
|
35
141
|
|
|
36
142
|
</div>
|
|
37
143
|
|
package/package.json
CHANGED
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
let limitTabs:Array<any> = [];
|
|
27
27
|
let limitMinMax:object = {};
|
|
28
28
|
let multiLimit:string = '';
|
|
29
|
-
let selectedTab:number = -1;
|
|
30
29
|
|
|
31
30
|
let tabLabelArray:Array<string>;
|
|
32
31
|
let mainContainer:HTMLElement | undefined = undefined;
|
|
@@ -68,6 +67,7 @@
|
|
|
68
67
|
}
|
|
69
68
|
|
|
70
69
|
const selectTab = (index:number):void => {
|
|
70
|
+
console.log('mainContainer', mainContainer, mainContainer.children.length)
|
|
71
71
|
if (mainContainer.children.length > 0) {
|
|
72
72
|
for (let i:number = 0; i < mainContainer.children.length; i++) {
|
|
73
73
|
if (index === i) {
|
|
@@ -103,7 +103,6 @@
|
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
onMount(() => {
|
|
106
|
-
selectedTab = -1;
|
|
107
106
|
return () => {
|
|
108
107
|
mainContainer = null;
|
|
109
108
|
tabsContainer = null;
|
|
@@ -114,7 +113,6 @@
|
|
|
114
113
|
$: mainContainer && !isLoading && selectTab(0);
|
|
115
114
|
$: clientstylingurl && setClientStylingURL();
|
|
116
115
|
$: clientstyling && setClientStyling();
|
|
117
|
-
$: selectedTab && selectedTab < 0 && mainContainer && selectTab(0);
|
|
118
116
|
</script>
|
|
119
117
|
|
|
120
118
|
<svelte:head>
|