001package gwt.material.design.client.ui; 002 003/* 004 * #%L 005 * GwtMaterial 006 * %% 007 * Copyright (C) 2015 - 2017 GwtMaterialDesign 008 * %% 009 * Licensed under the Apache License, Version 2.0 (the "License"); 010 * you may not use this file except in compliance with the License. 011 * You may obtain a copy of the License at 012 * 013 * http://www.apache.org/licenses/LICENSE-2.0 014 * 015 * Unless required by applicable law or agreed to in writing, software 016 * distributed under the License is distributed on an "AS IS" BASIS, 017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 018 * See the License for the specific language governing permissions and 019 * limitations under the License. 020 * #L% 021 */ 022 023import com.google.gwt.dom.client.Document; 024import gwt.material.design.client.base.MaterialWidget; 025import gwt.material.design.client.base.mixin.CssNameMixin; 026import gwt.material.design.client.constants.CssName; 027import gwt.material.design.client.constants.SpinnerColor; 028import gwt.material.design.client.ui.html.Div; 029 030//@formatter:off 031 032/** 033 * Material Spinner , is a circular loader for gwt material apps 034 * <h3>UiBinder Usage:</h3> 035 * <p> 036 * <pre> 037 * {@code 038 * <m:MaterialSpinner color="RED" /> 039 * } 040 * </pre> 041 * 042 * @author kevzlou7979 043 * @author Ben Dol 044 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#loader">Material Progress</a> 045 * @see <a href="https://material.io/guidelines/components/progress-activity.html#">Material Design Specification</a> 046 */ 047//@formatter:on 048public class MaterialSpinner extends MaterialWidget { 049 050 private Div circleClipperLeft = new Div(); 051 private Div circleClipperRight = new Div(); 052 private Div circle1 = new Div(); 053 private Div circle2 = new Div(); 054 private Div circle3 = new Div(); 055 private Div gapPatch = new Div(); 056 057 private CssNameMixin<MaterialSpinner, SpinnerColor> spinnerColorMixin; 058 059 public MaterialSpinner() { 060 super(Document.get().createDivElement(), CssName.SPINNER_LAYER); 061 } 062 063 @Override 064 protected void onLoad() { 065 super.onLoad(); 066 067 add(circleClipperLeft); 068 circleClipperLeft.add(circle1); 069 add(gapPatch); 070 gapPatch.add(circle2); 071 add(circleClipperRight); 072 circleClipperRight.add(circle3); 073 074 circleClipperLeft.setStyleName(CssName.CIRCLE_CLIPPER + " " + CssName.LEFT); 075 gapPatch.setStyleName(CssName.GAP_PATCH); 076 circleClipperRight.setStyleName(CssName.CIRCLE_CLIPPER + " " + CssName.RIGHT); 077 078 circle1.setStyleName(CssName.CIRCLE); 079 circle2.setStyleName(CssName.CIRCLE); 080 circle3.setStyleName(CssName.CIRCLE); 081 } 082 083 public MaterialSpinner(SpinnerColor spinnerColor) { 084 this(); 085 setColor(spinnerColor); 086 } 087 088 public void setColor(SpinnerColor spinnerColor) { 089 getSpinnerColorMixin().setCssName(spinnerColor); 090 } 091 092 public SpinnerColor getColor() { 093 return getSpinnerColorMixin().getCssName(); 094 } 095 096 public Div getCircleClipperLeft() { 097 return circleClipperLeft; 098 } 099 100 public Div getCircleClipperRight() { 101 return circleClipperRight; 102 } 103 104 public Div getCircle1() { 105 return circle1; 106 } 107 108 public Div getCircle2() { 109 return circle2; 110 } 111 112 public Div getCircle3() { 113 return circle3; 114 } 115 116 public Div getGapPatch() { 117 return gapPatch; 118 } 119 120 protected CssNameMixin<MaterialSpinner, SpinnerColor> getSpinnerColorMixin() { 121 if (spinnerColorMixin == null) { 122 spinnerColorMixin = new CssNameMixin<>(this); 123 } 124 return spinnerColorMixin; 125 } 126}