@everymatrix/casino-hamburger-menu-nd 1.37.4

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
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +0 -0
  3. package/dist/casino-hamburger-menu-nd.js +2 -0
  4. package/dist/casino-hamburger-menu-nd.js.map +1 -0
  5. package/documentation.md +110 -0
  6. package/index.html +37 -0
  7. package/index.js +1 -0
  8. package/package.json +39 -0
  9. package/public/favicon.png +0 -0
  10. package/public/reset.css +48 -0
  11. package/rollup.config.js +67 -0
  12. package/src/CasinoHamburgerMenu.svelte +813 -0
  13. package/src/i18n.js +27 -0
  14. package/src/index.ts +4 -0
  15. package/src/translations.js +32 -0
  16. package/stories/CasinoHamburgerMenu.stories.js +13 -0
  17. package/tsconfig.json +6 -0
package/documentation.md ADDED
@@ -0,0 +1,110 @@
1
+ # Casino Hamburger Menu widget Documentation
2
+ ## Adding the Casino Hamburger Menu widget
3
+ ### Intro to the Casino Hamburger Menu
4
+ The Casino Hamburger Menu widget is a mobile widget designed and developed to offer a fluid and optimal functionalty when using portable devices.
5
+
6
+ The widget is agnostic about the framework, library or programming language your current product is built on, while at the same time offering ease of integration for developers, and a sleek gateway to your site for your users.
7
+
8
+ ### Progressive
9
+ We like to call our Casino Hamburger Menu widget a "progressive" one since it can grow with your needs. If you just want a simple implementation our architecture and documentation will be there to help you achieve it in mere minutes.
10
+
11
+ If you are looking for a bigger implementation into a more complex product, the Casino Hamburger Menu widget gives you a set of robust tools for using player sessions and more.
12
+
13
+ ### Scalability
14
+ The Casino Hamburger Menu widget scales with you. Although the scalability is mainly accomplished by your main product (the one you integrate this widget into) and by your architecture we took all the necessary steps and precautions to ensure the uninterrupted functionality of this product.
15
+
16
+ ### Stateless
17
+ In the development of this widget we considered that the widget should not care about any kind of state a container product (the product this widget is integrated into) might have nor that the widget itself should have any kind of state management.
18
+
19
+ We took this decision in order to ensure maximum integration compatibility as well as infinite scalability. By not sharing or having a state our widgets can be used as a main widget (like the Casino Lobby) or as singular components (such as the Casino Hamburger Menu) wherever you want to place them.
20
+
21
+ The Casino Hamburger Menu is a base component that has no other dependent widgets. It is displayed inside a modal component and can be used in its own. The components still can communicate with each other even if they are structurally placed in separate parts of your application (they still need to be on the same page).
22
+ ---
23
+
24
+ ## Pre-requisites needed
25
+
26
+ For the Hamburger Menu Widget to be able to work, the parent website needs to integrated with the EM platform.
27
+
28
+ Supported integrations:
29
+ - NorWAy Integration
30
+ - CE Integration
31
+
32
+ For further information on how to proceed with your current integration please contact your assigned Integration Manager.
33
+
34
+ ## Setup the widget on your website.
35
+
36
+ To install the latest version released for the widget, which will be automatically updated once a new release is made, add the following script tag, in the root page of your application.
37
+
38
+ The script can be added either in the <head> or in the <body>. We recommend adding it in the footer of the page for better performance of the entire website.
39
+
40
+ ```javascript
41
+ <script src="https://unpkg.com/@everymatrix/casino-hamburger-menu/dist/casino-hamburger-menu.js"></script>
42
+ ```
43
+
44
+ For a specific version, the script tag looks like this:
45
+ ```javascript
46
+ <script src="https://unpkg.com/@everymatrix/casino-hamburger-menu@1.0.0/dist/casino-hamburger-menu.js"></script>
47
+ ```
48
+ ## Usage
49
+
50
+ Adding the Casino Hamburger Menu Widget is straight forward, with the mention that there are a multitude of options and configurations available.
51
+
52
+ Inside your page you need to add the webcomponent tag for the `Casino Hamburger Menu Widget`.
53
+
54
+ ```html
55
+ <casino-hamburger-menu
56
+ lang="en"
57
+ show="true"
58
+ menuitems="cmsURL"
59
+ ></casino-hamburger-menu>
60
+ ```
61
+
62
+ Full example below:
63
+
64
+ ```html
65
+ <!doctype html>
66
+ <html lang="en">
67
+ <head>
68
+ <meta charset="UTF-8">
69
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
70
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
71
+ <title>EM Widgets | Casino Hamburger Menu Widget Demo</title>
72
+
73
+ <script src="https://unpkg.com/@everymatrix/casino-hamburger-menu/dist/casino-hamburger-menu.js"></script>
74
+
75
+ </head>
76
+ <body>
77
+ <div class="container">
78
+ <casino-hamburger-menu
79
+ lang="en"
80
+ show="true"
81
+ menuitems="cmsURL"
82
+ ></casino-hamburger-menu>
83
+ </div>
84
+ </body>
85
+ </html>
86
+ ```
87
+ > **_PLEASE NOTE:_** The given example is a fully working HTML page and demo credentials are used for ```endpoint``` field. For development and productions purposes you will need to use your own provided credentials.
88
+
89
+ ## Communication between widgets
90
+ |Type|Message data|Comment|
91
+ |---------|---------|-----|
92
+ |OpenHamburgerMenuModal|no extra data received|opens the modal for the `Hamburger Menu`|
93
+ |CloseHamburgerMenu|no extra data sent|switches back to the `Casino Header` widget|
94
+ |EnableScroll|no extra data sent|enables scroll after modal is closed|
95
+
96
+ ## API Reference
97
+ |Parameter|Mandatory|Comment|
98
+ |---------|---------|-------|
99
+ |lang|yes|Language of the website|
100
+ |session|no|EM SessionID of the logged in user|
101
+ |opsession|no|Operator SessionID of the logged in user|
102
+ |userid|no|EM UserID of the logged in user|
103
+ |show|yes|Show/hide menu|
104
+ |menuitems|yes|The endpoint used for obtaining the menu items|
105
+
106
+ ## Releases
107
+
108
+ |Release Version|Value |Scope|Status|Completed Date|
109
+ |---------------|----- |-----|------|--------------|
110
+ |`0.0.42` |Initial release| - |*DONE*|`04 Aug 2021` |
package/index.html ADDED
@@ -0,0 +1,37 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <meta name='viewport' content='width=device-width,initial-scale=1'>
6
+
7
+ <title>
8
+ casino-hamburger-menu
9
+ </title>
10
+ <link rel="stylesheet" href="public/reset.css">
11
+ <script src='dist/casino-hamburger-menu.js'></script>
12
+ </head>
13
+
14
+ <body>
15
+ <style>
16
+ html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
17
+ .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); }
18
+ .header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
19
+ .header__name { color: #fff; }
20
+ .header__name span { margin-right: 10px; font-weight: bold; }
21
+ .webcomponent { padding: 10px 20px; }
22
+ </style>
23
+ <header class="header">
24
+ <div class="header__logo">
25
+ <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>
26
+ </div>
27
+ <h1 class="header__name">
28
+ <span>WEBCOMPONENT:</span> casino-hamburger-menu
29
+ </h1>
30
+ </header>
31
+
32
+ <div class="webcomponent">
33
+ <casino-hamburger-menu></casino-hamburger-menu>
34
+ </div>
35
+
36
+ </body>
37
+ </html>
package/index.js ADDED
@@ -0,0 +1 @@
1
+ import './dist/casino-hamburger-menu-nd.js';
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@everymatrix/casino-hamburger-menu-nd",
3
+ "version": "1.37.4",
4
+ "main": "dist/casino-hamburger-menu-nd.js",
5
+ "svelte": "src/index.ts",
6
+ "scripts": {
7
+ "start": "sirv public",
8
+ "build": "cross-env NODE_ENV=production rollup -c",
9
+ "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
10
+ "validate": "svelte-check",
11
+ "test": "echo"
12
+ },
13
+ "devDependencies": {
14
+ "@rollup/plugin-babel": "^5.3.0",
15
+ "@rollup/plugin-commonjs": "^16.0.0",
16
+ "@rollup/plugin-node-resolve": "^10.0.0",
17
+ "@rollup/plugin-typescript": "^6.0.0",
18
+ "@tsconfig/svelte": "^1.0.0",
19
+ "rollup": "^2.3.4",
20
+ "rollup-plugin-dev-server": "^0.4.3",
21
+ "rollup-plugin-livereload": "^2.0.0",
22
+ "rollup-plugin-svelte": "^7.0.0",
23
+ "rollup-plugin-terser": "^7.0.0",
24
+ "rollup-plugin-uglify": "^6.0.4",
25
+ "svelte-check": "^1.0.0",
26
+ "svelte-preprocess": "^5.0.0",
27
+ "tslib": "^2.0.0",
28
+ "typescript": "^3.9.3"
29
+ },
30
+ "dependencies": {
31
+ "cross-env": "^7.0.3",
32
+ "sirv-cli": "^1.0.0",
33
+ "svelte": "^3.0.0"
34
+ },
35
+ "publishConfig": {
36
+ "access": "public"
37
+ },
38
+ "gitHead": "863252ebf7c846696d9b388f0d288993dbd5065c"
39
+ }
package/public/favicon.png ADDED
Binary file
package/public/reset.css ADDED
@@ -0,0 +1,48 @@
1
+ /* http://meyerweb.com/eric/tools/css/reset/
2
+ v2.0 | 20110126
3
+ License: none (public domain)
4
+ */
5
+
6
+ html, body, div, span, applet, object, iframe,
7
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
+ a, abbr, acronym, address, big, cite, code,
9
+ del, dfn, em, img, ins, kbd, q, s, samp,
10
+ small, strike, strong, sub, sup, tt, var,
11
+ b, u, i, center,
12
+ dl, dt, dd, ol, ul, li,
13
+ fieldset, form, label, legend,
14
+ table, caption, tbody, tfoot, thead, tr, th, td,
15
+ article, aside, canvas, details, embed,
16
+ figure, figcaption, footer, header, hgroup,
17
+ menu, nav, output, ruby, section, summary,
18
+ time, mark, audio, video {
19
+ margin: 0;
20
+ padding: 0;
21
+ border: 0;
22
+ font-size: 100%;
23
+ font: inherit;
24
+ vertical-align: baseline;
25
+ }
26
+ /* HTML5 display-role reset for older browsers */
27
+ article, aside, details, figcaption, figure,
28
+ footer, header, hgroup, menu, nav, section {
29
+ display: block;
30
+ }
31
+ body {
32
+ line-height: 1;
33
+ }
34
+ ol, ul {
35
+ list-style: none;
36
+ }
37
+ blockquote, q {
38
+ quotes: none;
39
+ }
40
+ blockquote:before, blockquote:after,
41
+ q:before, q:after {
42
+ content: '';
43
+ content: none;
44
+ }
45
+ table {
46
+ border-collapse: collapse;
47
+ border-spacing: 0;
48
+ }
package/rollup.config.js ADDED
@@ -0,0 +1,67 @@
1
+ import svelte from 'rollup-plugin-svelte';
2
+ import commonjs from '@rollup/plugin-commonjs';
3
+ import resolve from '@rollup/plugin-node-resolve';
4
+ import serve from 'rollup-plugin-dev-server';
5
+ import livereload from 'rollup-plugin-livereload';
6
+ import { terser } from 'rollup-plugin-terser';
7
+ import sveltePreprocess from 'svelte-preprocess';
8
+ import typescript from '@rollup/plugin-typescript';
9
+ import uglify from 'rollup-plugin-uglify';
10
+ import image from '@rollup/plugin-image';
11
+
12
+ const production = process.env.NODE_ENV == 'production';
13
+ const dev = process.env.NODE_ENV == 'development';
14
+
15
+ export default {
16
+ input: 'src/index.ts',
17
+ output: {
18
+ sourcemap: true,
19
+ format: 'umd',
20
+ name: 'app',
21
+ file: 'dist/casino-hamburger-menu-nd.js',
22
+ },
23
+ plugins: [
24
+ svelte({
25
+ preprocess: sveltePreprocess(),
26
+ compilerOptions: {
27
+ // @TODO check generate and hydratable
28
+ // generate: 'ssr',
29
+ // hydratable: true,
30
+ // enable run-time checks when not in production
31
+ customElement: true,
32
+ dev: !production
33
+ }
34
+ }),
35
+ image(),
36
+ commonjs(),
37
+ resolve({
38
+ browser: true,
39
+ dedupe: ['svelte']
40
+ }),
41
+ dev && serve({
42
+ open: true,
43
+ verbose: true,
44
+ allowCrossOrigin: true,
45
+ historyApiFallback: false,
46
+ host: 'localhost',
47
+ port: 5050,
48
+ }),
49
+ dev && livereload({ watch: ['', 'dist'] }),
50
+ typescript({
51
+ sourceMap: !production,
52
+ inlineSources: !production,
53
+ }),
54
+ // If we're building for production (npm run build
55
+ // instead of npm run dev), minify
56
+ production &&
57
+ terser({
58
+ output: {
59
+ comments: "all"
60
+ },
61
+ }),
62
+ production && uglify.uglify()
63
+ ],
64
+ watch: {
65
+ clearScreen: false
66
+ }
67
+ };