uploadcare · egordidenko · Jul 29, 2024 · Jul 4, 2024 · Jul 9, 2024 · Jul 9, 2024
diff --git a/README.md b/README.md
@@ -71,9 +71,9 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 
 ```html
 <script type="module">
-  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/blocks.min.js';
+  import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/blocks.min.js';
 
-  LR.registerBlocks(LR);
+  UC.registerBlocks(UC);
 </script>
 ```
 
@@ -82,10 +82,10 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/lr-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
-<lr-file-uploader-regular ctx-name="my-uploader"> </lr-file-uploader-regular>
+<uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>
 ```
 
 3. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
@@ -96,34 +96,34 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
 2. Connect `Blocks` from your script file:
 
 ```js
-import * as LR from '@uploadcare/file-uploader';
+import * as UC from '@uploadcare/file-uploader';
 
-LR.registerBlocks(LR);
+UC.registerBlocks(UC);
 ```
 
 3. Start using Uploadcare File Uploader in your application markup:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/lr-file-uploader-regular.min.css"
+  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
 />
 
-<lr-file-uploader-inline ctx-name="my-uploader"> </lr-file-uploader-inline>
+<uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>
 ```
 
 4. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
 
 ### Configuration
 
-All configurations in Uploadcare File Uploader are managed from `lr-config` block.
+All configurations in Uploadcare File Uploader are managed from `uc-config` block.
 
 1. Sign up to [Uploadcare](https://app.uploadcare.com/accounts/signup/?ref=github-readme).
 2. Get a Public API key in [Uploadcare project's dashboard](https://app.uploadcare.com/projects/-/api-keys/?ref=github-readme).
-3. Add a `lr-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
+3. Add a `uc-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:
 
 ```html
-<lr-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></lr-config>
+<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
 ```
 
 4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.
@@ -156,7 +156,7 @@ All the source code is accessible and works in raw mode. Use _developer tools_ t
 
 You’re always welcome to contribute:
 
-- Create [issues](https://github.com/uploadcare/blocks/issues) every time you feel something is missing or goes wrong.
+- Create [issues](https://github.com/uploadcare/file-uploader/issues) every time you feel something is missing or goes wrong.
 - Provide your feedback or drop us a support request at <a href="mailto:[email protected]">[email protected]</a>.
 - Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well.
 - Fork project, make changes and send it as pull request. For launching the developing mode follow these commands:

diff --git a/abstract/Block.js b/abstract/Block.js
@@ -14,7 +14,7 @@ import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
 import { A11y } from './a11y.js';
 
-const TAG_PREFIX = 'lr-';
+const TAG_PREFIX = 'uc-';
 
 // @ts-ignore TODO: fix this
 export class Block extends BaseComponent {
@@ -336,7 +336,9 @@ export class Block extends BaseComponent {
       super.reg();
       return;
     }
-    super.reg(name.startsWith(TAG_PREFIX) ? name : TAG_PREFIX + name);
+    if (name.startsWith(TAG_PREFIX)) {
+      super.reg(name);
+    }
   }
 }
 

diff --git a/abstract/SolutionBlock.js b/abstract/SolutionBlock.js
@@ -1,9 +1,9 @@
-import svgIconsSprite from '../blocks/themes/lr-basic/svg-sprite.js';
+import svgIconsSprite from '../blocks/themes/uc-basic/svg-sprite.js';
 import { Block } from './Block.js';
 import { uploaderBlockCtx } from './CTX.js';
 
 export class SolutionBlock extends Block {
-  static styleAttrs = ['lr-wgt-common'];
+  static styleAttrs = ['uc-wgt-common'];
   requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;

diff --git a/abstract/connectBlocksFrom.js b/abstract/connectBlocksFrom.js
@@ -1,6 +1,6 @@
 import { registerBlocks } from './registerBlocks.js';
 
-export const LR_WINDOW_KEY = 'LR';
+export const UC_WINDOW_KEY = 'UC';
 
 /**
  * @param {String} url Blocks pack url
@@ -13,8 +13,8 @@ export async function connectBlocksFrom(url, register = false) {
       resolve(null);
       return;
     }
-    if (typeof window === 'object' && window[LR_WINDOW_KEY]) {
-      resolve(window[LR_WINDOW_KEY]);
+    if (typeof window === 'object' && window[UC_WINDOW_KEY]) {
+      resolve(window[UC_WINDOW_KEY]);
       return;
     }
     let script = document.createElement('script');
@@ -25,7 +25,7 @@ export async function connectBlocksFrom(url, register = false) {
     };
     script.onload = () => {
       /** @type {import('../index.js')} */
-      let blocks = window[LR_WINDOW_KEY];
+      let blocks = window[UC_WINDOW_KEY];
       register && registerBlocks(blocks);
       resolve(blocks);
     };

diff --git a/abstract/registerBlocks.js b/abstract/registerBlocks.js
@@ -10,8 +10,9 @@ export function registerBlocks(blockExports) {
     if (tagName.startsWith('-')) {
       tagName = tagName.replace('-', '');
     }
-    if (!tagName.startsWith('lr-')) {
-      tagName = 'lr-' + tagName;
+
+    if (!tagName.startsWith('uc-')) {
+      tagName = 'uc-' + tagName;
     }
     if (blockExports[blockName].reg) {
       blockExports[blockName].reg(tagName);

diff --git a/blocks/ActivityHeader/activity-header.css b/blocks/ActivityHeader/activity-header.css
@@ -1,4 +1,4 @@
-lr-activity-header {
+uc-activity-header {
   display: flex;
   justify-content: space-between;
   gap: var(--uc-padding);
@@ -8,7 +8,7 @@ lr-activity-header {
   font-size: 1em;
 }
 
-lr-activity-header > * {
+uc-activity-header > * {
   display: flex;
   align-items: center;
 }
diff --git a/blocks/CameraSource/CameraSource.js b/blocks/CameraSource/CameraSource.js
@@ -214,23 +214,23 @@ export class CameraSource extends UploaderBlock {
 }
 
 CameraSource.template = /* HTML */ `
-  <lr-activity-header>
+  <uc-activity-header>
     <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
-      <lr-icon name="back"></lr-icon>
+      <uc-icon name="back"></uc-icon>
     </button>
     <div set="@hidden: !cameraSelectHidden">
-      <lr-icon name="camera"></lr-icon>
+      <uc-icon name="camera"></uc-icon>
       <span l10n="caption-camera"></span>
     </div>
-    <lr-select
+    <uc-select
       class="uc-camera-select"
       set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
     >
-    </lr-select>
+    </uc-select>
     <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
-      <lr-icon name="close"></lr-icon>
+      <uc-icon name="close"></uc-icon>
     </button>
-  </lr-activity-header>
+  </uc-activity-header>
   <div class="uc-content">
     <video
       autoplay
@@ -247,7 +247,7 @@ CameraSource.template = /* HTML */ `
       ></button>
     </div>
     <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
-      <lr-icon name="camera"></lr-icon>
+      <uc-icon name="camera"></uc-icon>
     </button>
   </div>
 `;
diff --git a/blocks/CameraSource/camera-source.css b/blocks/CameraSource/camera-source.css
@@ -1,4 +1,4 @@
-lr-camera-source {
+uc-camera-source {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10,24 +10,24 @@ lr-camera-source {
   border-radius: var(--uc-radius);
 }
 
-[lr-modal] lr-camera-source {
+[uc-modal] uc-camera-source {
   width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
   height: 100vh;
   max-height: var(--modal-max-content-height);
 }
 
-lr-camera-source.uc-initialized {
+uc-camera-source.uc-initialized {
   height: max-content;
 }
 
 @media only screen and (max-width: 430px) {
-  lr-camera-source {
+  uc-camera-source {
     width: calc(100vw - var(--uc-padding) * 2);
     height: var(--modal-content-height-fill, 100%);
   }
 }
 
-lr-camera-source video {
+uc-camera-source video {
   display: block;
   width: 100%;
   max-height: 100%;
@@ -37,7 +37,7 @@ lr-camera-source video {
   border-radius: var(--uc-radius);
 }
 
-lr-camera-source .uc-toolbar {
+uc-camera-source .uc-toolbar {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -47,7 +47,7 @@ lr-camera-source .uc-toolbar {
   background-color: var(--uc-background);
 }
 
-lr-camera-source .uc-content {
+uc-camera-source .uc-content {
   display: flex;
   flex: 1;
   justify-content: center;
@@ -57,7 +57,7 @@ lr-camera-source .uc-content {
   overflow: hidden;
 }
 
-lr-camera-source .uc-message-box {
+uc-camera-source .uc-message-box {
   display: flex;
   flex-direction: column;
   grid-gap: 40px;
@@ -67,12 +67,12 @@ lr-camera-source .uc-message-box {
   color: var(--uc-foreground);
 }
 
-lr-camera-source .uc-message-box button {
+uc-camera-source .uc-message-box button {
   color: var(--uc-primary-foreground);
   background-color: var(--uc-primary);
 }
 
-lr-camera-source .uc-shot-btn {
+uc-camera-source .uc-shot-btn {
   position: absolute;
   bottom: 20px;
   width: 58px;
@@ -87,21 +87,21 @@ lr-camera-source .uc-shot-btn {
     transform var(--uc-transition);
 }
 
-lr-camera-source .uc-shot-btn:hover {
+uc-camera-source .uc-shot-btn:hover {
   transform: scale(1.05);
   opacity: 1;
 }
 
-lr-camera-source .uc-shot-btn:active {
+uc-camera-source .uc-shot-btn:active {
   transform: scale(1);
   opacity: 1;
 }
 
-lr-camera-source .uc-shot-btn[disabled] {
+uc-camera-source .uc-shot-btn[disabled] {
   bottom: -80px;
 }
 
-lr-camera-source .uc-shot-btn lr-icon svg {
+uc-camera-source .uc-shot-btn uc-icon svg {
   width: 20px;
   height: 20px;
 }
diff --git a/blocks/CloudImageEditor/src/CloudImageEditorBlock.js b/blocks/CloudImageEditor/src/CloudImageEditorBlock.js
@@ -19,7 +19,7 @@ import { TabId } from './toolbar-constants.js';
 
 export class CloudImageEditorBlock extends Block {
   ctxOwner = true;
-  static styleAttrs = ['lr-cloud-image-editor'];
+  static styleAttrs = ['uc-cloud-image-editor'];
 
   constructor() {
     super();

diff --git a/blocks/CloudImageEditor/src/EditorButtonControl.js b/blocks/CloudImageEditor/src/EditorButtonControl.js
@@ -38,7 +38,7 @@ export class EditorButtonControl extends Block {
 
 EditorButtonControl.template = /* HTML */ `
   <button type="button" role="option">
-    <lr-icon set="@name: icon;"></lr-icon>
+    <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorFilterControl.js b/blocks/CloudImageEditor/src/EditorFilterControl.js
@@ -160,6 +160,6 @@ export class EditorFilterControl extends EditorButtonControl {
 EditorFilterControl.template = /* HTML */ `
   <button type="button" role="option">
     <div class="uc-preview" ref="preview-el"></div>
-    <lr-icon ref="icon-el" set="@name: icon; @size: iconSize;"></lr-icon>
+    <uc-icon ref="icon-el" set="@name: icon; @size: iconSize;"></uc-icon>
   </button>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorImageCropper.js b/blocks/CloudImageEditor/src/EditorImageCropper.js
@@ -547,5 +547,5 @@ export class EditorImageCropper extends Block {
 
 EditorImageCropper.template = /* HTML */ `
   <canvas class="uc-canvas" ref="canvas-el"></canvas>
-  <lr-crop-frame ref="frame-el"></lr-crop-frame>
+  <uc-crop-frame ref="frame-el"></uc-crop-frame>
 `;
diff --git a/blocks/CloudImageEditor/src/EditorSlider.js b/blocks/CloudImageEditor/src/EditorSlider.js
@@ -111,8 +111,8 @@ export class EditorSlider extends Block {
 }
 
 EditorSlider.template = /* HTML */ `
-  <lr-slider-ui
+  <uc-slider-ui
     ref="slider-el"
     set="disabled: disabled; min: min; max: max; defaultValue: defaultValue; zero: zero; onInput: on.input;"
-  ></lr-slider-ui>
+  ></uc-slider-ui>
 `;