-
Notifications
You must be signed in to change notification settings - Fork 5
/
progressDemo.min.js
2 lines (2 loc) · 12.5 KB
/
progressDemo.min.js
1
2
webpackJsonp([24],{1009:function(t,exports){t.exports='<section class="intro-content">\n\t<h1 translate=\'{{vm.$state.current.name}}\'></h1>\n\t<p>{{\'ProgressDes\'|translate}}</p>\n</section>\n\n<section class="intro-content">\n\t<h2>{{\'Install\' | translate}}</h2>\n\t<p>{{\'Install_FancyUI\'|translate}}</p>\n</section>\n\n<div class="example-block">\n<div class="highlight" hljs hljs-language="bash">\nnpm install fancyui --save</div>\n</div>\n\n<section class="intro-content">\n\t<h2>{{\'Inject_Module\'|translate}}</h2>\n</section>\n\n<div class="example-block">\n\t<div class="highlight no-border" hljs hljs-language="javascript">\nimport progressdemoComponent from \'./progressdemo.component\';\nimport {Progress} from \'fancyui\';\nexport default angular.module(\'progressDemo\', [\n Progress.name\n])\n.component(\'progressDemo\', progressdemoComponent);</div>\n</div>\n\n\n<h2>{{\'Example\'|translate}}</h2>\n<h3>{{\'ProgressLinear\'|translate}}</h3>\n<div class="example-block">\n\t<div class="bs-example pop-confirm-example">\n\t\t<div class="col-md-6" style="float: none;">\n\t\t\t<p>\n\t\t\t\t<f-progress percent="0" type="line"></f-progress>\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<f-progress percent="80" stroke-width="8"></f-progress>\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<f-progress percent="100" status="success"></f-progress>\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<f-progress percent="60" status="exception"></f-progress>\n\t\t\t</p>\n\t\t</div>\n\t</div>\n<div class="highlight" hljs hljs-language="html">\n<f-progress percent="0" type="line"></f-progress>\n<f-progress percent="80" stroke-width="8"></f-progress>\n<f-progress percent="100" status="success"></f-progress>\n<f-progress percent="60" status="exception"></f-progress>\n</div>\n</div>\n\n<h3>{{\'ProgressCircular\'|translate}}</h3>\n<div class="example-block">\n\t<div class="bs-example pop-confirm-example">\n\t\t<div style="display: inline-block; margin-right: 10px;">\n\t\t\t<f-progress type="circle"\n\t\t\t\t\t\t percent="0"\n\t\t\t\t\t\t stroke-width="5">\n\t\t\t</f-progress>\n\t\t</div>\n\n\t\t<div style="display: inline-block; margin-right: 10px;">\n\t\t\t<f-progress type="circle"\n\t\t\t\t\t\t width="126"\n\t\t\t\t\t\t percent="25"\n\t\t\t\t\t\t stroke-width="5">\n\t\t\t</f-progress>\n\t\t</div>\n\n\t\t<div style="display: inline-block; margin-right: 10px;">\n\t\t\t<f-progress type="circle"\n\t\t\t\t\t\t percent="100"\n\t\t\t\t\t\t status="success"\n\t\t\t\t\t\t stroke-width="5">\n\t\t\t</f-progress>\n\t\t</div>\n\n\t\t<div style="display: inline-block; margin-right: 10px;">\n\t\t\t<f-progress type="circle"\n\t\t\t\t\t\t percent="50"\n\t\t\t\t\t\t status="exception"\n\t\t\t\t\t\t stroke-width="5">\n\t\t\t</f-progress>\n\t\t</div>\n\t</div>\n<div class="highlight" hljs hljs-language="html">\n<f-progress type="circle" percent="0" stroke-width="5"></f-progress>\n<f-progress type="circle" width="126" percent="25" stroke-width="5"></f-progress>\n<f-progress type="circle" percent="100" status="success" stroke-width="5"></f-progress>\n<f-progress type="circle" percent="50" status="exception" stroke-width="5"></f-progress>\n</div>\n</div>\n\n<section class="intro-content">\n\t<h2>配置项</h2>\n\t<table class="demo-table">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<th>{{\'Param\'|translate}}</th>\n\t\t\t<th>{{\'Description\'|translate}}</th>\n\t\t\t<th>{{\'Type\'|translate}}</th>\n\t\t\t<th>{{\'Optional\'|translate}}</th>\n\t\t\t<th>{{\'DefaultValue\'|translate}}</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<tr>\n\t\t\t<td>type</td>\n\t\t\t<td>{{\'ProgressType\'|translate}}</td>\n\t\t\t<td>string</td>\n\t\t\t<td>line / circle</td>\n\t\t\t<td>line</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>percent</td>\n\t\t\t<td>{{\'ProgressPercent\'|translate}}</td>\n\t\t\t<td>number</td>\n\t\t\t<td>0-100</td>\n\t\t\t<td>0</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>status</td>\n\t\t\t<td>{{\'ProgerssState\'|translate}}</td>\n\t\t\t<td>string</td>\n\t\t\t<td>success / exception</td>\n\t\t\t<td>-</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>stroke-width</td>\n\t\t\t<td>{{\'ProgressWidth\'|translate}}</td>\n\t\t\t<td>number</td>\n\t\t\t<td>-</td>\n\t\t\t<td>line:8, circle:5</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>width</td>\n\t\t\t<td>{{\'ProgressCircularWidth\'|translate}}</td>\n\t\t\t<td>number</td>\n\t\t\t<td>-</td>\n\t\t\t<td>126</td>\n\t\t</tr>\n\t\t</tbody>\n\t</table>\n</section>'},1034:function(t,exports){t.exports='<div class="ffan-progress ffan-progress-line"\n\t ng-if="vm.type == \'line\' || !vm.type"\n\t ng-class="{success: vm.status == \'success\', exception: vm.status == \'exception\'}">\n\t<div class="ffan-progress-bar">\n\t\t<div class="ffan-progress-outer" style="height: {{vm.innerStrokeWidth || 8}}px;">\n\t\t\t<div class="ffan-progress-inner" style="width:{{vm.percent}}%; height: {{vm.innerStrokeWidth || 8}}px;"></div>\n\t\t</div>\n\t</div>\n\t<span class="ffan-progress-text">{{vm.percent}}%</span>\n\t<span class="glyphicon glyphicon-ok-circle"></span>\n\t<span class="glyphicon glyphicon-remove-circle"></span>\n</div>\n\n<div class="ffan-progress ffan-progress-circle" style="width: {{vm.width || 126}}px; height: {{vm.width || 126}}px;"\n\t ng-if="vm.type === \'circle\'"\n\t ng-class="{success: vm.status == \'success\', exception: vm.status == \'exception\'}">\n\t<svg viewBox="0 0 100 100" ng-bind-html="vm.template"></svg>\n\t<span class="ffan-progress-text">{{vm.percent}}%</span>\n\t<span class="glyphicon glyphicon-ok" ng-if="vm.status == \'success\'" style="color: {{vm.strokeColor}}"></span>\n\t<span class="glyphicon glyphicon-remove" ng-if="vm.status == \'exception\'" style="color: {{vm.strokeColor}}"></span>\n</div>'},1077:function(t,exports,n){var e=n(707);"string"==typeof e&&(e=[[t.i,e,""]]);n(2)(e,{});e.locals&&(t.exports=e.locals)},1100:function(t,exports,n){var e=n(730);"string"==typeof e&&(e=[[t.i,e,""]]);n(2)(e,{});e.locals&&(t.exports=e.locals)},312:function(t,exports,n){"use strict";function e(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(exports,"__esModule",{value:!0});var s=n(880),r=e(s),o=n(940),i=e(o);exports["default"]=angular.module("progressDemo",[i["default"].name]).component("progressDemo",r["default"])},413:function(t,exports){"use strict";function n(t,n){t?console.warn(t+" will be obsoleted in next major release, please use "+n+" instead"):console.warn("This version will be obsoleted in next major release, please follow http://www.fancyui.org/ for detail")}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=function(t,e,s){var r=angular.copy(t);try{var o;!function(){var t=r.controller,i=angular.injector.$$annotate(r.controller,!0);o=angular.element(document.body).injector();var a=function(){n(e,s);for(var r=[],a=0,l=i.length;a<l;a++)r.push(o.get(i[a]));var c=Object.create(t.prototype||null);return angular.merge(c,this),t.apply(c,r),c};r.controller=a}()}catch(i){}return r}},707:function(t,exports,n){exports=t.exports=n(1)(),exports.push([t.i,"",""])},730:function(t,exports,n){exports=t.exports=n(1)(),exports.push([t.i,".ffan-progress-line .ffan-progress-bar {\n width: 100%;\n display: inline-block;\n vertical-align: middle;\n padding-right: 45px;\n margin-right: -45px;\n}\n.ffan-progress-line .ffan-progress-bar .ffan-progress-outer {\n width: 100%;\n height: 8px;\n display: inline-block;\n background-color: #f3f3f3;\n border-radius: 5px;\n vertical-align: middle;\n}\n.ffan-progress-line .ffan-progress-bar .ffan-progress-outer .ffan-progress-inner {\n background-color: #20a0ff;\n border-radius: 5px;\n}\n.ffan-progress-line .ffan-progress-bar .glyphicon-ok-circle {\n display: none;\n}\n.ffan-progress-line .ffan-progress-text {\n width: 30px;\n text-align: left;\n font-size: 1em;\n margin-left: 5px;\n vertical-align: middle;\n display: inline-block;\n font-family: Arial;\n position: relative;\n}\n.ffan-progress-line .glyphicon-ok-circle {\n display: none;\n}\n.ffan-progress-line .glyphicon-remove-circle {\n display: none;\n}\n.ffan-progress-line.success .ffan-progress-text {\n display: none;\n}\n.ffan-progress-line.success .glyphicon-ok-circle {\n display: inline-block;\n vertical-align: middle;\n font-size: 18px;\n margin-left: 5px;\n color: #13ce66;\n}\n.ffan-progress-line.success .ffan-progress-bar .ffan-progress-outer .ffan-progress-inner {\n background-color: #13ce66;\n}\n.ffan-progress-line.exception .ffan-progress-text {\n display: none;\n}\n.ffan-progress-line.exception .glyphicon-remove-circle {\n display: inline-block;\n vertical-align: middle;\n font-size: 18px;\n margin-left: 5px;\n color: #ff4949;\n}\n.ffan-progress-line.exception .ffan-progress-bar .ffan-progress-outer .ffan-progress-inner {\n background-color: #ff4949;\n}\n.ffan-progress-circle {\n position: relative;\n}\n.ffan-progress-circle .glyphicon-ok {\n display: none;\n}\n.ffan-progress-circle .glyphicon-remove {\n display: none;\n}\n.ffan-progress-circle .ffan-progress-text {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n text-align: center;\n margin: 0;\n transform: translateY(-50%);\n font-family: Arial;\n}\n.ffan-progress-circle.success .ffan-progress-text {\n display: none;\n}\n.ffan-progress-circle.success .glyphicon-ok {\n display: block;\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n text-align: center;\n margin: 0;\n font-size: 18px;\n transform: translateY(-50%);\n}\n.ffan-progress-circle.exception .ffan-progress-text {\n display: none;\n}\n.ffan-progress-circle.exception .glyphicon-remove {\n display: block;\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n text-align: center;\n margin: 0;\n font-size: 18px;\n transform: translateY(-50%);\n}\n",""])},880:function(t,exports,n){"use strict";function e(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(exports,"__esModule",{value:!0});var s=n(1009),r=e(s),o=n(881),i=e(o);n(1077),exports["default"]={restrict:"E",bindings:{},template:r["default"],controller:i["default"],controllerAs:"vm"}},881:function(t,exports){"use strict";function n(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(exports,"__esModule",{value:!0});var e=function s(t){"ngInject";n(this,s),this.$state=t};e.$inject=["$state"],exports["default"]=e},940:function(t,exports,n){"use strict";function e(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(exports,"__esModule",{value:!0});var s=n(941),r=e(s),o=n(413),i=e(o),a=angular.module("progress",[]).component("fProgress",r["default"]).component("bpProgress",(0,i["default"])(r["default"],"bp-progress","f-progress"));exports["default"]=a},941:function(t,exports,n){"use strict";function e(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(exports,"__esModule",{value:!0});var s=n(1034),r=e(s),o=n(942),i=e(o);n(1100),exports["default"]={restrict:"E",bindings:{percent:"=",status:"@",type:"@",strokeWidth:"=",width:"="},template:r["default"],controller:i["default"],controllerAs:"vm"}},942:function(t,exports){"use strict";function n(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){function t(t,n){for(var e=0;e<n.length;e++){var s=n[e];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(n,e,s){return e&&t(n.prototype,e),s&&t(n,s),n}}(),s=function(){function t(e,s){"ngInject";n(this,t),this.$sce=s,this.$document=e;var r="line"===this.type?8:5;this.innerStrokeWidth=this.strokeWidth?this.strokeWidth:r,this.calculatePath()}return t.$inject=["$document","$sce"],e(t,[{key:"calculatePath",value:function(){if("circle"==this.type){var t=50-this.innerStrokeWidth/2,n=2*Math.PI*t;switch(this.defaultColor="#e5e9f2",this.status){case"success":this.strokeColor="#13ce66";break;case"exception":this.strokeColor="#ff4949";break;default:this.strokeColor="#20a0ff"}this.pathString="M 50,50 m 0,-"+t+" a "+t+","+t+" 0 1 1 0, "+2*t+" a "+t+","+t+" 0 1 1 0,-"+2*t,this.pathStyle="stroke-dasharray: "+n+"px "+n+"px;\n\t\t\t stroke-dashoffset: "+(100-this.percent)/100*n+"px;\n\t\t\t transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease'",this.template=this.$sce.trustAsHtml('<path d="'+this.pathString+'"\n\t\t\t stroke="'+this.defaultColor+'"\n\t\t\t stroke-width="'+this.innerStrokeWidth+'"\n\t\t\t fill="none">\n\t\t\t</path>\n\t\t\t<path d="'+this.pathString+'"\n\t\t\t\t stroke-linecap="round"\n\t\t\t\t stroke="'+this.strokeColor+'"\n\t\t\t\t stroke-width="'+this.innerStrokeWidth+'"\n\t\t\t\t fill="none"\n\t\t\t\t style="'+this.pathStyle+'">\n\t\t\t</path>')}}}]),t}();exports["default"]=s}});
//# sourceMappingURL=progressDemo.min.js.map