Skip to content

Commit a2d59d0

Browse files
sebastian-lenzsebastian-lenz
committed
Tablet improvements
1 parent 4a8e2ea commit a2d59d0

File tree

11 files changed

+240
-56
lines changed

11 files changed

+240
-56
lines changed

‎bin/themes/default/assets/css/main.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -499,18 +499,18 @@ pre code { padding: 0; font-size: 100%; background-color: transparent; }
499499
html.default .col-menu { width: 28%; }
500500
html.default .tsd-navigation { padding-left: 10px; } }
501501
@media (max-width: 900px) { html.default .col-content { float: none; width: 100%; }
502-
html.default .col-menu { position: fixed !important; overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 1024; top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important; width: 100%; padding: 20px 20px 20px 0; max-width: 450px; visibility: hidden; background-color: white; }
502+
html.default .col-menu { position: fixed !important; overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 1024; top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important; width: 100%; padding: 20px 20px 20px 0; max-width: 450px; visibility: hidden; background-color: white; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); }
503503
html.default .overlay { content: ""; display: block; position: fixed; z-index: 1023; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); visibility: hidden; }
504504
html.default.to-has-menu .overlay { -webkit-animation: fade-in 0.4s; animation: fade-in 0.4s; }
505-
html.default.to-has-menu header, html.default.to-has-menu .col-content { -webkit-animation: shift-to-left 0.4s; animation: shift-to-left 0.4s; }
505+
html.default.to-has-menu header, html.default.to-has-menu footer, html.default.to-has-menu .col-content { -webkit-animation: shift-to-left 0.4s; animation: shift-to-left 0.4s; }
506506
html.default.to-has-menu .col-menu { -webkit-animation: pop-in-from-right 0.4s; animation: pop-in-from-right 0.4s; }
507507
html.default.from-has-menu .overlay { -webkit-animation: fade-out 0.4s; animation: fade-out 0.4s; }
508-
html.default.from-has-menu header, html.default.from-has-menu .col-content { -webkit-animation: unshift-to-left 0.4s; animation: unshift-to-left 0.4s; }
508+
html.default.from-has-menu header, html.default.from-has-menu footer, html.default.from-has-menu .col-content { -webkit-animation: unshift-to-left 0.4s; animation: unshift-to-left 0.4s; }
509509
html.default.from-has-menu .col-menu { -webkit-animation: pop-out-to-right 0.4s; animation: pop-out-to-right 0.4s; }
510510
html.default.has-menu body { overflow: hidden; }
511511
html.default.has-menu .overlay { visibility: visible; }
512-
html.default.has-menu header, html.default.has-menu .col-content { -webkit-transform: translate(-25%, 0); -ms-transform: translate(-25%, 0); transform: translate(-25%, 0); }
513-
html.default.has-menu .col-menu { visibility: visible; } }
512+
html.default.has-menu header, html.default.has-menu footer, html.default.has-menu .col-content { -webkit-transform: translate(-25%, 0); -ms-transform: translate(-25%, 0); transform: translate(-25%, 0); }
513+
html.default.has-menu .col-menu { visibility: visible; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } }
514514

515515
.tsd-page-title { padding: 70px 0 20px 0; margin: 0 0 40px 0; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); }
516516
.tsd-page-title h1 { margin: 0; }
@@ -527,6 +527,7 @@ html.minimal .content-wrap { padding-left: 300px; }
527527
html.minimal .tsd-navigation { position: fixed !important; overflow: auto; overflow-scrolling: touch; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1; left: 0; top: 40px; bottom: 0; width: 300px; padding: 20px; margin: 0; }
528528
html.minimal .tsd-member .tsd-member { margin-left: 0; }
529529
html.minimal .tsd-page-toolbar { position: fixed; z-index: 2; }
530+
html.minimal #tsd-filter .tsd-filter-group { right: 0; -webkit-transform: none; -ms-transform: none; transform: none; }
530531
html.minimal footer { background-color: transparent; }
531532
html.minimal footer .container { padding: 0; }
532533
html.minimal .tsd-generator { padding: 0; }
@@ -560,12 +561,11 @@ dl.tsd-comment-tags p { margin: 0; }
560561
#tsd-filter label { display: block; padding-right: 20px; } }
561562

562563
footer { border-top: 1px solid #eeeeee; background-color: white; }
564+
footer.with-border-bottom { border-bottom: 1px solid #eeeeee; }
563565
footer .tsd-legend-group { font-size: 0; }
564566
footer .tsd-legend { display: inline-block; width: 25%; padding: 0; font-size: 16px; list-style: none; line-height: 1.333em; vertical-align: top; }
565567
@media (max-width: 900px) { footer .tsd-legend { width: 50%; } }
566568

567-
.tsd-generator p { margin: 0; padding: 1em 0; border-top: 1px solid #eeeeee; }
568-
569569
.tsd-hierarchy { list-style: square; padding: 0 0 0 20px; margin: 0; }
570570
.tsd-hierarchy .target { font-weight: bold; }
571571

‎bin/themes/default/assets/js/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bin/themes/default/partials/footer.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
<footer>
2+
<footer{{#unless settings.hideGenerator}} class="with-border-bottom"{{/unless}}>
33
<div class="container">
44
<h2>Legend</h2>
55
<div class="tsd-legend-group">

‎bin/themes/minimal/layouts/default.hbs‎

Lines changed: 8 additions & 8 deletions
Large diffs are not rendered by default.

‎themes/default/assets/css/elements/_footer.sass‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ footer
22
border-top: 1px solid $COLOR_PANEL_DIVIDER
33
background-color: $COLOR_PANEL
44

5+
&.with-border-bottom
6+
border-bottom: 1px solid $COLOR_PANEL_DIVIDER
7+
58
.tsd-legend-group
69
font-size: 0
710

@@ -15,9 +18,4 @@ footer
1518
vertical-align: top
1619

1720
+size-xs-sm
18-
width: 50%
19-
20-
.tsd-generator p
21-
margin: 0
22-
padding: 1em 0
23-
border-top: 1px solid $COLOR_PANEL_DIVIDER
21+
width: 50%

‎themes/default/assets/css/layouts/_default.sass‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ html.default
2929
max-width: 450px
3030
visibility: hidden
3131
background-color: $COLOR_PANEL
32+
transform: translate(100%,0)
3233

3334
.overlay
3435
content: ''
@@ -47,6 +48,7 @@ html.default
4748
animation: fade-in 0.4s
4849

4950
header,
51+
footer,
5052
.col-content
5153
animation: shift-to-left 0.4s
5254

@@ -58,6 +60,7 @@ html.default
5860
animation: fade-out 0.4s
5961

6062
header,
63+
footer,
6164
.col-content
6265
animation: unshift-to-left 0.4s
6366

@@ -72,11 +75,13 @@ html.default
7275
visibility: visible
7376

7477
header,
78+
footer,
7579
.col-content
7680
transform: translate(-25%, 0)
7781

7882
.col-menu
7983
visibility: visible
84+
transform: translate(0,0)
8085

8186
.tsd-page-title
8287
padding: 70px 0 20px 0

‎themes/default/assets/css/layouts/_minimal.sass‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ html.minimal
2929
position: fixed
3030
z-index: 2
3131

32+
#tsd-filter .tsd-filter-group
33+
right: 0
34+
transform: none
35+
3236
footer
3337
background-color: transparent
3438

‎themes/default/assets/js/main.js‎

Lines changed: 94 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -579,7 +579,9 @@ var typedoc;
579579
this.createGroups();
580580

581581
if (this.groups) {
582-
this.$el.addClass('active').on('click', '.tsd-signature', function (event) {
582+
this.$el.addClass('active').on('touchstart', '.tsd-signature', function (event) {
583+
return _this.onClick(event);
584+
}).on('click', '.tsd-signature', function (event) {
583585
return _this.onClick(event);
584586
});
585587
this.$container.addClass('active');
@@ -633,6 +635,7 @@ var typedoc;
633635

634636
Signature.prototype.onClick = function (e) {
635637
var _this = this;
638+
e.preventDefault();
636639
_(this.groups).forEach(function (group, index) {
637640
if (group.$signature.is(e.currentTarget)) {
638641
_this.setIndex(index);
@@ -650,18 +653,17 @@ var typedoc;
650653
__extends(Toggle, _super);
651654
function Toggle(options) {
652655
var _this = this;
653-
_super.call(this, _.defaults(options, {
654-
events: {
655-
'click': 'onClick'
656-
}
657-
}));
656+
_super.call(this, options);
658657

659658
this.className = this.$el.attr('data-toggle');
660-
typedoc.$html.on('mousedown', function (e) {
661-
return _this.onDocumentMouseDown(e);
659+
this.$el.on(typedoc.pointerUp, function (e) {
660+
return _this.onPointerUp(e);
662661
});
663-
typedoc.$html.on('touchstart', function (e) {
664-
return _this.onDocumentMouseDown(e);
662+
typedoc.$document.on(typedoc.pointerDown, function (e) {
663+
return _this.onDocumentPointerDown(e);
664+
});
665+
typedoc.$document.on(typedoc.pointerUp, function (e) {
666+
return _this.onDocumentPointerUp(e);
665667
});
666668
}
667669
Toggle.prototype.setActive = function (value) {
@@ -679,11 +681,32 @@ var typedoc;
679681
}, 500);
680682
};
681683

682-
Toggle.prototype.onClick = function (event) {
684+
Toggle.prototype.onPointerUp = function (event) {
685+
if (typedoc.hasPointerMoved)
686+
return;
683687
this.setActive(true);
688+
event.preventDefault();
684689
};
685690

686-
Toggle.prototype.onDocumentMouseDown = function (e) {
691+
Toggle.prototype.onDocumentPointerDown = function (e) {
692+
if (this.active) {
693+
var $path = $(e.target).parents().addBack();
694+
if ($path.hasClass('col-menu')) {
695+
return;
696+
}
697+
698+
if ($path.hasClass('tsd-filter-group')) {
699+
return;
700+
}
701+
702+
this.setActive(false);
703+
}
704+
};
705+
706+
Toggle.prototype.onDocumentPointerUp = function (e) {
707+
var _this = this;
708+
if (typedoc.hasPointerMoved)
709+
return;
687710
if (this.active) {
688711
var $path = $(e.target).parents().addBack();
689712
if ($path.hasClass('col-menu')) {
@@ -693,15 +716,13 @@ var typedoc;
693716
if (href.indexOf('#') != -1) {
694717
href = href.substr(0, href.indexOf('#'));
695718
}
696-
if ($link.prop('href').substr(0, href.length) != href) {
697-
return;
719+
if ($link.prop('href').substr(0, href.length) == href) {
720+
setTimeout(function () {
721+
return _this.setActive(false);
722+
}, 250);
698723
}
699-
} else {
700-
return;
701724
}
702725
}
703-
704-
this.setActive(false);
705726
}
706727
};
707728
return Toggle;
@@ -751,6 +772,61 @@ var typedoc;
751772
typedoc.registerService(Viewport, 'viewport');
752773
})(typedoc || (typedoc = {}));
753774
var typedoc;
775+
(function (typedoc) {
776+
777+
778+
typedoc.pointerDown = 'mousedown';
779+
780+
typedoc.pointerMove = 'mousemove';
781+
782+
typedoc.pointerUp = 'mouseup';
783+
784+
typedoc.pointerDownPosition = { x: 0, y: 0 };
785+
786+
typedoc.preventNextClick = false;
787+
788+
typedoc.isPointerDown = false;
789+
790+
typedoc.isPointerTouch = false;
791+
792+
typedoc.hasPointerMoved = false;
793+
794+
typedoc.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
795+
typedoc.$html.addClass(typedoc.isMobile ? 'is-mobile' : 'not-mobile');
796+
797+
if (typedoc.isMobile && 'ontouchstart' in document.documentElement) {
798+
typedoc.isPointerTouch = true;
799+
typedoc.pointerDown = 'touchstart';
800+
typedoc.pointerMove = 'touchmove';
801+
typedoc.pointerUp = 'touchend';
802+
}
803+
804+
typedoc.$document.on(typedoc.pointerDown, function (e) {
805+
typedoc.isPointerDown = true;
806+
typedoc.hasPointerMoved = false;
807+
var t = (typedoc.pointerDown == 'touchstart' ? e.originalEvent['targetTouches'][0] : e);
808+
typedoc.pointerDownPosition.x = t.pageX;
809+
typedoc.pointerDownPosition.y = t.pageY;
810+
}).on(typedoc.pointerMove, function (e) {
811+
if (!typedoc.isPointerDown)
812+
return;
813+
if (!typedoc.hasPointerMoved) {
814+
var t = (typedoc.pointerDown == 'touchstart' ? e.originalEvent['targetTouches'][0] : e);
815+
var x = typedoc.pointerDownPosition.x - t.pageX;
816+
var y = typedoc.pointerDownPosition.y - t.pageY;
817+
typedoc.hasPointerMoved = (Math.sqrt(x * x + y * y) > 10);
818+
}
819+
}).on(typedoc.pointerUp, function (e) {
820+
typedoc.isPointerDown = false;
821+
}).on('click', function (e) {
822+
if (typedoc.preventNextClick) {
823+
e.preventDefault();
824+
e.stopImmediatePropagation();
825+
typedoc.preventNextClick = false;
826+
}
827+
});
828+
})(typedoc || (typedoc = {}));
829+
var typedoc;
754830
(function (typedoc) {
755831
function getVendorInfo(tuples) {
756832
for (var name in tuples) {

‎themes/default/assets/js/src/typedoc/components/Signature.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ module typedoc
8686

8787
if (this.groups) {
8888
this.$el.addClass('active')
89+
.on('touchstart', '.tsd-signature', (event) => this.onClick(event))
8990
.on('click', '.tsd-signature', (event) => this.onClick(event));
9091
this.$container.addClass('active');
9192
this.setIndex(0);
@@ -149,6 +150,7 @@ module typedoc
149150
* @param e The related jQuery event object.
150151
*/
151152
private onClick(e:JQueryMouseEventObject) {
153+
e.preventDefault();
152154
_(this.groups).forEach((group, index) => {
153155
if (group.$signature.is(e.currentTarget)) {
154156
this.setIndex(index);

‎themes/default/assets/js/src/typedoc/components/Toggle.ts‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,12 @@ module typedoc
1111

1212

1313
constructor(options:Backbone.ViewOptions<any>) {
14-
super(_.defaults(options, {
15-
events: {
16-
'click': 'onClick'
17-
}
18-
}));
14+
super(options);
1915

2016
this.className = this.$el.attr('data-toggle');
21-
$html.on('mousedown', (e) => this.onDocumentMouseDown(e));
22-
$html.on('touchstart', (e) => this.onDocumentMouseDown(e));
17+
this.$el.on(pointerUp, (e) => this.onPointerUp(e));
18+
$document.on(pointerDown, (e) => this.onDocumentPointerDown(e));
19+
$document.on(pointerUp, (e) => this.onDocumentPointerUp(e));
2320
}
2421

2522

@@ -36,12 +33,30 @@ module typedoc
3633
}
3734

3835

39-
onClick(event:JQueryMouseEventObject) {
36+
onPointerUp(event:JQueryMouseEventObject) {
37+
if (hasPointerMoved) return;
4038
this.setActive(true);
39+
event.preventDefault();
4140
}
4241

4342

44-
onDocumentMouseDown(e:JQueryMouseEventObject) {
43+
onDocumentPointerDown(e:JQueryMouseEventObject) {
44+
if (this.active) {
45+
var $path = $(e.target).parents().addBack();
46+
if ($path.hasClass('col-menu')) {
47+
return;
48+
}
49+
50+
if ($path.hasClass('tsd-filter-group')) {
51+
return;
52+
}
53+
54+
this.setActive(false);
55+
}
56+
}
57+
58+
onDocumentPointerUp(e:JQueryMouseEventObject) {
59+
if (hasPointerMoved) return;
4560
if (this.active) {
4661
var $path = $(e.target).parents().addBack();
4762
if ($path.hasClass('col-menu')) {
@@ -51,15 +66,11 @@ module typedoc
5166
if (href.indexOf('#') != -1) {
5267
href = href.substr(0, href.indexOf('#'));
5368
}
54-
if ($link.prop('href').substr(0, href.length) != href) {
55-
return;
69+
if ($link.prop('href').substr(0, href.length) == href) {
70+
setTimeout(() => this.setActive(false), 250);
5671
}
57-
} else {
58-
return;
5972
}
6073
}
61-
62-
this.setActive(false);
6374
}
6475
}
6576
}

0 commit comments

Comments
 (0)