Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
dist
node_modules
.publish/
_site
public/.*
npm-debug*
Gemfile.lock
4 changes: 4 additions & 0 deletions Gemfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# A sample Gemfile
source "https://rubygems.org"

gem 'github-pages'
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"jsnext:main": "src/index.js",
"scripts": {
"test": "gulp build && karma start --single-run && mocha --harmony -t 600000 test/selenium/index.js",
"prepublish": "gulp build"
"prepublish": "gulp build",
"public": "gulp build && bundle install && cd public && jekyll serve"
},
"author": "Square, Inc.",
"license": "Apache-2.0",
Expand Down
42 changes: 37 additions & 5 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,18 +81,50 @@ <h3>NumberFormatter</h3>
The <code>NumberFormatter</code> provides formatting for all kinds of numbers, percentages, currencies, etc.
</p>

<h4>Currency</h4>

<div class="demo">
{% highlight html %}
<input type="text" id="number-currency">
{% endhighlight %}

{% highlight javascript %}
var field = new FieldKit.TextField(document.getElementById('number-currency'));
field.setFormatter(new FieldKit.NumberFormatter()
.setNumberStyle(FieldKit.NumberFormatter.Style.CURRENCY)
.setLocale('en-US')
.setCountryCode('US')
.setCurrencyCode('USD')
);
field.setValue((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);

field.setDelegate({
textFieldDidEndEditing: function() {
field.setValue(field.value() || field.text());
}
});
{% endhighlight %}
</div>

<h4>Percentage</h4>

<div class="demo">
{% highlight html %}
<input type="text" id="number">
<input type="text" id="number-percent">
{% endhighlight %}

{% highlight javascript %}
var field = new FieldKit.TextField(document.getElementById('number'));
var field = new FieldKit.TextField(document.getElementById('number-percent'));
field.setFormatter(new FieldKit.NumberFormatter()
.setNumberStyle(Math.random() < 0.5 ?
FieldKit.NumberFormatter.Style.PERCENT :
FieldKit.NumberFormatter.Style.CURRENCY));
.setNumberStyle(FieldKit.NumberFormatter.Style.PERCENT)
);
field.setValue((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);

field.setDelegate({
textFieldDidEndEditing: function() {
field.setValue(field.value() || field.text());
}
});
{% endhighlight %}
</div>
</section>
Expand Down
Loading