Skip to content

Commit 6c82b87

Browse files
hperrinhperrin
committed
Added support for RTL languages. Closes #181.
1 parent e2a7e00 commit 6c82b87

File tree

8 files changed

+317
-114
lines changed

8 files changed

+317
-114
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,6 +470,7 @@ This will create a notice that is positioned 90px from the top edge and 90px fro
470470
* Notification types: notice, info, success, and error.
471471
* Stacks allow notices to position together or independently.
472472
* Control stack direction and push to top or bottom.
473+
* Full RTL language support.
473474
* Feature rich API.
474475
* Desktop notifications based on the Web Notifications standard.
475476
* Confirm dialogs, alert buttons, and prompts.

‎index-styling.html‎

Lines changed: 180 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,217 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>PNotify Test</title>
4+
<meta charset="utf-8"/>
5+
<title>PNotify Styling Demos</title>
6+
<meta name="HandheldFriendly" content="true" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
58
<script type="text/javascript" src="lib/iife/PNotify.js"></script>
69
<script type="text/javascript" src="lib/iife/PNotifyStyleMaterial.js"></script>
710
<script type="text/javascript" src="lib/iife/PNotifyButtons.js"></script>
11+
<script type="text/javascript" src="lib/iife/PNotifyConfirm.js"></script>
12+
<script type="text/javascript" src="lib/iife/PNotifyMobile.js"></script>
813
<link href="src/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />
914
<link href="" id="bootstrap-css" rel="stylesheet" type="text/css" />
1015
<link href="" id="fontawesome-css" rel="stylesheet" type="text/css" />
1116

1217
<script type="text/javascript">
13-
function loadStylingDeps() {
18+
function setStyling() {
1419
var styling = document.getElementById("styling").value;
20+
21+
PNotify.defaults.styling = styling;
22+
23+
if (styling === "bootstrap3") {
24+
document.forms.libraries.elements.libraryBootstrap.value = "3";
25+
loadLibraries();
26+
} else if (styling === "bootstrap4") {
27+
document.forms.libraries.elements.libraryBootstrap.value = "4";
28+
loadLibraries();
29+
}
30+
31+
PNotify.removeAll();
32+
}
33+
34+
function setIcons() {
1535
var icons = document.getElementById("icons").value;
16-
var output = document.getElementById("output");
17-
output.innerText = "";
1836

19-
if (styling === "bootstrap4" && icons === "bootstrap3") {
20-
output.innerText = "You can't use both Bootstrap 3 and Bootstrap 4.";
21-
return;
37+
PNotify.defaults.icons = icons;
38+
39+
if (icons === "bootstrap3") {
40+
document.forms.libraries.elements.libraryBootstrap.value = "3";
41+
loadLibraries();
42+
} else if (icons === "fontawesome4") {
43+
document.forms.libraries.elements.libraryFontAwesome.value = "4";
44+
loadLibraries();
45+
} else if (icons === "fontawesome5") {
46+
document.forms.libraries.elements.libraryFontAwesome.value = "5";
47+
loadLibraries();
2248
}
2349

2450
PNotify.removeAll();
51+
}
52+
53+
function setRtl() {
54+
var rtl = document.getElementById("rtl").checked;
55+
56+
if (rtl) {
57+
document.body.dir = "rtl";
58+
} else {
59+
document.body.dir = "";
60+
}
61+
}
2562

26-
if (styling === "bootstrap3" || icons === "bootstrap3") {
27-
document.getElementById("bootstrap-css").href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
63+
function loadLibraries() {
64+
var bootstrap = document.forms.libraries.elements.libraryBootstrap.value;
65+
var bootstrapCss = document.getElementById("bootstrap-css");
66+
var fontAwesome = document.forms.libraries.elements.libraryFontAwesome.value;
67+
var fontAwesomeCss = document.getElementById("fontawesome-css");
68+
var output = document.getElementById("output");
69+
output.innerText = "";
70+
71+
if (bootstrap === "3") {
72+
bootstrapCss.href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
2873
output.innerText += " Loaded Bootstrap 3.";
29-
} else if (styling === "bootstrap4") {
30-
document.getElementById("bootstrap-css").href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
74+
} else if (bootstrap === "4") {
75+
bootstrapCss.href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
3176
output.innerText += " Loaded Bootstrap 4.";
3277
} else {
33-
document.getElementById("bootstrap-css").href = "";
78+
bootstrapCss.href = "";
3479
}
3580

36-
if (icons === "fontawesome4") {
37-
document.getElementById("fontawesome-css").href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
81+
if (fontAwesome === "4") {
82+
fontAwesomeCss.href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
3883
output.innerText += " Loaded Font Awesome 4.";
39-
} else if (icons === "fontawesome5") {
40-
document.getElementById("fontawesome-css").href = "https://use.fontawesome.com/releases/v5.0.4/css/all.css";
84+
} else if (fontAwesome === "5") {
85+
fontAwesomeCss.href = "https://use.fontawesome.com/releases/v5.0.4/css/all.css";
4186
output.innerText += " Loaded Font Awesome 5.";
4287
} else {
43-
document.getElementById("fontawesome-css").href = "";
88+
fontAwesomeCss.href = "";
4489
}
4590
}
4691
</script>
4792
</head>
4893

4994
<body>
50-
<div style="padding: 30px;">
51-
Styling: <select id="styling" onchange="loadStylingDeps()">
52-
<option value="brighttheme">Bright Theme</option>
53-
<option value="material">Material</option>
54-
<option value="bootstrap3">Bootstrap 3</option>
55-
<option value="bootstrap4">Bootstrap 4</option>
56-
</select>
57-
Icons: <select id="icons" onchange="loadStylingDeps()">
58-
<option value="brighttheme">Bright Theme</option>
59-
<option value="material">Material</option>
60-
<option value="bootstrap3">Bootstrap 3</option>
61-
<option value="fontawesome4">Font Awesome 4</option>
62-
<option value="fontawesome5">Font Awesome 5</option>
63-
</select>
64-
<span id="output"></span>
95+
<div style="padding: 0 30px; margin: 20px 0;">
96+
<h1>Styling Demo</h1>
97+
<p>
98+
Use this page to check out various PNotify styling options. The Buttons,
99+
Confirm, and Mobile modules have been loaded.
100+
</p>
101+
102+
<section>
103+
<h2>Choose PNotify's Styling Options</h2>
104+
<p>
105+
Styling: <select id="styling" onchange="setStyling()">
106+
<option value="brighttheme">Bright Theme</option>
107+
<option value="material">Material</option>
108+
<option value="bootstrap3">Bootstrap 3</option>
109+
<option value="bootstrap4">Bootstrap 4</option>
110+
</select>
111+
Icons: <select id="icons" onchange="setIcons()">
112+
<option value="brighttheme">Bright Theme</option>
113+
<option value="material">Material</option>
114+
<option value="bootstrap3">Bootstrap 3</option>
115+
<option value="fontawesome4">Font Awesome 4</option>
116+
<option value="fontawesome5">Font Awesome 5</option>
117+
</select>
118+
</p>
119+
<p>
120+
<label><input type="checkbox" id="rtl" onchange="setRtl()" /> Make page RTL (set dir="rtl" on &lt;body&gt;)</label>
121+
</p>
122+
<h2>Load CSS Libraries</h2>
123+
<form name="libraries">
124+
<label><input type="radio" name="libraryBootstrap" value="" onchange="loadLibraries()" checked /> No Bootstrap</label>
125+
<label><input type="radio" name="libraryBootstrap" value="3" onchange="loadLibraries()" /> Bootstrap 3</label>
126+
<label><input type="radio" name="libraryBootstrap" value="4" onchange="loadLibraries()" /> Bootstrap 4</label>
127+
<br />
128+
<label><input type="radio" name="libraryFontAwesome" value="" onchange="loadLibraries()" checked /> No Font Awesome</label>
129+
<label><input type="radio" name="libraryFontAwesome" value="4" onchange="loadLibraries()" /> Font Awesome 4</label>
130+
<label><input type="radio" name="libraryFontAwesome" value="5" onchange="loadLibraries()" /> Font Awesome 5</label>
131+
</form>
132+
<span id="output"></span>
133+
</section>
65134
<hr />
66135
<h2>Test Notices</h2>
67-
<button onclick="PNotify.notice({title: 'Test Notice', text: 'This is a test notice.', icons: document.getElementById('icons').value, styling: document.getElementById('styling').value})">Test Notice</button>
68-
<button onclick="PNotify.info({title: 'Test Notice', text: 'This is a test notice.', icons: document.getElementById('icons').value, styling: document.getElementById('styling').value})">Test Info</button>
69-
<button onclick="PNotify.success({title: 'Test Notice', text: 'This is a test notice.', icons: document.getElementById('icons').value, styling: document.getElementById('styling').value})">Test Success</button>
70-
<button onclick="PNotify.error({title: 'Test Notice', text: 'This is a test notice.', icons: document.getElementById('icons').value, styling: document.getElementById('styling').value})">Test Danger</button>
136+
<button onclick="PNotify.notice({title: 'Test Notice', text: 'This is a test notice.'})">Test Notice</button>
137+
<button onclick="PNotify.info({title: 'Test Notice', text: 'This is a test notice.'})">Test Info</button>
138+
<button onclick="PNotify.success({title: 'Test Notice', text: 'This is a test notice.'})">Test Success</button>
139+
<button onclick="PNotify.error({title: 'Test Notice', text: 'This is a test notice.'})">Test Danger</button>
140+
<h3>Confirm Module</h3>
141+
<button onclick="PNotify.notice({
142+
title: 'Confirmation Needed',
143+
text: 'Are you sure?',
144+
hide: false,
145+
modules: {Confirm: {confirm: true}, Buttons: {closer: false, sticker: false}}
146+
});">Confirm Notice</button>
147+
<button onclick="PNotify.info({
148+
title: 'Confirmation Needed',
149+
text: 'Are you sure?',
150+
hide: false,
151+
modules: {Confirm: {confirm: true}, Buttons: {closer: false, sticker: false}}
152+
});">Confirm Info</button>
153+
<button onclick="PNotify.success({
154+
title: 'Confirmation Needed',
155+
text: 'Are you sure?',
156+
hide: false,
157+
modules: {Confirm: {confirm: true}, Buttons: {closer: false, sticker: false}}
158+
});">Confirm Success</button>
159+
<button onclick="PNotify.error({
160+
title: 'Confirmation Needed',
161+
text: 'Are you sure?',
162+
hide: false,
163+
modules: {Confirm: {confirm: true}, Buttons: {closer: false, sticker: false}}
164+
});">Confirm Error</button>
165+
<br />
166+
<button onclick="PNotify.notice({
167+
title: 'Input Needed',
168+
text: 'What side would you like?',
169+
hide: false,
170+
modules: {Confirm: {prompt: true}, Buttons: {closer: false, sticker: false}}
171+
});">Prompt Notice</button>
172+
<button onclick="PNotify.info({
173+
title: 'Input Needed',
174+
text: 'What side would you like?',
175+
hide: false,
176+
modules: {Confirm: {prompt: true}, Buttons: {closer: false, sticker: false}}
177+
});">Prompt Info</button>
178+
<button onclick="PNotify.success({
179+
title: 'Input Needed',
180+
text: 'What side would you like?',
181+
hide: false,
182+
modules: {Confirm: {prompt: true}, Buttons: {closer: false, sticker: false}}
183+
});">Prompt Success</button>
184+
<button onclick="PNotify.error({
185+
title: 'Input Needed',
186+
text: 'What side would you like?',
187+
hide: false,
188+
modules: {Confirm: {prompt: true}, Buttons: {closer: false, sticker: false}}
189+
});">Prompt Error</button>
190+
<br />
191+
<button onclick="PNotify.notice({
192+
title: 'Input Needed',
193+
text: 'Describe the color blue.',
194+
hide: false,
195+
modules: {Confirm: {prompt: true, prompt_multi_line: true}, Buttons: {closer: false, sticker: false}}
196+
});">Multi Line Prompt Notice</button>
197+
<button onclick="PNotify.info({
198+
title: 'Input Needed',
199+
text: 'Describe the color blue.',
200+
hide: false,
201+
modules: {Confirm: {prompt: true, prompt_multi_line: true}, Buttons: {closer: false, sticker: false}}
202+
});">Multi Line Prompt Info</button>
203+
<button onclick="PNotify.success({
204+
title: 'Input Needed',
205+
text: 'Describe the color blue.',
206+
hide: false,
207+
modules: {Confirm: {prompt: true, prompt_multi_line: true}, Buttons: {closer: false, sticker: false}}
208+
});">Multi Line Prompt Success</button>
209+
<button onclick="PNotify.error({
210+
title: 'Input Needed',
211+
text: 'Describe the color blue.',
212+
hide: false,
213+
modules: {Confirm: {prompt: true, prompt_multi_line: true}, Buttons: {closer: false, sticker: false}}
214+
});">Multi Line Prompt Error</button>
71215
</div>
72216
</body>
73217
</html>

‎src/PNotify.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1118,6 +1118,11 @@ <h4 ref:titleContainer class="ui-pnotify-title {{_styles.title ? _styles.title :
11181118
:global(.ui-pnotify.ui-pnotify-with-icon .ui-pnotify-text) {
11191119
margin-left: 24px;
11201120
}
1121+
:global([dir=rtl] .ui-pnotify.ui-pnotify-with-icon .ui-pnotify-title),
1122+
:global([dir=rtl] .ui-pnotify.ui-pnotify-with-icon .ui-pnotify-text) {
1123+
margin-right: 24px;
1124+
margin-left: 0;
1125+
}
11211126
/* Bootstrap 4: make title text a tad smaller. */
11221127
:global(.ui-pnotify-title-bs4) {
11231128
font-size: 1.2rem;
@@ -1126,10 +1131,15 @@ <h4 ref:titleContainer class="ui-pnotify-title {{_styles.title ? _styles.title :
11261131
display: block;
11271132
white-space: pre-line;
11281133
}
1129-
:global(.ui-pnotify-icon, .ui-pnotify-icon span) {
1134+
:global(.ui-pnotify-icon),
1135+
:global(.ui-pnotify-icon span) {
11301136
display: block;
11311137
float: left;
11321138
}
1139+
:global([dir=rtl] .ui-pnotify-icon),
1140+
:global([dir=rtl] .ui-pnotify-icon span) {
1141+
float: right;
1142+
}
11331143
/* Bootstrap 3: correct positioning of icon. */
11341144
:global(.ui-pnotify-icon-bs3 > span) {
11351145
position: relative;

‎src/PNotifyBrightTheme.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,15 @@ Color Scheme: http://paletton.com/palette.php?uid=c1T3n2J040kpEKzpEKzbEPSOEyiNk9
1111
}
1212
[ui-pnotify].ui-pnotify-with-icon .brighttheme .ui-pnotify-title,
1313
[ui-pnotify].ui-pnotify-with-icon .brighttheme .ui-pnotify-text,
14-
[ui-pnotify].ui-pnotify-with-icon .brighttheme .ui-pnotify-action-bar {
14+
[ui-pnotify].ui-pnotify-with-icon .brighttheme .ui-pnotify-confirm {
1515
margin-left: 1.8rem;
1616
}
17+
[dir=rtl] [ui-pnotify].ui-pnotify-with-icon .brighttheme .ui-pnotify-title,
18+
[dir=rtl] [ui-pnotify].ui-pnotify-with-icon .brighttheme .ui-pnotify-text,
19+
[dir=rtl] [ui-pnotify].ui-pnotify-with-icon .brighttheme .ui-pnotify-confirm {
20+
margin-right: 1.8rem;
21+
margin-left: 0;
22+
}
1723
[ui-pnotify].ui-pnotify .brighttheme .ui-pnotify-title {
1824
font-size: 1.2rem;
1925
line-height: 1.4rem;
@@ -135,12 +141,10 @@ Color Scheme: http://paletton.com/palette.php?uid=c1T3n2J040kpEKzpEKzbEPSOEyiNk9
135141
content: "\00003E";
136142
}
137143

138-
[ui-pnotify].ui-pnotify .brighttheme .ui-pnotify-action-bar {
144+
[ui-pnotify].ui-pnotify .brighttheme .ui-pnotify-confirm {
139145
margin-top: 1rem;
140146
}
141-
[ui-pnotify].ui-pnotify .brighttheme .ui-pnotify-prompt-input {
142-
display: block;
143-
width: 100%;
147+
[ui-pnotify].ui-pnotify .brighttheme .ui-pnotify-prompt-bar {
144148
margin-bottom: 1rem;
145149
}
146150
[ui-pnotify].ui-pnotify .brighttheme .ui-pnotify-action-button {

‎src/PNotifyButtons.html‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{#if _show_closer}}
22
<div
3-
class="ui-pnotify-closer {{(!closer_hover || _mouseIsIn) ? '' : 'ui-pnotify-hidden'}}"
3+
class="ui-pnotify-closer {{(!closer_hover || _mouseIsIn) ? '' : 'ui-pnotify-buttons-hidden'}}"
44
role="button"
55
tabindex="0"
66
title="{{labels.close}}"
@@ -10,7 +10,7 @@
1010
{{/if}}
1111
{{#if _show_sticker}}
1212
<div
13-
class="ui-pnotify-sticker {{(!sticker_hover || _mouseIsIn) ? '' : 'ui-pnotify-hidden'}}"
13+
class="ui-pnotify-sticker {{(!sticker_hover || _mouseIsIn) ? '' : 'ui-pnotify-buttons-hidden'}}"
1414
role="button"
1515
aria-pressed="{{_options.hide}}"
1616
tabindex="0"
@@ -143,12 +143,19 @@
143143
</script>
144144

145145
<style>
146-
.ui-pnotify-closer, .ui-pnotify-sticker {
146+
.ui-pnotify-closer,
147+
.ui-pnotify-sticker {
147148
float: right;
148149
margin-left: .5em;
149150
cursor: pointer;
150151
}
151-
.ui-pnotify-hidden {
152+
:global([dir=rtl]) .ui-pnotify-closer,
153+
:global([dir=rtl]) .ui-pnotify-sticker {
154+
float: left;
155+
margin-right: .5em;
156+
margin-left: 0;
157+
}
158+
.ui-pnotify-buttons-hidden {
152159
visibility: hidden;
153160
}
154161
</style>

0 commit comments

Comments
 (0)