);
diff --git a/src/popup/toggle.jsx b/src/popup/toggle.jsx
index f30af01..8cec909 100644
--- a/src/popup/toggle.jsx
+++ b/src/popup/toggle.jsx
@@ -1,6 +1,6 @@
var React = require('react');
var foundationApi = require('../utils/foundation-api');
-var cloneWithProps = require('react/lib/cloneWithProps');
+
var PopupToggle = React.createClass({
clickHandler: function (id, e) {
@@ -10,7 +10,7 @@ var PopupToggle = React.createClass({
render: function () {
var child = React.Children.only(this.props.children);
var id = this.props.id || foundationApi.generateUuid();
- return cloneWithProps(child, {
+ return React.cloneElement(child, {
id: id,
onClick: this.clickHandler.bind(this, id)
});
diff --git a/src/tabs/index.jsx b/src/tabs/index.jsx
index 14622c8..6f2d674 100644
--- a/src/tabs/index.jsx
+++ b/src/tabs/index.jsx
@@ -1,19 +1,20 @@
var React = require('react');
-var cloneWithProps = require('react/lib/cloneWithProps');
+
var Tabs = React.createClass({
getInitialState: function () {
return {
- selectedTab: 0,
- content: null
+ selectedTab: 0
};
},
selectTab: function (options) {
this.setState(options);
},
render: function () {
+ var content = null;
var children = React.Children.map(this.props.children, function (child, index) {
- return cloneWithProps(child, {
+ if(index === this.state.selectedTab) content = child.props.children;
+ return React.cloneElement(child, {
active: (index === this.state.selectedTab),
index: index,
selectTab: this.selectTab
@@ -22,11 +23,11 @@ var Tabs = React.createClass({
return (
);
}
});
module.exports = Tabs;
-Tabs.Tab = require('./tab');
\ No newline at end of file
+Tabs.Tab = require('./tab');
diff --git a/src/tabs/tab.jsx b/src/tabs/tab.jsx
index 9e7f737..fbd5d08 100644
--- a/src/tabs/tab.jsx
+++ b/src/tabs/tab.jsx
@@ -1,16 +1,11 @@
var React = require('react');
-var cx = require('react/lib/cx');
+var classnames = require('classnames');
var Tab = React.createClass({
- componentDidMount: function () {
- if (this.props.active) {
- this.select();
- }
- },
+
select: function () {
var options = {
- selectedTab: this.props.index,
- content: this.props.children
+ selectedTab: this.props.index
};
this.props.selectTab(options);
},
@@ -20,7 +15,7 @@ var Tab = React.createClass({
'is-active': this.props.active
};
return (
-
+
{this.props.title}
);
diff --git a/src/trigger/index.jsx b/src/trigger/index.jsx
index 5b698dc..b7ccc31 100644
--- a/src/trigger/index.jsx
+++ b/src/trigger/index.jsx
@@ -1,5 +1,5 @@
var React = require('react');
-var cloneWithProps = require('react/lib/cloneWithProps');
+var ReactDOM = require('react-dom');
var foundationApi = require('../utils/foundation-api');
var PopupToggle = require('../popup/toggle');
@@ -19,7 +19,7 @@ var Trigger = React.createClass({
return this.props.close;
} else {
var parentElement= false;
- var tempElement = this.getDOMNode().parentNode;
+ var tempElement = ReactDOM.findDOMNode(this).parentNode;
while(parentElement === false) {
if(tempElement.nodeName == 'BODY') {
parentElement = '';
@@ -59,7 +59,7 @@ var Trigger = React.createClass({
return
;
} else {
var child = React.Children.only(this.props.children);
- return cloneWithProps(child, {
+ return React.cloneElement(child, {
onClick: this.clickHandler
});
}
diff --git a/src/utils/animation.jsx b/src/utils/animation.jsx
index 2275b5d..27358d2 100644
--- a/src/utils/animation.jsx
+++ b/src/utils/animation.jsx
@@ -1,9 +1,10 @@
// some parts of code from react/lib/ReactCSSTransitionGroupChild.js
var React = require('react');
+var ReactDOM = require('react-dom');
var ReactTransitionEvents = require('react/lib/ReactTransitionEvents');
-var CSSCore = require('react/lib/CSSCore');
-var cloneWithProps = require('react/lib/cloneWithProps');
-var cx = require('react/lib/cx');
+var CSSCore = require('./csscore');
+
+var classnames = require('classnames');
var TICK = 17;
var Animation = React.createClass({
@@ -31,14 +32,14 @@ var Animation = React.createClass({
CSSCore.removeClass(node, this.props.animationOut);
},
finishAnimation: function () {
- var node = this.getDOMNode();
+ var node = ReactDOM.findDOMNode(this);
this.reset(node);
CSSCore.removeClass(node, this.props.active? '' : 'is-active');
this.reflow(node);
ReactTransitionEvents.removeEndEventListener(node, this.finishAnimation);
},
animate: function(animationClass, animationType) {
- var node = this.getDOMNode();
+ var node = ReactDOM.findDOMNode(this);
var initClass = 'ng-' + animationType;
var activeClass = initClass + '-active';
@@ -67,7 +68,7 @@ var Animation = React.createClass({
render: function () {
var child = React.Children.only(this.props.children);
var extraProps = {};
- return cloneWithProps(child, extraProps);
+ return React.cloneElement(child, extraProps);
}
});
diff --git a/src/utils/csscore.jsx b/src/utils/csscore.jsx
new file mode 100644
index 0000000..56ca51d
--- /dev/null
+++ b/src/utils/csscore.jsx
@@ -0,0 +1,25 @@
+'use strict';
+
+var SPACE = ' ';
+var RE_CLASS = /[\n\t\r]/g;
+
+var norm = function (elemClass) {
+ return (SPACE + elemClass + SPACE).replace(RE_CLASS, SPACE);
+};
+
+module.exports = {
+ addClass(elem, className) {
+ elem.className += ' ' + className;
+ },
+
+ removeClass(elem, needle) {
+ var elemClass = elem.className.trim();
+ var className = norm(elemClass);
+ needle = needle.trim();
+ needle = SPACE + needle + SPACE;
+ while (className.indexOf(needle) >= 0) {
+ className = className.replace(needle, SPACE);
+ }
+ elem.className = className.trim();
+ }
+};
\ No newline at end of file
diff --git a/src/utils/foundation-api.js b/src/utils/foundation-api.js
index 4a588b3..d51d23f 100644
--- a/src/utils/foundation-api.js
+++ b/src/utils/foundation-api.js
@@ -24,7 +24,7 @@ var foundationApi = {
return settings;
},
modifySettings: function(tree) {
- settings = angular.extend(settings, tree);
+ settings = assign(settings, tree);
return settings;
},
generateUuid: function() {
@@ -43,4 +43,4 @@ var foundationApi = {
},
};
-module.exports = foundationApi;
\ No newline at end of file
+module.exports = foundationApi;
diff --git a/src/utils/mq-helpers.js b/src/utils/mq-helpers.js
index 2ebca57..d32f481 100644
--- a/src/utils/mq-helpers.js
+++ b/src/utils/mq-helpers.js
@@ -2,10 +2,11 @@
function headerHelper(classArray) {
var i = classArray.length;
- var head = document.querySelectorAll('head');
while(i--) {
- head.append('
');
+ var meta = document.createElement('meta');
+ meta.className = classArray[i];
+ document.head.appendChild(meta);
}
return;
@@ -59,4 +60,4 @@ module.exports = {
headerHelper: headerHelper,
getStyle: getStyle,
parseStyleToObject: parseStyleToObject
-};
\ No newline at end of file
+};
diff --git a/src/utils/mq-init.js b/src/utils/mq-init.js
index 401db7a..4b087f9 100644
--- a/src/utils/mq-init.js
+++ b/src/utils/mq-init.js
@@ -1,11 +1,39 @@
var helpers = require('./mq-helpers');
var foundationApi = require('./foundation-api');
+var assign = require('object-assign');
+
+function throttleUtil(func, delay) {
+ var timer = null;
+
+ return function () {
+ var context = this, args = arguments;
+
+ if (timer === null) {
+ timer = setTimeout(function () {
+ func.apply(context, args);
+ timer = null;
+ }, delay);
+ }
+ };
+}
function init() {
var mediaQueries;
var extractedMedia;
var mediaObject;
+ var namedQueries = {
+ 'default' : 'only screen',
+ landscape : 'only screen and (orientation: landscape)',
+ portrait : 'only screen and (orientation: portrait)',
+ retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' +
+ 'only screen and (min--moz-device-pixel-ratio: 2),' +
+ 'only screen and (-o-min-device-pixel-ratio: 2/1),' +
+ 'only screen and (min-device-pixel-ratio: 2),' +
+ 'only screen and (min-resolution: 192dpi),' +
+ 'only screen and (min-resolution: 2dppx)'
+ };
+
helpers.headerHelper(['foundation-mq']);
extractedMedia = helpers.getStyle('.foundation-mq', 'font-family');
@@ -16,10 +44,12 @@ function init() {
}
foundationApi.modifySettings({
- mediaQueries: mediaQueries
+ mediaQueries: assign(mediaQueries, namedQueries)
});
- window.addEventListener('resize', u.throttle(function() {
+ window.addEventListener('resize', throttleUtil(function() {
foundationApi.publish('resize', 'window resized');
}, 50));
}
+
+module.exports = init;