npm - @everymatrix/player-panic-button - Versions diffs - 1.16.1 - Mend

@everymatrix/player-panic-button 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +30 -0
package/dist/panic-button.js +6965 -0
package/dist/panic-button.js.map +1 -0
package/dist/player-panic-button.js +6965 -0
package/dist/player-panic-button.js.map +1 -0
package/index.html +37 -0
package/index.js +1 -0
package/package.json +39 -0
package/public/favicon.png +0 -0
package/public/reset.css +48 -0
package/rollup.config.js +59 -0
package/src/PlayerPanicButton.svelte +253 -0
package/src/i18n.js +25 -0
package/src/index.ts +4 -0
package/src/translations.js +29 -0
package/stories/PanicButton.stories.js +13 -0
package/tsconfig.json +6 -0

package/index.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<title>
+    player-panic-button
+  </title>
+  <link rel="stylesheet" href="public/reset.css">
+  <script src='dist/player-panic-button.js'></script>
+</head>
+<body>
+  <style>
+    html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
+    .header { display: flex; justify-content: center; align-items: center; padding: 10px 20px; margin-bottom: 20px; background: #42a3e2; box-shadow: 3px 4px 5px 0px rgba(0,0,0, .2); }
+    .header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
+    .header__name { color: #fff; }
+    .header__name span { margin-right: 10px; font-weight: bold; }
+    .webcomponent { padding: 10px 20px; }
+  </style>
+  <header class="header">
+    <div class="header__logo">
+      <svg xmlns="http://www.w3.org/2000/svg" width="161" height="132" viewBox="0 0 161 132"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
+    </div>
+    <h1 class="header__name">
+      <span>WEBCOMPONENT:</span> player-panic-button
+    </h1>
+  </header>
+  <div class="webcomponent">
+    <player-panic-button></player-panic-button>
+  </div>
+</body>
+</html>

package/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import './dist/player-panic-button.js';

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "@everymatrix/player-panic-button",
+  "version": "1.16.1",
+  "main": "dist/player-panic-button.js",
+  "svelte": "src/index.ts",
+  "scripts": {
+    "start": "sirv public",
+    "build": "cross-env NODE_ENV=production && rollup -c",
+    "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
+    "validate": "svelte-check",
+    "test": "echo"
+  },
+  "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@tsconfig/svelte": "^1.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-dev-server": "^0.4.3",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "svelte-check": "^1.0.0",
+    "svelte-preprocess": "^5.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.3"
+  },
+  "dependencies": {
+    "cross-env": "^7.0.3",
+    "sirv-cli": "^1.0.0",
+    "svelte": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a305078a67c4daeeb719b3e79cecee8b7c87f030"
+}

package/public/favicon.png ADDED Viewed

Binary file

package/public/reset.css ADDED Viewed

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

package/rollup.config.js ADDED Viewed

@@ -0,0 +1,59 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import serve from 'rollup-plugin-dev-server';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+const production = process.env.NODE_ENV === 'production';
+const dev = process.env.NODE_ENV === 'development';
+export default {
+  input: 'src/index.ts',
+  output: {
+    sourcemap: true,
+    format: 'umd',
+    name: 'app',
+    file: 'dist/player-panic-button.js'
+  },
+  plugins: [
+    svelte({
+      preprocess: sveltePreprocess(),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        customElement: true,
+        dev: !production
+      }
+    }),
+    commonjs(),
+    resolve({
+      browser: true,
+      dedupe: ['svelte']
+    }),
+    dev && serve({
+      open: true,
+      verbose: true,
+      allowCrossOrigin: true,
+      historyApiFallback: false,
+      host: 'localhost',
+      port: 5050,
+    }),
+    dev && livereload({ watch: ['', 'dist'] }),
+    typescript({
+      sourceMap: !production,
+      inlineSources: !production,
+    }),
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production &&
+    terser({
+      output: {
+        comments: "all"
+      },
+    })
+  ],
+  watch: {
+    clearScreen: false
+  }
+};

package/src/PlayerPanicButton.svelte ADDED Viewed

@@ -0,0 +1,253 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { TRANSLATIONS } from './translations';
+  export let lang:string = 'en';
+  export let customtext:string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let alternativestyling:string = '';
+  export let translationurl:string = '';
+  let panicButton:HTMLElement;
+  let customStylingContainer:HTMLElement;
+  let panicLoading:boolean = false;
+  let timer: number = 0;
+  let timerInterval:any;
+  let userAgent:any = window.navigator.userAgent;
+  const setTranslationUrl = ():void => {
+    let url:string = translationurl;
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.log(err);
+    });
+  }
+  Object.keys(TRANSLATIONS).forEach((item) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+  const addEventsToDisplayedElements = () => {
+      panicButton?.addEventListener("mousedown", startInterval, false);
+      panicButton?.addEventListener('touchstart', startInterval, false);
+      // on mouseup stop interval count
+      panicButton?.addEventListener("mouseup", endInterval, false);
+      panicButton?.addEventListener("touchend", endInterval, false);
+  }
+  const removeEventsToDisplayedElements = ():void => {
+    panicLoading = false;
+    panicButton?.removeEventListener("mousedown", startInterval);
+    panicButton?.removeEventListener('touchstart', startInterval);
+    // on mouseup stop interval count
+    panicButton?.removeEventListener("mouseup", endInterval);
+    panicButton?.removeEventListener("touchend", endInterval);
+  }
+  const startInterval = ():void => {
+    timer = 0;
+    panicLoading = true;
+    timerInterval = setInterval(() => {
+      timer++;
+      if (timer >= 2) {
+        window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
+        clearInterval(timerInterval);
+        //Analytics event
+        if(typeof gtag == 'function'){
+          gtag('event', 'PanicButtonClicked', {
+            'context': 'PanicButton'
+          });
+        }
+      }
+    }, 1000);
+  }
+  const endInterval = ():void => {
+    panicLoading = false;
+    clearInterval(timerInterval);
+  }
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+  const setClientStylingURL = ():void => {
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+  onMount(() => {
+    return () => {
+        removeEventsToDisplayedElements();
+    }
+  });
+  $: panicButton && addEventsToDisplayedElements();
+  $: lang && setLocale(lang);
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: translationurl && setTranslationUrl();
+</script>
+  <div class="{alternativestyling == 'true' ? "PanicButtonV2" : ""}"  bind:this={customStylingContainer}>
+    <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
+      <button
+        class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}"
+        class:PanicButtonAnimation={panicLoading}
+        part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}"
+        bind:this={panicButton}>
+        {customtext || $_('panicButtonString')}
+      </button>
+    </div>
+  </div>
+<style lang="scss">
+  $button-width: 280px;
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    outline: none;
+    box-sizing: border-box;
+  }
+  .PanicSection {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 20px 0;
+    .PanicButton {
+      border-radius: 5px;
+      border: 1px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+      background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+      font-size: 10px;
+      width: $button-width;
+      height: fit-content;
+      padding: 15px;
+      color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+      cursor: pointer;
+    }
+  }
+  // the use of !important is necessary in order to override margin from .PanicSection
+  .PanicSectionMobile {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    margin: 20px 0 0 0 !important;
+  }
+  .PanicButtonMobile {
+    border-radius: 5px;
+    margin: 0 10px;
+    border: 1px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    width: 100% !important;
+    height: 30px;
+    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+    cursor: pointer;
+    //Remove text selection for panic button on mobile
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none;
+    // End of removing selection properties
+  }
+  .PanicButtonAnimation {
+    background: -webkit-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+    background: -moz-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+    background: -o-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+    background-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    width: $button-width;
+    color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
+    -webkit-animation: bar-animation 2s linear;
+  }
+  @-webkit-keyframes bar-animation {
+    0% {
+      background-position: 0;
+    }
+    100% {
+      background-position: $button-width;
+    }
+  }
+  .PanicButtonV2{
+    $button-width: 388px;
+    .PanicButton {
+      border: 1px solid  var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+      background-color:  var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+      width: $button-width;
+      font-size: 12px;
+    }
+    .PanicButtonMobile {
+      border: 1px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+      background-color:  var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+      font-size: 10px;
+    }
+    .PanicButtonAnimation {
+      background-color:  var(--emfe-w-casino-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+      width: $button-width;
+    }
+    @-webkit-keyframes bar-animation {
+    0% {
+      background-position: 0;
+    }
+    100% {
+      background-position: $button-width;
+    }
+  }
+  }
+</style>

package/src/i18n.js ADDED Viewed

@@ -0,0 +1,25 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _,
+} from 'svelte-i18n';
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  });
+}
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import PlayerPanicButton from './PlayerPanicButton.svelte';
+!customElements.get('player-panic-button') && customElements.define('player-panic-button', PlayerPanicButton);
+export default PlayerPanicButton;

package/src/translations.js ADDED Viewed

@@ -0,0 +1,29 @@
+export const TRANSLATIONS = {
+  'en': {
+      'panicButtonString': 'Hold button for 3 seconds to take 24-hour timeout',
+  },
+  'zh-hk': {
+      'panicButtonString': '长按3秒24小时即时锁定',
+  },
+  'fr': {
+      'panicButtonString': 'Maintenez le bouton enfoncé pendant 3 secondes pour prendre un verrouillage instantané de 24 heures',
+  },
+  'ro': {
+      'panicButtonString': 'Tine apasat 3 secunde pentru a lua o pauza de 24h',
+  },
+  'es': {
+      'panicButtonString': 'Dar clic durante 3 segundos para tomar un descanso de 24 horas',
+  },
+  'de': {
+      'panicButtonString': 'Button für 3 Sekunden drücken um eine 24-stündige Auszeit zu nehmen',
+  },
+  'hr': {
+      'panicButtonString': 'Držite gumb 3 sekunde kako biste aktivirali vremensko ograničenje od 24 sata',
+  },
+  'sl': {
+      'panicButtonString': 'Držite gumb 3 sekunde, da bi vzeli 24 urni premor',
+  },
+  'pl': {
+      'panicButtonString': 'Przytrzymaj przycisk przez 3 sekundy, aby uzyskać 24-godzinny limit czasu',
+  },
+}

package/stories/PanicButton.stories.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { html } from 'lit-element';
+import PanicButton from '../src/PanicButton';
+// This default export determines where your story goes in the story list
+export default {
+  title: 'PanicButton',
+};
+// 👇 We create a “template” of how args map to rendering
+const PanicButton = ({ aProperty }) => html`<player-panic-button></player-panic-button>`;
+export const FirstStory = PanicButton.bind({});

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}