javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

simple jquery

Browse Source
This commit is contained in:
Adam Bradley
2013-09-30 13:36:27 -05:00
parent 0874928cb3
commit 79d7600be4
8 changed files with 2548 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
dist/ionic-simple.js vendored
View File

@ -7,8 +7,16 @@
ionic.Components.push(instance);
};
ionic.get = function(elementId) {
return ionic.component( document.getElementById(elementId) );
};
ionic.component = function(el) {
if(el) {
if(el.component) {
// this element has already been initialized as a component
return el.component;
}
for(var x = 0; x < ionic.Components.length; x++) {
if( ionic.Components[x].isComponent(el) ) {
// this element is a component, init its view
@ -27,14 +35,20 @@
while(el) {
// climb up the tree looking to see if the target
// is or is in a registered component
component = ionic.component(el);
if(component) {
component[eventName] && component[eventName](e.gesture.srcEvent);
return;
// is or is in a registered component. If its already
// been set that its NOT a component don't bother.
if(el.isComponent !== false) {
component = ionic.component(el);
if(component) {
component[eventName] && component[eventName](e.gesture.srcEvent);
return;
}
// not sure if this element is a component yet,
// keep climbing up the tree and check again
// remember that this element is not a component so
// it can skip this process in the future
el.isComponent = false;
}
// not sure if this element is a component yet,
// keep climbing up the tree and check again
el = el.parentElement;
}
}
@ -92,6 +106,68 @@
});
})(ionic);;
(function(window, document, ionic) {
ionic.fn = {
val: function() {
var ret, x;
for(x = 0; x < this.length; x++) {
ret = this[x].component.val.apply(this[x].component, arguments);
}
return ret;
}
}
if (window.jQuery) {
// if jQuery is present then it should be the default
jq = window.jQuery;
// extend the methods which are in ionic.fn and in jQuery.fn
for(var name in ionic.fn) {
var jQueryFn = jq.fn[name];
jq.fn[name] = function() {
var
x,
ret; // if incase this isn't an ionic component
for(x = 0; x < this.length; x++) {
ionic.component( this[x] );
if( this[x].component ) {
ret = this[x].component[name].apply(this[x].component, arguments);
}
}
// if this isn't an ionic component, run the usual jQuery fn
return jQueryFn.apply(this, arguments);
}
}
} else {
// jQuery is not already present, so use our 'lil version instead
jq = {
init: function(selector, context) {
context = context || document;
var
x,
dom = context.querySelectorAll(selector) || [];
for(x = 0; x < dom.length; x++) {
ionic.component( dom[x] );
}
dom.__proto__ = ionic.fn;
dom.selector = selector || '';
return dom;
}
};
$ = function(selector, context) {
return jq.init(selector, context);
}
}
})(this, document, ionic);
;
(function(ionic) {
ionic.registerComponent({
@ -105,7 +181,7 @@
if(el) {
// check if we've already created a Toggle instance for this element
if(!el._instance) {
if(!el.component) {
// find all the required elements that make up a toggle
var opts = {
@ -116,18 +192,13 @@
};
// validate its a well formed toggle with the required pieces
if(!opts.checkbox || !opts.track || !opts.handle) {
return;
}
// ensure the handle is draggable
opts.handle.draggable = true;
if(!opts.checkbox || !opts.track || !opts.handle) return;
// initialize an instance of a Toggle
el._instance = new ionic.views.Toggle(opts);
el.component = new ionic.views.Toggle(opts);
}
return el._instance;
return el.component;
}
}

15
dist/ionic.js vendored
View File

@ -1971,12 +1971,25 @@ ionic.views.TabBar.prototype = {
this.checkbox = opts.checkbox;
this.track = opts.track;
this.handle = opts.handle;
// remember that this element, and all its children are apart of a component
// and assign the component instance to each element so the lookups
// only has to go through this process just once
this.el.isComponent = true;
this.track.component = this;
this.track.isComponent = true;
this.handle.component = this;
this.handle.isComponent = true;
// ensure the handle is draggable
this.handle.draggable = true;
};
ionic.views.Toggle.prototype = {
tap: function(e) {
e.stopPropa
return false;
},
val: function(value) {

2337
dist/ionicIcons.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

28
ext/simple/init.js
View File

@ -7,8 +7,16 @@
ionic.Components.push(instance);
};
ionic.get = function(elementId) {
return ionic.component( document.getElementById(elementId) );
};
ionic.component = function(el) {
if(el) {
if(el.component) {
// this element has already been initialized as a component
return el.component;
}
for(var x = 0; x < ionic.Components.length; x++) {
if( ionic.Components[x].isComponent(el) ) {
// this element is a component, init its view
@ -27,14 +35,20 @@
while(el) {
// climb up the tree looking to see if the target
// is or is in a registered component
component = ionic.component(el);
if(component) {
component[eventName] && component[eventName](e.gesture.srcEvent);
return;
// is or is in a registered component. If its already
// been set that its NOT a component don't bother.
if(el.isComponent !== false) {
component = ionic.component(el);
if(component) {
component[eventName] && component[eventName](e.gesture.srcEvent);
return;
}
// not sure if this element is a component yet,
// keep climbing up the tree and check again
// remember that this element is not a component so
// it can skip this process in the future
el.isComponent = false;
}
// not sure if this element is a component yet,
// keep climbing up the tree and check again
el = el.parentElement;
}
}

62
ext/simple/selector.js Normal file
View File

@ -0,0 +1,62 @@
(function(window, document, ionic) {
ionic.fn = {
val: function() {
var ret, x;
for(x = 0; x < this.length; x++) {
ret = this[x].component.val.apply(this[x].component, arguments);
}
return ret;
}
}
if (window.jQuery) {
// if jQuery is present then it should be the default
jq = window.jQuery;
// extend the methods which are in ionic.fn and in jQuery.fn
for(var name in ionic.fn) {
var jQueryFn = jq.fn[name];
jq.fn[name] = function() {
var
x,
ret; // if incase this isn't an ionic component
for(x = 0; x < this.length; x++) {
ionic.component( this[x] );
if( this[x].component ) {
ret = this[x].component[name].apply(this[x].component, arguments);
}
}
// if this isn't an ionic component, run the usual jQuery fn
return jQueryFn.apply(this, arguments);
}
}
} else {
// jQuery is not already present, so use our 'lil version instead
jq = {
init: function(selector, context) {
context = context || document;
var
x,
dom = context.querySelectorAll(selector) || [];
for(x = 0; x < dom.length; x++) {
ionic.component( dom[x] );
}
dom.__proto__ = ionic.fn;
dom.selector = selector || '';
return dom;
}
};
$ = function(selector, context) {
return jq.init(selector, context);
}
}
})(this, document, ionic);

13
ext/simple/toggle.js
View File

@ -12,7 +12,7 @@
if(el) {
// check if we've already created a Toggle instance for this element
if(!el._instance) {
if(!el.component) {
// find all the required elements that make up a toggle
var opts = {
@ -23,18 +23,13 @@
};
// validate its a well formed toggle with the required pieces
if(!opts.checkbox || !opts.track || !opts.handle) {
return;
}
// ensure the handle is draggable
opts.handle.draggable = true;
if(!opts.checkbox || !opts.track || !opts.handle) return;
// initialize an instance of a Toggle
el._instance = new ionic.views.Toggle(opts);
el.component = new ionic.views.Toggle(opts);
}
return el._instance;
return el.component;
}
}

15
js/views/toggleView.js
View File

@ -6,12 +6,25 @@
this.checkbox = opts.checkbox;
this.track = opts.track;
this.handle = opts.handle;
// remember that this element, and all its children are apart of a component
// and assign the component instance to each element so the lookups
// only has to go through this process just once
this.el.isComponent = true;
this.track.component = this;
this.track.isComponent = true;
this.handle.component = this;
this.handle.isComponent = true;
// ensure the handle is draggable
this.handle.draggable = true;
};
ionic.views.Toggle.prototype = {
tap: function(e) {
e.stopPropa
return false;
},
val: function(value) {

17
test/input-toggle.html
View File

@ -30,7 +30,7 @@
</li>
<li class="list-item">
Do Not Disturb
<label class="toggle">
<label class="toggle" id="doNotDisturb">
<input type="checkbox" name="doNotDisturb" checked="checked">
<div class="track">
<div class="handle"></div>
@ -56,16 +56,16 @@
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
<!-- for testing only -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#btnTest1").click(function(){
var toggle = ionic.component( document.getElementById("airplaneMode") );
var toggle = $("#airplaneMode");
if( toggle.val() === true ) {
toggle.val(false);
} else {
@ -74,13 +74,14 @@
});
$("#btnTest2").click(function(){
var toggle = $("[name='doNotDisturb']")
if( toggle.prop("checked") ) {
toggle.prop("checked", false);
var toggle = $("#doNotDisturb");
val = toggle.val();
return
if( toggle.val() === true ) {
toggle.val(false);
} else {
toggle.prop("checked", true);
toggle.val(true);
}
return;
});
</script>