npm - @orangelogic/orange-dam-content-browser-sdk - Versions diffs - 1.0.1-test - Mend

@orangelogic/orange-dam-content-browser-sdk 1.0.1-test

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 (173) hide show

package/.env ADDED Viewed

	@@ -0,0 +1 @@
1	+ BUILD_PATH=./build

package/.eslintignore ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ node_modules/
2	+ build/

package/.eslintrc.json ADDED Viewed

@@ -0,0 +1,82 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "airbnb-typescript/base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.eslint.json"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "jest"
+  ],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/return-await": "off",
+    "no-unused-vars": "off",
+    "react/display-name": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "linebreak-style": 0,
+    "max-len": [
+      "error",
+      {
+        "code": 200,
+        "ignoreTemplateLiterals": true,
+        "ignoreStrings": true
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "": "never",
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error", {
+        "devDependencies": false,
+        "optionalDependencies": false,
+        "peerDependencies": false,
+        "packageDir": "./"
+      }
+    ],
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      }
+    }
+  }
+}

package/.releaserc ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    ["@semantic-release/npm", {
+      "npmPublish": false
+    }],
+    ["@semantic-release/exec", {
+      "prepareCmd": "npm run build"
+    }],
+    ["@semantic-release/git", {
+      "assets": ["dist/**/*", "docs", "package.json"],
+      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+    }],
+    "@semantic-release/github"
+  ]
+}

package/.travis.yml ADDED Viewed

@@ -0,0 +1,20 @@
+language: node_js
+node_js:
+ - lts/*
+ - "stable"
+script:
+ - npm test
+ - npm run build
+jobs:
+  include:
+    # Define the release stage that runs semantic-release
+    - stage: release
+      node_js: lts/*
+      # Advanced: optionally overwrite your default `script` step to skip the tests
+      # It may not needed if `npm run build` and `npm test` run in preversion step
+      # script: skip
+      deploy:
+        provider: script
+        skip_cleanup: true
+        script:
+          - npm run release

package/CBSDKdemo.html ADDED Viewed

@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+  <script src="https://downloads.orangelogic.com/ContentBrowserSDK/v1.0.1-test/OrangeDAMContentBrowserSDK.min.js"></script>
+  <link rel="stylesheet" type="text/css"
+    href="https://downloads.orangelogic.com/ContentBrowserSDK/v1.0.1-test/OrangeDAMContentBrowserSDK.min.css">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      color: var(--cx-color-neutral);
+      font-family: 'Roboto', sans-serif;
+      padding: 1rem;
+    }
+    p {
+      margin: 0;
+    }
+    #app {
+      display: flex;
+      gap: 0.5em;
+      height: 800px;
+    }
+    #asset-browser-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    #asset-browser-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    #react-app-root {
+      flex: 1;
+      border: 2px solid var(--cx-color-neutral);
+      border-radius: var(--cx-border-radius-small);
+    }
+    #more {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      min-width: 400px;
+      height: 100%;
+    }
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      flex-basis: 50%;
+    }
+    .wrapper button {
+      border: none;
+      cursor: pointer;
+      margin-top: var(--cx-spacing-small);
+      padding: var(--cx-spacing-x-small) var(--cx-spacing-medium);
+      letter-spacing: 0.05em;
+      width: 100%;
+    }
+    #config,
+    #output {
+      border: 2px solid var(--cx-color-neutral);
+      border-radius: var(--cx-border-radius-small);
+      padding: var(--cx-spacing-small);
+      position: relative;
+      flex: 1;
+    }
+    #content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      white-space: pre;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div id="asset-browser-container">
+      <div id="asset-browser-header">
+        <span>OrangeDAM Content Browser SDK</span>
+        <div>
+          <input type="checkbox" id="mobile">
+          <label for="mobile">Mobile</label>
+        </div>
+      </div>
+      <div id="react-app-root"></div>
+    </div>
+    <div id="more">
+      <div class="wrapper">
+        <span>Config</span>
+        <div id="config">
+          <div id="content" contenteditable></div>
+        </div>
+        <button onclick="loadConfig()">Load config</button>
+      </div>
+      <div class="wrapper">
+        <span>Output</span>
+        <textarea id="output"></textarea>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3>Properties</h3>
+    <div style="display: flex;">
+      <ul>
+        <li>
+          <b>onAssetSelected</b>
+          <p>
+            A function that will be called when an asset is selected. The function will receive an array of selected assets.
+          </p>
+        </li>
+        <li>
+          <b>onError</b>
+          <p>
+            A function that will be called when an error occurs. The function will receive an error message and the error object.
+          </p>
+        </li>
+        <li>
+          <b>onClose</b>
+          <p>
+            A function that will be called when the content browser is closed.
+          </p>
+        </li>
+        <li>
+          <b>publicApplicationName</b> (default blank)
+          <p>
+            The public name of the DAM to display in the login screen.
+          </p>
+        </li>
+        <li>
+          <b>pluginName</b> (default "OrangeDAM Content Browser")
+          <p>
+            The name of the plugin to display in the login screen.
+          </p>
+        </li>
+        <li>
+          <b>containerId</b>
+          <p>
+            The id of the container element to attach the content browser. If not provided, the content browser will open in a popup.
+          </p>
+        </li>
+        <li>
+          <b>baseUrl</b>
+          <p>
+            The default base URL to pre-fill in the content browser.
+          </p>
+        </li>
+        <li>
+          <b>ctaText</b> (default "Insert")
+          <p>
+            The text to display on the insert button.
+          </p>
+        </li>
+        <li>
+          <b>availableDocTypes</b>
+          <p>
+            An array of available OrangeDAM asset types to filter the assets.
+            The available doc types will be configured in OL Platform. If not provided, all doc types will be available.
+            To get the available asset of a doc type, you can add a wildcard (*) at the end of the doc type name.
+            <br/>
+            <span>E.g. Images*, Videos*, Audio*, Others*,...</span>
+          </p>
+          <p>
+            <small>
+              Note: The asset types are case-sensitive.
+            </small>
+          </p>
+        </li>
+        <li>
+          <b>availableRepresentativeSubtypes</b>
+          <p>
+            An array of supported OrangeDAM subtypes to allow inserting representative image. If not provided, all subtypes will be supported.
+            <br/>
+            <span>E.g. Standard Image, Standard Video, Standard Audio, Other,...</span>
+          </p>
+          <p>
+            <small>
+              Note: The subtypes are case-sensitive.
+            </small>
+          </p>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <b>displayInfo</b>
+          <p>
+            An object to configure the display of the asset information. The object has the following properties:
+          </p>
+          <ul>
+            <li>title (default true)</li>
+            <li>dimension (default true)</li>
+            <li>fileSize (default false)</li>
+            <li>tags (default false)</li>
+          </ul>
+        </li>
+        <li>
+          <b>extraFields</b>
+          <p>
+            An array of extra fields to get from the assets. The fields are in the format of "coreField.FieldName" or "document.FieldName".
+          </p>
+        </li>
+        <li>
+          <b>lastLocationMode</b> (default false)
+          <p>
+            A boolean to enable the last location mode. When enabled, the content browser open the last selected folder on loaded.
+          </p>
+        </li>
+        <li>
+          <b>persistMode</b> (default true)
+          <p>
+            A boolean to enable the persist mode. When enabled, the content browser will not close after selecting an asset.
+          </p>
+        </li>
+        <li>
+          <b>allowTracking</b> (default true)
+          <p>
+            A boolean to enable tracking. When enabled, the user will be able to input tracking parameters to be added to the asset URL.
+          </p>
+        </li>
+        <li>
+          <b>showCollections</b> (default true)
+          <p>
+            A boolean to show collections in the content browser.
+          </p>
+        </li>
+        <li>
+          <b>useSession</b>
+          <p>
+            The session id to use for the content browser. Try logging out and in whenever you change the sesssion.
+          </p>
+        </li>
+      </ul>
+  </div>
+  <script>
+    function loadDefaultConfig() {
+      const config = {
+        onAssetSelected: (assets) => {
+          document.getElementById('output').value = JSON.stringify(assets, undefined, 2);
+          window.open(assets[0].imageUrl, '_blank');
+        },
+        onError: (errorMessage, error) => {
+        },
+        availableDocTypes: ['Images*', 'Videos*', 'Audio*', 'Others*'],
+        availableRepresentativeSubtypes: ['Other'],
+        // container element to attach, leave blank to open popup
+        containerId: 'react-app-root',
+        ctaText: 'Open in new tab',
+        // extra asset fields to get
+        extraFields: ['coreField.OriginalFileName', 'document.CortexPath'],
+        // default base url to pre-filled
+        baseUrl: 'https://qa-latest.orangelogic.com',
+        displayInfo: {
+          title: true,
+          dimension: true,
+          fileSize: false,
+          tags: false,
+        },
+        lastLocationMode: true,
+        persistMode: true,
+        publicApplicationName: "",
+        pluginName: "OrangeDAM Content Browser",
+        showCollections: true,
+        lastLocationMode: true,
+        allowTracking: true,
+        useSession: '',
+      };
+      document.getElementById("content").innerHTML = JSON.stringify(config, function(key, value) {
+        if (typeof value === "function") {
+          return value.toString().replace(/\n/g, "<br/>");
+        }
+        return value;
+      }, 4).replace(/\n/g, "<br/>");
+    }
+    function loadConfig() {
+      const value = document.getElementById("content").textContent;
+      const config = JSON.parse(value.replace(/<br>/g, ""), function(key, value) {
+        if (typeof value === "string" && (key === "onAssetSelected" || key === "onError")) {
+          return new Function("return " + value)();
+        }
+        return value;
+      });
+      OrangeDAMContentBrowser.close();
+      OrangeDAMContentBrowser.open(config);
+    }
+    window.onload = function() {
+      loadDefaultConfig();
+      document.getElementById('mobile').addEventListener('change', function() {
+        const checked = this.checked;
+        const container = document.getElementById('react-app-root');
+        if (checked) {
+          container.style.maxWidth = '400px';
+        } else {
+          container.style.maxWidth = 'none';
+        }
+      });
+    };
+  </script>
+</body>
+</html>

package/GitVersion.yml ADDED Viewed

@@ -0,0 +1,18 @@
+mode: Mainline
+assembly-versioning-scheme: MajorMinor
+assembly-file-versioning-scheme: MajorMinorPatchTag
+assembly-informational-format: '{InformationalVersion}'
+branches:
+  main:
+    tag: ci
+    increment: None
+    regex: ^master$|^tags/
+  feature:
+    regex: ^dev/
+  hotfix:
+    regex: ^fix/
+  support:
+    regex: ^stable/
+  pull-request:
+    increment: None
+    tag: pr

package/README.md ADDED Viewed

@@ -0,0 +1,57 @@
+# Introduction
+Orange Logic’s OrangeDAM Content Browser SDK allows authenticated users to browse Orange Logic assets in external web applications. You can use this tool to develop custom integrations between your Orange Logic platform and other software your organization uses.
+For example, let’s say your organization’s creative team stores images in Orange Logic. However, the marketing team uses a Content Management System (CMS) to build webpages. You can add the OrangeDAM Content Browser SDK to your CMS so users can search, filter, and select assets directly from Orange Logic, and then use them in your CMS.
+# Getting Started
+##	Installation process
+Install dependencies with
+```
+npm install
+```
+or
+```
+yarn
+```
+##	Software dependencies
+NodeJS v18 or higher
+##	Latest releases
+Content Browser SDK v2.1.0
+# Build and Test
+- Run the project with
+```
+yarn start
+```
+- Build with
+```
+yarn build
+```
+- use the 2 files `build\static\js\ContentBrowserSDK.min.js` and `build\static\css\ContentBrowserSDK.min.css` in your other projects
+# More guide
+For detail guides on usage check out the [Orange Logic Developer Portal](https://developer.orangelogic.com/docs/generic-asset-browser)
+# Change Log
+* Apr 8, 2025 - v2.1.0
+  * Rename GAB to Content Browser SDK
+  * Revamp the Content Browser SDK's entire UI
+  * Add a new demo page with more explanations on the invoke function's properties
+  * Content Browser SDK now allows you to pick all asset file extensions
+  * Add on-the-fly image transformation functionality
+  * Add tracking link capabilities
+  * More control on the Content Browser's invoke parameters level and Orange DAM administrative level
+* Dec 20, 2024 - v1.2.2
+  * Change Orange DAM to OrangeDAM
+  * GAB in demo will not pre populate with "https://cortexdemo2.orangelogic.com/" any more
+* Nov 08, 2024 - v1.2.1
+  * Resolve CSS conflict with AEM (https://link.orangelogic.com/Tasks/28L9P3)
+* Jul 09, 2024 - v1.2.0
+  * Handle encrypted asset thumbnails (https://link.orangelogic.com/Tasks/4152M3)
+* May 29, 2024 - v1.1.0
+  * Add the ability to select a proxy in the GAB UI
+  * Handle authentication when reopening the GAB

package/azure-pipeline.yaml ADDED Viewed

@@ -0,0 +1,94 @@
+trigger:
+  tags:
+    include:
+      - '*.*.*'
+  branches:
+    include:
+      - 'master'
+resources:
+  repositories:
+    - repository: infra-templates
+      type: git
+      name: Infra_Pipelines-templates-dev
+      ref: refs/tags/1.0.15
+    - repository: gab-extension
+      type: git
+      name: GAB_Browser_Extension
+      ref: main
+variables:
+  - group: "Global Vars"
+parameters:
+  - name: promoteLatest
+    displayName: Enable promoting to latest
+    type: boolean
+    default: false
+stages:
+  - stage: Build
+    dependsOn: []
+    jobs:
+      - job: BuildPackage
+        displayName: 'Build GAB'
+        pool:
+          name: Azure Pipelines
+        steps:
+          - checkout: self
+            clean: true
+            fetchDepth: 0
+            path: s
+          - checkout: gab-extension
+            clean: true
+            fetchDepth: 0
+            path: s/gab_extension
+          - template: azure-pipelines/common/steps-printenv.yml@infra-templates
+          - template: azure-pipelines/common/steps-gitversion.yml@infra-templates
+          - template: azure-pipelines/common/npm/steps-node-setup.yml@infra-templates
+            parameters:
+              versionSpec: 18.x
+          - task: replacetokens@6
+            displayName: 'Replace tokens in HTML files'
+            inputs:
+              sources: |
+                **/CBSDKdemo.html
+                **/GAB.html
+              tokenPattern: 'custom'
+              tokenPrefix: '__'
+              tokenSuffix: '__'
+              additionalVariables: |
+                - tag: v$(GitVersion.FullSemVer)
+          - template: azure-pipelines/common/npm/steps-npm-package.yml@infra-templates
+            parameters:
+              npmEndpoint: 'OL NPM registry'
+              isCustomNpmEndpoint: true
+              version: '$(GitVersion.FullSemVer)'
+              skipBuild: false
+          - template: azure-pipelines/common/steps-s3-publish.yml@infra-templates
+            parameters:
+              artifacts:
+                - sourceFolder: 'build/static/css'
+                  targetFolder: 'ContentBrowserSDK/v$(GitVersion.FullSemVer)'
+                  contents: OrangeDAMContentBrowserSDK.min.css
+                - sourceFolder: 'build/static/js'
+                  targetFolder: 'ContentBrowserSDK/v$(GitVersion.FullSemVer)'
+                  contents: OrangeDAMContentBrowserSDK.min.js
+                - sourceFolder: '.'
+                  targetFolder: 'ContentBrowserSDK/v$(GitVersion.FullSemVer)'
+                  contents: CBSDKdemo.html
+                - ${{ if eq(parameters.promoteLatest, true) }}:
+                  - sourceFolder: '.'
+                    targetFolder: 'ContentBrowserSDK/latest'
+                    contents: CBSDKdemo.html
+                - sourceFolder: 'gab_extension'
+                  targetFolder: 'ContentBrowserSDK/v$(GitVersion.FullSemVer)'
+                  contents: GAB.html

package/clientlib.config.js ADDED Viewed

@@ -0,0 +1,36 @@
+/**
+ * Configuration file for aem-clientlib-generator
+ */
+module.exports = {
+  // default working directory (can be changed per 'cwd' in every asset option)
+  context: __dirname,
+  // path to the clientlib root folder (output)
+  clientLibRoot: 'dist',
+  // define all clientlib options here as array... (multiple clientlibs)
+  libs: [
+    {
+      name: 'example',
+      assets: {
+        js: [
+          'src/js/*.js',
+        ],
+        css: [
+          'src/css/*.css',
+        ],
+      },
+      // Clientlib categories this will register to
+      categories: [
+        'orangelogic.genericassetbrowser.clientlibs',
+      ],
+      // Prevent Generic Asset Browser from minifying JS bundle with ancient YUI
+      jsProcessor: [
+        'default:none',
+        'min:none',
+      ],
+      // Package format XML for vault or JSON for SLING-INF
+      serializationFormat: 'xml',
+    },
+  ],
+};