github/meteor-ionic
2
0
Fork 0
mirror of https://github.com/donl/meteor-ionic.git synced 2026-06-30 06:12:08 -06:00
Code Issues Projects Packages Wiki Activity Actions

initial ionKeyboard implementation and support for custom modal templates. Fixes #59 and #12

Browse source
This commit is contained in:
Nick Wientge 2015-02-09 19:31:35 -08:00
parent d88915ef4f
commit 015341d019
4 changed files with 102 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

80
components/ionKeyboard/ionKeyboard.js Normal file
View file

@ -0,0 +1,80 @@
IonKeyboard = {
close: function () {
if (Meteor.isCordova) {
cordova.plugins.Keyboard.close();
}
},
show: function () {
if (Meteor.isCordova) {
cordova.plugins.Keyboard.show();
}
},
hideKeyboardAccessoryBar: function () {
if (Meteor.isCordova) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
},
showKeyboardAccessoryBar: function () {
if (Meteor.isCordova) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
}
},
disableScroll: function () {
if (Meteor.isCordova) {
cordova.plugins.Keyboard.disableScroll(true);
}
},
enableScroll: function () {
if (Meteor.isCordova) {
cordova.plugins.Keyboard.disableScroll(false);
}
}
};
window.addEventListener('native.keyboardshow', function (event) {
var keyboardHeight = event.keyboardHeight;
IonKeyboard.disableScroll();
// Hide any elements that want to be hidden
$('.hide-on-keyboard-open').hide();
// Attach any elements that want to be attached
$('[data-keyboard-attach]').each(function (index, el) {
$(el).data('ionkeyboard.bottom', $(el).css('bottom'));
$(el).css({bottom: keyboardHeight});
});
$('.content.overflow-scroll').each(function (index, el) {
$(el).data('ionkeyboard.bottom', $(el).css('bottom'));
$(el).css({bottom: keyboardHeight});
});
$('.content.overflow-scroll').on('focus', 'input,textarea', function(event) {
var scrollTo = ($(this).offset().top - $(event.delegateTarget).offset().top) - 10
$(event.delegateTarget).animate({
scrollTop: scrollTo
})
});
});
window.addEventListener('native.keyboardhide', function (event) {
IonKeyboard.enableScroll();
// Show any elements that were hidden
$('.hide-on-keyboard-open').show();
// Detach any elements that were attached
$('[data-keyboard-attach]').each(function (index, el) {
$(el).css({bottom: $(el).data('ionkeyboard.bottom')});
});
// Reset the content areas
$('.content.overflow-scroll').each(function (index, el) {
$(el).css({bottom: $(el).data('ionkeyboard.bottom')});
});
});

25
components/ionModal/ionModal.html
View file

@ -3,18 +3,21 @@
<div class="modal-wrapper">
<div class="modal">
<div class="bar bar-header bar-stable">
<h2 class="{{titleClass}}">{{title}}</h2>
{{#if closeText}}
<button data-dismiss="modal" class="button button-positive button-clear">{{closeText}}</button>
{{else}}
<button data-dismiss="modal" class="button button-icon"><i class="icon ion-ios-close-empty"></i></button>
{{/if}}
</div>
<div class="content has-header overflow-scroll">
{{#if customTemplate}}
{{> UI.contentBlock}}
</div>
{{else}}
<div class="bar bar-header bar-stable">
<h2 class="{{titleClass}}">{{title}}</h2>
{{#if closeText}}
<button data-dismiss="modal" class="button button-positive button-clear">{{closeText}}</button>
{{else}}
<button data-dismiss="modal" class="button button-icon"><i class="icon ion-ios-close-empty"></i></button>
{{/if}}
</div>
<div class="content has-header overflow-scroll">
{{> UI.contentBlock}}
</div>
{{/if}}
</div>
</div>

5
components/ionModal/ionModal.js
View file

@ -64,6 +64,7 @@ IonModal = {
Template.ionModal.created = function () {
this.data = this.data || {};
this.customTemplate = this.data.customTemplate || false;
this.title = this.data.title;
this.title = this.data.closeText;
this.focusFirstInput = this.data.focusFirstInput || true;
@ -116,6 +117,10 @@ Template.ionModal.helpers({
} else {
return 'slide-in-up';
}
},
customTemplate: function () {
return this.customTemplate;
}
});

3
package.js
View file

@ -43,6 +43,8 @@ Package.onUse(function(api) {
"components/ionItem/ionItem.html",
"components/ionItem/ionItem.js",
"components/ionKeyboard/ionKeyboard.js",
"components/ionList/ionList.html",
"components/ionList/ionList.js",
@ -106,6 +108,7 @@ Package.onUse(function(api) {
api.export("IonActionSheet");
api.export("IonBackdrop");
api.export("IonHeaderBar");
api.export("IonKeyboard");
api.export("IonLoading");
api.export("IonModal");
api.export("IonNavigation");