>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3579416. --> Reported by: [erwandsn](https://www.drupal.org/user/3619511) Related to !3 >>> <h2>Frontify Module - Major Refactoring and Modernization Plan</h2> <p><strong>Issue Type:</strong> Task / Architecture</p> <p><strong>Priority:</strong> Normal</p> <p><strong>Component:</strong> Frontify</p> <hr> <h3>Overview</h3> <p>This issue outlines a comprehensive refactoring plan for the Frontify module to modernize its architecture, improve maintainability, and align with Drupal 10+ best practices. The goal is to create a more flexible, extensible, and maintainable codebase while reducing technical debt.</p> <hr> <h3>Current State</h3> <p>The current Frontify module has several architectural limitations:</p> <ul> <li><strong>FieldType:</strong> Currently only handles images, with limited support for other media types (Document, Video, Audio)</li> <li><strong>FieldFormatter:</strong> Multiple formatters exist, each tied to specific media types</li> <li><strong>Cardinality:</strong> Limited support for multiple values per field</li> <li><strong>Frontify Finder:</strong> The module includes a ported version of the Frontify Finder JavaScript code, which creates maintenance overhead and version drift</li> </ul> <hr> <h3>Planned Changes</h3> <h4>1. Migrate FieldType to Handle All Media Types</h4> <p><strong>Goal:</strong> Create a unified <code>FrontifyAssetField</code> that can handle Document, Video, Audio, and Image assets.</p> <p><strong>Changes:</strong></p> <ul> <li>Add <code>media_type</code> field setting to allow configuration of allowed media types per field instance</li> <li>Add <code>allowed_extension</code> field setting with AJAX-driven prefilling based on selected media types</li> <li>Update schema to include new columns for media type and allowed extensions</li> <li>Provide update hooks for existing installations to migrate data</li> </ul> <p><strong>Technical Details:</strong></p> <pre><pre>Schema additions:<br>- media_type: varchar(50) - stores selected media type(s)<br>- allowed_extension: text - stores JSON-encoded allowed file extensions<br><br>Field settings:<br>- media_type: checkboxes (file, video, image, document, audio)<br>- allowed_extension: textarea (prefilled via AJAX based on media_type selection)</pre></pre><h4>2. Migrate FieldFormatter to Single Unified Formatter</h4> <p><strong>Goal:</strong> Replace multiple media-type-specific formatters with a single <code>FrontifyAssetFormatter</code> that adapts its output based on the field definition.</p> <p><strong>Changes:</strong></p> <ul> <li>Remove <code>FrontifyImageFormatter</code>, <code>FrontifyVideoFormatter</code>, <code>FrontifyDocumentFormatter</code></li> <li>Create unified <code>FrontifyAssetFormatter</code> that reads <code>media_type</code> from field definition</li> <li>Formatter automatically renders appropriate output (image thumbnail, video embed, document link, audio player)</li> <li>Add formatter settings for display options (thumbnail size, link behavior, etc.)</li> </ul> <p><strong>Benefits:</strong></p> <ul> <li>Reduced code duplication</li> <li>Easier maintenance and testing</li> <li>Consistent user experience across media types</li> </ul> <h4>3. Handle Multiple Cardinality</h4> <p><strong>Goal:</strong> Ensure the widget and formatter properly support fields with unlimited cardinality.</p> <p><strong>Changes:</strong></p> <ul> <li>Update <code>FrontifyAssetFieldWidget</code> to properly handle multiple field items</li> <li>Ensure AJAX callbacks work correctly for each delta in multi-value fields</li> <li>Update formatter to render multiple assets in a grid/list layout</li> <li>Add CSS classes for proper styling of multiple assets</li> </ul> <p><strong>Technical Details:</strong></p> <pre><pre>Widget changes:<br>- Proper delta handling in formElement()<br>- Unique wrapper IDs per field item<br>- Correct AJAX wrapper targeting for each delta<br><br>Formatter changes:<br>- Loop through all items in fieldItemList<br>- Render each item with appropriate media type output<br>- Support for grid/list display modes</pre></pre><h4>4. Use Frontify Finder as Third-Party Library</h4> <p><strong>Goal:</strong> Remove the ported Frontify Finder JavaScript code and use the official library via CDN or npm.</p> <p><strong>Changes:</strong></p> <ul> <li>Remove <code>js/frontify_finder.js</code> (the ported Frontify Finder code)</li> <li>Add library definition to load Frontify Finder from official Frontify finder library</li> <li>Update JavaScript integration to use the official API and exploit extension filters / multiple selection</li> <li>Add version pinning to ensure compatibility</li> </ul> <p><strong>Benefits:</strong></p> <ul> <li>Automatic access to Frontify Finder updates and bug fixes</li> <li>Reduced module size</li> <li>No version drift between module and official Finder</li> <li>Smaller codebase to maintain</li> </ul> <hr> <h3>Migration Path</h3> <p><strong>For Existing Installations:</strong></p> <ol> <li><strong>Update Hooks:</strong> Provide update hooks to migrate existing field configurations <ul> <li><code>frontify_update_10003()</code> - Add new schema columns</li> <li><code>frontify_update_10004()</code> - Migrate formatter configurations</li> </ul> </li> <li><strong>Backwards Compatibility:</strong> Maintain backwards compatibility during transition period <ul> <li>Old formatters remain available but marked as deprecated</li> <li>Automatic migration to new formatter on field save</li> </ul> </li> <li><strong>Documentation:</strong> Provide clear migration guide for site builders</li> </ol> <hr> <h3>Labels</h3> <p><code>architecture</code> <code>refactoring</code> <code>needs-work</code> <code>frontify</code></p>