Stirling-PDF/stirling-pdf/build/resources/main/templates/security/redact.html

<!DOCTYPE html>
<html dir="ltr" th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
  mozdisallowselectionprint xmlns:th="https://www.thymeleaf.org">

<head>
  <th:block th:insert="~{fragments/common :: head(title=#{redact.title}, header=#{redact.header})}"></th:block>
  <script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
  <script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>

  <script th:src="@{'/js/thirdParty/jquery.min.js'}"></script>
  <script th:src="@{'/js/thirdParty/jquery.validate.min.js'}"></script>

  <link rel="stylesheet" th:href="@{'/css/theme/componentes.css'}">
  <link rel="stylesheet" th:href="@{'/css/navbar.css'}">

  <!-- This snippet is used in production (included from view-pdf.html) -->
  <link rel="resource" type="application/l10n" th:href="@{'/pdfjs-legacy/locale/locale.json'}">
  <script th:src="@{'/pdfjs-legacy/pdf.mjs'}" type="module"></script>

  <link rel="stylesheet" th:href="@{'/pdfjs-legacy/css/viewer-redact.css'}">
  <script th:src="@{'/pdfjs-legacy/js/viewer.mjs'}" type="module"></script>
  <script th:src="@{'/js/redact.js'}" type="module"></script>
  <link rel="stylesheet" th:href="@{'/css/redact.css'}">

</head>

<body>
  <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
  <br><br>
  <div id="redactionFormContainer" class="container mb-5">
    <div class="row justify-content-center">
      <div class="col-md-6 bg-card">
        <div class="tool-header">
          <svg class="material-symbols-rounded tool-header-icon security">
            <use xlink:href="/images/redact-manual.svg#icon-redact-manual"></use>
          </svg>
          <span class="tool-header-text" th:text="#{redact.header}"></span>
        </div>
        <form th:action="@{'api/v1/security/redact'}" method="post" enctype="multipart/form-data">
          <div
            th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, disableMultipleFiles=true, accept='application/pdf')}">
          </div>
          <div class="mb-3 form-check d-none">
            <input type="checkbox" id="convertPDFToImage" name="convertPDFToImage" checked>
            <label for="convertPDFToImage" th:text="#{redact.convertPDFToImageLabel}"></label>
          </div>
          <div class="mb-3 d-none">
            <label for="pageNumbers" th:text="#{redact.pageRedactionNumbers.title} + ':'" class="mb-2"></label>
            <input type="text" class="form-control" id="pageNumbers" name="pageNumbers"
              th:placeholder="#{redact.pageRedactionNumbers.placeholder}">
          </div>
          <div class="mb-3 d-none">
            <label for="pageRedactColor">Page Redaction Color:</label>
            <input id="pageRedactColor" name="pageRedactionColor" type="color" class="ms-3" value="#000000">
          </div>
          <input type="hidden" name="redactions" id="redactions-input">
          <button type="submit" id="submitBtn" class="btn btn-primary d-none" th:text="#{redact.submit}"></button>
        </form>
      </div>
    </div>
  </div>

  <div id="pageBasedRedactionOverlay" class="d-none col-md-4 row justify-content-center align-content-center">
    <div class="bg-card">
      <div class="tool-header">
        <span class="material-symbols-rounded tool-header-icon security">document_scanner</span>
        <span class="tool-header-text" th:text="#{redact.pageBasedRedaction}"></span>
      </div>
      <div class="mb-3">
        <label for="pageNumbers" th:text="#{redact.pageRedactionNumbers.title} + ':'" class="mb-2"></label>
        <input type="text" class="form-control" data-for="pageNumbers"
          th:placeholder="#{redact.pageRedactionNumbers.placeholder}">
      </div>
      <div class="mb-3 d-flex">
        <label for="pageRedactColor" th:inline="text" class="pe-none user-select-none">
          [[#{redact.redactionColor.title}]]
          <span class="material-symbols-rounded">palette</span>
          :
        </label>
        <input data-for="pageRedactColor" type="color" class="ms-3" value="#000000">
      </div>
      <button id="closePageRedactionBtn" class="btn btn-danger" th:text="#{close}"></button>
      <button id="applyPageRedactionBtn" class="btn btn-success ms-3" th:text="#{apply}"></button>
    </div>
  </div>
  <div id="outerContainer" class="d-none">
    <div id="sidebarContainer">
      <div id="toolbarSidebar">
        <div id="toolbarSidebarLeft">
          <div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
            <button id="viewThumbnail" th:title="#{redact.showThumbnails}" class="toolbarButton toggled" tabindex="2"
              data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
            </button>
            <button id="viewOutline" th:title="#{redact.showDocumentOutline}" class="toolbarButton" tabindex="3"
              data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false"
              aria-controls="outlineView">
            </button>
            <button id="viewAttachments" th:title="#{redact.showAttachments}" class="d-none toolbarButton" tabindex="4"
              data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
              <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
            </button>
            <button id="viewLayers" th:title="#{redact.showLayers}" class="d-none toolbarButton" tabindex="5"
              data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView">
              <span data-l10n-id="pdfjs-layers-button-label">Layers</span>
            </button>
          </div>
        </div>

        <div id="toolbarSidebarRight">
          <div id="outlineOptionsContainer">
            <div class="verticalToolbarSeparator"></div>

            <button id="currentOutlineItem" th:title="#{redact.findCurrentOutlineItem}" class="toolbarButton"
              disabled="disabled" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
            </button>
          </div>
        </div>
      </div>
      <div id="sidebarContent">
        <div id="thumbnailView">
        </div>
        <div id="outlineView" class="hidden">
        </div>
        <div id="attachmentsView" class="hidden">
        </div>
        <div id="layersView" class="hidden">
        </div>
      </div>
      <div id="sidebarResizer"></div>
    </div> <!-- sidebarContainer -->

    <div id="mainContainer">
      <div class="d-none findbar hidden doorHanger" id="findbar">
        <div id="findbarInputContainer">
          <span class="loadingInput end">
            <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91"
              data-l10n-id="pdfjs-find-input" aria-invalid="false">
          </span>
          <div class="splitToolbarButton">
            <button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase"
              tabindex="92" data-l10n-id="pdfjs-find-previous-button">
              <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
            </button>
            <div class="splitToolbarButtonSeparator"></div>
            <button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93"
              data-l10n-id="pdfjs-find-next-button">
              <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
            </button>
          </div>
        </div>

        <div id="findbarOptionsOneContainer">
          <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
          <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="pdfjs-find-highlight-checkbox">Highlight
            All</label>
          <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
          <label for="findMatchCase" class="toolbarLabel" data-l10n-id="pdfjs-find-match-case-checkbox-label">Match
            Case</label>
        </div>
        <div id="findbarOptionsTwoContainer">
          <input type="checkbox" id="findMatchDiacritics" class="toolbarField" tabindex="96">
          <label for="findMatchDiacritics" class="toolbarLabel"
            data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match Diacritics</label>
          <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="97">
          <label for="findEntireWord" class="toolbarLabel" data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole
            Words</label>
        </div>

        <div id="findbarMessageContainer" aria-live="polite">
          <span id="findResultsCount" class="toolbarLabel"></span>
          <span id="findMsg" class="toolbarLabel"></span>
        </div>
      </div> <!-- findbar -->

      <div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
        <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
          <div id="editorHighlightColorPicker" class="colorPicker">
            <span id="highlightColorPickerLabel" class="editorParamsLabel"
              data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
          </div>
          <div id="editorHighlightThickness">
            <label for="editorFreeHighlightThickness" class="editorParamsLabel"
              data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
            <div class="thicknessPicker">
              <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider"
                data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1"
                tabindex="101">
            </div>
          </div>
          <div id="editorHighlightVisibility">
            <div class="divider"></div>
            <div class="toggler">
              <label for="editorHighlightShowAll" class="editorParamsLabel"
                data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
              <button id="editorHighlightShowAll" class="toggle-button"
                data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
            </div>
          </div>
        </div>
      </div>

      <div class="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
        <div class="editorParamsToolbarContainer">
          <div class="editorParamsSetter">
            <label for="editorFreeTextColor" class="editorParamsLabel"
              data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
            <input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="103">
          </div>
          <div class="editorParamsSetter">
            <label for="editorFreeTextFontSize" class="editorParamsLabel"
              data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
            <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100"
              step="1" tabindex="104">
          </div>
        </div>
      </div>

      <div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
        <div class="editorParamsToolbarContainer">
          <div class="editorParamsSetter">
            <label for="editorInkColor" class="editorParamsLabel"
              data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
            <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="105">
          </div>
          <div class="editorParamsSetter">
            <label for="editorInkThickness" class="editorParamsLabel"
              data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
            <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1"
              tabindex="106">
          </div>
          <div class="editorParamsSetter">
            <label for="editorInkOpacity" class="editorParamsLabel"
              data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
            <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1"
              tabindex="107">
          </div>
        </div>
      </div>

      <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
        <div class="editorParamsToolbarContainer">
          <button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="108"
            data-l10n-id="pdfjs-editor-stamp-add-image-button">
            <span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add
              image</span>
          </button>
        </div>
      </div>

      <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
        <div id="secondaryToolbarButtonContainer">
          <button id="secondaryOpenFile" class="secondaryToolbarButton visibleMediumView" title="Open File"
            tabindex="51" data-l10n-id="pdfjs-open-file-button">
            <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
          </button>

          <button id="secondaryPrint" class="secondaryToolbarButton visibleMediumView" title="Print" tabindex="52"
            data-l10n-id="pdfjs-print-button">
            <span data-l10n-id="pdfjs-print-button-label">Print</span>
          </button>

          <button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" title="Save" tabindex="53"
            data-l10n-id="pdfjs-save-button">
            <span data-l10n-id="pdfjs-save-button-label">Save</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="presentationMode" class="secondaryToolbarButton" title="Switch to Presentation Mode" tabindex="54"
            data-l10n-id="pdfjs-presentation-mode-button">
            <span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation Mode</span>
          </button>

          <a href="#" id="viewBookmark" class="secondaryToolbarButton" title="Current Page (View URL from Current Page)"
            tabindex="55" data-l10n-id="pdfjs-bookmark-button">
            <span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
          </a>

          <div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"></div>

          <button id="firstPage" class="secondaryToolbarButton" title="Go to First Page" tabindex="56"
            data-l10n-id="pdfjs-first-page-button">
            <span data-l10n-id="pdfjs-first-page-button-label">Go to First Page</span>
          </button>
          <button id="lastPage" class="secondaryToolbarButton" title="Go to Last Page" tabindex="57"
            data-l10n-id="pdfjs-last-page-button">
            <span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="pageRotateCw" class="secondaryToolbarButton" title="Rotate Clockwise" tabindex="58"
            data-l10n-id="pdfjs-page-rotate-cw-button">
            <span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate Clockwise</span>
          </button>
          <button id="pageRotateCcw" class="secondaryToolbarButton" title="Rotate Counterclockwise" tabindex="59"
            data-l10n-id="pdfjs-page-rotate-ccw-button">
            <span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate Counterclockwise</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <div id="cursorToolButtons" role="radiogroup">
            <button id="cursorSelectTool" class="secondaryToolbarButton toggled" title="Enable Text Selection Tool"
              tabindex="60" data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio" aria-checked="true">
              <span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text Selection Tool</span>
            </button>
            <button id="cursorHandTool" class="secondaryToolbarButton" title="Enable Hand Tool" tabindex="61"
              data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio" aria-checked="false">
              <span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand Tool</span>
            </button>
          </div>

          <div class="horizontalToolbarSeparator"></div>

          <div id="scrollModeButtons" role="radiogroup">
            <button id="scrollPage" class="secondaryToolbarButton" title="Use Page Scrolling" tabindex="62"
              data-l10n-id="pdfjs-scroll-page-button" role="radio" aria-checked="false">
              <span data-l10n-id="pdfjs-scroll-page-button-label">Page Scrolling</span>
            </button>
            <button id="scrollVertical" class="secondaryToolbarButton toggled" title="Use Vertical Scrolling"
              tabindex="63" data-l10n-id="pdfjs-scroll-vertical-button" role="radio" aria-checked="true">
              <span data-l10n-id="pdfjs-scroll-vertical-button-label">Vertical Scrolling</span>
            </button>
            <button id="scrollHorizontal" class="secondaryToolbarButton" title="Use Horizontal Scrolling" tabindex="64"
              data-l10n-id="pdfjs-scroll-horizontal-button" role="radio" aria-checked="false">
              <span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal Scrolling</span>
            </button>
            <button id="scrollWrapped" class="secondaryToolbarButton" title="Use Wrapped Scrolling" tabindex="65"
              data-l10n-id="pdfjs-scroll-wrapped-button" role="radio" aria-checked="false">
              <span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped Scrolling</span>
            </button>
          </div>

          <div class="horizontalToolbarSeparator"></div>

          <div id="spreadModeButtons" role="radiogroup">
            <button id="spreadNone" class="secondaryToolbarButton toggled" title="Do not join page spreads"
              tabindex="66" data-l10n-id="pdfjs-spread-none-button" role="radio" aria-checked="true">
              <span data-l10n-id="pdfjs-spread-none-button-label">No Spreads</span>
            </button>
            <button id="spreadOdd" class="secondaryToolbarButton"
              title="Join page spreads starting with odd-numbered pages" tabindex="67"
              data-l10n-id="pdfjs-spread-odd-button" role="radio" aria-checked="false">
              <span data-l10n-id="pdfjs-spread-odd-button-label">Odd Spreads</span>
            </button>
            <button id="spreadEven" class="secondaryToolbarButton"
              title="Join page spreads starting with even-numbered pages" tabindex="68"
              data-l10n-id="pdfjs-spread-even-button" role="radio" aria-checked="false">
              <span data-l10n-id="pdfjs-spread-even-button-label">Even Spreads</span>
            </button>
          </div>

          <div class="horizontalToolbarSeparator"></div>

          <button id="documentProperties" class="secondaryToolbarButton" title="Document Properties…" tabindex="69"
            data-l10n-id="pdfjs-document-properties-button" aria-controls="documentPropertiesDialog">
            <span data-l10n-id="pdfjs-document-properties-button-label">Document Properties…</span>
          </button>
        </div>
      </div> <!-- secondaryToolbar -->

      <div class="toolbar">
        <div id="toolbarContainer">
          <div id="toolbarViewer">
            <div id="toolbarViewerLeft">
              <div id="showMoreBtnContainer" class="splitToolbarButton">
                <button id="showMoreBtn" class="btn-primary">
                  <span id="showMoreBtnIcon" class="material-symbols-rounded">more_horiz</span>
                </button>
              </div>
              <button id="sidebarToggle" class="toolbarButton mt-2" tabindex="11"
                data-l10n-id="pdfjs-toggle-sidebar-button" th:title="#{redact.toggleSidebar}" aria-expanded="false"
                aria-controls="sidebarContainer">
              </button>
              <div class="toolbarButtonSpacer d-none"></div>
              <button id="viewFind" class="d-none toolbarButton" title="Find in Document" tabindex="12"
                data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
                <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
              </button>
              <div class="splitToolbarButton hiddenSmallView">
                <button class="toolbarButton btn-secondary" th:title="#{redact.previousPage}" id="previous"
                  tabindex="13" data-l10n-id="pdfjs-previous-button">
                </button>
                <div class="splitToolbarButtonSeparator d-none"></div>
                <button class="toolbarButton btn-secondary" th:title="#{redact.nextPage}" id="next" tabindex="14"
                  data-l10n-id="pdfjs-next-button">
                </button>
              </div>
              <span class="loadingInput start">
                <input type="number" id="pageNumber" class="toolbarField" value="1" min="1" tabindex="15"
                  data-l10n-id="pdfjs-page-input" autocomplete="off">
              </span>
              <span id="numPages" class="toolbarLabel"></span>
              <img class="main-icon user-select-none" th:src="@{'/favicon.svg'}" alt="icon">
            </div>
            <div id="toolbarViewerMiddle">
              <div class="splitToolbarButton">
                <button id="zoomOut" th:title="#{redact.zoomOut}" class="toolbarButton btn-primary" tabindex="21"
                  data-l10n-id="pdfjs-zoom-out-button">
                </button>
                <div class="splitToolbarButtonSeparator"></div>
                <button id="zoomIn" th:title="#{redact.zoomIn}" class="toolbarButton btn-primary" tabindex="22"
                  data-l10n-id="pdfjs-zoom-in-button">
                </button>
              </div>
              <span id="scaleSelectContainer" class="dropdownToolbarButton">
                <select id="scaleSelect" tabindex="23" data-l10n-id="pdfjs-zoom-select">
                  <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto">
                    Automatic Zoom</option>
                  <option id="pageActualOption" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">
                    Actual Size</option>
                  <option id="pageFitOption" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page
                    Fit
                  </option>
                  <option id="pageWidthOption" value="page-width" data-l10n-id="pdfjs-page-scale-width">
                    Page Width</option>
                  <option id="customScaleOption" value="custom" disabled="disabled" hidden="true"
                    data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
                  <option value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>
                    50%</option>
                  <option value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75%
                  </option>
                  <option value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>
                    100%</option>
                  <option value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125%
                  </option>
                  <option value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150%
                  </option>
                  <option value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>
                    200%</option>
                  <option value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>
                    300%</option>
                  <option value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>
                    400%</option>
                </select>
              </span>
            </div>
            <div id="redactionsToolbarViewer" class="splitToolbarButton d-flex">
              <button id="man-text-select-redact" th:title="#{redact.textBasedRedaction}" class="btn-primary"
                tabindex="22">
                <span id="text-selection" class="material-symbols-rounded user-select-none pe-none">text_select_start
                </span>
              </button>
              <button id="man-shape-redact" th:title="#{redact.boxRedaction}" class="btn-primary" tabindex="22">
                <span id="shape-selection" class="material-symbols-rounded user-select-none pe-none">pageless
                </span>
              </button>
              <button id="redactionsPaletteContainer" th:title="#{redact.colourPicker}" class="btn-primary">
                <label id="redactions-palette" class="material-symbols-rounded palette-color text-center"
                  style="--palette-color: #000000;">
                  palette
                  <input type="color" name="color-picker">
                </label>
              </button>
            </div>
            <div id="toolbarViewerRight">
              <div class="splitToolbarButton">
                <button id="pdfToImageBtn" class="btn-success">
                  <span id="pdfToImageBtnIcon" th:title="#{redact.convertPDFToImageLabel}"
                    class="material-symbols-rounded">
                    image
                  </span>
                </button>
                <button id="pageBasedRedactionBtn" class="btn-primary">
                  <span id="pageBasedRedactionBtnIcon" th:title="#{redact.pageBasedRedaction}"
                    class="material-symbols-rounded">
                    document_scanner
                  </span>
                </button>
                <button id="uploadBtn" class="btn-primary">
                  <span id="uploadBtnIcon" class="material-symbols-rounded" th:title="#{redact.upload}"> upload </span>
                </button>
                <button id="downloadBtn" class="btn-primary">
                  <span id="downloadBtnIcon" th:title="#{redact.export}" class="material-symbols-rounded">
                    download
                  </span>
                </button>
              </div>
              <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
                <button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight"
                  role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31"
                  data-l10n-id="pdfjs-editor-highlight-button">
                  <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
                </button>
                <button id="openFile" class="toolbarButton hiddenMediumView d-none" title="Open File" role="radio"
                  aria-checked="false" tabindex="33" data-l10n-id="pdfjs-open-file-button">
                  <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
                </button>
                <button id="print" class="d-none toolbarButton hiddenMediumView d-none" title="Print" role="radio"
                  aria-checked="false" tabindex="34" data-l10n-id="pdfjs-print-button">
                  <span data-l10n-id="pdfjs-print-button-label">Print</span>
                </button>
                <button id="download" class="d-none toolbarButton hiddenMediumView d-none" title="Save" role="radio"
                  aria-checked="false" tabindex="35" data-l10n-id="pdfjs-save-button">
                  <span data-l10n-id="pdfjs-save-button-label">Save</span>
                </button>
                <button id="editorStamp" class="d-none toolbarButton hiddenMediumView d-none" title="Add or edit images"
                  role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="36"
                  data-l10n-id="pdfjs-editor-stamp-button">
                  <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
                </button>
              </div>

              <div id="editorModeSeparator" class="d-none verticalToolbarSeparator"></div>

              <button id="editorFreeText" class="d-none toolbarButton hiddenMediumView" title="Text" tabindex="41"
                data-l10n-id="pdfjs-editor-free-text-button">
                <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
              </button>

              <button id="editorInk" class="d-none toolbarButton hiddenMediumView" title="Draw" tabindex="42"
                data-l10n-id="pdfjs-editor-ink-button">
                <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
              </button>

              <div class="verticalToolbarSeparator hiddenMediumView"></div>

              <button id="secondaryToolbarToggle" class="toolbarButton d-none" title="Tools" tabindex="43"
                data-l10n-id="pdfjs-tools-button">
                <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
              </button>
            </div>
          </div>
          <div id="loadingBar">
            <div class="progress">
              <div class="glimmer">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="viewerContainer" tabindex="0">
        <div id="viewer" class="pdfViewer"></div>
        <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
      </div>
    </div> <!-- mainContainer -->

    <div id="dialogContainer">
      <dialog id="passwordDialog">
        <div class="row">
          <label for="password" id="passwordText" data-l10n-id="pdfjs-password-label">Enter the password to open
            this PDF file:</label>
        </div>
        <div class="row">
          <input type="password" id="password" class="toolbarField">
        </div>
        <div class="buttonRow">
          <button id="passwordCancel" class="dialogButton"><span
              data-l10n-id="pdfjs-password-cancel-button">Cancel</span></button>
          <button id="passwordSubmit" class="dialogButton"><span
              data-l10n-id="pdfjs-password-ok-button">OK</span></button>
        </div>
      </dialog>
      <dialog id="documentPropertiesDialog">
        <div class="row">
          <span id="fileNameLabel" data-l10n-id="pdfjs-document-properties-file-name">File name:</span>
          <p id="fileNameField" aria-labelledby="fileNameLabel">-</p>
        </div>
        <div class="row">
          <span id="fileSizeLabel" data-l10n-id="pdfjs-document-properties-file-size">File size:</span>
          <p id="fileSizeField" aria-labelledby="fileSizeLabel">-</p>
        </div>
        <div class="separator"></div>
        <div class="row">
          <span id="titleLabel" data-l10n-id="pdfjs-document-properties-title">Title:</span>
          <p id="titleField" aria-labelledby="titleLabel">-</p>
        </div>
        <div class="row">
          <span id="authorLabel" data-l10n-id="pdfjs-document-properties-author">Author:</span>
          <p id="authorField" aria-labelledby="authorLabel">-</p>
        </div>
        <div class="row">
          <span id="subjectLabel" data-l10n-id="pdfjs-document-properties-subject">Subject:</span>
          <p id="subjectField" aria-labelledby="subjectLabel">-</p>
        </div>
        <div class="row">
          <span id="keywordsLabel" data-l10n-id="pdfjs-document-properties-keywords">Keywords:</span>
          <p id="keywordsField" aria-labelledby="keywordsLabel">-</p>
        </div>
        <div class="row">
          <span id="creationDateLabel" data-l10n-id="pdfjs-document-properties-creation-date">Creation
            Date:</span>
          <p id="creationDateField" aria-labelledby="creationDateLabel">-</p>
        </div>
        <div class="row">
          <span id="modificationDateLabel" data-l10n-id="pdfjs-document-properties-modification-date">Modification
            Date:</span>
          <p id="modificationDateField" aria-labelledby="modificationDateLabel">-</p>
        </div>
        <div class="row">
          <span id="creatorLabel" data-l10n-id="pdfjs-document-properties-creator">Creator:</span>
          <p id="creatorField" aria-labelledby="creatorLabel">-</p>
        </div>
        <div class="separator"></div>
        <div class="row">
          <span id="producerLabel" data-l10n-id="pdfjs-document-properties-producer">PDF Producer:</span>
          <p id="producerField" aria-labelledby="producerLabel">-</p>
        </div>
        <div class="row">
          <span id="versionLabel" data-l10n-id="pdfjs-document-properties-version">PDF Version:</span>
          <p id="versionField" aria-labelledby="versionLabel">-</p>
        </div>
        <div class="row">
          <span id="pageCountLabel" data-l10n-id="pdfjs-document-properties-page-count">Page Count:</span>
          <p id="pageCountField" aria-labelledby="pageCountLabel">-</p>
        </div>
        <div class="row">
          <span id="pageSizeLabel" data-l10n-id="pdfjs-document-properties-page-size">Page Size:</span>
          <p id="pageSizeField" aria-labelledby="pageSizeLabel">-</p>
        </div>
        <div class="separator"></div>
        <div class="row">
          <span id="linearizedLabel" data-l10n-id="pdfjs-document-properties-linearized">Fast Web View:</span>
          <p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
        </div>
        <div class="buttonRow">
          <button id="documentPropertiesClose" class="dialogButton"><span
              data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
        </div>
      </dialog>
      <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel"
        aria-describedby="dialogDescription">
        <div id="altTextContainer" class="mainContainer">
          <div id="overallDescription">
            <span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an
              option</span>
            <span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
              Alt text (alternative text) helps when people can’t see the image or when it doesn’t load.
            </span>
          </div>
          <div id="addDescription">
            <div class="radio">
              <div class="radioButton">
                <input type="radio" id="descriptionButton" name="altTextOption" tabindex="0"
                  aria-describedby="descriptionAreaLabel" checked>
                <label for="descriptionButton" data-l10n-id="pdfjs-editor-alt-text-add-description-label">Add a
                  description</label>
              </div>
              <div class="radioLabel">
                <span id="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-add-description-description">
                  Aim for 1-2 sentences that describe the subject, setting, or actions.
                </span>
              </div>
            </div>
            <div class="descriptionArea">
              <textarea id="descriptionTextarea"
                placeholder="For example, “A young man sits down at a table to eat a meal”"
                aria-labelledby="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-textarea"
                tabindex="0"></textarea>
            </div>
          </div>
          <div id="markAsDecorative">
            <div class="radio">
              <div class="radioButton">
                <input type="radio" id="decorativeButton" name="altTextOption" aria-describedby="decorativeLabel">
                <label for="decorativeButton" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-label">Mark as
                  decorative</label>
              </div>
              <div class="radioLabel">
                <span id="decorativeLabel" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-description">
                  This is used for ornamental images, like borders or watermarks.
                </span>
              </div>
            </div>
          </div>
          <div id="buttons">
            <button id="altTextCancel" class="secondaryButton" tabindex="0"><span
                data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
            <button id="altTextSave" class="primaryButton" tabindex="0"><span
                data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
          </div>
        </div>
      </dialog>
      <dialog id="printServiceDialog" style="min-width: 200px;">
        <div class="row">
          <span data-l10n-id="pdfjs-print-progress-message">Preparing document for printing…</span>
        </div>
        <div class="row">
          <progress value="0" max="100"></progress>
          <span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }'
            class="relative-progress">0%</span>
        </div>
        <div class="buttonRow">
          <button id="printCancel" class="dialogButton"><span
              data-l10n-id="pdfjs-print-progress-close-button">Cancel</span></button>
        </div>
      </dialog>
    </div> <!-- dialogContainer -->

  </div> <!-- outerContainer -->
  <div id="printContainer" class="d-none"></div>

  <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
</body>

</html>
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								<!DOCTYPE html>
 								<html dir="ltr" th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
 								  mozdisallowselectionprint xmlns:th="https://www.thymeleaf.org">
 								<head>
 								  <th:block th:insert="~{fragments/common :: head(title=#{redact.title}, header=#{redact.header})}"></th:block>
 								  <script th:src="@{'/js/thirdParty/popper.min.js'}"></script>
 								  <script th:src="@{'/js/thirdParty/bootstrap.min.js'}"></script>
 								  <script th:src="@{'/js/thirdParty/jquery.min.js'}"></script>
 								  <script th:src="@{'/js/thirdParty/jquery.validate.min.js'}"></script>
 								  <link rel="stylesheet" th:href="@{'/css/theme/componentes.css'}">
 								  <link rel="stylesheet" th:href="@{'/css/navbar.css'}">
 								  <!-- This snippet is used in production (included from view-pdf.html) -->
 								  <link rel="resource" type="application/l10n" th:href="@{'/pdfjs-legacy/locale/locale.json'}">
 								  <script th:src="@{'/pdfjs-legacy/pdf.mjs'}" type="module"></script>
 								  <link rel="stylesheet" th:href="@{'/pdfjs-legacy/css/viewer-redact.css'}">
 								  <script th:src="@{'/pdfjs-legacy/js/viewer.mjs'}" type="module"></script>
-												Use Thymeleaf `th:src` for `redact.js` to ensure correct resource path resolution (#3511)

# Description of Changes

Please provide a summary of the changes, including:

```bash
generic_scripting.js:48 
 GET https://stirling.lan/pdfjs-legacy/js/pdfjs-legacy/pdf.sandbox.mjs net::ERR_ABORTED 404 (Not Found)

pdf_scripting_manager.js:195 setDocument: "Failed to fetch dynamically imported module: https://stirling.lan/pdfjs-legacy/js/pdfjs-legacy/pdf.sandbox.mjs".

```

Closes #(issue_number)

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.
											
										
										
											2025-05-11 20:14:27 +02:00
+								  <script th:src="@{'/js/redact.js'}" type="module"></script>
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								  <link rel="stylesheet" th:href="@{'/css/redact.css'}">
 								</head>
 								<body>
 								  <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
 								  <br><br>
 								  <div id="redactionFormContainer" class="container mb-5">
 								    <div class="row justify-content-center">
 								      <div class="col-md-6 bg-card">
 								        <div class="tool-header">
-												Fixed firefox compatibility and added missing icons to feature pages (#2863)

# Description of Changes

Fixed icon incompatibility with firefox
Added missing icons to feature pages

Closes #(2833)


![image](https://github.com/user-attachments/assets/51ba008a-f6ab-4e29-9a79-99d85d152689)


---

## Checklist

### General

- [ x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ x] I have performed a self-review of my own code
- [ x] My changes generate no new warnings

### Documentation

- [ x] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ x] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-02-03 15:19:18 +00:00
+								          <svg class="material-symbols-rounded tool-header-icon security">
 								            <use xlink:href="/images/redact-manual.svg#icon-redact-manual"></use>
 								          </svg>
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								          <span class="tool-header-text" th:text="#{redact.header}"></span>
 								        </div>
 								        <form th:action="@{'api/v1/security/redact'}" method="post" enctype="multipart/form-data">
 								          <div
 								            th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, disableMultipleFiles=true, accept='application/pdf')}">
 								          </div>
 								          <div class="mb-3 form-check d-none">
 								            <input type="checkbox" id="convertPDFToImage" name="convertPDFToImage" checked>
 								            <label for="convertPDFToImage" th:text="#{redact.convertPDFToImageLabel}"></label>
 								          </div>
 								          <div class="mb-3 d-none">
 								            <label for="pageNumbers" th:text="#{redact.pageRedactionNumbers.title} + ':'" class="mb-2"></label>
 								            <input type="text" class="form-control" id="pageNumbers" name="pageNumbers"
 								              th:placeholder="#{redact.pageRedactionNumbers.placeholder}">
 								          </div>
 								          <div class="mb-3 d-none">
 								            <label for="pageRedactColor">Page Redaction Color:</label>
 								            <input id="pageRedactColor" name="pageRedactionColor" type="color" class="ms-3" value="#000000">
 								          </div>
 								          <input type="hidden" name="redactions" id="redactions-input">
 								          <button type="submit" id="submitBtn" class="btn btn-primary d-none" th:text="#{redact.submit}"></button>
 								        </form>
 								      </div>
 								    </div>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								  </div>
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
 								  <div id="pageBasedRedactionOverlay" class="d-none col-md-4 row justify-content-center align-content-center">
 								    <div class="bg-card">
 								      <div class="tool-header">
 								        <span class="material-symbols-rounded tool-header-icon security">document_scanner</span>
 								        <span class="tool-header-text" th:text="#{redact.pageBasedRedaction}"></span>
 								      </div>
 								      <div class="mb-3">
 								        <label for="pageNumbers" th:text="#{redact.pageRedactionNumbers.title} + ':'" class="mb-2"></label>
 								        <input type="text" class="form-control" data-for="pageNumbers"
 								          th:placeholder="#{redact.pageRedactionNumbers.placeholder}">
 								      </div>
 								      <div class="mb-3 d-flex">
 								        <label for="pageRedactColor" th:inline="text" class="pe-none user-select-none">
 								          [[#{redact.redactionColor.title}]]
 								          <span class="material-symbols-rounded">palette</span>
 								          :
 								        </label>
 								        <input data-for="pageRedactColor" type="color" class="ms-3" value="#000000">
 								      </div>
 								      <button id="closePageRedactionBtn" class="btn btn-danger" th:text="#{close}"></button>
 								      <button id="applyPageRedactionBtn" class="btn btn-success ms-3" th:text="#{apply}"></button>
 								    </div>
 								  </div>
 								  <div id="outerContainer" class="d-none">
 								    <div id="sidebarContainer">
 								      <div id="toolbarSidebar">
 								        <div id="toolbarSidebarLeft">
 								          <div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								            <button id="viewThumbnail" th:title="#{redact.showThumbnails}" class="toolbarButton toggled" tabindex="2"
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								              data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
 								            </button>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								            <button id="viewOutline" th:title="#{redact.showDocumentOutline}" class="toolbarButton" tabindex="3"
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								              data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false"
 								              aria-controls="outlineView">
 								            </button>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								            <button id="viewAttachments" th:title="#{redact.showAttachments}" class="d-none toolbarButton" tabindex="4"
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								              data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
 								              <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
 								            </button>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								            <button id="viewLayers" th:title="#{redact.showLayers}" class="d-none toolbarButton" tabindex="5"
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								              data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView">
 								              <span data-l10n-id="pdfjs-layers-button-label">Layers</span>
 								            </button>
 								          </div>
 								        </div>
 								        <div id="toolbarSidebarRight">
 								          <div id="outlineOptionsContainer">
 								            <div class="verticalToolbarSeparator"></div>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								            <button id="currentOutlineItem" th:title="#{redact.findCurrentOutlineItem}" class="toolbarButton"
 								              disabled="disabled" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								            </button>
 								          </div>
 								        </div>
 								      </div>
 								      <div id="sidebarContent">
 								        <div id="thumbnailView">
 								        </div>
 								        <div id="outlineView" class="hidden">
 								        </div>
 								        <div id="attachmentsView" class="hidden">
 								        </div>
 								        <div id="layersView" class="hidden">
 								        </div>
 								      </div>
 								      <div id="sidebarResizer"></div>
 								    </div> <!-- sidebarContainer -->
 								    <div id="mainContainer">
 								      <div class="d-none findbar hidden doorHanger" id="findbar">
 								        <div id="findbarInputContainer">
 								          <span class="loadingInput end">
 								            <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91"
 								              data-l10n-id="pdfjs-find-input" aria-invalid="false">
 								          </span>
 								          <div class="splitToolbarButton">
 								            <button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase"
 								              tabindex="92" data-l10n-id="pdfjs-find-previous-button">
 								              <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
 								            </button>
 								            <div class="splitToolbarButtonSeparator"></div>
 								            <button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93"
 								              data-l10n-id="pdfjs-find-next-button">
 								              <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
 								            </button>
 								          </div>
 								        </div>
 								        <div id="findbarOptionsOneContainer">
 								          <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
 								          <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="pdfjs-find-highlight-checkbox">Highlight
 								            All</label>
 								          <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
 								          <label for="findMatchCase" class="toolbarLabel" data-l10n-id="pdfjs-find-match-case-checkbox-label">Match
 								            Case</label>
 								        </div>
 								        <div id="findbarOptionsTwoContainer">
 								          <input type="checkbox" id="findMatchDiacritics" class="toolbarField" tabindex="96">
 								          <label for="findMatchDiacritics" class="toolbarLabel"
 								            data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match Diacritics</label>
 								          <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="97">
 								          <label for="findEntireWord" class="toolbarLabel" data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole
 								            Words</label>
 								        </div>
 								        <div id="findbarMessageContainer" aria-live="polite">
 								          <span id="findResultsCount" class="toolbarLabel"></span>
 								          <span id="findMsg" class="toolbarLabel"></span>
 								        </div>
 								      </div> <!-- findbar -->
 								      <div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
 								        <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
 								          <div id="editorHighlightColorPicker" class="colorPicker">
 								            <span id="highlightColorPickerLabel" class="editorParamsLabel"
 								              data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
 								          </div>
 								          <div id="editorHighlightThickness">
 								            <label for="editorFreeHighlightThickness" class="editorParamsLabel"
 								              data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
 								            <div class="thicknessPicker">
 								              <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider"
 								                data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1"
 								                tabindex="101">
 								            </div>
 								          </div>
 								          <div id="editorHighlightVisibility">
 								            <div class="divider"></div>
 								            <div class="toggler">
 								              <label for="editorHighlightShowAll" class="editorParamsLabel"
 								                data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
 								              <button id="editorHighlightShowAll" class="toggle-button"
 								                data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
 								            </div>
 								          </div>
 								        </div>
 								      </div>
 								      <div class="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
 								        <div class="editorParamsToolbarContainer">
 								          <div class="editorParamsSetter">
 								            <label for="editorFreeTextColor" class="editorParamsLabel"
 								              data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
 								            <input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="103">
 								          </div>
 								          <div class="editorParamsSetter">
 								            <label for="editorFreeTextFontSize" class="editorParamsLabel"
 								              data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
 								            <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100"
 								              step="1" tabindex="104">
 								          </div>
 								        </div>
 								      </div>
 								      <div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
 								        <div class="editorParamsToolbarContainer">
 								          <div class="editorParamsSetter">
 								            <label for="editorInkColor" class="editorParamsLabel"
 								              data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
 								            <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="105">
 								          </div>
 								          <div class="editorParamsSetter">
 								            <label for="editorInkThickness" class="editorParamsLabel"
 								              data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
 								            <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1"
 								              tabindex="106">
 								          </div>
 								          <div class="editorParamsSetter">
 								            <label for="editorInkOpacity" class="editorParamsLabel"
 								              data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
 								            <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1"
 								              tabindex="107">
 								          </div>
 								        </div>
 								      </div>
 								      <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
 								        <div class="editorParamsToolbarContainer">
 								          <button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="108"
 								            data-l10n-id="pdfjs-editor-stamp-add-image-button">
 								            <span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add
 								              image</span>
 								          </button>
 								        </div>
 								      </div>
 								      <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
 								        <div id="secondaryToolbarButtonContainer">
 								          <button id="secondaryOpenFile" class="secondaryToolbarButton visibleMediumView" title="Open File"
 								            tabindex="51" data-l10n-id="pdfjs-open-file-button">
 								            <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
 								          </button>
 								          <button id="secondaryPrint" class="secondaryToolbarButton visibleMediumView" title="Print" tabindex="52"
 								            data-l10n-id="pdfjs-print-button">
 								            <span data-l10n-id="pdfjs-print-button-label">Print</span>
 								          </button>
 								          <button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" title="Save" tabindex="53"
 								            data-l10n-id="pdfjs-save-button">
 								            <span data-l10n-id="pdfjs-save-button-label">Save</span>
 								          </button>
 								          <div class="horizontalToolbarSeparator"></div>
 								          <button id="presentationMode" class="secondaryToolbarButton" title="Switch to Presentation Mode" tabindex="54"
 								            data-l10n-id="pdfjs-presentation-mode-button">
 								            <span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation Mode</span>
 								          </button>
 								          <a href="#" id="viewBookmark" class="secondaryToolbarButton" title="Current Page (View URL from Current Page)"
 								            tabindex="55" data-l10n-id="pdfjs-bookmark-button">
 								            <span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
 								          </a>
 								          <div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"></div>
 								          <button id="firstPage" class="secondaryToolbarButton" title="Go to First Page" tabindex="56"
 								            data-l10n-id="pdfjs-first-page-button">
 								            <span data-l10n-id="pdfjs-first-page-button-label">Go to First Page</span>
 								          </button>
 								          <button id="lastPage" class="secondaryToolbarButton" title="Go to Last Page" tabindex="57"
 								            data-l10n-id="pdfjs-last-page-button">
 								            <span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
 								          </button>
 								          <div class="horizontalToolbarSeparator"></div>
 								          <button id="pageRotateCw" class="secondaryToolbarButton" title="Rotate Clockwise" tabindex="58"
 								            data-l10n-id="pdfjs-page-rotate-cw-button">
 								            <span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate Clockwise</span>
 								          </button>
 								          <button id="pageRotateCcw" class="secondaryToolbarButton" title="Rotate Counterclockwise" tabindex="59"
 								            data-l10n-id="pdfjs-page-rotate-ccw-button">
 								            <span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate Counterclockwise</span>
 								          </button>
 								          <div class="horizontalToolbarSeparator"></div>
 								          <div id="cursorToolButtons" role="radiogroup">
 								            <button id="cursorSelectTool" class="secondaryToolbarButton toggled" title="Enable Text Selection Tool"
 								              tabindex="60" data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio" aria-checked="true">
 								              <span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text Selection Tool</span>
 								            </button>
 								            <button id="cursorHandTool" class="secondaryToolbarButton" title="Enable Hand Tool" tabindex="61"
 								              data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio" aria-checked="false">
 								              <span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand Tool</span>
 								            </button>
 								          </div>
 								          <div class="horizontalToolbarSeparator"></div>
 								          <div id="scrollModeButtons" role="radiogroup">
 								            <button id="scrollPage" class="secondaryToolbarButton" title="Use Page Scrolling" tabindex="62"
 								              data-l10n-id="pdfjs-scroll-page-button" role="radio" aria-checked="false">
 								              <span data-l10n-id="pdfjs-scroll-page-button-label">Page Scrolling</span>
 								            </button>
 								            <button id="scrollVertical" class="secondaryToolbarButton toggled" title="Use Vertical Scrolling"
 								              tabindex="63" data-l10n-id="pdfjs-scroll-vertical-button" role="radio" aria-checked="true">
 								              <span data-l10n-id="pdfjs-scroll-vertical-button-label">Vertical Scrolling</span>
 								            </button>
 								            <button id="scrollHorizontal" class="secondaryToolbarButton" title="Use Horizontal Scrolling" tabindex="64"
 								              data-l10n-id="pdfjs-scroll-horizontal-button" role="radio" aria-checked="false">
 								              <span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal Scrolling</span>
 								            </button>
 								            <button id="scrollWrapped" class="secondaryToolbarButton" title="Use Wrapped Scrolling" tabindex="65"
 								              data-l10n-id="pdfjs-scroll-wrapped-button" role="radio" aria-checked="false">
 								              <span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped Scrolling</span>
 								            </button>
 								          </div>
 								          <div class="horizontalToolbarSeparator"></div>
 								          <div id="spreadModeButtons" role="radiogroup">
 								            <button id="spreadNone" class="secondaryToolbarButton toggled" title="Do not join page spreads"
 								              tabindex="66" data-l10n-id="pdfjs-spread-none-button" role="radio" aria-checked="true">
 								              <span data-l10n-id="pdfjs-spread-none-button-label">No Spreads</span>
 								            </button>
 								            <button id="spreadOdd" class="secondaryToolbarButton"
 								              title="Join page spreads starting with odd-numbered pages" tabindex="67"
 								              data-l10n-id="pdfjs-spread-odd-button" role="radio" aria-checked="false">
 								              <span data-l10n-id="pdfjs-spread-odd-button-label">Odd Spreads</span>
 								            </button>
 								            <button id="spreadEven" class="secondaryToolbarButton"
 								              title="Join page spreads starting with even-numbered pages" tabindex="68"
 								              data-l10n-id="pdfjs-spread-even-button" role="radio" aria-checked="false">
 								              <span data-l10n-id="pdfjs-spread-even-button-label">Even Spreads</span>
 								            </button>
 								          </div>
 								          <div class="horizontalToolbarSeparator"></div>
 								          <button id="documentProperties" class="secondaryToolbarButton" title="Document Properties…" tabindex="69"
 								            data-l10n-id="pdfjs-document-properties-button" aria-controls="documentPropertiesDialog">
 								            <span data-l10n-id="pdfjs-document-properties-button-label">Document Properties…</span>
 								          </button>
 								        </div>
 								      </div> <!-- secondaryToolbar -->
 								      <div class="toolbar">
 								        <div id="toolbarContainer">
 								          <div id="toolbarViewer">
 								            <div id="toolbarViewerLeft">
 								              <div id="showMoreBtnContainer" class="splitToolbarButton">
 								                <button id="showMoreBtn" class="btn-primary">
 								                  <span id="showMoreBtnIcon" class="material-symbols-rounded">more_horiz</span>
 								                </button>
 								              </div>
-												Manual redact tooltips (#2614)

# Description

Added tooltips and translations to all visible buttons on manual redact

## Checklist

- [ X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [ X] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [X ] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
											
										
										
											2025-01-06 17:43:52 +00:00
+								              <button id="sidebarToggle" class="toolbarButton mt-2" tabindex="11"
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                data-l10n-id="pdfjs-toggle-sidebar-button" th:title="#{redact.toggleSidebar}" aria-expanded="false"
 								                aria-controls="sidebarContainer">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								              </button>
 								              <div class="toolbarButtonSpacer d-none"></div>
 								              <button id="viewFind" class="d-none toolbarButton" title="Find in Document" tabindex="12"
 								                data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
 								                <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
 								              </button>
 								              <div class="splitToolbarButton hiddenSmallView">
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                <button class="toolbarButton btn-secondary" th:title="#{redact.previousPage}" id="previous"
 								                  tabindex="13" data-l10n-id="pdfjs-previous-button">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                </button>
 								                <div class="splitToolbarButtonSeparator d-none"></div>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                <button class="toolbarButton btn-secondary" th:title="#{redact.nextPage}" id="next" tabindex="14"
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                  data-l10n-id="pdfjs-next-button">
 								                </button>
 								              </div>
 								              <span class="loadingInput start">
-												Manual redact tooltips (#2614)

# Description

Added tooltips and translations to all visible buttons on manual redact

## Checklist

- [ X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [ X] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [X ] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
											
										
										
											2025-01-06 17:43:52 +00:00
+								                <input type="number" id="pageNumber" class="toolbarField" value="1" min="1" tabindex="15"
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                  data-l10n-id="pdfjs-page-input" autocomplete="off">
 								              </span>
 								              <span id="numPages" class="toolbarLabel"></span>
 								              <img class="main-icon user-select-none" th:src="@{'/favicon.svg'}" alt="icon">
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								            </div>
 								            <div id="toolbarViewerMiddle">
 								              <div class="splitToolbarButton">
 								                <button id="zoomOut" th:title="#{redact.zoomOut}" class="toolbarButton btn-primary" tabindex="21"
 								                  data-l10n-id="pdfjs-zoom-out-button">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                </button>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                <div class="splitToolbarButtonSeparator"></div>
 								                <button id="zoomIn" th:title="#{redact.zoomIn}" class="toolbarButton btn-primary" tabindex="22"
 								                  data-l10n-id="pdfjs-zoom-in-button">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                </button>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								              </div>
 								              <span id="scaleSelectContainer" class="dropdownToolbarButton">
 								                <select id="scaleSelect" tabindex="23" data-l10n-id="pdfjs-zoom-select">
 								                  <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto">
 								                    Automatic Zoom</option>
 								                  <option id="pageActualOption" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">
 								                    Actual Size</option>
 								                  <option id="pageFitOption" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page
 								                    Fit
 								                  </option>
 								                  <option id="pageWidthOption" value="page-width" data-l10n-id="pdfjs-page-scale-width">
 								                    Page Width</option>
 								                  <option id="customScaleOption" value="custom" disabled="disabled" hidden="true"
 								                    data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
 								                  <option value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>
 %</option>
 								                  <option value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75%
 								                  </option>
 								                  <option value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>
 %</option>
 								                  <option value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125%
 								                  </option>
 								                  <option value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150%
 								                  </option>
 								                  <option value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>
 %</option>
 								                  <option value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>
 %</option>
 								                  <option value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>
 %</option>
 								                </select>
 								              </span>
 								            </div>
 								            <div id="redactionsToolbarViewer" class="splitToolbarButton d-flex">
 								              <button id="man-text-select-redact" th:title="#{redact.textBasedRedaction}" class="btn-primary"
 								                tabindex="22">
 								                <span id="text-selection" class="material-symbols-rounded user-select-none pe-none">text_select_start
 								                </span>
 								              </button>
 								              <button id="man-shape-redact" th:title="#{redact.boxRedaction}" class="btn-primary" tabindex="22">
 								                <span id="shape-selection" class="material-symbols-rounded user-select-none pe-none">pageless
 								                </span>
 								              </button>
 								              <button id="redactionsPaletteContainer" th:title="#{redact.colourPicker}" class="btn-primary">
 								                <label id="redactions-palette" class="material-symbols-rounded palette-color text-center"
 								                  style="--palette-color: #000000;">
 								                  palette
 								                  <input type="color" name="color-picker">
 								                </label>
 								              </button>
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								            </div>
 								            <div id="toolbarViewerRight">
 								              <div class="splitToolbarButton">
-												Manual redact tooltips (#2614)

# Description

Added tooltips and translations to all visible buttons on manual redact

## Checklist

- [ X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [ X] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [X ] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
											
										
										
											2025-01-06 17:43:52 +00:00
+								                <button id="pdfToImageBtn" class="btn-success">
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                  <span id="pdfToImageBtnIcon" th:title="#{redact.convertPDFToImageLabel}"
 								                    class="material-symbols-rounded">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                    image
 								                  </span>
 								                </button>
-												Manual redact tooltips (#2614)

# Description

Added tooltips and translations to all visible buttons on manual redact

## Checklist

- [ X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [ X] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [X ] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
											
										
										
											2025-01-06 17:43:52 +00:00
+								                <button id="pageBasedRedactionBtn" class="btn-primary">
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                  <span id="pageBasedRedactionBtnIcon" th:title="#{redact.pageBasedRedaction}"
 								                    class="material-symbols-rounded">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                    document_scanner
 								                  </span>
 								                </button>
-												Manual redact tooltips (#2614)

# Description

Added tooltips and translations to all visible buttons on manual redact

## Checklist

- [ X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [ X] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [X ] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
											
										
										
											2025-01-06 17:43:52 +00:00
+								                <button id="uploadBtn" class="btn-primary">
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                  <span id="uploadBtnIcon" class="material-symbols-rounded" th:title="#{redact.upload}"> upload </span>
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                </button>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								                <button id="downloadBtn" class="btn-primary">
 								                  <span id="downloadBtnIcon" th:title="#{redact.export}" class="material-symbols-rounded">
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								                    download
 								                  </span>
 								                </button>
 								              </div>
 								              <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
 								                <button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight"
 								                  role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31"
 								                  data-l10n-id="pdfjs-editor-highlight-button">
 								                  <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
 								                </button>
 								                <button id="openFile" class="toolbarButton hiddenMediumView d-none" title="Open File" role="radio"
 								                  aria-checked="false" tabindex="33" data-l10n-id="pdfjs-open-file-button">
 								                  <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
 								                </button>
 								                <button id="print" class="d-none toolbarButton hiddenMediumView d-none" title="Print" role="radio"
 								                  aria-checked="false" tabindex="34" data-l10n-id="pdfjs-print-button">
 								                  <span data-l10n-id="pdfjs-print-button-label">Print</span>
 								                </button>
 								                <button id="download" class="d-none toolbarButton hiddenMediumView d-none" title="Save" role="radio"
 								                  aria-checked="false" tabindex="35" data-l10n-id="pdfjs-save-button">
 								                  <span data-l10n-id="pdfjs-save-button-label">Save</span>
 								                </button>
 								                <button id="editorStamp" class="d-none toolbarButton hiddenMediumView d-none" title="Add or edit images"
 								                  role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="36"
 								                  data-l10n-id="pdfjs-editor-stamp-button">
 								                  <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
 								                </button>
 								              </div>
 								              <div id="editorModeSeparator" class="d-none verticalToolbarSeparator"></div>
 								              <button id="editorFreeText" class="d-none toolbarButton hiddenMediumView" title="Text" tabindex="41"
 								                data-l10n-id="pdfjs-editor-free-text-button">
 								                <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
 								              </button>
 								              <button id="editorInk" class="d-none toolbarButton hiddenMediumView" title="Draw" tabindex="42"
 								                data-l10n-id="pdfjs-editor-ink-button">
 								                <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
 								              </button>
 								              <div class="verticalToolbarSeparator hiddenMediumView"></div>
 								              <button id="secondaryToolbarToggle" class="toolbarButton d-none" title="Tools" tabindex="43"
 								                data-l10n-id="pdfjs-tools-button">
 								                <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
 								              </button>
 								            </div>
 								          </div>
 								          <div id="loadingBar">
 								            <div class="progress">
 								              <div class="glimmer">
 								              </div>
 								            </div>
 								          </div>
 								        </div>
 								      </div>
 								      <div id="viewerContainer" tabindex="0">
 								        <div id="viewer" class="pdfViewer"></div>
-												Homepage update (#2663)

# Description

Please provide a summary of the changes, including relevant motivation
and context.

Closes #(issue_number)

## Checklist

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have performed a self-review of my own code
- [ ] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Reece Browne <reece@stirling.pdf>
											
										
										
											2025-01-30 18:55:33 +00:00
+								        <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
-												Feature: Support manual redaction (#2433)

# Description

## Manual Redaction:

- ### Text Selection-based redaction:
-
![image](https://github.com/user-attachments/assets/e59c5e6c-ef52-4f54-a98e-fc26e3226c8e)
- Users can now redact currently selected text by selecting the text
then clicking `ctrl + s` shortcut or by pressing on **apply/save/disk
icon** in the toolbar.
- Users can delete/cancel the redacted area by clicking on the box
containing the text, then clicking on `delete/trash` icon or by using
the shortcut `delete`.
- Users can customize the color of the redacted area/text (after the
redaction was applied) by simply clicking on the box containing the
text/area then clicking on the `color palette` icon and choosing the
color they want.
- Users can choose to select the color of redaction before redacting
text or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).


- ### Draw/Area-based redaction:
-
![image](https://github.com/user-attachments/assets/e2968ae3-ebaf-497e-b3bd-0c8c8f4ee157)
- Users can now redact an area in the page by selecting the then
clicking `ctrl + s` shortcut or by pressing on **apply/save/disk icon**
in the toolbar.
- Users can delete/cancel the redacted area by clicking on the drawn
box, then clicking on `delete/trash` icon or by using the shortcut
`delete` (requires temporarily turning off drawing mode).
- Users can customize the color of the redacted area (after the
redaction was applied) by simply clicking on the box containing the area
then clicking on the `color palette` icon and choosing the color they
want.
- Users can choose to select the color of redaction before drawing the
box or applying changes (this only affects newly created redaction
areas, to change the color of an existing one; check the previous bullet
point).

 - ### Page-based redaction:
-
![image](https://github.com/user-attachments/assets/aba59432-23e7-4fe6-aa28-872c23a91242)
- Users can now redact **ENTIRE** pages by specifying the page
number(s), range(s) or functions.
- Users can customize the color of page-based redaction (doesn't affect
text-based nor draw-based redactions).

### Redaction modes:
There are three modes of redaction/operation currently supported
  - Text Selection-based redaction (TEXT)
  - Draw/Area-based redaction (DRAWING)
  - None - by simply not choosing any of the above modes (NONE).

## How to use:

- **Text Selection-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/52cc31ef-6946-482c-84a2-1ddb79646dd8)
to enable `text-selection redaction mode` then select the text you want
to redact then press `ctrl + s` or click on the disk/save icon
![image](https://github.com/user-attachments/assets/f2bdf2f2-ee07-4682-bb9a-95e13a1004cf).
- **Draw/Area-based redaction:** click on this icon in the toolbar
![image](https://github.com/user-attachments/assets/fe00dca9-761e-47a0-a748-2041830dc73e)
to enable `draw/area-based redaction` then `left mouse click (LMB)` on
the starting point of the rectangle, then once you are satisfied with
the rectangle's placement/dimensions then `left mouse click (LMB)` again
to apply the redaction.
- **Example:** `Left mouse click (LMB)` then move mouse to the right
then bottom then `Left mouse click (LMB)`.
- Note: Red box/rectangle borders indicate that you have not yet saved
(you need to left click on the page to save)
![image](https://github.com/user-attachments/assets/5ce5f789-9d6f-4984-8555-e8fef2a3e3cc)
once saved the borders will become green
![image](https://github.com/user-attachments/assets/85cabb9f-e7ee-4268-90cd-80493b625466)
(they also become clickable/hover-able when drawing mode is off).
- **Page-based redactions:**: Insert the page number(s), range(s) and/or
functions (separated by `,`) then select your preferred color and click
on `Redact` to submit.

![image](https://github.com/user-attachments/assets/ed8a0a98-32b2-4ae1-a3c7-c54bfe0fea66)

- **Color Customizations:**
- You can change the redaction color for new redactions by clicking on
this icon in the toolbar
![image](https://github.com/user-attachments/assets/bad573ee-0545-4329-b131-2022f970f134).
- You can change the redaction color for existing redactions by hovering
over the redaction box then clicking on it (`Left mouse click LMB`) then
clicking on color palette (highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/22281a81-2cd9-4771-9a93-a75b6dd93433)
then select your preferred color.

- **Deletions:**
- You can delete a redacted area by hovering over the redaction box then
clicking on it (`Left mouse click LMB`) then clicking on the trash icon
(highlighted in red in the picture)
![image](https://github.com/user-attachments/assets/f0347279-8211-4b1c-a91d-c1fcb929cc5d).

## Card in the home page:

![image](https://github.com/user-attachments/assets/b3fb16eb-5ff0-4548-9f22-b1b8fe162c8b)

Closes #465

## Checklist

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have performed a self-review of my own code
- [x] I have attached images of the change if it is UI based
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ ] My changes generate no new warnings
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

---------

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
											
										
										
											2025-01-06 13:38:44 +02:00
+								      </div>
 								    </div> <!-- mainContainer -->
 								    <div id="dialogContainer">
 								      <dialog id="passwordDialog">
 								        <div class="row">
 								          <label for="password" id="passwordText" data-l10n-id="pdfjs-password-label">Enter the password to open
 								            this PDF file:</label>
 								        </div>
 								        <div class="row">
 								          <input type="password" id="password" class="toolbarField">
 								        </div>
 								        <div class="buttonRow">
 								          <button id="passwordCancel" class="dialogButton"><span
 								              data-l10n-id="pdfjs-password-cancel-button">Cancel</span></button>
 								          <button id="passwordSubmit" class="dialogButton"><span
 								              data-l10n-id="pdfjs-password-ok-button">OK</span></button>
 								        </div>
 								      </dialog>
 								      <dialog id="documentPropertiesDialog">
 								        <div class="row">
 								          <span id="fileNameLabel" data-l10n-id="pdfjs-document-properties-file-name">File name:</span>
 								          <p id="fileNameField" aria-labelledby="fileNameLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="fileSizeLabel" data-l10n-id="pdfjs-document-properties-file-size">File size:</span>
 								          <p id="fileSizeField" aria-labelledby="fileSizeLabel">-</p>
 								        </div>
 								        <div class="separator"></div>
 								        <div class="row">
 								          <span id="titleLabel" data-l10n-id="pdfjs-document-properties-title">Title:</span>
 								          <p id="titleField" aria-labelledby="titleLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="authorLabel" data-l10n-id="pdfjs-document-properties-author">Author:</span>
 								          <p id="authorField" aria-labelledby="authorLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="subjectLabel" data-l10n-id="pdfjs-document-properties-subject">Subject:</span>
 								          <p id="subjectField" aria-labelledby="subjectLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="keywordsLabel" data-l10n-id="pdfjs-document-properties-keywords">Keywords:</span>
 								          <p id="keywordsField" aria-labelledby="keywordsLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="creationDateLabel" data-l10n-id="pdfjs-document-properties-creation-date">Creation
 								            Date:</span>
 								          <p id="creationDateField" aria-labelledby="creationDateLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="modificationDateLabel" data-l10n-id="pdfjs-document-properties-modification-date">Modification
 								            Date:</span>
 								          <p id="modificationDateField" aria-labelledby="modificationDateLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="creatorLabel" data-l10n-id="pdfjs-document-properties-creator">Creator:</span>
 								          <p id="creatorField" aria-labelledby="creatorLabel">-</p>
 								        </div>
 								        <div class="separator"></div>
 								        <div class="row">
 								          <span id="producerLabel" data-l10n-id="pdfjs-document-properties-producer">PDF Producer:</span>
 								          <p id="producerField" aria-labelledby="producerLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="versionLabel" data-l10n-id="pdfjs-document-properties-version">PDF Version:</span>
 								          <p id="versionField" aria-labelledby="versionLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="pageCountLabel" data-l10n-id="pdfjs-document-properties-page-count">Page Count:</span>
 								          <p id="pageCountField" aria-labelledby="pageCountLabel">-</p>
 								        </div>
 								        <div class="row">
 								          <span id="pageSizeLabel" data-l10n-id="pdfjs-document-properties-page-size">Page Size:</span>
 								          <p id="pageSizeField" aria-labelledby="pageSizeLabel">-</p>
 								        </div>
 								        <div class="separator"></div>
 								        <div class="row">
 								          <span id="linearizedLabel" data-l10n-id="pdfjs-document-properties-linearized">Fast Web View:</span>
 								          <p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
 								        </div>
 								        <div class="buttonRow">
 								          <button id="documentPropertiesClose" class="dialogButton"><span
 								              data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
 								        </div>
 								      </dialog>
 								      <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel"
 								        aria-describedby="dialogDescription">
 								        <div id="altTextContainer" class="mainContainer">
 								          <div id="overallDescription">
 								            <span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an
 								              option</span>
 								            <span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
 								              Alt text (alternative text) helps when people can’t see the image or when it doesn’t load.
 								            </span>
 								          </div>
 								          <div id="addDescription">
 								            <div class="radio">
 								              <div class="radioButton">
 								                <input type="radio" id="descriptionButton" name="altTextOption" tabindex="0"
 								                  aria-describedby="descriptionAreaLabel" checked>
 								                <label for="descriptionButton" data-l10n-id="pdfjs-editor-alt-text-add-description-label">Add a
 								                  description</label>
 								              </div>
 								              <div class="radioLabel">
 								                <span id="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-add-description-description">
 								                  Aim for 1-2 sentences that describe the subject, setting, or actions.
 								                </span>
 								              </div>
 								            </div>
 								            <div class="descriptionArea">
 								              <textarea id="descriptionTextarea"
 								                placeholder="For example, “A young man sits down at a table to eat a meal”"
 								                aria-labelledby="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-textarea"
 								                tabindex="0"></textarea>
 								            </div>
 								          </div>
 								          <div id="markAsDecorative">
 								            <div class="radio">
 								              <div class="radioButton">
 								                <input type="radio" id="decorativeButton" name="altTextOption" aria-describedby="decorativeLabel">
 								                <label for="decorativeButton" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-label">Mark as
 								                  decorative</label>
 								              </div>
 								              <div class="radioLabel">
 								                <span id="decorativeLabel" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-description">
 								                  This is used for ornamental images, like borders or watermarks.
 								                </span>
 								              </div>
 								            </div>
 								          </div>
 								          <div id="buttons">
 								            <button id="altTextCancel" class="secondaryButton" tabindex="0"><span
 								                data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
 								            <button id="altTextSave" class="primaryButton" tabindex="0"><span
 								                data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
 								          </div>
 								        </div>
 								      </dialog>
 								      <dialog id="printServiceDialog" style="min-width: 200px;">
 								        <div class="row">
 								          <span data-l10n-id="pdfjs-print-progress-message">Preparing document for printing…</span>
 								        </div>
 								        <div class="row">
 								          <progress value="0" max="100"></progress>
 								          <span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }'
 								            class="relative-progress">0%</span>
 								        </div>
 								        <div class="buttonRow">
 								          <button id="printCancel" class="dialogButton"><span
 								              data-l10n-id="pdfjs-print-progress-close-button">Cancel</span></button>
 								        </div>
 								      </dialog>
 								    </div> <!-- dialogContainer -->
 								  </div> <!-- outerContainer -->
 								  <div id="printContainer" class="d-none"></div>
 								  <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
 								</body>
-												Use Thymeleaf `th:src` for `redact.js` to ensure correct resource path resolution (#3511)

# Description of Changes

Please provide a summary of the changes, including:

```bash
generic_scripting.js:48 
 GET https://stirling.lan/pdfjs-legacy/js/pdfjs-legacy/pdf.sandbox.mjs net::ERR_ABORTED 404 (Not Found)

pdf_scripting_manager.js:195 setDocument: "Failed to fetch dynamically imported module: https://stirling.lan/pdfjs-legacy/js/pdfjs-legacy/pdf.sandbox.mjs".

```

Closes #(issue_number)

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.
											
										
										
											2025-05-11 20:14:27 +02:00
+								</html>