Skip to content

Commit bb63555

Browse files
ivaynbergkevin-brown
ivaynberg
authored and
kevin-brown
committed
mobile playground and some wip on architecture
1 parent 68f91c3 commit bb63555

12 files changed

Lines changed: 19349 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
.idea
2+
src/scss/*.css
23

‎playground/basic/basic.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>QUnit Example</title>
6+
<link href="../../src/scss/core.css" rel="stylesheet"/>
7+
<link href="../../src/scss/theme/default/layout.css" rel="stylesheet"/>
8+
9+
<script src="../../vendor/jquery-2.1.0.js" type="text/javascript"></script>
10+
<script src="../../src/js/util.js"></script>
11+
<script src="../../src/js/data.js"></script>
12+
<script src="../../src/js/selection.js"></script>
13+
<script src="../../src/js/results.js"></script>
14+
<script src="../../src/js/core.js"></script>
15+
16+
<script>
17+
$(function () {
18+
$("#source").on("change", function () {
19+
console.log("onchange");
20+
});
21+
new s2.Select($("#source"), {
22+
23+
});
24+
});
25+
</script>
26+
27+
28+
</head>
29+
<body>
30+
31+
32+
<input type="text" style="width:300px" autofocus/><br/>
33+
<select style="width:300px" id="source">
34+
<option value="AK">Alaska</option>
35+
<option value="HI">Hawaii</option>
36+
<option value="CA">California</option>
37+
<option value="NV">Nevada</option>
38+
<option value="OR">Oregon</option>
39+
<option value="WA">Washington</option>
40+
<option value="AZ">Arizona</option>
41+
<option value="CO">Colorado</option>
42+
<option value="ID">Idaho</option>
43+
<option value="MT">Montana</option>
44+
<option value="NE">Nebraska</option>
45+
<option value="NM">New Mexico</option>
46+
<option value="ND">North Dakota</option>
47+
<option value="UT">Utah</option>
48+
<option value="WY">Wyoming</option>
49+
<option value="AL">Alabama</option>
50+
<option value="AR">Arkansas</option>
51+
<option value="IL">Illinois</option>
52+
<option value="IA">Iowa</option>
53+
<option value="KS">Kansas</option>
54+
<option value="KY">Kentucky</option>
55+
<option value="LA">Louisiana</option>
56+
<option value="MN">Minnesota</option>
57+
<option value="MS">Mississippi</option>
58+
<option value="MO">Missouri</option>
59+
<option value="OK">Oklahoma</option>
60+
<option value="SD">South Dakota</option>
61+
<option value="TX">Texas</option>
62+
<option value="TN">Tennessee</option>
63+
<option value="WI">Wisconsin</option>
64+
<option value="CT">Connecticut</option>
65+
<option value="DE">Delaware</option>
66+
<option value="FL">Florida</option>
67+
<option value="GA">Georgia</option>
68+
<option value="IN">Indiana</option>
69+
<option value="ME">Maine</option>
70+
<option value="MD">Maryland</option>
71+
<option value="MA">Massachusetts</option>
72+
<option value="MI">Michigan</option>
73+
<option value="NH">New Hampshire</option>
74+
<option value="NJ">New Jersey</option>
75+
<option value="NY">New York</option>
76+
<option value="NC">North Carolina</option>
77+
<option value="OH">Ohio</option>
78+
<option value="PA">Pennsylvania</option>
79+
<option value="RI">Rhode Island</option>
80+
<option value="SC">South Carolina</option>
81+
<option value="VT">Vermont</option>
82+
<option value="VA">Virginia</option>
83+
<option value="WV">West Virginia</option>
84+
</select><br/>
85+
<input type="text" style="width:300px"/><br/>
86+
<select style="width:300px">
87+
<option value="AK">Alaska</option>
88+
<option value="HI">Hawaii</option>
89+
<option value="CA">California</option>
90+
<option value="NV">Nevada</option>
91+
<option value="OR">Oregon</option>
92+
<option value="WA">Washington</option>
93+
<option value="AZ">Arizona</option>
94+
<option value="CO">Colorado</option>
95+
<option value="ID">Idaho</option>
96+
<option value="MT">Montana</option>
97+
<option value="NE">Nebraska</option>
98+
<option value="NM">New Mexico</option>
99+
<option value="ND">North Dakota</option>
100+
<option value="UT">Utah</option>
101+
<option value="WY">Wyoming</option>
102+
<option value="AL">Alabama</option>
103+
<option value="AR">Arkansas</option>
104+
<option value="IL">Illinois</option>
105+
<option value="IA">Iowa</option>
106+
<option value="KS">Kansas</option>
107+
<option value="KY">Kentucky</option>
108+
<option value="LA">Louisiana</option>
109+
<option value="MN">Minnesota</option>
110+
<option value="MS">Mississippi</option>
111+
<option value="MO">Missouri</option>
112+
<option value="OK">Oklahoma</option>
113+
<option value="SD">South Dakota</option>
114+
<option value="TX">Texas</option>
115+
<option value="TN">Tennessee</option>
116+
<option value="WI">Wisconsin</option>
117+
<option value="CT">Connecticut</option>
118+
<option value="DE">Delaware</option>
119+
<option value="FL">Florida</option>
120+
<option value="GA">Georgia</option>
121+
<option value="IN">Indiana</option>
122+
<option value="ME">Maine</option>
123+
<option value="MD">Maryland</option>
124+
<option value="MA">Massachusetts</option>
125+
<option value="MI">Michigan</option>
126+
<option value="NH">New Hampshire</option>
127+
<option value="NJ">New Jersey</option>
128+
<option value="NY">New York</option>
129+
<option value="NC">North Carolina</option>
130+
<option value="OH">Ohio</option>
131+
<option value="PA">Pennsylvania</option>
132+
<option value="RI">Rhode Island</option>
133+
<option value="SC">South Carolina</option>
134+
<option value="VT">Vermont</option>
135+
<option value="VA">Virginia</option>
136+
<option value="WV">West Virginia</option>
137+
</select>
138+
139+
<div style="width: 300px; height: 300px; border: 1px solid black" tabindex="10" id="outer">
140+
141+
<div style="width:100px; height: 100px; border: 1px solid blue" id="inner"></div>
142+
</div>
143+
144+
</div>
145+
146+
147+
<div style="position: absolute; left:0; top:0; background: white; border: 1px solid red;" id="focus-spy">hello there
148+
</div>
149+
<script>
150+
$(function () {
151+
var el = $("#focus-spy");
152+
$(window).bind("scroll", function () {
153+
el.css({top: $(window).scrollTop()});
154+
});
155+
window.setInterval(function () {
156+
var a = document.activeElement;
157+
var b = $(a);
158+
el.html("tag: " + a.tagName + " id:" + a.id + " class:" + b.attr("class") + " val:" + b.val());
159+
}, 100);
160+
});
161+
</script>
162+
163+
164+
</body>
165+
</html>
166+
167+

‎playground/mobile/dropdown.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<html>
2+
<head>
3+
4+
<meta2s name="viewport" content="width=device-width">
5+
6+
<style>
7+
8+
9+
.dropdown {
10+
background-color: green;
11+
border: 3px solid red;
12+
position: fixed;
13+
padding: 10px;
14+
left: 0;
15+
right: 0;
16+
top: 0;
17+
bottom: 0;
18+
}
19+
20+
.search input {
21+
width: 100%;
22+
}
23+
24+
.results {
25+
overflow: scroll;
26+
border: 1px solid blue;
27+
}
28+
29+
.results ul {
30+
list-style: none;
31+
margin: 0;
32+
padding: 0;
33+
}
34+
35+
.results li {
36+
border: 1px solid red;
37+
height: 10vh;
38+
height: 40px;
39+
margin: 3px;
40+
padding: 0;
41+
}
42+
43+
44+
</style>
45+
46+
<script src="jquery-2.1.0.js"></script>
47+
<script>
48+
$(function () {
49+
50+
function adjust() {
51+
var height = $(".dropdown").height();
52+
var searchHeight = $(".search").height();
53+
var needed = height - searchHeight;
54+
console.log(height, searchHeight, needed);
55+
$(".results").css({maxHeight: needed});
56+
}
57+
58+
59+
$(".dropdown")
60+
.on("scroll", function (e) {
61+
e.preventDefault();
62+
return false;
63+
});
64+
65+
$(".search input").on("blur", function() {
66+
$(".dropdown").hide();
67+
})
68+
69+
70+
//window.setInterval(adjust, 100);
71+
72+
$("#trigger").on("focus", function(e) {
73+
$(".dropdown").show();
74+
$(".search input").focus();
75+
$("head").append('<meta name = "viewport" content = "user-scalable=no, width=device-width, initial-scale=1.0, maximium-scale=1.0, minimum-scale=1.0"/>');
76+
adjust();
77+
});
78+
79+
$("#resize").on("click", adjust);
80+
81+
var a = 0;
82+
$(window).on("resize", function () {
83+
adjust();
84+
});
85+
86+
87+
88+
89+
});
90+
91+
</script>
92+
93+
</head>
94+
<body>
95+
96+
<form>
97+
<p>
98+
<input type="text"/>
99+
</p>
100+
<p>
101+
<input type="text"/>
102+
</p>
103+
<p>
104+
<input type="text" id="trigger"/>
105+
</p>
106+
<p>
107+
<input type="text"/>
108+
</p>
109+
</form>
110+
111+
<div class="dropdown" style="display:none">
112+
113+
<div class="result-list">
114+
<div class="search">
115+
<a href="#">reload</a><span id="message"></span><a href="#" id="resize">resize</a>
116+
<input type="text"/>
117+
</div>
118+
<div class="results">
119+
<ul>
120+
<li>Result 1</li>
121+
<li>Result 2</li>
122+
<li>Result 3</li>
123+
<li>Result 4</li>
124+
<li>Result 5</li>
125+
<li>Result 6</li>
126+
<li>Result 7</li>
127+
<li>Result 8</li>
128+
<li>Result 9</li>
129+
<li>Result 10</li>
130+
<li>Result 11</li>
131+
<li>Result 12</li>
132+
<li>Result 13</li>
133+
<li>Result 14</li>
134+
<li>Result 15</li>
135+
<li>Result 16</li>
136+
<li>Result 17</li>
137+
<li>Result 18</li>
138+
<li>Result 19</li>
139+
<li>Result 20</li>
140+
<li>Result 21</li>
141+
<li>Result 22</li>
142+
<li>Result 23</li>
143+
<li>Result 24</li>
144+
<li>Result 25</li>
145+
<li>Result 26</li>
146+
<li>Result 27</li>
147+
<li>Result 28</li>
148+
</ul>
149+
150+
</div>
151+
152+
</div>
153+
154+
155+
</div>
156+
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)