Skip to content

Commit d65f099

Browse files
jdkorenjdkoren
committed
Create renderer for ModelElement
1 parent 34bd6ac commit d65f099

File tree

2 files changed

+97
-67
lines changed

2 files changed

+97
-67
lines changed

‎lib/src/model/model_element.dart

Lines changed: 7 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import 'package:dartdoc/src/markdown_processor.dart' show Documentation;
2727
import 'package:dartdoc/src/model/model.dart';
2828
import 'package:dartdoc/src/model_utils.dart' as utils;
2929
import 'package:dartdoc/src/render/parameter_renderer.dart';
30+
import 'package:dartdoc/src/render/model_element_renderer.dart';
3031
import 'package:dartdoc/src/source_linker.dart';
3132
import 'package:dartdoc/src/tuple.dart';
3233
import 'package:dartdoc/src/utils.dart';
@@ -1144,8 +1145,7 @@ abstract class ModelElement extends Canonicalization
11441145
return htmlEscape.convert(name);
11451146
}
11461147

1147-
var classContent = isDeprecated ? ' class="deprecated"' : '';
1148-
return '<a${classContent} href="${href}">$name</a>';
1148+
return ModelElementRendererHtml().renderLinkedName(this);
11491149
}
11501150

11511151
/// Replace &#123;@example ...&#125; in API comments with the content of named file.
@@ -1370,37 +1370,14 @@ abstract class ModelElement extends Canonicalization
13701370
warn(PackageWarning.invalidParameter,
13711371
message: 'A @youtube directive has an invalid URL: '
13721372
'"${positionalArgs[2]}". Supported YouTube URLs have the '
1373-
'follwing format: https://www.youtube.com/watch?v=oHg5SJYRHA0.');
1373+
'following format: https://www.youtube.com/watch?v=oHg5SJYRHA0.');
13741374
return '';
13751375
}
13761376
final String youTubeId = url.group(url.groupCount);
13771377
final String aspectRatio = (height / width * 100).toStringAsFixed(2);
13781378

1379-
// Blank lines before and after, and no indenting at the beginning and end
1380-
// is needed so that Markdown doesn't confuse this with code, so be
1381-
// careful of whitespace here.
1382-
return '''
1383-
1384-
<p style="position: relative;
1385-
padding-top: $aspectRatio%;">
1386-
<iframe src="https://www.youtube.com/embed/$youTubeId?rel=0"
1387-
frameborder="0"
1388-
allow="accelerometer;
1389-
autoplay;
1390-
encrypted-media;
1391-
gyroscope;
1392-
picture-in-picture"
1393-
allowfullscreen
1394-
style="position: absolute;
1395-
top: 0;
1396-
left: 0;
1397-
width: 100%;
1398-
height: 100%;">
1399-
</iframe>
1400-
</p>
1401-
1402-
'''; // String must end at beginning of line, or following inline text will be
1403-
// indented.
1379+
return ModelElementRendererHtml().renderYoutubeUrl(
1380+
youTubeId, aspectRatio);
14041381
});
14051382
}
14061383

@@ -1531,45 +1508,8 @@ abstract class ModelElement extends Canonicalization
15311508
'parameter)');
15321509
}
15331510

1534-
// Blank lines before and after, and no indenting at the beginning and end
1535-
// is needed so that Markdown doesn't confuse this with code, so be
1536-
// careful of whitespace here.
1537-
return '''
1538-
1539-
<div style="position: relative;">
1540-
<div id="${overlayId}"
1541-
onclick="var $uniqueId = document.getElementById('$uniqueId');
1542-
if ($uniqueId.paused) {
1543-
$uniqueId.play();
1544-
this.style.display = 'none';
1545-
} else {
1546-
$uniqueId.pause();
1547-
this.style.display = 'block';
1548-
}"
1549-
style="position:absolute;
1550-
width:${width}px;
1551-
height:${height}px;
1552-
z-index:100000;
1553-
background-position: center;
1554-
background-repeat: no-repeat;
1555-
background-image: url(static-assets/play_button.svg);">
1556-
</div>
1557-
<video id="$uniqueId"
1558-
style="width:${width}px; height:${height}px;"
1559-
onclick="var $overlayId = document.getElementById('$overlayId');
1560-
if (this.paused) {
1561-
this.play();
1562-
$overlayId.style.display = 'none';
1563-
} else {
1564-
this.pause();
1565-
$overlayId.style.display = 'block';
1566-
}" loop>
1567-
<source src="$movieUrl" type="video/mp4"/>
1568-
</video>
1569-
</div>
1570-
1571-
'''; // String must end at beginning of line, or following inline text will be
1572-
// indented.
1511+
return ModelElementRendererHtml().renderAnimation(
1512+
uniqueId, width, height, movieUrl, overlayId);
15731513
});
15741514
}
15751515

‎lib/src/render/model_element_renderer.dart

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
5+
import 'package:dartdoc/src/model/model_element.dart';
6+
7+
abstract class ModelElementRenderer {
8+
String renderLinkedName(ModelElement modelElement);
9+
10+
String renderYoutubeUrl(String youTubeId, String aspectRatio);
11+
12+
String renderAnimation(
13+
String uniqueId, int width, int height, Uri movieUrl, String overlayId);
14+
}
15+
16+
class ModelElementRendererHtml extends ModelElementRenderer {
17+
@override
18+
String renderLinkedName(ModelElement modelElement) {
19+
var cssClass = modelElement.isDeprecated ? ' class="deprecated"' : '';
20+
return '<a${cssClass} href="${modelElement.href}">${modelElement.name}</a>';
21+
}
22+
23+
@override
24+
String renderYoutubeUrl(String youTubeId, String aspectRatio) {
25+
// Blank lines before and after, and no indenting at the beginning and end
26+
// is needed so that Markdown doesn't confuse this with code, so be
27+
// careful of whitespace here.
28+
return '''
29+
30+
<p style="position: relative;
31+
padding-top: $aspectRatio%;">
32+
<iframe src="https://www.youtube.com/embed/$youTubeId?rel=0"
33+
frameborder="0"
34+
allow="accelerometer;
35+
autoplay;
36+
encrypted-media;
37+
gyroscope;
38+
picture-in-picture"
39+
allowfullscreen
40+
style="position: absolute;
41+
top: 0;
42+
left: 0;
43+
width: 100%;
44+
height: 100%;">
45+
</iframe>
46+
</p>
47+
48+
'''; // Must end at start of line, or following inline text will be indented.
49+
}
50+
51+
@override
52+
String renderAnimation(
53+
String uniqueId, int width, int height, Uri movieUrl, String overlayId) {
54+
return '''
55+
56+
<div style="position: relative;">
57+
<div id="${overlayId}"
58+
onclick="var $uniqueId = document.getElementById('$uniqueId');
59+
if ($uniqueId.paused) {
60+
$uniqueId.play();
61+
this.style.display = 'none';
62+
} else {
63+
$uniqueId.pause();
64+
this.style.display = 'block';
65+
}"
66+
style="position:absolute;
67+
width:${width}px;
68+
height:${height}px;
69+
z-index:100000;
70+
background-position: center;
71+
background-repeat: no-repeat;
72+
background-image: url(static-assets/play_button.svg);">
73+
</div>
74+
<video id="$uniqueId"
75+
style="width:${width}px; height:${height}px;"
76+
onclick="var $overlayId = document.getElementById('$overlayId');
77+
if (this.paused) {
78+
this.play();
79+
$overlayId.style.display = 'none';
80+
} else {
81+
this.pause();
82+
$overlayId.style.display = 'block';
83+
}" loop>
84+
<source src="$movieUrl" type="video/mp4"/>
85+
</video>
86+
</div>
87+
88+
'''; // Must end at start of line, or following inline text will be indented.
89+
}
90+
}

0 commit comments

Comments
 (0)