001/* 002 * #%L 003 * GwtMaterial 004 * %% 005 * Copyright (C) 2015 - 2017 GwtMaterialDesign 006 * %% 007 * Licensed under the Apache License, Version 2.0 (the "License"); 008 * you may not use this file except in compliance with the License. 009 * You may obtain a copy of the License at 010 * 011 * http://www.apache.org/licenses/LICENSE-2.0 012 * 013 * Unless required by applicable law or agreed to in writing, software 014 * distributed under the License is distributed on an "AS IS" BASIS, 015 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 016 * See the License for the specific language governing permissions and 017 * limitations under the License. 018 * #L% 019 */ 020package gwt.material.design.client.ui; 021 022import com.google.gwt.dom.client.Style.Unit; 023import gwt.material.design.client.base.HasType; 024import gwt.material.design.client.base.mixin.ColorsMixin; 025import gwt.material.design.client.base.mixin.CssTypeMixin; 026import gwt.material.design.client.constants.Color; 027import gwt.material.design.client.constants.CssName; 028import gwt.material.design.client.constants.ProgressType; 029import gwt.material.design.client.ui.html.Div; 030 031//@formatter:off 032 033/** 034 * Material Progress indicator to define intermediate and determinate progress bars 035 * <h3>UiBinder Usage:</h3> 036 * <p> 037 * <pre> 038 * {@code 039 * // INDETERMINATE Type 040 * <m:MaterialProgress type="INDETERMINATE" /> 041 * 042 * // DETERMINATE Type 043 * <m:MaterialProgress type="DETERMINATE" percent="80" /> 044 * } 045 * </pre> 046 * 047 * @author kevzlou7979 048 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#loader">Material Progress</a> 049 * @see <a href="https://material.io/guidelines/components/progress-activity.html#">Material Design Specification</a> 050 */ 051public class MaterialProgress extends Div implements HasType<ProgressType> { 052 053 private double percent = 0; 054 private Div fillContainer = new Div(); 055 056 private ColorsMixin<Div> fillColorMixin; 057 private CssTypeMixin<ProgressType, MaterialProgress> typeMixin; 058 059 public MaterialProgress() { 060 super(CssName.PROGRESS); 061 getElement().getStyle().setMargin(0, Unit.PX); 062 add(fillContainer); 063 setType(ProgressType.INDETERMINATE); 064 } 065 066 public MaterialProgress(ProgressType type) { 067 this(); 068 setType(type); 069 } 070 071 public MaterialProgress(ProgressType type, Double percent) { 072 this(type); 073 setPercent(percent); 074 } 075 076 @Override 077 public void setType(ProgressType type) { 078 getTypeMixin().setType(type); 079 } 080 081 @Override 082 public ProgressType getType() { 083 return getTypeMixin().getType(); 084 } 085 086 /** 087 * Get progress width as percent unit 088 */ 089 public double getPercent() { 090 return percent; 091 } 092 093 /** 094 * Set progress width as percent unit. 095 * If percent is greater than 100 then reset the progress in the maximum value (100%) 096 * If percent is less than 0 then reset the progress in the minimum value (0%) 097 */ 098 public void setPercent(double percent) { 099 100 if (percent > 100) { 101 percent = 100; 102 } 103 104 if (percent < 0) { 105 percent = 0; 106 } 107 108 this.percent = percent; 109 fillContainer.getElement().getStyle().setWidth(percent, Unit.PCT); 110 } 111 112 /** 113 * Get the progress bar color. 114 */ 115 public Color getColor() { 116 return getFillColorMixin().getBackgroundColor(); 117 } 118 119 /** 120 * Set the color of the progress bar. 121 * 122 * @param color String value of the color. 123 */ 124 public void setColor(Color color) { 125 getFillColorMixin().setBackgroundColor(color); 126 } 127 128 public Div getFillContainer() { 129 return fillContainer; 130 } 131 132 protected ColorsMixin<Div> getFillColorMixin() { 133 if (fillColorMixin == null) { 134 fillColorMixin = new ColorsMixin<>(fillContainer); 135 } 136 return fillColorMixin; 137 } 138 139 protected CssTypeMixin<ProgressType, MaterialProgress> getTypeMixin() { 140 if (typeMixin == null) { 141 typeMixin = new CssTypeMixin<>(this, fillContainer); 142 } 143 return typeMixin; 144 } 145}