j1-template 2024.3.12 → 2024.3.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/README.md +560 -577
- data/lib/starter_web/_config.yml +1 -1
- data/lib/starter_web/_data/modules/navigator_menu.yml +803 -831
- data/lib/starter_web/_data/templates/feed.xml +1 -1
- data/lib/starter_web/_plugins/index/lunr.rb +1 -1
- data/lib/starter_web/package.json +1 -1
- data/lib/starter_web/pages/public/tools/previewer/_includes/attributes.asciidoc +16 -0
- data/lib/starter_web/pages/public/tour/_includes/attributes.asciidoc +2 -2
- data/lib/starter_web/pages/public/tour/playback_audio.adoc +188 -197
- data/lib/starter_web/pages/public/tour/present_images.adoc +2 -1
- metadata +2 -8
- data/lib/starter_web/pages/public/tools/previewer/_includes/documents/amplitudejs.large.css.asciidoc +0 -505
- data/lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.hover.html +0 -69
- data/lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.nested.html +0 -75
- data/lib/starter_web/pages/public/tools/previewer/_includes/documents/frame.textarea.html +0 -57
- data/lib/starter_web/pages/public/tools/previewer/_includes/documents/my.content.html +0 -112
- data/lib/starter_web/pages/public/tools/previewer/preview_amplitudejs.adoc +0 -172
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<title>iFrame message passing test 1</title>
|
|
7
|
-
<meta name="description" content="iFrame message passing test 1">
|
|
8
|
-
<meta name="viewport" content="width=device-width">
|
|
9
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
10
|
-
<meta name="robots" content="noindex">
|
|
11
|
-
<meta name="robots" content="nofollow">
|
|
12
|
-
|
|
13
|
-
<link rel="stylesheet" href="/assets/theme/j1/core/css/themes/unolight/bootstrap.css">
|
|
14
|
-
<link rel="stylesheet" href="/assets/theme/j1/core/css/vendor.css">
|
|
15
|
-
|
|
16
|
-
<script src="/assets/theme/j1/modules/jquery/js/jquery.js"></script>
|
|
17
|
-
<script src="/assets/theme/j1/modules/popper/js/popper.js"></script>
|
|
18
|
-
<script src="/assets/theme/j1/modules/iframeResizer/js/client/iframeResizer.contentWindow.js"></script>
|
|
19
|
-
</head>
|
|
20
|
-
|
|
21
|
-
<body class="r-text-200 js-toc-content">
|
|
22
|
-
|
|
23
|
-
<p id="callback"></p>
|
|
24
|
-
|
|
25
|
-
<b>iFrame options: </b>
|
|
26
|
-
|
|
27
|
-
<a id="nested" href="frame.nested.html">Nested</a>
|
|
28
|
-
|
|
29
|
-
<a href="frame.hover.html">Hover</a>
|
|
30
|
-
|
|
31
|
-
<a href="frame.textarea.html">TextArea</a>
|
|
32
|
-
|
|
33
|
-
<div class="paragraph mt-3">
|
|
34
|
-
|
|
35
|
-
<p>
|
|
36
|
-
But I must explain to you how all this mistaken idea of denouncing
|
|
37
|
-
pleasure and praising pain was born and I will give you a complete account
|
|
38
|
-
of the system, and expound the actual teachings of the great explorer of
|
|
39
|
-
the truth, the master-builder of human happiness. No one rejects,
|
|
40
|
-
dislikes, or avoids pleasure itself, because it is pleasure, but because
|
|
41
|
-
those who do not know how to pursue pleasure rationally encounter
|
|
42
|
-
consequences that are extremely painful. Nor again is there anyone who
|
|
43
|
-
loves or pursues or desires to obtain pain of itself, because it is pain,
|
|
44
|
-
but because occasionally circumstances occur in which toil and pain can
|
|
45
|
-
procure him some great pleasure. To take a trivial example, which of us
|
|
46
|
-
ever undertakes laborious physical exercise, except to obtain some
|
|
47
|
-
advantage from it? But who has any right to find fault with a man who
|
|
48
|
-
chooses to enjoy a pleasure that has no annoying consequences, or one who
|
|
49
|
-
avoids a pain that produces no resultant pleasure?
|
|
50
|
-
</p>
|
|
51
|
-
<p>
|
|
52
|
-
On the other hand, we denounce with righteous indignation and dislike men
|
|
53
|
-
who are so beguiled and demoralized by the charms of pleasure of the
|
|
54
|
-
moment, so blinded by desire, that they cannot foresee the pain and
|
|
55
|
-
trouble that are bound to ensue; and equal blame belongs to those who fail
|
|
56
|
-
in their duty through weakness of will, which is the same as saying
|
|
57
|
-
through shrinking from toil and pain. These cases are perfectly simple and
|
|
58
|
-
easy to distinguish. In a free hour, when our power of choice is
|
|
59
|
-
untrammelled and when nothing prevents our being able to do what we like
|
|
60
|
-
best, every pleasure is to be welcomed and every pain avoided. But in
|
|
61
|
-
certain circumstances and owing to the claims of duty or the obligations
|
|
62
|
-
of business it will frequently occur that pleasures have to be repudiated
|
|
63
|
-
and annoyances accepted. The wise man therefore always holds in these
|
|
64
|
-
matters to this principle of selection: he rejects pleasures to secure
|
|
65
|
-
other greater pleasures, or else he endures pains to avoid worse pains.
|
|
66
|
-
</p>
|
|
67
|
-
<p>
|
|
68
|
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
69
|
-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
70
|
-
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
71
|
-
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
72
|
-
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
73
|
-
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
|
74
|
-
est laborum.
|
|
75
|
-
</p>
|
|
76
|
-
<p>
|
|
77
|
-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
|
78
|
-
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
|
79
|
-
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
|
80
|
-
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
|
81
|
-
mollit anim id est laborum.
|
|
82
|
-
</p>
|
|
83
|
-
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<script>
|
|
91
|
-
var iFrameResizer = {
|
|
92
|
-
onResized: function(messageData) {
|
|
93
|
-
|
|
94
|
-
$('p#callback').html (
|
|
95
|
-
'<b>Frame ID:</b> ' + messageData.iframe.id +
|
|
96
|
-
' <b>Height:</b> ' + messageData.height +
|
|
97
|
-
' <b>Width:</b> ' + messageData.width +
|
|
98
|
-
' <b>Event type:</b> ' + messageData.type
|
|
99
|
-
);
|
|
100
|
-
},
|
|
101
|
-
onMessage: function(messageData) {
|
|
102
|
-
$('p#callback').html (
|
|
103
|
-
'<b>Frame ID:</b> ' + messageData.iframe.id +
|
|
104
|
-
' <b>Message:</b> ' + messageData.message
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
</script>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
</body>
|
|
112
|
-
</html>
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Amplitude
|
|
3
|
-
title_extention: Custom Audio Player
|
|
4
|
-
tagline: Custom Audio Player
|
|
5
|
-
|
|
6
|
-
date: 2024-04-17
|
|
7
|
-
#last_modified: 2024-01-01
|
|
8
|
-
|
|
9
|
-
description: >
|
|
10
|
-
AmplitudeJS is a JavaScript library to control the design
|
|
11
|
-
of audio media players on web pages. The concept allows
|
|
12
|
-
designers to fully control the look and feel of players
|
|
13
|
-
without deep scripting knowledge.
|
|
14
|
-
keywords: >
|
|
15
|
-
open source, free, template, jekyll, jekyllone, web,
|
|
16
|
-
sites, static, jamstack, bootstrap, html, html5, audio,
|
|
17
|
-
AmplitudeJS, Amplitude
|
|
18
|
-
|
|
19
|
-
categories: [ Previewer ]
|
|
20
|
-
tags: [ Amplitude, Audio ]
|
|
21
|
-
|
|
22
|
-
image:
|
|
23
|
-
path: /assets/image/icons/videojs/videojs-poster.png
|
|
24
|
-
width: 1920
|
|
25
|
-
height: 1280
|
|
26
|
-
|
|
27
|
-
regenerate: true
|
|
28
|
-
personalization: true
|
|
29
|
-
permalink: /pages/public/tools/previewer/amplitudejs/
|
|
30
|
-
|
|
31
|
-
resources: [ amplitudejs ]
|
|
32
|
-
resource_options:
|
|
33
|
-
- toccer:
|
|
34
|
-
collapseDepth: 2
|
|
35
|
-
- attic:
|
|
36
|
-
slides:
|
|
37
|
-
- url: /assets/image/modules/attics/1920x1280/alexey-ruban.jpg
|
|
38
|
-
alt: Photo by Alexey Ruban on Unsplash
|
|
39
|
-
badge:
|
|
40
|
-
type: unsplash
|
|
41
|
-
author: Alexey Ruban
|
|
42
|
-
href: //unsplash.com/de/@intelligenciya
|
|
43
|
-
---
|
|
44
|
-
|
|
45
|
-
// Page Initializer
|
|
46
|
-
// =============================================================================
|
|
47
|
-
// Enable the Liquid Preprocessor
|
|
48
|
-
:page-liquid:
|
|
49
|
-
|
|
50
|
-
// Set (local) page attributes here
|
|
51
|
-
// -----------------------------------------------------------------------------
|
|
52
|
-
// :page--attr: <attr-value>
|
|
53
|
-
|
|
54
|
-
// Load Liquid procedures
|
|
55
|
-
// -----------------------------------------------------------------------------
|
|
56
|
-
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
|
57
|
-
|
|
58
|
-
// Load page attributes
|
|
59
|
-
// -----------------------------------------------------------------------------
|
|
60
|
-
{% include {{load_attributes}} scope="all" %}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
// Page content
|
|
64
|
-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
65
|
-
// See: https://521dimensions.com/open-source/amplitudejs/docs
|
|
66
|
-
// See: https://github.com/mediaelement/mediaelement-plugins
|
|
67
|
-
// See: https://github.com/serversideup/amplitudejs/
|
|
68
|
-
|
|
69
|
-
[role="dropcap"]
|
|
70
|
-
The Audio tag in HTML5 is a great way to add audio media to web pages.
|
|
71
|
-
However, the browser fully controls the audio playback interface,
|
|
72
|
-
which can limit or even break a page's design if audio media is used.
|
|
73
|
-
|
|
74
|
-
AmplitudeJS for the J1 Template offers a straightforward solution for web
|
|
75
|
-
developers. It allows them to easily customize the appearance of their audio
|
|
76
|
-
players without the need for complex scripting. By leveraging J1 Template
|
|
77
|
-
and Amplitude's API, web designers can craft unique interfaces that define
|
|
78
|
-
the visual and functional aspects of a player's audio control elements.
|
|
79
|
-
|
|
80
|
-
mdi:clock-time-five-outline[24px, md-gray mr-2]
|
|
81
|
-
*5-10 Minutes* to read
|
|
82
|
-
|
|
83
|
-
// Include sub-documents (if any)
|
|
84
|
-
// -----------------------------------------------------------------------------
|
|
85
|
-
// include::{documentdir}/amplitudejs.compact.css.asciidoc[]
|
|
86
|
-
// include::{documentdir}/amplitudejs.large.css.asciidoc[]
|
|
87
|
-
// include::{documentdir}/amplitudejs.mini.css.asciidoc[]
|
|
88
|
-
|
|
89
|
-
[role="mt-4"]
|
|
90
|
-
The J1 Template implements custom players based on the (default) theme Uno.
|
|
91
|
-
The color scheme used matches the look and feel of the template to preserve
|
|
92
|
-
the page design.
|
|
93
|
-
|
|
94
|
-
Three types of AmplitudeJS players are build-in for the J1 template system:
|
|
95
|
-
|
|
96
|
-
* Mini Player
|
|
97
|
-
* Compact Player (default payer)
|
|
98
|
-
* Large Player
|
|
99
|
-
|
|
100
|
-
[role="mt-4"]
|
|
101
|
-
[NOTE]
|
|
102
|
-
====
|
|
103
|
-
Amplitude players for the J1 Template are mobile-friendly. Instead of
|
|
104
|
-
clicking on the appropriate elements, touch events are applied to all
|
|
105
|
-
mobile devices.
|
|
106
|
-
====
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
[role="mt-5"]
|
|
110
|
-
== Mini Player
|
|
111
|
-
|
|
112
|
-
In the context of complex components on a web page, like an audio player,
|
|
113
|
-
a mini player refers to a minimized version of full players. It typically
|
|
114
|
-
offers basic playback controls, such as pause, play, and
|
|
115
|
-
volume adjustment, while taking up less screen space.
|
|
116
|
-
|
|
117
|
-
Mini players are beneficial when you want to listen to audio in the
|
|
118
|
-
background without dedicating the entire screen to the player. They
|
|
119
|
-
are commonly found on music streaming services, podcast platforms, and
|
|
120
|
-
websites with embedded audio content.
|
|
121
|
-
|
|
122
|
-
.Emancipator · Dusk To Dawn
|
|
123
|
-
amplitude::free_emancipator_mini[role="mt-3 mb-5"]
|
|
124
|
-
|
|
125
|
-
.Royalty Free Music · Disco 80th
|
|
126
|
-
amplitude::free_disco_mini[role="mt-3 mb-5"]
|
|
127
|
-
|
|
128
|
-
lorem:sentences[5]
|
|
129
|
-
|
|
130
|
-
[role="mt-5"]
|
|
131
|
-
== Compact Player
|
|
132
|
-
|
|
133
|
-
A complex component like an audio player on a web page, *compact*
|
|
134
|
-
typically refers to a design or layout that minimizes the component's
|
|
135
|
-
space while maintaining its functionality and usability.
|
|
136
|
-
|
|
137
|
-
////
|
|
138
|
-
The *compact design* for an audio player is an efficient approach that
|
|
139
|
-
involves condensing the player controls and display elements into a smaller
|
|
140
|
-
area. It uses icons or symbols instead of text labels where possible, and
|
|
141
|
-
possibly hides less frequently used features behind menus or dropdowns to
|
|
142
|
-
reduce clutter, thereby instilling confidence in its effectiveness.
|
|
143
|
-
|
|
144
|
-
A *compact* design allows the audio player to fit neatly within the web
|
|
145
|
-
page's layout without overwhelming or dominating the content around it.
|
|
146
|
-
The design aims to balance functionality and space efficiency, ensuring
|
|
147
|
-
users can easily access and control the audio playback without sacrificing
|
|
148
|
-
too much screen space.
|
|
149
|
-
////
|
|
150
|
-
|
|
151
|
-
.Emancipator · Dusk To Dawn
|
|
152
|
-
amplitude::free_emancipator_compact[role="mt-3 mb-5"]
|
|
153
|
-
|
|
154
|
-
.Royalty Free Music · Disco 80th
|
|
155
|
-
amplitude::free_disco_compact[role="mt-3 mb-5"]
|
|
156
|
-
|
|
157
|
-
lorem:sentences[5]
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
[role="mt-5"]
|
|
161
|
-
== Large Player
|
|
162
|
-
|
|
163
|
-
lorem:sentences[5]
|
|
164
|
-
|
|
165
|
-
.Emancipator · Dusk To Dawn
|
|
166
|
-
amplitude::free_emancipator_large[role="mt-3 mb-5"]
|
|
167
|
-
|
|
168
|
-
.Royalty Free Music · Disco 80th
|
|
169
|
-
amplitude::free_disco_large[role="mt-3 mb-5"]
|
|
170
|
-
|
|
171
|
-
[role="mb-8"]
|
|
172
|
-
lorem:sentences[3]
|