Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

share eingebaut

Browse Source
This commit is contained in:
silas
2018-10-10 18:27:01 +02:00
parent 93a075c239
commit d53b275bdc
17 changed files with 154 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/init.js
View File

@@ -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();

56
src/js/lib/pwa-lib.js
View File

@@ -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);
}
}

1
src/module/Application/pwa/html/application/dialog/share.html Normal file
View File

@@ -0,0 +1 @@
<div class = 'max-width center'></div>

16
src/module/Application/pwa/html/application/menu.html
View File

@@ -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
View 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");
}
}

8
src/module/Application/pwa/js/site/MenuSite.js
View File

@@ -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) {

3
src/module/Application/pwa/translations/de.json
View File

@@ -26,5 +26,6 @@
"track":"Anonymisierte Nutzungsdaten senden:",
">":">",
"choose-theme-dialog-title":"Theme auswählen:",
"install":"Installieren"
"install":"Installieren",
"share-dialog":"Teilen:"
}

5
src/scss/wordRotator.scss
View File

@@ -357,4 +357,9 @@ body {
.clickable{
cursor: pointer;
}
#share-button svg{
cursor: pointer;
max-width: 1.5rem;
}