share eingebaut
This commit is contained in:
silas
parent
93a075c239
commit
d53b275bdc
File diff suppressed because one or more lines are too long
1
public/html/application/dialog/share.html
Normal file
1
public/html/application/dialog/share.html
Normal file
@ -0,0 +1 @@
|
||||
<div class="max-width center"></div>
|
||||
@ -1 +1 @@
|
||||
<div class="max-height flex-center"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><div class="height-60 max-width flex-center"><div id=level></div><span id=level-number-container class="visible in-main-menu"><span id=level-number>1</span></span></div><div class="height-30 flex-center fill-me"><button class="button grow text-center" id=play-button><span data-translation=play></span></button><div class="max-width line-height-1"><label class=switch><div data-view=img/speaker.svg></div><input type=checkbox class=setting id=play-sound> <span class=slider></span></label> <label class="switch right"><div data-view=img/music.svg></div><input type=checkbox class=setting id=play-music> <span class=slider></span></label></div></div></div>
|
||||
<div class="max-height flex-center"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><div class="height-60 max-width flex-center"><div id=level></div><span id=level-number-container class="visible in-main-menu"><span id=level-number>1</span></span></div><div class="height-30 flex-center fill-me"><button class="button grow text-center" id=play-button><span data-translation=play></span></button><div class="max-width line-height-1 fill-me vertical"><label class=switch><div data-view=img/speaker.svg></div><input type=checkbox class=setting id=play-sound> <span class=slider></span></label><div class="grow center" id=share-button><span data-view=img/share.svg></span></div><label class="switch right"><div data-view=img/music.svg></div><input type=checkbox class=setting id=play-music> <span class=slider></span></label></div></div><div class="height-10 flex-center fill-me"><div class="max-width line-height-1"><span class=right id=share-buttons></span></div></div></div>
|
||||
@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path d="M0 0h48v48h-48z" fill="none" />
|
||||
<path fill="white" stroke="white" d="M36 32.17c-1.52 0-2.89.59-3.93 1.54l-14.25-8.31c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31 0 3.22 2.61 5.83 5.83 5.83s5.83-2.61 5.83-5.83-2.61-5.83-5.83-5.83z"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
||||
<!--<path d="M0 0h48v48h-48z" fill="none" />-->
|
||||
<path class="fill-color" d="M36 32.17c-1.52 0-2.89.59-3.93 1.54l-14.25-8.31c.11-.45.18-.92.18-1.4s-.07-.95-.18-1.4l14.1-8.23c1.07 1 2.5 1.62 4.08 1.62 3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6c0 .48.07.95.18 1.4l-14.1 8.23c-1.07-1-2.5-1.62-4.08-1.62-3.31 0-6 2.69-6 6s2.69 6 6 6c1.58 0 3.01-.62 4.08-1.62l14.25 8.31c-.1.42-.16.86-.16 1.31 0 3.22 2.61 5.83 5.83 5.83s5.83-2.61 5.83-5.83-2.61-5.83-5.83-5.83z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 558 B After Width: | Height: | Size: 533 B |
@ -9,8 +9,6 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="168.21252mm"
|
||||
height="176.34952mm"
|
||||
viewBox="0 0 596.02863 624.86049"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
@ -23,23 +21,12 @@
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="278.72839"
|
||||
inkscape:cy="253.85692"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1855"
|
||||
inkscape:window-height="1056"
|
||||
inkscape:window-x="1985"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1" />
|
||||
/>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
@ -57,8 +44,7 @@
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-96.271606,-161.35864)">
|
||||
<path
|
||||
style="fill:#94c630"
|
||||
<path class="fill-color"
|
||||
d="m 226.78571,717.53552 0,-68.68386 -4.88516,-4.70867 c -6.42608,-6.19391 -9.23116,-6.71523 -36.9412,-6.86548 -24.78746,-0.1344 -32.98397,-1.22152 -43.95079,-5.82929 -15.56012,-6.53766 -29.88171,-19.84926 -37.02898,-34.4176 -8.389993,-17.10139 -7.693873,0.8413 -7.693873,-198.31128 l 0,-177.00001 3.30919,-9.5 c 4.257043,-12.22109 10.306203,-21.86381 18.862433,-30.06785 11.61523,-11.1371 24.97171,-17.63265 40.92353,-19.90201 5.72478,-0.81442 72.02563,-1.03614 240.40485,-0.80395 261.45563,0.36054 235.55345,-0.46199 253,8.03402 7.01459,3.41591 10.16895,5.80822 18.05026,13.68953 7.8784,7.8784 10.27528,11.03826 13.69183,18.05026 8.46606,17.37539 7.75791,-0.69816 7.75791,198.00001 0,198.69816 0.70815,180.62461 -7.75791,198 -3.41655,7.012 -5.81343,10.17186 -13.69183,18.05026 -7.88131,7.88131 -11.03567,10.27362 -18.05026,13.68953 -16.96959,8.26374 -5.62767,7.61008 -142.59678,8.21816 -105.14414,0.46679 -122.36103,0.74554 -124,2.00762 -3.09839,2.3859 -36.06645,33.0732 -145.876,135.78421 -6.61497,6.1873 -12.36472,11.2498 -12.77722,11.25 -0.4125,10e-5 -0.75,-30.9075 -0.75,-68.6836 z"
|
||||
id="path3353"
|
||||
inkscape:connector-curvature="0" />
|
||||
|
||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.5 KiB |
@ -2,16 +2,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240">
|
||||
<defs>
|
||||
<linearGradient id="b" x1="0.6667" y1="0.1667" x2="0.4167" y2="0.75">
|
||||
<stop stop-color="#37aee2" offset="0"/>
|
||||
<stop stop-color="#1e96c8" offset="1"/>
|
||||
<stop stop-color="#000" offset="0"/>
|
||||
<stop stop-color="#000" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="w" x1="0.6597" y1="0.4369" x2="0.8512" y2="0.8024">
|
||||
<stop stop-color="#eff7fc" offset="0"/>
|
||||
<stop stop-color="#fff" offset="0"/>
|
||||
<stop stop-color="#fff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="120" cy="120" r="120" fill="url(#b)"/>
|
||||
<path fill="#c8daea" d="m98 175c-3.8876 0-3.227-1.4679-4.5678-5.1695L82 132.2059 170 80"/>
|
||||
<path fill="#a9c9dd" d="m98 175c3 0 4.3255-1.372 6-3l16-15.558-19.958-12.035"/>
|
||||
<path fill="url(#w)" d="m100.04 144.41 48.36 35.729c5.5185 3.0449 9.5014 1.4684 10.876-5.1235l19.685-92.763c2.0154-8.0802-3.0801-11.745-8.3594-9.3482l-115.59 44.571c-7.8901 3.1647-7.8441 7.5666-1.4382 9.528l29.663 9.2583 68.673-43.325c3.2419-1.9659 6.2173-0.90899 3.7752 1.2584"/>
|
||||
<circle cx="120" cy="120" r="120" class = "fill-color"/>
|
||||
<path class = "fill-background" fill-opacity="0.5" d="m98 175c-3.8876 0-3.227-1.4679-4.5678-5.1695L82 132.2059 170 80"/>
|
||||
<path class = "fill-background" fill-opacity="0.5" d="m98 175c3 0 4.3255-1.372 6-3l16-15.558-19.958-12.035"/>
|
||||
<path class = "fill-background" d="m100.04 144.41 48.36 35.729c5.5185 3.0449 9.5014 1.4684 10.876-5.1235l19.685-92.763c2.0154-8.0802-3.0801-11.745-8.3594-9.3482l-115.59 44.571c-7.8901 3.1647-7.8441 7.5666-1.4382 9.528l29.663 9.2583 68.673-43.325c3.2419-1.9659 6.2173-0.90899 3.7752 1.2584"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 999 B After Width: | Height: | Size: 1.0 KiB |
@ -13,8 +13,6 @@
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="194.9763"
|
||||
height="194.49712"
|
||||
viewBox="0 0 194.9763 194.49711"
|
||||
enable-background="new 0 0 405.661 316.98"
|
||||
xml:space="preserve"
|
||||
@ -24,7 +22,6 @@
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs3420" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
@ -52,7 +49,7 @@
|
||||
height="209.61963"
|
||||
id="rect3408"
|
||||
x="-3.27195"
|
||||
style="fill:#ffffff" /><g
|
||||
style="fill:#ffffff00" /><g
|
||||
id="g3410"
|
||||
transform="translate(-112.956,-10.627894)"><path
|
||||
d="m 112.956,205.125 c 5.281,-17.05 11.402,-33.26 16.998,-49.994 -37.095,-64.878 8.812,-137.915 70.991,-143.982 58.707,-5.729 106.841,36.439 106.987,93.988 0.153,60.723 -58.74,111.713 -124.985,90.988 -4.997,-1.563 -11.18,-6.657 -16.998,-6.999 -8.131,-0.479 -18.787,5.359 -26.997,7.999 -8.999,2.895 -16.824,5.796 -25.996,8 z m 54.993,-33.996 c 53.495,32.466 117.551,-3.949 122.985,-56.993 4.918,-48.019 -33.424,-90.745 -84.99,-86.989 -58.87,4.287 -94.232,74.559 -57.993,125.984 -3.208,8.791 -6.21,17.788 -8.999,26.997 9.822,-2.844 18.876,-6.455 28.997,-8.999 z"
|
||||
|
||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.6 KiB |
@ -2931,11 +2931,15 @@ ScriptLoader.scriptPromises = {};
|
||||
ScriptLoader.cssPromises = {};
|
||||
|
||||
class ShareButton {
|
||||
constructor(deviceType, icon, callback)
|
||||
constructor(deviceType, icon, callback, shouldLoadImg)
|
||||
{
|
||||
this._deviceType = deviceType;
|
||||
this._icon = icon;
|
||||
this._callback = callback;
|
||||
console.log("shouldLoad", Helper.nonNull(shouldLoadImg, false), shouldLoadImg);
|
||||
if (Helper.nonNull(shouldLoadImg, false)){
|
||||
this._icon = ViewInflater.inflate(this._icon);
|
||||
}
|
||||
}
|
||||
|
||||
shouldShowFor(deviceType)
|
||||
@ -2968,13 +2972,11 @@ class ShareManager {
|
||||
ShareManager.shareButtons.push(shareButton);
|
||||
}
|
||||
|
||||
static generateDefaultShareElement(shareUrl)
|
||||
{
|
||||
static generateDefaultShareElement(shareUrl) {
|
||||
return ShareManager.generateShareElement(shareUrl, ShareManager.getDefaultGenerateCallback());
|
||||
}
|
||||
|
||||
static generateDefaultShareElementForButtons(shareUrl, buttons)
|
||||
{
|
||||
static generateDefaultShareElementForButtons(shareUrl, buttons) {
|
||||
return ShareManager.generateShareElementForButtons(shareUrl, buttons, ShareManager.getDefaultGenerateCallback());
|
||||
}
|
||||
|
||||
@ -2982,14 +2984,13 @@ class ShareManager {
|
||||
return ShareManager.generateShareElementForButtons(shareUrl, ShareManager.shareButtons, generateCallback);
|
||||
}
|
||||
|
||||
static generateShareElementForButtons(shareUrl, buttons, generateCallback)
|
||||
{
|
||||
static generateShareElementForButtons(shareUrl, buttons, generateCallback) {
|
||||
let shareButtonElement = document.createElement("div");
|
||||
let currentDeviceType = ShareManager.getCurrentDeviceType();
|
||||
for (let i = 0, n = buttons.length; i < n; i++) {
|
||||
if (buttons[i].shouldShowFor(currentDeviceType)) {
|
||||
let elem = generateCallback(buttons[i], shareUrl);
|
||||
elem.onclick = function(event){
|
||||
elem.onclick = function (event) {
|
||||
buttons[i].getCallback()(shareUrl, this, event);
|
||||
};
|
||||
shareButtonElement.appendChild(elem);
|
||||
@ -3010,15 +3011,22 @@ class ShareManager {
|
||||
}
|
||||
}
|
||||
|
||||
static getDefaultGenerateCallback()
|
||||
{
|
||||
return function(button){
|
||||
static getDefaultGenerateCallback() {
|
||||
return function (button) {
|
||||
let linkElement = document.createElement("a");
|
||||
let iconElement = document.createElement("img");
|
||||
linkElement.appendChild(iconElement);
|
||||
|
||||
iconElement.src = Helper.basePath(button.getIcon());
|
||||
iconElement.classList.add("share-icon");
|
||||
linkElement.classList.add("share-icon");
|
||||
let iconUrl = button.getIcon();
|
||||
if (typeof iconUrl === "string") {
|
||||
let iconElement = document.createElement("img");
|
||||
iconElement.src = Helper.basePath(button.getIcon());
|
||||
iconElement.classList.add("share-icon");
|
||||
linkElement.appendChild(iconElement);
|
||||
}
|
||||
else {
|
||||
Promise.resolve(iconUrl).then(elem => {
|
||||
linkElement.appendChild(elem);
|
||||
});
|
||||
}
|
||||
|
||||
return linkElement;
|
||||
}
|
||||
@ -3029,7 +3037,7 @@ ShareManager.init();
|
||||
|
||||
class SmsShareButton extends ShareButton
|
||||
{
|
||||
constructor(icon) {
|
||||
constructor(icon, shouldLoadImg) {
|
||||
super(ShareButton.TYPE_MOBILE, icon, function (link) {
|
||||
let linkToOpen = "";
|
||||
if (ShareManager.getCurrentDeviceType() === ShareButton.TYPE_MOBILE_APPLE) {
|
||||
@ -3039,21 +3047,21 @@ class SmsShareButton extends ShareButton
|
||||
linkToOpen = "sms:?body=" + encodeURIComponent(link);
|
||||
}
|
||||
window.open(linkToOpen, '_blank');
|
||||
});
|
||||
}, shouldLoadImg);
|
||||
}
|
||||
}
|
||||
|
||||
class TelegramShareButton extends ShareButton {
|
||||
constructor(icon) {
|
||||
constructor(icon, shouldLoadImg) {
|
||||
super(ShareButton.TYPE_ALL, icon, function (link) {
|
||||
let linkToOpen = "https://t.me/share/url?url="+encodeURIComponent(link);
|
||||
window.open(linkToOpen, '_blank');
|
||||
});
|
||||
}, shouldLoadImg);
|
||||
}
|
||||
}
|
||||
|
||||
class WhatsappShareButton extends ShareButton {
|
||||
constructor(icon) {
|
||||
constructor(icon, shouldLoadImg) {
|
||||
super(ShareButton.TYPE_ALL, icon, function (link) {
|
||||
let linkToOpen = "";
|
||||
if (ShareManager.getCurrentDeviceType() === ShareButton.TYPE_DESKTOP) {
|
||||
@ -3063,7 +3071,7 @@ class WhatsappShareButton extends ShareButton {
|
||||
linkToOpen = "whatsapp://send?text=" + encodeURIComponent(link);
|
||||
}
|
||||
window.open(linkToOpen, '_blank');
|
||||
});
|
||||
}, shouldLoadImg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6496,6 +6504,24 @@ class MainMenuLevel extends FourWordsLevel{
|
||||
// }
|
||||
}
|
||||
|
||||
class ShareDialog extends Dialog{
|
||||
constructor() {
|
||||
let viewPromise = ViewInflater.inflate("html/application/dialog/share.html").then(view => {
|
||||
view.appendChild(ShareManager.generateDefaultShareElement(window.location.hostname + Helper.basePath("")));
|
||||
let closeListener = () => {
|
||||
this.close();
|
||||
};
|
||||
|
||||
view.querySelectorAll("a").forEach((element) => {
|
||||
element.addEventListener("click", closeListener);
|
||||
});
|
||||
return view;
|
||||
});
|
||||
|
||||
super(viewPromise, "share-dialog");
|
||||
}
|
||||
}
|
||||
|
||||
class MenuSite extends WordRotatorBaseSite {
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/menu.html");
|
||||
@ -6641,6 +6667,11 @@ class MenuSite extends WordRotatorBaseSite {
|
||||
soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);
|
||||
Matomo.push(["trackEvent", "MainMenu", "PlaySound", "Play Sound", (playSoundButton.checked) ? 1 : 0]);
|
||||
});
|
||||
|
||||
this.findBy("#share-button").addEventListener("click", () => {
|
||||
new ShareDialog().show();
|
||||
});
|
||||
// this.findBy("#share-buttons").appendChild(ShareManager.generateDefaultShareElement("https://wordrotator.silas.link"));
|
||||
}
|
||||
|
||||
onPause(args) {
|
||||
@ -6814,9 +6845,9 @@ class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
|
||||
InstallManager.setCanInstallListener(() => {
|
||||
let installButton = this.findBy("#install-button");
|
||||
installButton.addEventListener("click", () => {
|
||||
installButton.classList.add("hidden");
|
||||
InstallManager.prompt().then((e) => {
|
||||
console.log("clicked", e);
|
||||
installButton.classList.add("hidden");
|
||||
});
|
||||
});
|
||||
installButton.classList.remove("hidden");
|
||||
@ -6856,9 +6887,9 @@ ThemeManager.addTheme(new Theme("green", "green"));
|
||||
ThemeManager.addTheme(new Theme("pink", "pink"));
|
||||
ThemeManager.addTheme(new Theme("dark", "dark"));
|
||||
|
||||
ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg'));
|
||||
ShareManager.addShareButton(new SmsShareButton('img/sms.svg'));
|
||||
ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg'));
|
||||
ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg', true));
|
||||
ShareManager.addShareButton(new SmsShareButton('img/sms.svg', true));
|
||||
ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg', true));
|
||||
// ShareManager.addShareButton(new CopyShareButton('img/copy.svg'));
|
||||
|
||||
let app = new App();
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -37,9 +37,9 @@ ThemeManager.addTheme(new Theme("green", "green"));
|
||||
ThemeManager.addTheme(new Theme("pink", "pink"));
|
||||
ThemeManager.addTheme(new Theme("dark", "dark"));
|
||||
|
||||
ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg'));
|
||||
ShareManager.addShareButton(new SmsShareButton('img/sms.svg'));
|
||||
ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg'));
|
||||
ShareManager.addShareButton(new WhatsappShareButton('img/whatsapp.svg', true));
|
||||
ShareManager.addShareButton(new SmsShareButton('img/sms.svg', true));
|
||||
ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg', true));
|
||||
// ShareManager.addShareButton(new CopyShareButton('img/copy.svg'));
|
||||
|
||||
let app = new App();
|
||||
|
||||
@ -3660,11 +3660,15 @@ ScriptLoader.scriptPromises = {};
|
||||
ScriptLoader.cssPromises = {};
|
||||
|
||||
class ShareButton {
|
||||
constructor(deviceType, icon, callback)
|
||||
constructor(deviceType, icon, callback, shouldLoadImg)
|
||||
{
|
||||
this._deviceType = deviceType;
|
||||
this._icon = icon;
|
||||
this._callback = callback;
|
||||
console.log("shouldLoad", Helper.nonNull(shouldLoadImg, false), shouldLoadImg);
|
||||
if (Helper.nonNull(shouldLoadImg, false)){
|
||||
this._icon = ViewInflater.inflate(this._icon);
|
||||
}
|
||||
}
|
||||
|
||||
shouldShowFor(deviceType)
|
||||
@ -3690,7 +3694,7 @@ ShareButton.TYPE_ALL = ShareButton.TYPE_DESKTOP+ShareButton.TYPE_MOBILE;
|
||||
|
||||
class CopyShareButton extends ShareButton
|
||||
{
|
||||
constructor(icon) {
|
||||
constructor(icon, shouldLoadImg) {
|
||||
super(ShareButton.TYPE_ALL, icon, function (link) {
|
||||
try{
|
||||
let elementToCopy = document.createElement("div");
|
||||
@ -3715,7 +3719,7 @@ class CopyShareButton extends ShareButton
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
}, shouldLoadImg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3728,13 +3732,11 @@ class ShareManager {
|
||||
ShareManager.shareButtons.push(shareButton);
|
||||
}
|
||||
|
||||
static generateDefaultShareElement(shareUrl)
|
||||
{
|
||||
static generateDefaultShareElement(shareUrl) {
|
||||
return ShareManager.generateShareElement(shareUrl, ShareManager.getDefaultGenerateCallback());
|
||||
}
|
||||
|
||||
static generateDefaultShareElementForButtons(shareUrl, buttons)
|
||||
{
|
||||
static generateDefaultShareElementForButtons(shareUrl, buttons) {
|
||||
return ShareManager.generateShareElementForButtons(shareUrl, buttons, ShareManager.getDefaultGenerateCallback());
|
||||
}
|
||||
|
||||
@ -3742,14 +3744,13 @@ class ShareManager {
|
||||
return ShareManager.generateShareElementForButtons(shareUrl, ShareManager.shareButtons, generateCallback);
|
||||
}
|
||||
|
||||
static generateShareElementForButtons(shareUrl, buttons, generateCallback)
|
||||
{
|
||||
static generateShareElementForButtons(shareUrl, buttons, generateCallback) {
|
||||
let shareButtonElement = document.createElement("div");
|
||||
let currentDeviceType = ShareManager.getCurrentDeviceType();
|
||||
for (let i = 0, n = buttons.length; i < n; i++) {
|
||||
if (buttons[i].shouldShowFor(currentDeviceType)) {
|
||||
let elem = generateCallback(buttons[i], shareUrl);
|
||||
elem.onclick = function(event){
|
||||
elem.onclick = function (event) {
|
||||
buttons[i].getCallback()(shareUrl, this, event);
|
||||
};
|
||||
shareButtonElement.appendChild(elem);
|
||||
@ -3770,15 +3771,22 @@ class ShareManager {
|
||||
}
|
||||
}
|
||||
|
||||
static getDefaultGenerateCallback()
|
||||
{
|
||||
return function(button){
|
||||
static getDefaultGenerateCallback() {
|
||||
return function (button) {
|
||||
let linkElement = document.createElement("a");
|
||||
let iconElement = document.createElement("img");
|
||||
linkElement.appendChild(iconElement);
|
||||
|
||||
iconElement.src = Helper.basePath(button.getIcon());
|
||||
iconElement.classList.add("share-icon");
|
||||
linkElement.classList.add("share-icon");
|
||||
let iconUrl = button.getIcon();
|
||||
if (typeof iconUrl === "string") {
|
||||
let iconElement = document.createElement("img");
|
||||
iconElement.src = Helper.basePath(button.getIcon());
|
||||
iconElement.classList.add("share-icon");
|
||||
linkElement.appendChild(iconElement);
|
||||
}
|
||||
else {
|
||||
Promise.resolve(iconUrl).then(elem => {
|
||||
linkElement.appendChild(elem);
|
||||
});
|
||||
}
|
||||
|
||||
return linkElement;
|
||||
}
|
||||
@ -3789,7 +3797,7 @@ ShareManager.init();
|
||||
|
||||
class SmsShareButton extends ShareButton
|
||||
{
|
||||
constructor(icon) {
|
||||
constructor(icon, shouldLoadImg) {
|
||||
super(ShareButton.TYPE_MOBILE, icon, function (link) {
|
||||
let linkToOpen = "";
|
||||
if (ShareManager.getCurrentDeviceType() === ShareButton.TYPE_MOBILE_APPLE) {
|
||||
@ -3799,21 +3807,21 @@ class SmsShareButton extends ShareButton
|
||||
linkToOpen = "sms:?body=" + encodeURIComponent(link);
|
||||
}
|
||||
window.open(linkToOpen, '_blank');
|
||||
});
|
||||
}, shouldLoadImg);
|
||||
}
|
||||
}
|
||||
|
||||
class TelegramShareButton extends ShareButton {
|
||||
constructor(icon) {
|
||||
constructor(icon, shouldLoadImg) {
|
||||
super(ShareButton.TYPE_ALL, icon, function (link) {
|
||||
let linkToOpen = "https://t.me/share/url?url="+encodeURIComponent(link);
|
||||
window.open(linkToOpen, '_blank');
|
||||
});
|
||||
}, shouldLoadImg);
|
||||
}
|
||||
}
|
||||
|
||||
class WhatsappShareButton extends ShareButton {
|
||||
constructor(icon) {
|
||||
constructor(icon, shouldLoadImg) {
|
||||
super(ShareButton.TYPE_ALL, icon, function (link) {
|
||||
let linkToOpen = "";
|
||||
if (ShareManager.getCurrentDeviceType() === ShareButton.TYPE_DESKTOP) {
|
||||
@ -3823,7 +3831,7 @@ class WhatsappShareButton extends ShareButton {
|
||||
linkToOpen = "whatsapp://send?text=" + encodeURIComponent(link);
|
||||
}
|
||||
window.open(linkToOpen, '_blank');
|
||||
});
|
||||
}, shouldLoadImg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<div class = 'max-width center'></div>
|
||||
@ -15,25 +15,31 @@
|
||||
</div>
|
||||
|
||||
<div class='height-60 max-width flex-center'>
|
||||
<div id = 'level'></div>
|
||||
<span id='level-number-container' class = 'visible in-main-menu'>
|
||||
<div id='level'></div>
|
||||
<span id='level-number-container' class='visible in-main-menu'>
|
||||
<span id='level-number'>1</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class='height-30 flex-center fill-me'>
|
||||
<button class='button grow text-center' id='play-button'><span data-translation="play"></span></button>
|
||||
<div class = 'max-width line-height-1'>
|
||||
<div class='max-width line-height-1 fill-me vertical'>
|
||||
<label class="switch">
|
||||
<div data-view="img/speaker.svg"></div>
|
||||
<input type="checkbox" class = "setting" id = "play-sound">
|
||||
<input type="checkbox" class="setting" id="play-sound">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<div class="grow center" id = "share-button"><span data-view="img/share.svg"></span></div>
|
||||
<label class="switch right">
|
||||
<div data-view="img/music.svg"></div>
|
||||
<input type="checkbox" class = "setting" id = "play-music">
|
||||
<input type="checkbox" class="setting" id="play-music">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class='height-10 flex-center fill-me'>
|
||||
<div class='max-width line-height-1'>
|
||||
<span class='right' id='share-buttons'></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
19
src/module/Application/pwa/js/dialog/ShareDialog.js
Normal file
19
src/module/Application/pwa/js/dialog/ShareDialog.js
Normal file
@ -0,0 +1,19 @@
|
||||
import {Dialog, Helper, ShareManager, ThemeManager, Translator, ViewInflater} from "../../../../../js/lib/pwa-lib";
|
||||
|
||||
export class ShareDialog extends Dialog{
|
||||
constructor() {
|
||||
let viewPromise = ViewInflater.inflate("html/application/dialog/share.html").then(view => {
|
||||
view.appendChild(ShareManager.generateDefaultShareElement(window.location.hostname + Helper.basePath("")));
|
||||
let closeListener = () => {
|
||||
this.close();
|
||||
};
|
||||
|
||||
view.querySelectorAll("a").forEach((element) => {
|
||||
element.addEventListener("click", closeListener);
|
||||
});
|
||||
return view;
|
||||
});
|
||||
|
||||
super(viewPromise, "share-dialog");
|
||||
}
|
||||
}
|
||||
@ -3,9 +3,10 @@ import {LevelSite} from "./LevelSite";
|
||||
import {Matomo, ScaleHelper, SoundManager} from "../../../../../js/lib/pwa-assets";
|
||||
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
|
||||
import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel";
|
||||
import {FlashMessenger, Helper, InitPromise} from "../../../../../js/lib/pwa-lib";
|
||||
import {FlashMessenger, Helper, InitPromise, ShareManager} from "../../../../../js/lib/pwa-lib";
|
||||
import {DataManager, SettingsManager} from "../../../../../js/lib/pwa-core";
|
||||
import {WordRotatorDb} from "../WordRotatorDb";
|
||||
import {ShareDialog} from "../dialog/ShareDialog";
|
||||
|
||||
export class MenuSite extends WordRotatorBaseSite {
|
||||
constructor(siteManager) {
|
||||
@ -152,6 +153,11 @@ export class MenuSite extends WordRotatorBaseSite {
|
||||
soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);
|
||||
Matomo.push(["trackEvent", "MainMenu", "PlaySound", "Play Sound", (playSoundButton.checked) ? 1 : 0]);
|
||||
});
|
||||
|
||||
this.findBy("#share-button").addEventListener("click", () => {
|
||||
new ShareDialog().show();
|
||||
});
|
||||
// this.findBy("#share-buttons").appendChild(ShareManager.generateDefaultShareElement("https://wordrotator.silas.link"));
|
||||
}
|
||||
|
||||
onPause(args) {
|
||||
|
||||
@ -26,5 +26,6 @@
|
||||
"track":"Anonymisierte Nutzungsdaten senden:",
|
||||
">":">",
|
||||
"choose-theme-dialog-title":"Theme auswählen:",
|
||||
"install":"Installieren"
|
||||
"install":"Installieren",
|
||||
"share-dialog":"Teilen:"
|
||||
}
|
||||
@ -357,4 +357,9 @@ body {
|
||||
|
||||
.clickable{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#share-button svg{
|
||||
cursor: pointer;
|
||||
max-width: 1.5rem;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user