src/main/java/com/googlesource/gerrit/plugins/imagare/client/UploadedImagesPanel.java

// Copyright (C) 2014 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.googlesource.gerrit.plugins.imagare.client;

import com.google.gerrit.plugin.client.Plugin;
import com.google.gerrit.plugin.client.rpc.NoContent;
import com.google.gerrit.plugin.client.rpc.RestApi;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwtexpui.clippy.client.CopyableLabel;
import com.google.gwtexpui.safehtml.client.SafeHtmlBuilder;

public class UploadedImagesPanel extends FlowPanel {

  private Label uploadedImagesLabel;
  private PopupPanel popup;

  UploadedImagesPanel() {
    setStyleName("imagare-uploaded-images-panel");

    uploadedImagesLabel = new Label("Uploaded Images:");
    uploadedImagesLabel.setStyleName("imagare-uploaded-images-label");
    uploadedImagesLabel.setVisible(false);
    add(uploadedImagesLabel);

    popup = new PopupPanel();
    popup.setVisible(false);
  }

  void add(final String url) {
    uploadedImagesLabel.setVisible(true);
    insert(new ImagePreview(url), 1);
  }

  private class ImagePreview extends VerticalPanel {
    private final Image img;
    private final Image fullScreenIcon;
    private Timer fullScreenIconHideTimer;
    private final Image deleteIcon;
    private Timer deleteIconHideTimer;

    ImagePreview(final String url) {
      setStyleName("imagare-uploaded-image-preview-panel");

      int revIndex = url.indexOf("/rev/");
      int projectIndex = url.lastIndexOf('/', revIndex - 1);
      int fileIndex = url.indexOf('/', revIndex + 5);
      final String project = url.substring(projectIndex + 1, revIndex);
      final String ref = url.substring(revIndex + 5, fileIndex);
      final String fileName = url.substring(fileIndex + 1).replaceAll("\\+", " ");
      Label fileNameLabel = new Label(fileName);
      fileNameLabel.setStyleName("imagare-uploaded-image-title");
      add(fileNameLabel);

      img = new Image(url);
      img.setStyleName("imagare-uploaded-image-preview");
      add(img);

      fullScreenIcon = new Image(ImagarePlugin.RESOURCES.fullScreen());
      fullScreenIcon.setStyleName("imagare-fullscreen-icon");
      fullScreenIcon.setTitle("Full Screen");
      fullScreenIcon.setVisible(false);
      add(fullScreenIcon);

      deleteIcon = new Image(ImagarePlugin.RESOURCES.delete());
      deleteIcon.setStyleName("imagare-delete-icon");
      deleteIcon.setTitle("Delete Image");
      deleteIcon.setVisible(false);
      add(deleteIcon);

      img.addMouseOverHandler(
          new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
              if (!popup.isVisible()) {
                Image previewImg = new Image(url);
                previewImg.setStyleName("imagare-image-popup");
                previewImg
                    .getElement()
                    .setAttribute(
                        "style",
                        previewImg.getElement().getAttribute("style")
                            + "position: absolute; top: "
                            + (img.getAbsoluteTop() + img.getHeight() + 20)
                            + "px; "
                            + "left: "
                            + img.getAbsoluteLeft()
                            + "px;");
                popup.add(previewImg);

                popup.show();
                popup.setVisible(true);
              }

              cancelHideFullScreenIcon();
              fullScreenIcon
                  .getElement()
                  .setAttribute(
                      "style",
                      fullScreenIcon.getElement().getAttribute("style")
                          + "position: absolute; top: "
                          + img.getAbsoluteTop()
                          + "px; "
                          + "left: "
                          + img.getAbsoluteLeft()
                          + "px;");
              fullScreenIcon.setVisible(true);

              cancelHideDeleteIcon();
              deleteIcon
                  .getElement()
                  .setAttribute(
                      "style",
                      deleteIcon.getElement().getAttribute("style")
                          + "position: absolute; top: "
                          + img.getAbsoluteTop()
                          + "px; "
                          + "left: "
                          + (img.getAbsoluteLeft() + fullScreenIcon.getWidth())
                          + "px;");
              deleteIcon.setVisible(true);
            }
          });
      img.addMouseOutHandler(
          new MouseOutHandler() {
            @Override
            public void onMouseOut(MouseOutEvent event) {
              popup.setVisible(false);
              popup.clear();
              hideFullScreenIcon();
              hideDeleteIcon();
            }
          });

      fullScreenIcon.addMouseOverHandler(
          new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
              cancelHideFullScreenIcon();
              cancelHideDeleteIcon();
            }
          });

      fullScreenIcon.addMouseOutHandler(
          new MouseOutHandler() {
            @Override
            public void onMouseOut(MouseOutEvent event) {
              hideFullScreenIcon();
              hideDeleteIcon();
            }
          });

      fullScreenIcon.addClickHandler(
          new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
              Window.open(url, "_blank", "");
              popup.setVisible(false);
              popup.clear();
            }
          });

      deleteIcon.addMouseOverHandler(
          new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
              cancelHideFullScreenIcon();
              cancelHideDeleteIcon();
            }
          });

      deleteIcon.addMouseOutHandler(
          new MouseOutHandler() {
            @Override
            public void onMouseOut(MouseOutEvent event) {
              hideDeleteIcon();
              hideFullScreenIcon();
            }
          });

      deleteIcon.addClickHandler(
          new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
              new ConfirmationDialog(
                      "Delete Image",
                      new SafeHtmlBuilder()
                          .append("Are you sure you want to delete '" + fileName + "'?")
                          .br()
                          .br(),
                      new ConfirmationCallback() {
                        @Override
                        public void onOk() {
                          new RestApi("projects")
                              .view(project)
                              .view(Plugin.get().getPluginName(), "images")
                              .view(ref)
                              .delete(
                                  new AsyncCallback<NoContent>() {
                                    @Override
                                    public void onSuccess(NoContent info) {
                                      UploadedImagesPanel.this.remove(ImagePreview.this);
                                      uploadedImagesLabel.setVisible(
                                          UploadedImagesPanel.this.getWidgetCount() > 1);

                                      popup.setVisible(false);
                                      popup.clear();
                                    }

                                    @Override
                                    public void onFailure(Throwable caught) {
                                      // never invoked
                                    }
                                  });
                        }
                      })
                  .center();
            }
          });

      CopyableLabel copyLabel = new CopyableLabel(url);
      copyLabel.setStyleName("imagare-uploaded-copy-label");
      add(copyLabel);
    }

    private void hideFullScreenIcon() {
      fullScreenIconHideTimer =
          new Timer() {
            @Override
            public void run() {
              fullScreenIcon.setVisible(false);
            }
          };
      fullScreenIconHideTimer.schedule(20);
    }

    private void cancelHideFullScreenIcon() {
      if (fullScreenIconHideTimer != null) {
        fullScreenIconHideTimer.cancel();
        fullScreenIconHideTimer = null;
      }
    }

    private void hideDeleteIcon() {
      deleteIconHideTimer =
          new Timer() {
            @Override
            public void run() {
              deleteIcon.setVisible(false);
            }
          };
      deleteIconHideTimer.schedule(20);
    }

    private void cancelHideDeleteIcon() {
      if (deleteIconHideTimer != null) {
        deleteIconHideTimer.cancel();
        deleteIconHideTimer = null;
      }
    }
  }
}