-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
[6.1] make media action crop aspect ratio configurable #46421
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
hans2103
wants to merge
12
commits into
joomla:6.1-dev
Choose a base branch
from
hans2103:feature/6.1-media-action-crop-aspect-ratio
base: 6.1-dev
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+507
−2
Open
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
2378ef9
make media action crop aspect ratio configurable
hans2103 c5ecf44
:art: code styling
hans2103 0a047f2
alpha sort
hans2103 13e8aa0
fix year
hans2103 2da2336
apply __DEPLOY_VERSION__ to newly added code
hans2103 daedb7c
fix year for newly added code
hans2103 436e14b
another sort :-)
hans2103 9850572
remove fallback Copy
hans2103 59a8091
Update administrator/language/en-GB/plg_media-action_crop.ini
hans2103 1409e67
PHPCBF FIX
hans2103 3c83c9a
Joomla.sanitizeHtml() for security
hans2103 65fcf2e
Merge branch '6.1-dev' into feature/6.1-media-action-crop-aspect-ratio
hans2103 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
build/media_source/plg_media-action_crop/joomla.asset.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json", | ||
| "name": "plg_media-action_crop", | ||
| "version": "6.1.0", | ||
| "description": "Web Assets for Media Action Crop Plugin", | ||
| "license": "GPL-2.0-or-later", | ||
| "assets": [ | ||
| { | ||
| "name": "plg_media-action_crop.calculator", | ||
| "type": "script", | ||
| "uri": "plg_media-action_crop/calculator.js", | ||
| "attributes": { | ||
| "defer": true | ||
| } | ||
| } | ||
| ] | ||
| } |
84 changes: 84 additions & 0 deletions
84
build/media_source/plg_media-action_crop/js/calculator.es6.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * @copyright (C) 2025 Open Source Matters, Inc. <https://www.joomla.org> | ||
| * @license GNU General Public License version 2 or later; see LICENSE.txt | ||
| */ | ||
|
|
||
| /** | ||
| * Aspect Ratio Calculator Module | ||
| */ | ||
| (() => { | ||
| const initCalculator = () => { | ||
| const widthInput = document.getElementById('calc-width'); | ||
| const heightInput = document.getElementById('calc-height'); | ||
| const output = document.getElementById('calc-output'); | ||
| const copyBtn = document.getElementById('copy-calc-value'); | ||
|
|
||
| if (!widthInput || !heightInput || !output || !copyBtn) { | ||
| return; | ||
| } | ||
|
|
||
| /** | ||
| * Calculate aspect ratio from width and height | ||
| */ | ||
| const calculateRatio = () => { | ||
| const width = parseFloat(widthInput.value); | ||
| const height = parseFloat(heightInput.value); | ||
|
|
||
| if (width > 0 && height > 0) { | ||
| const ratio = width / height; | ||
| output.textContent = ratio.toString(); | ||
| } else { | ||
| output.textContent = '0'; | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * Show copy feedback on button | ||
| */ | ||
| const showCopyFeedback = () => { | ||
| const originalHTML = copyBtn.innerHTML; | ||
| const copiedIcon = copyBtn.getAttribute('data-copied-icon'); | ||
| const copiedText = copyBtn.getAttribute('data-copied-text'); | ||
|
|
||
| copyBtn.innerHTML = Joomla.sanitizeHtml(copiedIcon + copiedText); | ||
| copyBtn.disabled = true; | ||
|
|
||
| setTimeout(() => { | ||
| copyBtn.innerHTML = originalHTML; | ||
| copyBtn.disabled = false; | ||
| }, 2000); | ||
| }; | ||
|
|
||
| /** | ||
| * Copy the calculated value to clipboard | ||
| */ | ||
| const copyToClipboard = () => { | ||
| const value = output.textContent; | ||
|
|
||
| navigator.clipboard.writeText(value) | ||
| .then(() => { | ||
| showCopyFeedback(); | ||
| }) | ||
| .catch((err) => { | ||
| console.error('Clipboard copy failed:', err); | ||
| }); | ||
| }; | ||
|
|
||
| // Attach event listeners | ||
| widthInput.addEventListener('input', calculateRatio); | ||
| heightInput.addEventListener('input', calculateRatio); | ||
| copyBtn.addEventListener('click', copyToClipboard); | ||
| output.addEventListener('click', copyToClipboard); | ||
|
|
||
| // Calculate initial ratio | ||
| calculateRatio(); | ||
| }; | ||
|
|
||
| // Initialize when DOM is ready | ||
| if (document.readyState === 'loading') { | ||
| document.addEventListener('DOMContentLoaded', initCalculator); | ||
| } else { | ||
| // DOM already loaded, run with slight delay for form rendering | ||
| setTimeout(initCalculator, 100); | ||
| } | ||
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| <?php | ||
|
|
||
| /** | ||
| * @package Joomla.Plugin | ||
| * @subpackage Media-Action.crop | ||
| * | ||
| * @copyright (C) 2025 Open Source Matters, Inc. <https://www.joomla.org> | ||
| * @license GNU General Public License version 2 or later; see LICENSE.txt | ||
| */ | ||
|
|
||
| \defined('_JEXEC') or die; | ||
|
|
||
| use Joomla\CMS\Factory; | ||
| use Joomla\CMS\Language\Text; | ||
| use Joomla\CMS\Layout\LayoutHelper; | ||
|
|
||
| extract($displayData); | ||
|
|
||
| /** | ||
| * Layout variables | ||
| * ----------------- | ||
| * @var string $id The field ID | ||
| */ | ||
|
|
||
| // Load the calculator JavaScript | ||
| $wa = Factory::getApplication()->getDocument()->getWebAssetManager(); | ||
| $wa->getRegistry()->addExtensionRegistryFile('plg_media-action_crop'); | ||
| $wa->useScript('plg_media-action_crop.calculator'); | ||
|
|
||
| // Prepare data for JavaScript | ||
| $copiedIcon = LayoutHelper::render('joomla.icon.iconclass', ['icon' => 'icon-check']); | ||
| $copiedText = Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_COPY_DONE_LABEL'); | ||
| ?> | ||
| <div class="card mb-3"> | ||
| <div class="card-header"> | ||
| <h2 id="aspect-ratio-calculator" class="card-title mb-0"> | ||
| <?php echo LayoutHelper::render('joomla.icon.iconclass', ['icon' => 'icon-wand']); ?> | ||
| <?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_LABEL'); ?> | ||
| </h2> | ||
| </div> | ||
| <div class="card-body"> | ||
| <p class="mb-3"> | ||
| <?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_DESC'); ?> | ||
| </p> | ||
| <div class="row g-3 mb-3"> | ||
| <div class="col-md-6"> | ||
| <label for="calc-width" class="form-label fw-bold"> | ||
| <?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_WIDTH_LABEL'); ?> | ||
| </label> | ||
| <input type="number" id="calc-width" min="1" step="1" value="16" class="form-control" /> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <label for="calc-height" class="form-label fw-bold"> | ||
| <?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_HEIGHT_LABEL'); ?> | ||
| </label> | ||
| <input type="number" id="calc-height" min="1" step="1" value="9" class="form-control" /> | ||
| </div> | ||
| </div> | ||
| <div class="alert alert-success d-flex align-items-center justify-content-between" role="alert"> | ||
| <div> | ||
| <strong class="me-2"> | ||
| <?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_OUTPUT_LABEL'); ?> | ||
| </strong> | ||
| <output id="calc-output" for="aspect-ratio-calculator" class="font-monospace fs-5 text-success fw-bold user-select-all" style="cursor: pointer;" title="<?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_OUTPUT_TITLE_LABEL'); ?>">1.7777777777777777</output> | ||
| </div> | ||
| <button type="button" id="copy-calc-value" class="btn btn-success btn-sm" | ||
| title="<?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_COPY_LABEL'); ?>" | ||
| data-copied-icon="<?php echo htmlspecialchars($copiedIcon, ENT_QUOTES, 'UTF-8'); ?>" | ||
| data-copied-text="<?php echo htmlspecialchars($copiedText, ENT_QUOTES, 'UTF-8'); ?>"> | ||
| <?php echo LayoutHelper::render('joomla.icon.iconclass', ['icon' => 'icon-copy']); ?> | ||
| <?php echo Text::_('PLG_MEDIA-ACTION_CROP_RATIO_CALCULATOR_COPY_LABEL'); ?> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.