Untitled diff

Created Diff never expires
6 Entfernungen
Zeilen
Gesamt
Entfernt
Wörter
Gesamt
Entfernt
Um diese Funktion weiterhin zu nutzen, aktualisieren Sie auf
Diffchecker logo
Diffchecker Pro
319 Zeilen
29 Hinzufügungen
Zeilen
Gesamt
Hinzugefügt
Wörter
Gesamt
Hinzugefügt
Um diese Funktion weiterhin zu nutzen, aktualisieren Sie auf
Diffchecker logo
Diffchecker Pro
342 Zeilen
(function() {
(function() {
'use strict';
'use strict';


var hasOwn = {}.hasOwnProperty;
var hasOwn = {}.hasOwnProperty;


function classNames() {
function classNames() {
var classes = [];
var classes = [];


for (var i = 0; i < arguments.length; i++) {
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
var arg = arguments[i];
if (!arg) continue;
if (!arg) continue;


var argType = typeof arg;
var argType = typeof arg;


if (argType === 'string' || argType === 'number') {
if (argType === 'string' || argType === 'number') {
classes.push(arg);
classes.push(arg);
} else if (Array.isArray(arg)) {
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(null, arg));
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
} else if (argType === 'object') {
for (var key in arg) {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
classes.push(key);
}
}
}
}
}
}
}
}


return classes.join(' ');
return classes.join(' ');
}
}


if (typeof module !== 'undefined' && module.exports) {
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
// register as 'classnames', consistent with npm package name
define('classnames', [], function() {
define('classnames', [], function() {
return classNames;
return classNames;
});
});
} else {
} else {
window.classNames = classNames;
window.classNames = classNames;
}
}
}());
}());




var _createClass = function() {
var _createClass = function() {
function defineProperties(target, props) {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
Object.defineProperty(target, descriptor.key, descriptor);
}
}
}
}
return function(Constructor, protoProps, staticProps) {
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
return Constructor;
};
};
}();
}();


function _classCallCheck(instance, Constructor) {
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
throw new TypeError("Cannot call a class as a function");
}
}
}
}


function _possibleConstructorReturn(self, call) {
function _possibleConstructorReturn(self, call) {
if (!self) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
}


function _inherits(subClass, superClass) {
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
constructor: {
value: subClass,
value: subClass,
enumerable: false,
enumerable: false,
writable: true,
writable: true,
configurable: true
configurable: true
}
}
});
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
}


var _React = React;
var _React = React;
var Component = _React.Component;
var Component = _React.Component;
var _ReactDOM = ReactDOM;
var _ReactDOM = ReactDOM;
var render = _ReactDOM.render;
var render = _ReactDOM.render;
var _ReactMotion = ReactMotion;
var _ReactMotion = ReactMotion;
var Motion = _ReactMotion.Motion;
var Motion = _ReactMotion.Motion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var spring = _ReactMotion.spring;
var spring = _ReactMotion.spring;
var _ref = "";
var _ref = "";
var noop = _ref.noop;
var noop = _ref.noop;



/* Method to create the function that creates the link-like behaviour */
function goTo(link) {
return function() {
window.location = link;
}
}

var App = function(_Component) {
var App = function(_Component) {
_inherits(App, _Component);
_inherits(App, _Component);


function App() {
function App() {
_classCallCheck(this, App);
_classCallCheck(this, App);


var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));
var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));


_this.state = {
_this.state = {
active: false
active: false
};
};


_this._onClick = _this._onClick.bind(_this);
_this._onClick = _this._onClick.bind(_this);
return _this;
return _this;
}
}


_createClass(App, [{
_createClass(App, [{
key: "_onClick",
key: "_onClick",
value: function _onClick() {
value: function _onClick() {
this.setState({
this.setState({
active: !this.state.active
active: !this.state.active
});
});
}
}
}, {
}, {
key: "render",
key: "render",


value: function render() {
value: function render() {
var _this2 = this;
var _this2 = this;
var iconArrayOne = ["Web", "Operations"];
//var iconArrayOne = ["Web", "Operations"];
var iconArrayTwo = ["M & A", "Finance"];
//var iconArrayTwo = ["M & A", "Finance"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayTwo = ["M & A", "Finance"];
var tooltipArrayTwo = ["M & A", "Finance"];
/* Defining the new Arrays */
var iconArrayOne = [
{name: "Web", link: "http://darrellewillis.com"},
{name: "Operations", link: "http://darrellewillis.com"}
];
var iconArrayTwo = [
{name: "M & A", link: "http://darrellewillis.com"},
{name: "Finance", link: "http://darrellewillis.com"}
];




return React.createElement(
return React.createElement(
"div", {
"div", {
className: "container"
className: "container"
},
},
React.createElement(
React.createElement(
ButtonGroup,
ButtonGroup,
null,
null,
React.createElement(
React.createElement(
StaggeredMotion, {
StaggeredMotion, {
defaultStyles: [{
defaultStyles: [{
x: -45,
x: -45,
o: 0
o: 0
}, {
}, {
x: -45,
x: -45,
o: 0
o: 0
}],
}],
styles: function styles(prevInterpolatedStyles) {
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return prevInterpolatedStyles.map(function(_, i) {
return i === prevInterpolatedStyles.length - 1 ? {
return i === prevInterpolatedStyles.length - 1 ? {
x: spring(_this2.state.active ? 0 : -45, {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(_this2.state.active ? 1 : 0, {
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
} : {
} : {
x: spring(prevInterpolatedStyles[i + 1].x, {
x: spring(prevInterpolatedStyles[i + 1].x, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(prevInterpolatedStyles[i + 1].o, {
o: spring(prevInterpolatedStyles[i + 1].o, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
};
};
});
});
}
}
},
},
function(interpolatingStyles) {
function(interpolatingStyles) {
return React.createElement(
return React.createElement(
ButtonGroup,
ButtonGroup,
null,
null,
interpolatingStyles.map(function(style, i) {
interpolatingStyles.map(function(style, i) {
return React.createElement(
return React.createElement(
Button, {
Button, {
key: i,
key: i,
style: {
style: {
position: 'relative',
position: 'relative',
right: style.x,
right: style.x,
opacity: style.o,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
pointerEvents: _this2.state.active ? 'auto' : 'none'
}
},

/* Using the goTo method */
onClick: goTo(iconArrayOne[i].link)

},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayOne[i]
text: tooltipArrayOne[i]
}),
}),
iconArrayOne[i]
iconArrayOne[i].name
);
);
})
})
);
);
}
}
),
),
React.createElement(
React.createElement(
Motion, {
Motion, {
defaultStyle: {
defaultStyle: {
s: 0.675
s: 0.675
},
},
style: {
style: {
s: spring(this.state.active ? 1 : 0.675, {
s: spring(this.state.active ? 1 : 0.675, {
stiffness: 330,
stiffness: 330,
damping: 14
damping: 14
})
})
}
}
},
},
function(interpolatingStyles) {
function(interpolatingStyles) {
return React.createElement(
return React.createElement(
Button, {
Button, {
className: "button--large",
className: "button--large",
onClick: _this2._onClick,
onClick: _this2._onClick,
style: {
style: {
transform: 'scale(' + interpolatingStyles.s + ')'
transform: 'scale(' + interpolatingStyles.s + ')'
}
}
},
},
React.createElement("span", {
React.createElement("span", {
className: _this2.state.active ? 'icon active' : 'icon'
className: _this2.state.active ? 'icon active' : 'icon'
})
})
);
);
}
}
),
),
React.createElement(
React.createElement(
StaggeredMotion, {
StaggeredMotion, {
defaultStyles: [{
defaultStyles: [{
x: -45,
x: -45,
o: 0
o: 0
}, {
}, {
x: -45,
x: -45,
o: 0
o: 0
}],
}],
styles: function styles(prevInterpolatedStyles) {
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return prevInterpolatedStyles.map(function(_, i) {
return i === 0 ? {
return i === 0 ? {
x: spring(_this2.state.active ? 0 : -45, {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(_this2.state.active ? 1 : 0, {
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
} : {
} : {
x: spring(prevInterpolatedStyles[i - 1].x, {
x: spring(prevInterpolatedStyles[i - 1].x, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(prevInterpolatedStyles[i - 1].o, {
o: spring(prevInterpolatedStyles[i - 1].o, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
};
};
});
});
}
}
},
},
function(interpolatingStyles) {
function(interpolatingStyles) {
return React.createElement(
return React.createElement(
ButtonGroup,
ButtonGroup,
null,
null,
interpolatingStyles.map(function(style, i) {
interpolatingStyles.map(function(style, i) {
return React.createElement(
return React.createElement(
Button, {
Button, {
key: i,
key: i,
style: {
style: {
position: 'relative',
position: 'relative',
left: style.x,
left: style.x,
opacity: style.o,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
pointerEvents: _this2.state.active ? 'auto' : 'none'
}
},
onClick: goTo(iconArrayTwo[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayTwo[i]
text: tooltipArrayTwo[i]
}),
}),
iconArrayTwo[i]
iconArrayTwo[i].name
);
);
})
})
);
);
}
}
)
)
)
)
);
);
}
}
}]);
}]);


return App;
return App;
}(Component);
}(Component);


var Tooltip = function Tooltip(props) {
var Tooltip = function Tooltip(props) {
return React.createElement(
return React.createElement(
"span", {
"span", {
className: "tooltip"
className: "tooltip"
},
},
props.text
props.text
);
);
};
};


var ButtonGroup = function ButtonGroup(props) {
var ButtonGroup = function ButtonGroup(props) {
return React.createElement(
return React.createElement(
"div", {
"div", {
className: "button-group",
className: "button-group",
style: props.style
style: props.style
},
},
props.children
props.children
);
);
};
};


var Button = function Button(props) {
var Button = function Button(props) {
return React.createElement(
return React.createElement(
"button", {
"button", {
className: classNames('button', props.className),
className: classNames('button', props.className),
style: props.style,
style: props.style,
onClick: props.onClick || noop
onClick: props.onClick || noop
},
},
props.children
props.children
);
);
};
};
render(React.createElement(App, null), document.getElementById('root'));
render(React.createElement(App, null), document.getElementById('root'));