From 72231556f2ab125f538fcc352622e34bdaa978ae Mon Sep 17 00:00:00 2001 From: Alex Kanunnikov Date: Sat, 9 Dec 2023 11:07:01 +0300 Subject: [PATCH 1/2] add ember-responsive --- package.json | 1 + src/addons/ember-responsive.ts | 9 +++++++++ src/addons/index.ts | 2 ++ src/config/breakpoints.ts | 6 ++++++ src/config/initializer.ts | 4 ++++ src/initializers/ember-responsive.ts | 6 ++++++ src/templates/application.hbs | 11 +++++++++++ vite.config.ts | 2 +- yarn.lock | 7 +++++++ 9 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/addons/ember-responsive.ts create mode 100644 src/config/breakpoints.ts create mode 100644 src/initializers/ember-responsive.ts diff --git a/package.json b/package.json index 90c57de..6ab2ecc 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ "ember-qunit": "8.0.2", "ember-resolver": "10.1.1", "ember-resources": "^6.3.1", + "ember-responsive": "^5.0.0", "ember-simple-auth": "6.0.0-rc.1", "ember-source": "5.1.2", "ember-truth-helpers": "^3.1.1", diff --git a/src/addons/ember-responsive.ts b/src/addons/ember-responsive.ts new file mode 100644 index 0000000..3399461 --- /dev/null +++ b/src/addons/ember-responsive.ts @@ -0,0 +1,9 @@ +import MediaHelper from 'ember-responsive/addon/helpers/media.js'; +import MediaService from 'ember-responsive/addon/services/media.js'; + +const registry = { + 'helper:media': MediaHelper, + 'service:media': MediaService, +}; + +export default registry; diff --git a/src/addons/index.ts b/src/addons/index.ts index 03bce77..465e47b 100644 --- a/src/addons/index.ts +++ b/src/addons/index.ts @@ -11,6 +11,7 @@ import EmberPageTitle from './ember-page-title'; import EmberData from './ember-data'; import EmberNotify from './ember-notify'; import EmberModalDialog from './ember-modal-dialog'; +import EmberResponsive from './ember-responsive'; const registry = { ...EmberSimpleAuthRegistry, @@ -26,6 +27,7 @@ const registry = { ...EmberData, ...EmberNotify, ...EmberModalDialog, + ...EmberResponsive, }; export default registry; diff --git a/src/config/breakpoints.ts b/src/config/breakpoints.ts new file mode 100644 index 0000000..6429c9c --- /dev/null +++ b/src/config/breakpoints.ts @@ -0,0 +1,6 @@ +export default { + mobile: '(max-width: 767px)', + tablet: '(min-width: 768px) and (max-width: 991px)', + desktop: '(min-width: 992px) and (max-width: 1200px)', + jumbo: '(min-width: 1201px)', +}; diff --git a/src/config/initializer.ts b/src/config/initializer.ts index 1f34618..2c6b5ce 100644 --- a/src/config/initializer.ts +++ b/src/config/initializer.ts @@ -6,6 +6,8 @@ import { default as initializer } from '../initializers/logger'; import { default as logger } from '../instance-initializers/logger'; import { default as modalDialog } from '../instance-initializers/ember-modal-dialog'; import { default as emberDataInitializer } from '../initializers/ember-data'; +import { default as emberResponsive } from '../initializers/ember-responsive'; +import breakpoints from './breakpoints'; export function init( Application: typeof ApplicationClass, @@ -14,6 +16,7 @@ export function init( // Init initializers Application.initializer(initializer); Application.initializer(emberDataInitializer); + Application.initializer(emberResponsive); // Init instance initializers Application.instanceInitializer(logger); @@ -34,6 +37,7 @@ export function init( app.register('config:environment', ENV); app.register('router:main', Router); + app.register('breakpoints:main', breakpoints); return app; } diff --git a/src/initializers/ember-responsive.ts b/src/initializers/ember-responsive.ts new file mode 100644 index 0000000..73df023 --- /dev/null +++ b/src/initializers/ember-responsive.ts @@ -0,0 +1,6 @@ +import { initialize } from 'ember-responsive/addon/initializers/responsive.js'; + +export default { + name: 'ember-responsive', + initialize, +}; diff --git a/src/templates/application.hbs b/src/templates/application.hbs index 9d95231..829848f 100644 --- a/src/templates/application.hbs +++ b/src/templates/application.hbs @@ -8,6 +8,17 @@
+ + {{#if (media 'isDesktop')}} + looks like you on Desktop + {{else if (media 'isTablet')}} + looks like you on Tablet + {{else if (media 'isMobile')}} + looks like you on Mobile + {{else}} + wow + {{/if}} + {{outlet}}
diff --git a/vite.config.ts b/vite.config.ts index 1840eb5..4395016 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -287,7 +287,7 @@ export default defineConfig(({ mode }) => { babel({ // regexp to match files in src folder filter: - /^.*(@ember-data|ember-notify|ember-wormhole|ember-modal-dialog|ember-bootstrap|ember-ref-bucket|tracked-toolbox|ember-power-select|ember-basic-dropdown|page-title)\/.*\.(ts|js|hbs)$/, + /^.*(@ember-data|ember-responsive|ember-notify|ember-wormhole|ember-modal-dialog|ember-bootstrap|ember-ref-bucket|tracked-toolbox|ember-power-select|ember-basic-dropdown|page-title)\/.*\.(ts|js|hbs)$/, babelConfig: addonBabelConfig( [ dropImportSync(['ember-modal-dialog']), diff --git a/yarn.lock b/yarn.lock index 39a61e2..9e205e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5907,6 +5907,13 @@ ember-resources@^6.3.1: "@embroider/macros" "^1.12.3" ember-async-data "^1.0.1" +ember-responsive@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/ember-responsive/-/ember-responsive-5.0.0.tgz#729e4fb3d2651a573600333aaa3b3d7cbd9c4642" + integrity sha512-JDwNIKHNcHrILGkpLqLqZ1idO7hxxt6f4M2wmiktOuzhBm2/JxUjkK+yec+tzIzXaD7rrl2/S7STa/Uj5s6TEw== + dependencies: + ember-cli-babel "^7.26.11" + ember-rfc176-data@^0.3.15, ember-rfc176-data@^0.3.17: version "0.3.17" resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.17.tgz#d4fc6c33abd6ef7b3440c107a28e04417b49860a" From 167f3293031486267dd26dac973f6d39f7deafa9 Mon Sep 17 00:00:00 2001 From: Alex Kanunnikov Date: Sat, 9 Dec 2023 11:09:21 +0300 Subject: [PATCH 2/2] + --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index e9c1d2b..957985d 100644 --- a/readme.md +++ b/readme.md @@ -91,6 +91,7 @@ yarn dev 1. `ember-notify` 1. `ember-ref-bucket` 1. `ember-modal-dialog` +1. `ember-responsive` [(see code for samples)](https://github.com/lifeart/demo-ember-vite/tree/master/src/addons)