001/*
002 * This library is part of OpenCms -
003 * the Open Source Content Management System
004 *
005 * Copyright (c) Alkacon Software GmbH & Co. KG (http://www.alkacon.com)
006 *
007 * This library is free software; you can redistribute it and/or
008 * modify it under the terms of the GNU Lesser General Public
009 * License as published by the Free Software Foundation; either
010 * version 2.1 of the License, or (at your option) any later version.
011 *
012 * This library is distributed in the hope that it will be useful,
013 * but WITHOUT ANY WARRANTY; without even the implied warranty of
014 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
015 * Lesser General Public License for more details.
016 *
017 * For further information about Alkacon Software, please see the
018 * company website: http://www.alkacon.com
019 *
020 * For further information about OpenCms, please see the
021 * project website: http://www.opencms.org
022 *
023 * You should have received a copy of the GNU Lesser General Public
024 * License along with this library; if not, write to the Free Software
025 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
026 */
027
028package org.opencms.ade.galleries.client.preview.ui;
029
030import org.opencms.ade.galleries.client.Messages;
031import org.opencms.ade.galleries.client.preview.CmsImagePreviewHandler;
032import org.opencms.ade.galleries.client.preview.CmsImagePreviewHandler.PreviewImageUpdate;
033import org.opencms.ade.galleries.client.ui.css.I_CmsLayoutBundle;
034import org.opencms.ade.galleries.shared.CmsImageInfoBean;
035import org.opencms.ade.galleries.shared.I_CmsGalleryProviderConstants.GalleryMode;
036import org.opencms.gwt.client.CmsCoreProvider;
037import org.opencms.gwt.client.util.CmsClientStringUtil;
038import org.opencms.gwt.client.util.I_CmsSimpleCallback;
039import org.opencms.gwt.shared.CmsGwtLog;
040
041import java.util.Map;
042
043import com.google.gwt.core.client.Scheduler;
044import com.google.gwt.core.client.Scheduler.ScheduledCommand;
045import com.google.gwt.dom.client.Style.Unit;
046import com.google.gwt.event.logical.shared.SelectionEvent;
047import com.google.gwt.event.logical.shared.SelectionHandler;
048import com.google.gwt.user.client.Command;
049import com.google.gwt.user.client.Window;
050import com.google.gwt.user.client.ui.FlowPanel;
051import com.google.gwt.user.client.ui.Image;
052import com.google.gwt.user.client.ui.Widget;
053
054import elemental2.dom.HTMLImageElement;
055import jsinterop.base.Js;
056
057/**
058 * Provides a widget for the image preview dialog .<p>
059 *
060 * @since 8.0.
061 */
062public class CmsImagePreviewDialog extends A_CmsPreviewDialog<CmsImageInfoBean> {
063
064    /** The default min height of the image. */
065    public static final int IMAGE_HEIGHT_MAX = 361;
066
067    /** The default min width of the image. */
068    public static final int IMAGE_WIDTH_MAX = 640;
069
070    /** Style name for distinguishing whether the properties tab is currently active or not. */
071    public static final String STYLE_PROPERTIES_TAB_ACTIVE = "propertiesTabActive";
072
073    /** The preview handler. */
074    private CmsImagePreviewHandler m_handler;
075
076    /** The advanced image tab. */
077    private CmsImageAdvancedTab m_imageAdvancedTab;
078
079    /** The formats tab. */
080    private CmsImageEditorTab m_imageEditorFormatsTab;
081
082    /** The format tab. */
083    private CmsImageFormatsTab m_imageFormatTab;
084
085    /** The initial fill flag. */
086    private boolean m_initialFill = true;
087
088    /** The preview image. */
089    private Image m_previewImage;
090
091    /** The properties tab. */
092    private CmsPropertiesTab m_propertiesTab;
093
094    /**
095     * The constructor.<p>
096     *
097     * @param dialogMode the dialog mode
098     * @param dialogHeight the dialog height to set
099     * @param dialogWidth the dialog width to set
100     * @param disableSelection true if selection from the preview should be disabled
101     */
102    public CmsImagePreviewDialog(GalleryMode dialogMode, int dialogHeight, int dialogWidth, boolean disableSelection) {
103
104        super(dialogMode, dialogHeight, dialogWidth, disableSelection);
105        // set the line-height to the height of the preview panel to be able to center the image vertically
106        m_previewHolder.getElement().getStyle().setProperty("lineHeight", m_previewHeight - 2, Unit.PX);
107    }
108
109    /**
110     * Fills the content of the tabs panel.<p>
111     *
112     * @param infoBean the bean containing the parameter
113     */
114    @Override
115    public void fillContent(CmsImageInfoBean infoBean) {
116
117        // properties tab
118        m_propertiesTab.fillContent(infoBean);
119        if (m_initialFill) {
120            if (getGalleryMode() == GalleryMode.widget) {
121                m_imageFormatTab.fillContent(infoBean);
122            }
123            if (getGalleryMode() == GalleryMode.editor) {
124                m_imageFormatTab.fillContent(infoBean);
125                m_imageEditorFormatsTab.fillContent(infoBean);
126                m_imageAdvancedTab.fillContent(infoBean);
127            }
128            m_initialFill = false;
129        }
130        fillPreviewPanel(infoBean);
131    }
132
133    /**
134     * Fills the preview panel.<p>
135     *
136     * @param infoBean the image info
137     */
138    public void fillPreviewPanel(CmsImageInfoBean infoBean) {
139
140        FlowPanel panel = new FlowPanel();
141        panel.addStyleName(I_CmsLayoutBundle.INSTANCE.previewDialogCss().imagePanel());
142        m_previewImage = new Image();
143        boolean isSvg = false;
144        if (CmsClientStringUtil.checkIsPathOrLinkToSvg(infoBean.getResourcePath())) {
145            isSvg = true;
146            m_previewImage.getElement().getStyle().setWidth(100, Unit.PCT);
147            m_previewImage.getElement().getStyle().setHeight(100, Unit.PCT);
148            m_previewImage.getElement().getStyle().setProperty("objectFit", "contain");
149        }
150        StringBuffer urlScaled = new StringBuffer(128);
151        String src = infoBean.getViewLink() != null
152        ? infoBean.getViewLink()
153        : CmsCoreProvider.get().link(infoBean.getResourcePath());
154        urlScaled.append(src);
155        m_previewPanel.setWidget(panel); // Need to already attach it here so we can measure the dimensions
156        m_handler.setImageContainerSize(panel.getOffsetWidth(), panel.getOffsetHeight());
157        PreviewImageUpdate previewUpdate = m_handler.getPreviewImageUpdate(infoBean.getHeight(), infoBean.getWidth());
158        previewUpdate.applyToImage(m_previewImage, src, isSvg, panel);
159        getHandler().getFocalPointController().updateImage(panel, m_previewImage);
160        panel.add(m_previewImage);
161    }
162
163    /**
164     * Returns the dialog width.<p>
165     *
166     * @return the dialog width
167     */
168    public int getDialogWidth() {
169
170        return m_dialogWidth;
171    }
172
173    /**
174     * Adds necessary attributes to the map.<p>
175     *
176     * @param attributes the attribute map
177     * @param callback the callback to execute
178     */
179    public void getImageAttributes(Map<String, String> attributes, I_CmsSimpleCallback<Map<String, String>> callback) {
180
181        if (getGalleryMode() == GalleryMode.editor) {
182            m_imageEditorFormatsTab.getImageAttributes(attributes);
183            m_imageAdvancedTab.getImageAttributes(attributes, callback);
184        } else {
185            callback.execute(attributes);
186        }
187    }
188
189    /**
190     * Returns the preview height.<p>
191     *
192     * @return the preview height
193     */
194    public int getPreviewHeight() {
195
196        return m_previewHeight;
197    }
198
199    /**
200     * Gets the current preview image.
201     *
202     * @return the preview image
203     */
204    public Image getPreviewImage() {
205
206        return m_previewImage;
207    }
208
209    /**
210     * @see org.opencms.ade.galleries.client.preview.ui.A_CmsPreviewDialog#hasChanges()
211     */
212    @Override
213    public boolean hasChanges() {
214
215        return m_propertiesTab.isChanged();
216    }
217
218    /**
219     * Initializes the preview.<p>
220     *
221     * @param handler the preview handler
222     */
223    public void init(CmsImagePreviewHandler handler) {
224
225        m_handler = handler;
226        m_propertiesTab = new CmsPropertiesTab(m_galleryMode, m_dialogHeight, m_dialogWidth, m_handler);
227        m_tabbedPanel.add(m_propertiesTab, Messages.get().key(Messages.GUI_PREVIEW_TAB_PROPERTIES_0));
228        if ((m_galleryMode == GalleryMode.editor) || (m_galleryMode == GalleryMode.widget)) {
229            m_imageFormatTab = new CmsImageFormatsTab(m_galleryMode, m_dialogHeight, m_dialogWidth, handler, null);
230            m_tabbedPanel.add(m_imageFormatTab, Messages.get().key(Messages.GUI_PREVIEW_TAB_IMAGEFORMAT_0));
231        }
232        if (getGalleryMode() == GalleryMode.editor) {
233            m_imageEditorFormatsTab = new CmsImageEditorTab(m_galleryMode, m_dialogHeight, m_dialogWidth, handler);
234
235            String hideFormatsParam = Window.Location.getParameter("hideformats");
236            boolean hideFormats = "true".equals(hideFormatsParam);
237            if (!hideFormats) {
238                m_tabbedPanel.add(m_imageEditorFormatsTab, Messages.get().key(Messages.GUI_PREVIEW_TAB_IMAGEOPTIONS_0));
239            }
240
241            m_imageAdvancedTab = new CmsImageAdvancedTab(m_galleryMode, m_dialogHeight, m_dialogWidth, handler);
242            if (!hideFormats) {
243                m_tabbedPanel.add(m_imageAdvancedTab, Messages.get().key(Messages.GUI_PREVIEW_TAB_IMAGEADVANCED_0));
244            }
245        }
246        m_tabbedPanel.addSelectionHandler(new SelectionHandler<Integer>() {
247
248            public void onSelection(SelectionEvent<Integer> event) {
249
250                Scheduler.get().scheduleDeferred(new ScheduledCommand() {
251
252                    @SuppressWarnings("synthetic-access")
253                    public void execute() {
254
255                        updateClassForTab(event.getSelectedItem().intValue());
256                    }
257                });
258
259            }
260        });
261    }
262
263    /**
264     * Resets the image displayed in the preview.<p>
265     *
266     * @param path the image path including scale parameter
267     */
268    public void resetPreviewImage(String path, String highResPath) {
269
270        m_previewImage.setUrl(path);
271        HTMLImageElement img = Js.cast(m_previewImage.getElement());
272        img.removeAttribute("srcset");
273        if (highResPath != null) {
274            CmsGwtLog.trace(highResPath);
275            img.srcset = highResPath + " " + "2x";
276        }
277    }
278
279    /**
280     * @see org.opencms.ade.galleries.client.preview.ui.A_CmsPreviewDialog#saveChanges(com.google.gwt.user.client.Command)
281     */
282    @Override
283    public void saveChanges(Command afterSaveCommand) {
284
285        if (hasChanges()) {
286            m_propertiesTab.saveProperties(afterSaveCommand);
287        }
288    }
289
290    /**
291     * @see org.opencms.ade.galleries.client.preview.ui.A_CmsPreviewDialog#getHandler()
292     */
293    @Override
294    protected CmsImagePreviewHandler getHandler() {
295
296        return m_handler;
297    }
298
299    /**
300     * @see com.google.gwt.user.client.ui.Widget#onLoad()
301     */
302    @Override
303    protected void onLoad() {
304
305        updateClassForTab(m_tabbedPanel.getSelectedIndex());
306
307    }
308
309    /**
310     * Updates the CSS classes of the preview dialog depending on selected tab.<p>
311     *
312     * @param index the tab index
313     */
314    private void updateClassForTab(int index) {
315
316        Widget widget = m_tabbedPanel.getWidget(index);
317
318        String propertyTabStyle = STYLE_PROPERTIES_TAB_ACTIVE;
319        if (widget == m_propertiesTab) {
320            CmsImagePreviewDialog.this.addStyleName(propertyTabStyle);
321        } else {
322            CmsImagePreviewDialog.this.removeStyleName(propertyTabStyle);
323        }
324    }
325}