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.ui;
029
030import org.opencms.ade.galleries.client.ui.css.I_CmsLayoutBundle;
031import org.opencms.ade.galleries.shared.CmsResultItemBean;
032import org.opencms.gwt.client.CmsCoreProvider;
033import org.opencms.gwt.client.dnd.I_CmsDragHandle;
034import org.opencms.gwt.client.dnd.I_CmsDraggable;
035import org.opencms.gwt.client.ui.CmsListItemWidget;
036import org.opencms.gwt.client.ui.input.CmsLabel.I_TitleGenerator;
037import org.opencms.gwt.client.util.CmsClientStringUtil;
038import org.opencms.gwt.client.util.CmsToolTipHandler;
039import org.opencms.gwt.shared.CmsAdditionalInfoBean;
040import org.opencms.gwt.shared.CmsListInfoBean;
041
042import com.google.gwt.dom.client.Element;
043import com.google.gwt.user.client.DOM;
044import com.google.gwt.user.client.ui.HTML;
045
046/**
047 * The result list item widget.<p>
048 *
049 * Enabling the image tile view.<p>
050 *
051 * @since 8.0.0
052 */
053public class CmsResultItemWidget extends CmsListItemWidget {
054
055    /**
056     * Widget containing the image(s) for a result list item..<p>
057     */
058    public class ImageTile extends HTML implements I_CmsDragHandle {
059
060        /** The draggable result list item. */
061        private I_CmsDraggable m_draggable;
062
063        /**
064         * Creates a new instance with the given content.<p>
065         *
066         * @param content the HTML content
067         */
068        public ImageTile(String content) {
069
070            super(content);
071        }
072
073        /**
074         * @see org.opencms.gwt.client.dnd.I_CmsDragHandle#getDraggable()
075         */
076        public I_CmsDraggable getDraggable() {
077
078            return m_draggable;
079        }
080
081        /**
082         * Sets the draggable widget.<p>
083         *
084         * @param draggable the draggable widget
085         */
086        public void setDraggable(I_CmsDraggable draggable) {
087
088            m_draggable = draggable;
089        }
090
091    }
092
093    /** Standard image tile scale parameter. */
094    private static final String IMAGE_SCALE_PARAM = "?__scale=t:9";
095
096    /** Tile view flag. */
097    private boolean m_hasTileView;
098
099    /** The image tile. */
100    private ImageTile m_imageTile;
101
102    /** The tool tip handler. */
103    private CmsToolTipHandler m_tooltipHandler;
104
105    /**
106     * Constructor.<p>
107     *
108     * @param infoBean the resource info bean
109     * @param showPath <code>true</code> to show the resource path in sub title
110     */
111    public CmsResultItemWidget(CmsResultItemBean infoBean, boolean showPath) {
112
113        super(infoBean);
114        if (showPath) {
115            setSubtitleLabel(infoBean.getPath());
116            setSubtitleTitle(infoBean.getSubTitle());
117        } else {
118            setSubtitleTitle(infoBean.getPath());
119        }
120
121        // if resourceType=="image" prepare for tile view
122        if (CmsResultsTab.isImagelikeType(infoBean.getType())) {
123            m_hasTileView = true;
124            // add tile view marker css classes
125            String src = infoBean.getViewLink();
126            if (src == null) {
127                src = CmsCoreProvider.get().link(infoBean.getPath());
128            }
129            String timeParam = "&time=" + System.currentTimeMillis();
130            // insert tile view image div
131            ImageTile imageTile = new ImageTile("<img src=\"" + src + getBigImageScaleParam(false)
132            // add time stamp to override browser image caching
133                + timeParam
134                + "\" "
135                + " onerror='cmsJsFunctions.handleBrokenImage(this)' "
136                + (" srcset=\"" + src + getBigImageScaleParam(true) + timeParam + " 2x" + "\" ")
137                + "class=\""
138                + I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().bigImage()
139                + "\" />"
140                // using a second image tag for the small thumbnail variant
141                + "<img src=\""
142                + src
143                + getSmallImageScaleParam(infoBean, false)
144                // add time stamp to override browser image caching
145                + timeParam
146                + "\" "
147                + " onerror='cmsJsFunctions.handleBrokenImage(this)' "
148                + (" srcset=\"" + src + getSmallImageScaleParam(infoBean, true) + timeParam + " 2x" + "\" ")
149                + " class=\""
150                + I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().smallImage()
151                + "\" />"
152                + "<div class='"
153                + I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().expiredImageOverlay()
154                + "' />");
155            imageTile.setStyleName(I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().imageTile());
156            if (CmsClientStringUtil.checkIsPathOrLinkToSvg(infoBean.getPath())) {
157                imageTile.addStyleName(I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().svg());
158            }
159            m_imageTile = imageTile;
160            m_tooltipHandler = new CmsToolTipHandler(imageTile, generateTooltipHtml(infoBean));
161            m_contentPanel.insert(imageTile, 0);
162        }
163
164    }
165
166    private static Element appendDom(Element parent, String name) {
167
168        Element child = DOM.createElement(name);
169        parent.appendChild(child);
170        return child;
171    }
172
173    /**
174     * Gets the image tile.<p>
175     *
176     * @return the image tile
177     */
178    public ImageTile getImageTile() {
179
180        return m_imageTile;
181    }
182
183    /**
184     * Indicates wther there is a tile view available for this widget.<p>
185     *
186     * @return <code>true</code> if a tiled view is available
187     */
188    public boolean hasTileView() {
189
190        return m_hasTileView;
191    }
192
193    /**
194     * Initializes the title attribute of the subtitle line.<p>
195     *
196     * @param subtitleTitle the value to set
197     */
198    public void setSubtitleTitle(final String subtitleTitle) {
199
200        m_subtitle.setTitle(subtitleTitle);
201        m_subtitle.setTitleGenerator(new I_TitleGenerator() {
202
203            public String getTitle(String originalText) {
204
205                return subtitleTitle;
206            }
207        });
208    }
209
210    /**
211     * @see com.google.gwt.user.client.ui.Composite#onDetach()
212     */
213    @Override
214    protected void onDetach() {
215
216        if (m_tooltipHandler != null) {
217            m_tooltipHandler.clearShowing();
218        }
219        super.onDetach();
220    }
221
222    /**
223     * Generates the HTML for the item tool-tip.<p>
224     *
225     * @param infoBean the item info
226     *
227     * @return the generated HTML
228     */
229    private String generateTooltipHtml(CmsListInfoBean infoBean) {
230
231        Element root = DOM.createElement("div");
232        appendDom(appendDom(root, "p"), "b").setInnerText(CmsClientStringUtil.shortenString(infoBean.getTitle(), 70));
233        if (infoBean.hasAdditionalInfo()) {
234            for (CmsAdditionalInfoBean additionalInfo : infoBean.getAdditionalInfo()) {
235                appendDom(root, "p").setInnerText(
236                    additionalInfo.getName()
237                        + ":\u00a0"
238                        + CmsClientStringUtil.shortenString(additionalInfo.getValue(), 45));
239            }
240        }
241        return root.getInnerHTML();
242    }
243
244    /**
245     * Returns the scale parameter for big thumbnail images.<p>
246     *
247     * @return the scale parameter
248     */
249    private String getBigImageScaleParam(boolean highres) {
250
251        int m = highres ? 2 : 1;
252        String suffix = highres ? ",q:85" : "";
253        return IMAGE_SCALE_PARAM
254            + ",w:"
255            + (m * I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().bigImageWidth())
256            + ",h:"
257            + (m * I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().bigImageHeight())
258            + suffix;
259    }
260
261    /**
262     * Returns the scale parameter for small thumbnail images.<p>
263     *
264     * @param infoBean the resource info
265     *
266     * @return the scale parameter
267     */
268    private String getSmallImageScaleParam(CmsResultItemBean infoBean, boolean highres) {
269
270        int m = highres ? 2 : 1;
271        return IMAGE_SCALE_PARAM
272            + ",w:"
273            + (m * I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().smallImageWidth())
274            + ",h:"
275            + (m * I_CmsLayoutBundle.INSTANCE.galleryResultItemCss().smallImageHeight());
276    }
277}