Skip to content
This repository was archived by the owner on Jul 3, 2022. It is now read-only.

Added support for including icons in the generation ion-items. Closed #1 #2

Merged
webdevius merged 1 commit into from
Apr 2, 2016
Merged

Added support for including icons in the generation ion-items. Closed #1 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@ I couldn't find an existing plugin to handle duration inputs, but this was large
4. You may use it immediately in your templates with the default configuration:

```html
<ionic-durationpicker idp-label="Mile Run Duration" idp-output="mileRunDuration">
<ionic-durationpicker idp-label="Mile Run Duration" idp-label-icon="ion-clock" idp-output="mileRunDuration">
</ionic-durationpicker>
```
`idp-label` is the string that labels the generated `ion-item`. And the variable you pass into `idp-output` will be used to store the duration input in seconds format. You may also use it to initialize a duration from an integer representing a number of seconds. Be wary though, currently there are no checks against what's already in that variable.
`idp-label` is the string that labels the generated `ion-item`. If you would like to include an ionicon in your ion-item, then you can pass the icon name into `idp-label-icon`. And the variable you pass into `idp-output` will be used to store the duration input in seconds format. You may also use it to initialize a duration from an integer representing a number of seconds. Be wary though, currently there are no checks against what's already in that variable.

For example, if your `$scope.mileRunDuration` had a value of `527`, then the above snippet will result with:

Expand Down Expand Up @@ -79,8 +79,8 @@ I couldn't find an existing plugin to handle duration inputs, but this was large
Then pass it into the plugin's directive:

```html
<ionic-durationpicker idp-label="Mile Run Duration" idp-config="mileRunConfig"
idp-output="mileRunDuration">
<ionic-durationpicker idp-label="Mile Run Duration" idp-label-icon="ion-clock"
idp-config="mileRunConfig" idp-output="mileRunDuration">
</ionic-durationpicker>
```

Expand All @@ -97,7 +97,7 @@ You can configure the plugin by passing an object containing any of the followin

Property | Type (_Default Value_) | Description
:--------------:|:-------------------------------------------:|-------------------------------------------
rtl | Boolean (_false_) | For Right-to-left languages, flips the button to the left and pulls the label to the right in the generated `ion-item`.
rtl | Boolean (_false_) | For Right-to-left languages, flips the button to the left and pulls the label to the right along with the icon in the generated `ion-item`.
inputButtonType | String (_'button-outline button-positive'_) | CSS class(es) for the button that shows the popup.
format | String (_'MM:SS'_) | Duration Format. **Default value is currently the _only_ supported format.**
secondsStep | Number (_1_) | Amount to increment/decrement seconds by on popup control arrow clicks.
Expand Down
25 changes: 20 additions & 5 deletions dist/ionic-durationpicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
cacheTemplates.$inject = ["$templateCache"];

function cacheTemplates($templateCache) {
$templateCache.put("idp-item.html","<ion-item ng-class=getItemDirectionClasses()>{{idpLabel}} <button class=button ng-class=getInputButtonType() ng-click=showPopup()>{{prettyFormatDuration()}}</button></ion-item>");
$templateCache.put("idp-item.html","<ion-item ng-class=getItemClasses()><i ng-if=idpLabelIcon class=\"icon {{idpLabelIcon}}\"></i> {{idpLabel}} <button class=button ng-class=getInputButtonType() ng-click=showPopup()>{{prettyFormatDuration()}}</button></ion-item>");

$templateCache.put("popup-minutes-seconds.html","<div class=row><span class=\"idp-control col col-offset-20 col-25\"><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"increment(\'minutes\')\" on-hold=\"updateOnHold(\'minutes\', \'increment\')\" on-release=releaseHold()><i class=\"icon ion-chevron-up\"></i></button><div ng-bind=popupDuration.minutes class=idp-unit-box></div><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"decrement(\'minutes\')\" on-hold=\"updateOnHold(\'minutes\', \'decrement\')\" on-release=releaseHold()><i class=\"icon ion-chevron-down\"></i></button></span> <label class=\"col col-10 idp-unit-separator\">:</label> <span class=\"idp-control col col-25\"><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"increment(\'seconds\')\" on-hold=\"updateOnHold(\'seconds\', \'increment\')\" on-release=releaseHold()><i class=\"icon ion-chevron-up\"></i></button><div ng-bind=popupDuration.seconds class=idp-unit-box></div><button type=button class=\"button button-clear button-small idp-control-arrow\" ng-click=\"decrement(\'seconds\')\" on-hold=\"updateOnHold(\'seconds\', \'decrement\')\" on-release=releaseHold()><i class=\"icon ion-chevron-down\"></i></button></span></div>");
}
Expand Down Expand Up @@ -38,6 +38,7 @@
scope: {
idpConfig: '=',
idpLabel: '@',
idpLabelIcon: '@',
idpOutput: '='
},
link: linkFunc
Expand All @@ -55,6 +56,9 @@
if (typeof scope.idpLabel === 'undefined' || scope.idpLabel === null) {
scope.idpLabel = 'Duration';
}
if (typeof scope.idpLabelIcon === 'undefined' || scope.idpLabel === null) {
scope.idpLabelIcon = false;
}
if (typeof scope.idpOutput === 'undefined' || scope.idpOutput === null) {
scope.idpOutput = 0;
}
Expand All @@ -77,7 +81,7 @@
};

scope.showPopup = _showPopup;
scope.getItemDirectionClasses = _getItemDirectionClasses;
scope.getItemClasses = _getItemClasses;
scope.getInputButtonType = _getInputButtonType;
scope.increment = _increment;
scope.decrement = _decrement;
Expand Down Expand Up @@ -159,12 +163,23 @@
});
}

function _getItemDirectionClasses() {
function _getItemClasses() {
var itemClasses = '';

// Don't forget a white-space after each appended class
if (config.rtl) {
return 'idp-dir-rtl item-button-left';
itemClasses += 'idp-dir-rtl item-button-left ';
} else {
return 'item-button-right';
itemClasses += 'item-button-right ';
}

if (scope.idpLabelIcon && config.rtl) {
itemClasses += 'item-icon-right ';
} else if (scope.idpLabelIcon) {
itemClasses += 'item-icon-left ';
}

return itemClasses;
}

function _getInputButtonType() {
Expand Down
2 changes: 1 addition & 1 deletion dist/ionic-durationpicker.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 19 additions & 4 deletions src/directives.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
scope: {
idpConfig: '=',
idpLabel: '@',
idpLabelIcon: '@',
idpOutput: '='
},
link: linkFunc
Expand All @@ -31,6 +32,9 @@
if (typeof scope.idpLabel === 'undefined' || scope.idpLabel === null) {
scope.idpLabel = 'Duration';
}
if (typeof scope.idpLabelIcon === 'undefined' || scope.idpLabel === null) {
scope.idpLabelIcon = false;
}
if (typeof scope.idpOutput === 'undefined' || scope.idpOutput === null) {
scope.idpOutput = 0;
}
Expand All @@ -53,7 +57,7 @@
};

scope.showPopup = _showPopup;
scope.getItemDirectionClasses = _getItemDirectionClasses;
scope.getItemClasses = _getItemClasses;
scope.getInputButtonType = _getInputButtonType;
scope.increment = _increment;
scope.decrement = _decrement;
Expand Down Expand Up @@ -135,12 +139,23 @@
});
}

function _getItemDirectionClasses() {
function _getItemClasses() {
var itemClasses = '';

// Don't forget a white-space after each appended class
if (config.rtl) {
return 'idp-dir-rtl item-button-left';
itemClasses += 'idp-dir-rtl item-button-left ';
} else {
return 'item-button-right';
itemClasses += 'item-button-right ';
}

if (scope.idpLabelIcon && config.rtl) {
itemClasses += 'item-icon-right ';
} else if (scope.idpLabelIcon) {
itemClasses += 'item-icon-left ';
}

return itemClasses;
}

function _getInputButtonType() {
Expand Down
Loading