Refactor-Cat-a-lot (step 2) (#415)

qiuwenbaike · Nov 19, 2023 · e0f1ec3 · e0f1ec3
1 parent 6e5585f
commit e0f1ec3
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 133 deletions.
diff --git a/src/Cat-a-lot-pagestyles/Cat-a-lot-pagestyles.less b/src/Cat-a-lot-pagestyles/Cat-a-lot-pagestyles.less
@@ -1,106 +1,106 @@
-#cat_a_lot {
- position: fixed;
- z-index: 100;
- right: 0;
- bottom: 0;
- display: block;
- padding: 0.5em;
- background-color: #fef6e7;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-
+.gadget-cat_a_lot {
  a {
  cursor: pointer;
  }
 
- &_category_list {
- overflow: auto;
-
- table {
- border-collapse: collapse;
- }
-
- tr:hover {
- background-color: #fc3;
+ &__container {
+ background-color: #fef6e7;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+ display: block;
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ padding: 0.5em;
+ z-index: 100;
+
+ &__data {
+ display: none;
+
+ ul {
+ list-style-image: none;
+ list-style-type: none;
+ margin: 0 0 0 0.5em;
+ }
+
+ &__category-list {
+ overflow: auto;
+
+ table {
+ border-collapse: collapse;
+ }
+
+ tr {
+ &:hover {
+ background-color: #fc3;
+ }
+
+ td {
+ a {
+ font-weight: bold;
+ }
+ }
+ }
+
+ &--no-found {
+ font-weight: bold;
+ }
+ }
+
+ &__mark-counter {
+ display: none;
+ padding: 0.5em;
+ }
+
+ &__search-input-container {
+ &__input {
+ font-size: 112%;
+ margin: -0.5em 0 0.5em -0.5em;
+ width: 100%;
+ }
+ }
+
+ &__selections {
+ padding: 0.5em;
+ }
  }
  }
 
- &_data {
- display: none;
+ &__feedback {
+ background: #eaf2cb no-repeat 8px 14px !important;
+ border: 1px #a9de16 solid !important;
+ font-size: 1.1em !important;
+ min-height: 8em !important;
+ padding-left: 2.85em !important;
+ padding-top: 10px !important;
 
- ul {
- margin: 0 0 0 0.5em;
- list-style-image: none;
- list-style-type: none;
+ &.ui-dialog-content {
+ min-height: 8em !important;
  }
- }
-
- &_no_found,
- &_settings {
- font-weight: bold;
- }
 
- &_mark_counter {
- display: none;
+ &--done {
+ background-image: data-uri('./images/check-constructive.svg') !important;
+ background-size: 40px;
+ background-position: 8px 50% !important;
+ padding-top: 0 !important;
+ }
  }
 
- &_mark_counter,
- &_selections,
- &_settings {
- padding: 0.5em;
- }
+ &__label {
+  &--last-selected {
+  font-weight: bold;
+  outline: 1px dotted #999;
+  }
 
- &_remove {
- display: block;
- font-weight: bold;
- }
+ &--selected {
+ background-color: #df6 !important;
+ }
 
- &_searchcatname {
- width: 100%;
- margin: -0.5em 0 0.5em -0.5em;
- font-size: 112%;
+ &--done {
+ background-color: #bbb !important;
+ }
  }
 
  .skin-vector & {
  font-size: 0.75em;
  }
 }
-
-.cat_a_lot {
- &_action,
- &_move {
- font-weight: bold;
- }
-
- &_done {
- padding-top: 0 !important;
- background-image: data-uri('./images/check-constructive.svg') !important;
- background-position: 8px 50% !important;
- background-size: 40px;
- }
-
- &_feedback {
- min-height: 8em !important;
- padding-top: 10px !important;
- padding-left: 2.85em !important;
- border: 1px #a9de16 solid !important;
- background: #eaf2cb no-repeat 8px 14px !important;
- font-size: 1.1em !important;
-
- .ui-dialog-content {
- min-height: 8em !important;
- }
- }
-
- &_markAsDone {
- background-color: #bbb !important;
- }
-
- &__label--last-selected {
- font-weight: bold;
- outline: 1px dotted #999;
- }
-
- &__label--selected {
- background-color: #df6 !important;
- }
-}
diff --git a/src/Cat-a-lot/Cat-a-lot.ts b/src/Cat-a-lot/Cat-a-lot.ts
@@ -1,5 +1,5 @@
 import {catALot} from './modules/core';
-import {extendJQueryPrototype} from './modules/checkbox';
+import {extendJQueryPrototype} from './modules/extendJQueryPrototype';
 
 /*! jQuery checkboxShiftClick | GPL-2.0 <qwbk.cc/H:GPL> */
 extendJQueryPrototype();

diff --git a/src/Cat-a-lot/modules/constant.ts b/src/Cat-a-lot/modules/constant.ts
@@ -4,9 +4,22 @@ import type {Setting} from './types';
 const API_ENTRY_POINT: string = mw.util.wikiScript('api');
 const API_TAG = 'Cat-a-lot';
 
-const CLASS_NAME_LABEL = 'cat_a_lot__label';
-const CLASS_NAME_LABEL_LAST_SELECTED = 'cat_a_lot__label--last-selected';
-const CLASS_NAME_LABEL_SELECTED = 'cat_a_lot__label--selected';
+const CLASS_NAME = 'gadget-cat_a_lot';
+const CLASS_NAME_CONTAINER = `${CLASS_NAME}__container`;
+const CLASS_NAME_CONTAINER_DATA = `${CLASS_NAME_CONTAINER}__data`;
+const CLASS_NAME_CONTAINER_DATA_CATEGORY_LIST = `${CLASS_NAME_CONTAINER_DATA}__category-list`;
+const CLASS_NAME_CONTAINER_DATA_CATEGORY_LIST_NO_FOUND = `${CLASS_NAME_CONTAINER_DATA_CATEGORY_LIST}--no-found`;
+const CLASS_NAME_CONTAINER_DATA_MARK_COUNTER = `${CLASS_NAME_CONTAINER_DATA}__mark-counter`;
+const CLASS_NAME_CONTAINER_DATA_SEARCH_INPUT_CONTAINER_INPUT = `${CLASS_NAME_CONTAINER_DATA}__search-input-container__input`;
+const CLASS_NAME_CONTAINER_DATA_SELECTIONS = `${CLASS_NAME_CONTAINER_DATA}__selections`;
+const CLASS_NAME_CONTAINER_HEAD_LINK_ENABLED = `${CLASS_NAME_CONTAINER}__head__link--enabled`;
+const CLASS_NAME_CURRENT = `${CLASS_NAME}__current`;
+const CLASS_NAME_FEEDBACK = `${CLASS_NAME}__feedback`;
+const CLASS_NAME_FEEDBACK_DONE = `${CLASS_NAME_FEEDBACK}--done`;
+const CLASS_NAME_LABEL = `${CLASS_NAME}__label`;
+const CLASS_NAME_LABEL_DONE = `${CLASS_NAME_LABEL}--done`;
+const CLASS_NAME_LABEL_LAST_SELECTED = `${CLASS_NAME_LABEL}--last-selected`;
+const CLASS_NAME_LABEL_SELECTED = `${CLASS_NAME_LABEL}--selected`;
 
 const DEFAULT_SETTING: Setting = {
  docleanup: {
@@ -52,7 +65,19 @@ const WG_WIKI_ID: string = mw.config.get('wgWikiID');
 export {
  API_ENTRY_POINT,
  API_TAG,
+ CLASS_NAME_CONTAINER,
+ CLASS_NAME_CONTAINER_DATA,
+ CLASS_NAME_CONTAINER_DATA_CATEGORY_LIST,
+ CLASS_NAME_CONTAINER_DATA_CATEGORY_LIST_NO_FOUND,
+ CLASS_NAME_CONTAINER_DATA_MARK_COUNTER,
+ CLASS_NAME_CONTAINER_DATA_SEARCH_INPUT_CONTAINER_INPUT,
+ CLASS_NAME_CONTAINER_DATA_SELECTIONS,
+ CLASS_NAME_CONTAINER_HEAD_LINK_ENABLED,
+ CLASS_NAME_CURRENT,
+ CLASS_NAME_FEEDBACK,
+ CLASS_NAME_FEEDBACK_DONE,
  CLASS_NAME_LABEL,
+ CLASS_NAME_LABEL_DONE,
  CLASS_NAME_LABEL_LAST_SELECTED,
  CLASS_NAME_LABEL_SELECTED,
  DEFAULT_SETTING,