New Incubator widget : Content_Placeholder

Author: kevzlou7979

src/main/java/gwt/material/design/incubator/client/base/constants/IncubatorCssName.java

@@ -46,4 +46,5 @@ public interface IncubatorCssName {
     String LABEL_PANEL = "label-panel";
     String JSON_TABLE = "json-table";
     String SINGLE_LANGUAGE = "single-language";
+    String CONTENT_PLACEHOLDER = "content-placeholder";
 }

src/main/java/gwt/material/design/incubator/client/placeholder/PlaceholderClientBundle.java

@@ -0,0 +1,31 @@
+/*
+ * #%L
+ * GwtMaterial
+ * %%
+ * Copyright (C) 2015 - 2017 GwtMaterialDesign
+ * %%
+ * 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.
+ * #L%
+ */
+package gwt.material.design.incubator.client.placeholder;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.TextResource;
+
+public interface PlaceholderClientBundle extends ClientBundle {
+    PlaceholderClientBundle INSTANCE = GWT.create(PlaceholderClientBundle.class);
+
+    @Source("resources/css/content-placeholder.min.css")
+    TextResource contentPlaceholderCss();
+}

src/main/java/gwt/material/design/incubator/client/placeholder/PlaceholderDebugClientBundle.java

@@ -0,0 +1,31 @@
+/*
+ * #%L
+ * GwtMaterial
+ * %%
+ * Copyright (C) 2015 - 2017 GwtMaterialDesign
+ * %%
+ * 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.
+ * #L%
+ */
+package gwt.material.design.incubator.client.placeholder;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.TextResource;
+
+public interface PlaceholderDebugClientBundle extends ClientBundle {
+    PlaceholderDebugClientBundle INSTANCE = GWT.create(PlaceholderDebugClientBundle.class);
+
+    @Source("resources/css/content-placeholder.css")
+    TextResource contentPlaceholder();
+}

src/main/java/gwt/material/design/incubator/client/placeholder/PlaceholderItem.java

@@ -0,0 +1,25 @@
+package gwt.material.design.incubator.client.placeholder;
+
+import com.google.gwt.dom.client.Document;
+import gwt.material.design.client.MaterialDesignBase;
+import gwt.material.design.client.base.MaterialWidget;
+import gwt.material.design.incubator.client.AddinsIncubator;
+import gwt.material.design.incubator.client.base.IncubatorWidget;
+import gwt.material.design.incubator.client.base.constants.IncubatorCssName;
+import gwt.material.design.incubator.client.loadingstate.LoadingStatePanel;
+
+public class PlaceholderItem extends MaterialWidget {
+
+    static {
+        IncubatorWidget.showWarning(LoadingStatePanel.class);
+        if (AddinsIncubator.isDebug()) {
+            MaterialDesignBase.injectCss(PlaceholderDebugClientBundle.INSTANCE.contentPlaceholder());
+        } else {
+            MaterialDesignBase.injectCss(PlaceholderClientBundle.INSTANCE.contentPlaceholderCss());
+        }
+    }
+
+    public PlaceholderItem() {
+        super(Document.get().createDivElement(), IncubatorCssName.CONTENT_PLACEHOLDER);
+    }
+}

src/main/java/gwt/material/design/incubator/client/placeholder/PlaceholderLoader.java

@@ -0,0 +1,47 @@
+package gwt.material.design.incubator.client.placeholder;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.user.client.ui.Widget;
+import gwt.material.design.client.base.MaterialWidget;
+
+public class PlaceholderLoader {
+
+    private int totalItems;
+    private MaterialWidget container;
+    private PlaceholderRenderer renderer;
+
+    public PlaceholderLoader setContainer(MaterialWidget container) {
+        this.container = container;
+        return this;
+    }
+
+    public PlaceholderLoader setRenderer(PlaceholderRenderer renderer) {
+        this.renderer = renderer;
+        return this;
+    }
+
+    public PlaceholderLoader setTotalItems(int totalItems) {
+        this.totalItems = totalItems;
+        return this;
+    }
+
+    public void load() {
+        if (container != null) {
+            if (renderer != null) {
+                container.clear();
+                for (int i = 0; i < totalItems; i++) {
+                    Widget widget = renderer.render();
+                    container.add(widget);
+                }
+            } else {
+                GWT.log("Widget renderer is not defined");
+            }
+        } else {
+            GWT.log("Container is not defined.", new IllegalStateException());
+        }
+    }
+
+    public void unload(){
+        container.clear();
+    }
+}

src/main/java/gwt/material/design/incubator/client/placeholder/PlaceholderRenderer.java

@@ -0,0 +1,8 @@
+package gwt.material.design.incubator.client.placeholder;
+
+import com.google.gwt.user.client.ui.Widget;
+
+public interface PlaceholderRenderer {
+
+    Widget render();
+}

src/main/resources/gwt/material/design/incubator/client/placeholder/resources/css/content-placeholder.css

@@ -0,0 +1,39 @@
+@-webkit-keyframes placeHolderShimmer {
+    0% {
+        background-position: -468px 0;
+    }
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+@keyframes placeHolderShimmer {
+    0% {
+        background-position: -468px 0;
+    }
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+.content-placeholder {
+    display: inline-block;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: placeHolderShimmer;
+    animation-name: placeHolderShimmer;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+    background: #f6f7f8;
+    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
+    background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
+    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
+    -webkit-background-size: 800px 104px;
+    background-size: 800px 104px;
+    height: inherit;
+    position: relative;
+}