# HG changeset patch # User Anton Shestakov <av6@dwimlabs.net> # Date 1480701066 -28800 # Node ID 0fe8137e0f76dc46b3350cb5dc090e427ffd1535 # Parent 94a41f59d566189f236d32e93f693488daec8443 templates: add rv-style-* binder, use it for progress bar diff -r 94a41f59d566 -r 0fe8137e0f76 coffee/progress.coffee --- a/coffee/progress.coffee Sat Dec 03 01:32:49 2016 +0800 +++ b/coffee/progress.coffee Sat Dec 03 01:51:06 2016 +0800 @@ -3,9 +3,6 @@ @listenTo(@model, 'change:progress', @updateProgress) @render() - getStyle: (progress) => - "width: #{ progress ? 0 }%;" - updateProgress: -> switch @model.get('progress') when 0 @@ -20,7 +17,7 @@ , 600 render: -> - @rivet = rivets.bind(@el, model: @model, view: this) + @rivet = rivets.bind(@el, model: @model, view: @) @ remove: -> diff -r 94a41f59d566 -r 0fe8137e0f76 coffee/rivets.coffee --- a/coffee/rivets.coffee Sat Dec 03 01:32:49 2016 +0800 +++ b/coffee/rivets.coffee Sat Dec 03 01:51:06 2016 +0800 @@ -12,6 +12,10 @@ obj.set(keypath, value) +rivets.binders['style-*'] = (el, value) -> + el.style[@args[0]] = value ? '' + + rivets.formatters['first-letter'] = (value) -> value?.charAt?(0) ? ' ' @@ -50,3 +54,7 @@ rivets.formatters['from-now'] = (value) -> if value? then value.fromNow() else '' + + +rivets.formatters['percent'] = (value) -> + "#{ value ? 0 }%" diff -r 94a41f59d566 -r 0fe8137e0f76 index.html --- a/index.html Sat Dec 03 01:32:49 2016 +0800 +++ b/index.html Sat Dec 03 01:51:06 2016 +0800 @@ -25,7 +25,7 @@ </head> <body> <div class="uk-progress uk-progress-mini page-progress" data-app="progress" rv-hide="model:progress | eq undefined"> - <div class="uk-progress-bar" rv-style="model:progress | fn view.getStyle"></div> + <div class="uk-progress-bar" rv-style-width="model:progress | percent"></div> </div> <div class="smart-container" data-step="noscript"> diff -r 94a41f59d566 -r 0fe8137e0f76 js/progress.js --- a/js/progress.js Sat Dec 03 01:32:49 2016 +0800 +++ b/js/progress.js Sat Dec 03 01:51:06 2016 +0800 @@ -1,14 +1,12 @@ // Generated by CoffeeScript 1.10.0 (function() { - var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, - extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, + var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, hasProp = {}.hasOwnProperty; window.Tram.ProgressApp = (function(superClass) { extend(ProgressApp, superClass); function ProgressApp() { - this.getStyle = bind(this.getStyle, this); return ProgressApp.__super__.constructor.apply(this, arguments); } @@ -17,10 +15,6 @@ return this.render(); }; - ProgressApp.prototype.getStyle = function(progress) { - return "width: " + (progress != null ? progress : 0) + "%;"; - }; - ProgressApp.prototype.updateProgress = function() { switch (this.model.get('progress')) { case 0: diff -r 94a41f59d566 -r 0fe8137e0f76 js/progress.js.map --- a/js/progress.js.map Sat Dec 03 01:32:49 2016 +0800 +++ b/js/progress.js.map Sat Dec 03 01:51:06 2016 +0800 @@ -6,5 +6,5 @@ "coffee/progress.coffee" ], "names": [], - "mappings": ";AAAA;AAAA,MAAA;;;;EAAM,MAAM,CAAC,IAAI,CAAC;;;;;;;;0BAChB,UAAA,GAAY,SAAA;MACV,IAAC,CAAA,QAAD,CAAU,IAAC,CAAA,KAAX,EAAkB,iBAAlB,EAAqC,IAAC,CAAA,cAAtC;aACA,IAAC,CAAA,MAAD,CAAA;IAFU;;0BAIZ,QAAA,GAAU,SAAC,QAAD;aACR,SAAA,GAAS,oBAAE,WAAW,CAAb,CAAT,GAAyB;IADjB;;0BAGV,cAAA,GAAgB,SAAA;AACd,cAAO,IAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,CAAP;AAAA,aACO,CADP;iBAEI,UAAA,CAAW,CAAA,SAAA,KAAA;mBAAA,SAAA;cACT,IAAG,KAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,CAAA,KAA0B,CAA7B;uBACE,KAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,EAAuB,EAAvB,EADF;;YADS;UAAA,CAAA,CAAA,CAAA,IAAA,CAAX,EAGE,GAHF;AAFJ,aAMO,GANP;iBAOI,UAAA,CAAW,CAAA,SAAA,KAAA;mBAAA,SAAA;cACT,IAAG,KAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,CAAA,KAA0B,GAA7B;uBACE,KAAC,CAAA,KAAK,CAAC,KAAP,CAAa,UAAb,EADF;;YADS;UAAA,CAAA,CAAA,CAAA,IAAA,CAAX,EAGE,GAHF;AAPJ;IADc;;0BAahB,MAAA,GAAQ,SAAA;MACN,IAAC,CAAA,KAAD,GAAS,MAAM,CAAC,IAAP,CAAY,IAAC,CAAA,EAAb,EAAiB;QAAA,KAAA,EAAO,IAAC,CAAA,KAAR;QAAe,IAAA,EAAM,IAArB;OAAjB;aACT;IAFM;;0BAIR,MAAA,GAAQ,SAAA;MACN,IAAC,CAAA,KAAK,CAAC,MAAP,CAAA;aACA,yCAAA,SAAA;IAFM;;;;KAzB4B,QAAQ,CAAC;AAA/C" + "mappings": ";AAAA;AAAA,MAAA;;;EAAM,MAAM,CAAC,IAAI,CAAC;;;;;;;0BAChB,UAAA,GAAY,SAAA;MACV,IAAC,CAAA,QAAD,CAAU,IAAC,CAAA,KAAX,EAAkB,iBAAlB,EAAqC,IAAC,CAAA,cAAtC;aACA,IAAC,CAAA,MAAD,CAAA;IAFU;;0BAIZ,cAAA,GAAgB,SAAA;AACd,cAAO,IAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,CAAP;AAAA,aACO,CADP;iBAEI,UAAA,CAAW,CAAA,SAAA,KAAA;mBAAA,SAAA;cACT,IAAG,KAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,CAAA,KAA0B,CAA7B;uBACE,KAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,EAAuB,EAAvB,EADF;;YADS;UAAA,CAAA,CAAA,CAAA,IAAA,CAAX,EAGE,GAHF;AAFJ,aAMO,GANP;iBAOI,UAAA,CAAW,CAAA,SAAA,KAAA;mBAAA,SAAA;cACT,IAAG,KAAC,CAAA,KAAK,CAAC,GAAP,CAAW,UAAX,CAAA,KAA0B,GAA7B;uBACE,KAAC,CAAA,KAAK,CAAC,KAAP,CAAa,UAAb,EADF;;YADS;UAAA,CAAA,CAAA,CAAA,IAAA,CAAX,EAGE,GAHF;AAPJ;IADc;;0BAahB,MAAA,GAAQ,SAAA;MACN,IAAC,CAAA,KAAD,GAAS,MAAM,CAAC,IAAP,CAAY,IAAC,CAAA,EAAb,EAAiB;QAAA,KAAA,EAAO,IAAC,CAAA,KAAR;QAAe,IAAA,EAAM,IAArB;OAAjB;aACT;IAFM;;0BAIR,MAAA,GAAQ,SAAA;MACN,IAAC,CAAA,KAAK,CAAC,MAAP,CAAA;aACA,yCAAA,SAAA;IAFM;;;;KAtB4B,QAAQ,CAAC;AAA/C" } \ No newline at end of file diff -r 94a41f59d566 -r 0fe8137e0f76 js/rivets.js --- a/js/rivets.js Sat Dec 03 01:32:49 2016 +0800 +++ b/js/rivets.js Sat Dec 03 01:51:06 2016 +0800 @@ -18,6 +18,10 @@ } }; + rivets.binders['style-*'] = function(el, value) { + return el.style[this.args[0]] = value != null ? value : ''; + }; + rivets.formatters['first-letter'] = function(value) { var ref; return (ref = value != null ? typeof value.charAt === "function" ? value.charAt(0) : void 0 : void 0) != null ? ref : ' '; @@ -80,6 +84,10 @@ } }; + rivets.formatters['percent'] = function(value) { + return (value != null ? value : 0) + "%"; + }; + }).call(this); //# sourceMappingURL=rivets.js.map diff -r 94a41f59d566 -r 0fe8137e0f76 js/rivets.js.map --- a/js/rivets.js.map Sat Dec 03 01:32:49 2016 +0800 +++ b/js/rivets.js.map Sat Dec 03 01:51:06 2016 +0800 @@ -6,5 +6,5 @@ "coffee/rivets.coffee" ], "names": [], - "mappings": ";AAAA;AAAA,MAAA;;;EAAA,MAAM,CAAC,QAAS,CAAA,GAAA,CAAhB,GACE;IAAA,OAAA,EAAS,SAAC,GAAD,EAAM,OAAN,EAAe,QAAf;aACP,GAAG,CAAC,EAAJ,CAAO,SAAA,GAAY,OAAnB,EAA4B,QAA5B;IADO,CAAT;IAGA,SAAA,EAAW,SAAC,GAAD,EAAM,OAAN,EAAe,QAAf;aACT,GAAG,CAAC,GAAJ,CAAQ,SAAA,GAAY,OAApB,EAA6B,QAA7B;IADS,CAHX;IAMA,GAAA,EAAK,SAAC,GAAD,EAAM,OAAN;aACH,GAAG,CAAC,GAAJ,CAAQ,OAAR;IADG,CANL;IASA,GAAA,EAAK,SAAC,GAAD,EAAM,OAAN,EAAe,KAAf;aACH,GAAG,CAAC,GAAJ,CAAQ,OAAR,EAAiB,KAAjB;IADG,CATL;;;EAaF,MAAM,CAAC,UAAW,CAAA,cAAA,CAAlB,GAAoC,SAAC,KAAD;AAClC,QAAA;0HAAoB;EADc;;EAIpC,MAAM,CAAC,UAAW,CAAA,WAAA,CAAlB,GAAiC,SAAC,KAAD;AAC/B,QAAA;IAAA,MAAA,GAAS;IACT,oBAAG,KAAK,CAAE,eAAV;AACE,WAAS,qFAAT;QACE,MAAA,IAAU,KAAK,CAAC,UAAN,CAAiB,CAAjB;AADZ,OADF;;AAGA,WAAO;EALwB;;EAQjC,MAAM,CAAC,UAAW,CAAA,IAAA,CAAlB,GAA0B,SAAC,KAAD,EAAQ,EAAR;AACxB,WAAO,EAAA,CAAG,KAAH;EADiB;;EAI1B,MAAM,CAAC,UAAW,CAAA,MAAA,CAAlB,GAA4B,SAAA;AAC1B,QAAA;IAD2B,sBAAO;IAClC,IAAG,aAAS,OAAT,EAAA,KAAA,MAAH;aAAyB,MAAzB;KAAA,MAAA;aAAoC,GAApC;;EAD0B;;EAI5B,MAAM,CAAC,UAAW,CAAA,IAAA,CAAlB,GAA0B,SAAC,CAAD,EAAI,CAAJ;WACxB,CAAA,KAAK;EADmB;;EAI1B,MAAM,CAAC,UAAW,CAAA,KAAA,CAAlB,GAA2B,SAAC,CAAD,EAAI,CAAJ;WACzB,WAAA,IAAO,aAAK,CAAL,EAAA,CAAA;EADkB;;EAI3B,MAAM,CAAC,UAAW,CAAA,aAAA,CAAlB,GAAmC,SAAC,KAAD,EAAQ,MAAR;IACjC,IAAG,aAAH;aAAe,KAAK,CAAC,MAAN,CAAa,MAAb,EAAf;KAAA,MAAA;aAAyC,GAAzC;;EADiC;;EAInC,MAAM,CAAC,UAAW,CAAA,UAAA,CAAlB,GAAgC,SAAC,KAAD;IAC9B,IAAG,aAAH;aAAe,KAAK,CAAC,WAAN,CAAA,EAAf;KAAA,MAAA;aAAwC,GAAxC;;EAD8B;;EAIhC,MAAM,CAAC,UAAW,CAAA,UAAA,CAAlB,GAAgC,SAAC,KAAD;IAC9B,IAAG,aAAH;aAAe,KAAK,CAAC,OAAN,CAAA,EAAf;KAAA,MAAA;aAAoC,GAApC;;EAD8B;AAlDhC" + "mappings": ";AAAA;AAAA,MAAA;;;EAAA,MAAM,CAAC,QAAS,CAAA,GAAA,CAAhB,GACE;IAAA,OAAA,EAAS,SAAC,GAAD,EAAM,OAAN,EAAe,QAAf;aACP,GAAG,CAAC,EAAJ,CAAO,SAAA,GAAY,OAAnB,EAA4B,QAA5B;IADO,CAAT;IAGA,SAAA,EAAW,SAAC,GAAD,EAAM,OAAN,EAAe,QAAf;aACT,GAAG,CAAC,GAAJ,CAAQ,SAAA,GAAY,OAApB,EAA6B,QAA7B;IADS,CAHX;IAMA,GAAA,EAAK,SAAC,GAAD,EAAM,OAAN;aACH,GAAG,CAAC,GAAJ,CAAQ,OAAR;IADG,CANL;IASA,GAAA,EAAK,SAAC,GAAD,EAAM,OAAN,EAAe,KAAf;aACH,GAAG,CAAC,GAAJ,CAAQ,OAAR,EAAiB,KAAjB;IADG,CATL;;;EAaF,MAAM,CAAC,OAAQ,CAAA,SAAA,CAAf,GAA4B,SAAC,EAAD,EAAK,KAAL;WAC1B,EAAE,CAAC,KAAM,CAAA,IAAC,CAAA,IAAK,CAAA,CAAA,CAAN,CAAT,mBAAqB,QAAQ;EADH;;EAI5B,MAAM,CAAC,UAAW,CAAA,cAAA,CAAlB,GAAoC,SAAC,KAAD;AAClC,QAAA;0HAAoB;EADc;;EAIpC,MAAM,CAAC,UAAW,CAAA,WAAA,CAAlB,GAAiC,SAAC,KAAD;AAC/B,QAAA;IAAA,MAAA,GAAS;IACT,oBAAG,KAAK,CAAE,eAAV;AACE,WAAS,qFAAT;QACE,MAAA,IAAU,KAAK,CAAC,UAAN,CAAiB,CAAjB;AADZ,OADF;;AAGA,WAAO;EALwB;;EAQjC,MAAM,CAAC,UAAW,CAAA,IAAA,CAAlB,GAA0B,SAAC,KAAD,EAAQ,EAAR;AACxB,WAAO,EAAA,CAAG,KAAH;EADiB;;EAI1B,MAAM,CAAC,UAAW,CAAA,MAAA,CAAlB,GAA4B,SAAA;AAC1B,QAAA;IAD2B,sBAAO;IAClC,IAAG,aAAS,OAAT,EAAA,KAAA,MAAH;aAAyB,MAAzB;KAAA,MAAA;aAAoC,GAApC;;EAD0B;;EAI5B,MAAM,CAAC,UAAW,CAAA,IAAA,CAAlB,GAA0B,SAAC,CAAD,EAAI,CAAJ;WACxB,CAAA,KAAK;EADmB;;EAI1B,MAAM,CAAC,UAAW,CAAA,KAAA,CAAlB,GAA2B,SAAC,CAAD,EAAI,CAAJ;WACzB,WAAA,IAAO,aAAK,CAAL,EAAA,CAAA;EADkB;;EAI3B,MAAM,CAAC,UAAW,CAAA,aAAA,CAAlB,GAAmC,SAAC,KAAD,EAAQ,MAAR;IACjC,IAAG,aAAH;aAAe,KAAK,CAAC,MAAN,CAAa,MAAb,EAAf;KAAA,MAAA;aAAyC,GAAzC;;EADiC;;EAInC,MAAM,CAAC,UAAW,CAAA,UAAA,CAAlB,GAAgC,SAAC,KAAD;IAC9B,IAAG,aAAH;aAAe,KAAK,CAAC,WAAN,CAAA,EAAf;KAAA,MAAA;aAAwC,GAAxC;;EAD8B;;EAIhC,MAAM,CAAC,UAAW,CAAA,UAAA,CAAlB,GAAgC,SAAC,KAAD;IAC9B,IAAG,aAAH;aAAe,KAAK,CAAC,OAAN,CAAA,EAAf;KAAA,MAAA;aAAoC,GAApC;;EAD8B;;EAIhC,MAAM,CAAC,UAAW,CAAA,SAAA,CAAlB,GAA+B,SAAC,KAAD;WAC3B,iBAAE,QAAQ,CAAV,CAAA,GAAa;EADc;AA1D/B" } \ No newline at end of file diff -r 94a41f59d566 -r 0fe8137e0f76 register.html --- a/register.html Sat Dec 03 01:32:49 2016 +0800 +++ b/register.html Sat Dec 03 01:51:06 2016 +0800 @@ -19,7 +19,7 @@ </head> <body> <div class="uk-progress uk-progress-mini page-progress" data-app="progress" rv-hide="model:progress | eq undefined"> - <div class="uk-progress-bar" rv-style="model:progress | fn view.getStyle"></div> + <div class="uk-progress-bar" rv-style-width="model:progress | percent"></div> </div> <div class="smart-container">