56 | {{/each}} 57 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/tests/dummy/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getChannelURL = require('ember-source-channel-url');
4 | const { embroiderSafe } = require('@embroider/test-setup');
5 |
6 | module.exports = async function () {
7 | return {
8 | packageManager: 'npm',
9 | scenarios: [
10 | {
11 | name: 'ember-lts-5.8',
12 | npm: {
13 | devDependencies: {
14 | 'ember-source': '~5.8.0',
15 | },
16 | },
17 | },
18 | {
19 | name: 'ember-lts-5.12',
20 | npm: {
21 | devDependencies: {
22 | 'ember-source': '~5.12.0',
23 | },
24 | },
25 | },
26 | {
27 | name: 'ember-release',
28 | npm: {
29 | devDependencies: {
30 | 'ember-source': await getChannelURL('release'),
31 | },
32 | },
33 | },
34 | {
35 | name: 'ember-beta',
36 | npm: {
37 | devDependencies: {
38 | 'ember-source': await getChannelURL('beta'),
39 | },
40 | },
41 | },
42 | {
43 | name: 'ember-canary',
44 | npm: {
45 | devDependencies: {
46 | 'ember-source': await getChannelURL('canary'),
47 | },
48 | },
49 | },
50 | embroiderSafe(),
51 | // embroiderOptimized(),
52 | ],
53 | };
54 | };
55 |
--------------------------------------------------------------------------------
/tests/dummy/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (environment) {
4 | const ENV = {
5 | modulePrefix: 'dummy',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'history',
9 | EmberENV: {
10 | EXTEND_PROTOTYPES: false,
11 | FEATURES: {
12 | // Here you can enable experimental features on an ember canary build
13 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
14 | },
15 | },
16 |
17 | APP: {
18 | // Here you can pass flags/options to your application instance
19 | // when it is created
20 | },
21 | cloudinary: {
22 | cloudName: 'demo',
23 | },
24 | };
25 |
26 | if (environment === 'development') {
27 | // ENV.APP.LOG_RESOLVER = true;
28 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
29 | // ENV.APP.LOG_TRANSITIONS = true;
30 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
31 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
32 | ENV.cloudinary = {
33 | cloudName: 'demo',
34 | };
35 | }
36 |
37 | if (environment === 'test') {
38 | // Testem prefers this...
39 | ENV.locationType = 'none';
40 |
41 | // keep test console output quieter
42 | ENV.APP.LOG_ACTIVE_GENERATION = false;
43 | ENV.APP.LOG_VIEW_LOOKUPS = false;
44 |
45 | ENV.APP.rootElement = '#ember-testing';
46 | ENV.APP.autoboot = false;
47 | }
48 |
49 | if (environment === 'production') {
50 | // here you can enable a production-specific feature
51 | }
52 |
53 | return ENV;
54 | };
55 |
--------------------------------------------------------------------------------
/tests/helpers/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | setupApplicationTest as upstreamSetupApplicationTest,
3 | setupRenderingTest as upstreamSetupRenderingTest,
4 | setupTest as upstreamSetupTest,
5 | } from 'ember-qunit';
6 | import Ember from 'ember';
7 |
8 | // This file exists to provide wrappers around ember-qunit's
9 | // test setup functions. This way, you can easily extend the setup that is
10 | // needed per test type.
11 |
12 | function setupApplicationTest(hooks, options) {
13 | upstreamSetupApplicationTest(hooks, options);
14 |
15 | // Additional setup for application tests can be done here.
16 | //
17 | // For example, if you need an authenticated session for each
18 | // application test, you could do:
19 | //
20 | // hooks.beforeEach(async function () {
21 | // await authenticateSession(); // ember-simple-auth
22 | // });
23 | //
24 | // This is also a good place to call test setup functions coming
25 | // from other addons:
26 | //
27 | // setupIntl(hooks, 'en-us'); // ember-intl
28 | // setupMirage(hooks); // ember-cli-mirage
29 |
30 | setupTest(hooks);
31 |
32 | hooks.beforeEach(function () {
33 | Ember.onerror = function (error) {
34 | throw error;
35 | };
36 | });
37 | }
38 |
39 | function setupRenderingTest(hooks, options) {
40 | upstreamSetupRenderingTest(hooks, options);
41 |
42 | // Additional setup for rendering tests can be done here.
43 | }
44 |
45 | function setupTest(hooks, options) {
46 | upstreamSetupTest(hooks, options);
47 |
48 | // Additional setup for unit tests can be done here.
49 | }
50 |
51 | export { setupApplicationTest, setupRenderingTest, setupTest };
52 |
--------------------------------------------------------------------------------
/addon/components/cloudinary-image.js:
--------------------------------------------------------------------------------
1 | import Ember from 'ember'; //So far Ember.Handlebars.Utils.escapeExpression is not a Module
2 | import Component from '@glimmer/component';
3 | import { getOwner } from '@ember/application';
4 | import { htmlSafe } from '@ember/template';
5 | import formatter from '../utils/variable-formatter';
6 | import { tracked } from '@glimmer/tracking';
7 |
8 | export default class CloudinaryImageComponent extends Component {
9 | @tracked options;
10 |
11 | get alt() {
12 | if (!this.args.options) {
13 | return '';
14 | }
15 |
16 | return this.args.options.alt;
17 | }
18 |
19 | get width() {
20 | if (!this.args.options) {
21 | return 0;
22 | }
23 | if (
24 | this.args.options.crop === 'limit' ||
25 | this.args.options.crop === 'fit' ||
26 | this.args.options.crop === 'lfill'
27 | ) {
28 | return null;
29 | }
30 | return this.args.options.width;
31 | }
32 |
33 | get height() {
34 | if (!this.args.options) {
35 | return 0;
36 | }
37 | if (
38 | this.args.options &&
39 | (this.args.options.crop === 'limit' ||
40 | this.args.options.crop === 'fit' ||
41 | this.args.options.crop === 'lfill')
42 | ) {
43 | return null;
44 | }
45 | return this.args.options.height;
46 | }
47 |
48 | get src() {
49 | const cloudName = Ember.Handlebars.Utils.escapeExpression(
50 | getOwner(this).resolveRegistration('config:environment').cloudinary
51 | .cloudName,
52 | );
53 | const params = Ember.Handlebars.Utils.escapeExpression(
54 | formatter(this.args.options),
55 | );
56 | const publicId = Ember.Handlebars.Utils.escapeExpression(
57 | this.args.publicId,
58 | );
59 |
60 | const image = `https://res.cloudinary.com/${cloudName}/image/upload${params}/${publicId}`;
61 | return htmlSafe(image);
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/addon/utils/variable-formatter.js:
--------------------------------------------------------------------------------
1 | export default function variableFormatter(options) {
2 | let variables = [];
3 |
4 | if (!options) {
5 | return '';
6 | }
7 |
8 | if (options.height) {
9 | variables.push('h_' + options.height);
10 | }
11 | if (options.dpr) {
12 | variables.push('dpr_' + options.dpr);
13 | }
14 | if (options.width) {
15 | variables.push('w_' + options.width);
16 | }
17 | if (options.crop) {
18 | variables.push('c_' + options.crop);
19 | }
20 | if (options.fetch_format) {
21 | variables.push('f_' + options.fetch_format);
22 | }
23 | if (options.quality) {
24 | variables.push('q_' + options.quality);
25 | }
26 | if (options.radius) {
27 | variables.push('r_' + options.radius);
28 | }
29 | if (options.default_image) {
30 | variables.push('d_' + options.default_image);
31 | }
32 | if (options.aspect_ratio) {
33 | variables.push('ar_' + options.aspect_ratio);
34 | }
35 | if (options.gravity) {
36 | variables.push('g_' + options.gravity);
37 | }
38 | if (options.zoom) {
39 | variables.push('z_' + options.zoom);
40 | }
41 | if (options.x) {
42 | variables.push('x_' + options.x);
43 | }
44 | if (options.y) {
45 | variables.push('y_' + options.y);
46 | }
47 | if (options.angle) {
48 | variables.push('a_' + options.angle);
49 | }
50 | if (options.effect) {
51 | variables.push('e_' + options.effect);
52 | }
53 | if (options.opacity) {
54 | variables.push('o_' + options.opacity);
55 | }
56 | if (options.border) {
57 | variables.push('bo_' + options.border);
58 | }
59 | if (options.background) {
60 | variables.push('b_' + options.background);
61 | }
62 | if (options.overlay) {
63 | variables.push('l_' + options.overlay);
64 | }
65 | if (options.underlay) {
66 | variables.push('u_' + options.underlay);
67 | }
68 |
69 | return '/' + variables.join(',');
70 | }
71 |
--------------------------------------------------------------------------------
/tests/unit/components/cloudinary-resource-list-test.js:
--------------------------------------------------------------------------------
1 | ///* eslint-disable qunit/no-commented-tests */
2 | //TODO: Unit test for glimmer components is not supported. Also the URL and response is already tested in other tests.
3 |
4 | // import { A } from '@ember/array';
5 | // import { module, test } from 'qunit';
6 | // import { setupTest } from 'ember-qunit';
7 |
8 | // const cloudName = 'demo';
9 |
10 | // module('Unit | Component | cloudinary-resource-list', function (hooks) {
11 | // setupTest(hooks);
12 |
13 | // // Specify the other units that are required for this test.
14 | // // needs: []
15 | // hooks.beforeEach(function () {
16 | // this.owner.register('config:environment', {
17 | // cloudinary: { cloudName },
18 | // });
19 | // });
20 |
21 | // test('Cloudinary URL is composed correctly', function (assert) {
22 | // let component = this.owner
23 | // .factoryFor('component:cloudinary-resource-list')
24 | // .create();
25 |
26 | // let tag = 'test';
27 | // component.set('cloudinaryTag', tag);
28 |
29 | // let url = component.buildUrl();
30 | // assert.expect(
31 | // url,
32 | // `https://res.cloudinary.com/${cloudName}/image/list/${tag}.json`,
33 | // 'Url is OK'
34 | // );
35 | // });
36 |
37 | // test('Response is sorted correctly', function (assert) {
38 | // let component = this.owner
39 | // .factoryFor('component:cloudinary-resource-list')
40 | // .create();
41 |
42 | // let response = {
43 | // resources: A([
44 | // { publid_id: 1, context: { custom: { order: 3 } } },
45 | // { publid_id: 2, context: { custom: { order: 2 } } },
46 | // { publid_id: 3, context: { custom: { order: 1 } } },
47 | // ]),
48 | // };
49 |
50 | // let orderedItems = component.handleCloudinaryResponse(response);
51 | // assert.expect(orderedItems[0].publid_id, 3, 'Resource items order is OK');
52 | // });
53 | // });
54 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ember-cli-cloudinary-light
2 |
3 | [Short description of the addon.]
4 |
5 | ## Compatibility
6 |
7 | - Ember.js v5.8 or above
8 | - Ember CLI v5.8 or above
9 | - Node.js v18 or above
10 |
11 | ## Installation
12 |
13 | `ember install ember-cli-cloudinary-light`
14 |
15 | Add your cloud name to config/environment.js ENV:
16 |
17 | ```javascript
18 | cloudinary: {
19 | cloudName: 'some_cloud_name',
20 | },
21 | ```
22 |
23 | ## Components
24 |
25 | ### cloudinary-image
26 |
27 | ## Usage
28 |
29 | This component will render an `
26 |
27 |
28 |