Diff
checker
Text
Text
Bilder
Dokumente
Excel
Ordner
Legal
Enterprise
Desktop-App
Preise
Einloggen
Diffchecker Desktop herunterladen
Texte vergleichen
Finde den Unterschied zwischen zwei Textdateien
Werkzeuge
Verlauf
Live-Editor
Leerzeichen ausblenden
Gleiches ausblenden
Zeilenumbruch aus
Ansicht
Zweispaltig
Einspaltig
Vergleichsgenauigkeit
Intelligent
Wort
Zeichen
Textstile
Darstellung ändern
Syntaxhervorhebung
Syntax auswählen
Ignorieren
Text umwandeln
Zur ersten Änderung
Eingabe bearbeiten
Diffchecker Desktop
Der sicherste Weg, Diffchecker zu nutzen. Hol dir die Desktop-App: Deine Diffs verlassen nie deinen Computer!
Desktop holen
Untitled diff
Erstellt
vor 10 Jahren
Diff läuft nie ab
Löschen
Exportieren
Teilen
Erklären
1 Entfernung
Zeilen
Gesamt
Entfernt
Zeichen
Gesamt
Entfernt
Um diese Funktion weiterhin zu nutzen, aktualisiere auf
Diff
checker
Pro
Preise anzeigen
319 Zeilen
Kopieren
29 Hinzufügungen
Zeilen
Gesamt
Hinzugefügt
Zeichen
Gesamt
Hinzugefügt
Um diese Funktion weiterhin zu nutzen, aktualisiere auf
Diff
checker
Pro
Preise anzeigen
342 Zeilen
Kopieren
(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;
Kopieren
Kopiert
Kopieren
Kopiert
/* 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;
Kopieren
Kopiert
Kopieren
Kopiert
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"];
Kopieren
Kopiert
Kopieren
Kopiert
/* 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'
Kopieren
Kopiert
Kopieren
Kopiert
}
},
/* Using the goTo method */
onClick: goTo(iconArrayOne[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayOne[i]
text: tooltipArrayOne[i]
}),
}),
Kopieren
Kopiert
Kopieren
Kopiert
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'
Kopieren
Kopiert
Kopieren
Kopiert
}
}
,
onClick: goTo(iconArrayTwo[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayTwo[i]
text: tooltipArrayTwo[i]
}),
}),
Kopieren
Kopiert
Kopieren
Kopiert
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'));
Gespeicherte Diffs
Originaltext
Datei öffnen
(function() { 'use strict'; var hasOwn = {}.hasOwnProperty; function classNames() { var classes = []; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; if (!arg) continue; var argType = typeof arg; if (argType === 'string' || argType === 'number') { classes.push(arg); } else if (Array.isArray(arg)) { classes.push(classNames.apply(null, arg)); } else if (argType === 'object') { for (var key in arg) { if (hasOwn.call(arg, key) && arg[key]) { classes.push(key); } } } } return classes.join(' '); } if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) { // register as 'classnames', consistent with npm package name define('classnames', [], function() { return classNames; }); } else { window.classNames = classNames; } }()); var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _React = React; var Component = _React.Component; var _ReactDOM = ReactDOM; var render = _ReactDOM.render; var _ReactMotion = ReactMotion; var Motion = _ReactMotion.Motion; var StaggeredMotion = _ReactMotion.StaggeredMotion; var spring = _ReactMotion.spring; var _ref = ""; var noop = _ref.noop; var App = function(_Component) { _inherits(App, _Component); function App() { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this)); _this.state = { active: false }; _this._onClick = _this._onClick.bind(_this); return _this; } _createClass(App, [{ key: "_onClick", value: function _onClick() { this.setState({ active: !this.state.active }); } }, { key: "render", value: function render() { var _this2 = this; var iconArrayOne = ["Web", "Operations"]; var iconArrayTwo = ["M & A", "Finance"]; var tooltipArrayOne = ["Web", "Operations"]; var tooltipArrayTwo = ["M & A", "Finance"]; return React.createElement( "div", { className: "container" }, React.createElement( ButtonGroup, null, React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === prevInterpolatedStyles.length - 1 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i + 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i + 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', right: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' } }, React.createElement(Tooltip, { text: tooltipArrayOne[i] }), iconArrayOne[i] ); }) ); } ), React.createElement( Motion, { defaultStyle: { s: 0.675 }, style: { s: spring(this.state.active ? 1 : 0.675, { stiffness: 330, damping: 14 }) } }, function(interpolatingStyles) { return React.createElement( Button, { className: "button--large", onClick: _this2._onClick, style: { transform: 'scale(' + interpolatingStyles.s + ')' } }, React.createElement("span", { className: _this2.state.active ? 'icon active' : 'icon' }) ); } ), React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === 0 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i - 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i - 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', left: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' } }, React.createElement(Tooltip, { text: tooltipArrayTwo[i] }), iconArrayTwo[i] ); }) ); } ) ) ); } }]); return App; }(Component); var Tooltip = function Tooltip(props) { return React.createElement( "span", { className: "tooltip" }, props.text ); }; var ButtonGroup = function ButtonGroup(props) { return React.createElement( "div", { className: "button-group", style: props.style }, props.children ); }; var Button = function Button(props) { return React.createElement( "button", { className: classNames('button', props.className), style: props.style, onClick: props.onClick || noop }, props.children ); }; render(React.createElement(App, null), document.getElementById('root'));
Bearbeitung
Datei öffnen
(function() { 'use strict'; var hasOwn = {}.hasOwnProperty; function classNames() { var classes = []; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; if (!arg) continue; var argType = typeof arg; if (argType === 'string' || argType === 'number') { classes.push(arg); } else if (Array.isArray(arg)) { classes.push(classNames.apply(null, arg)); } else if (argType === 'object') { for (var key in arg) { if (hasOwn.call(arg, key) && arg[key]) { classes.push(key); } } } } return classes.join(' '); } if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) { // register as 'classnames', consistent with npm package name define('classnames', [], function() { return classNames; }); } else { window.classNames = classNames; } }()); var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _React = React; var Component = _React.Component; var _ReactDOM = ReactDOM; var render = _ReactDOM.render; var _ReactMotion = ReactMotion; var Motion = _ReactMotion.Motion; var StaggeredMotion = _ReactMotion.StaggeredMotion; var spring = _ReactMotion.spring; var _ref = ""; 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) { _inherits(App, _Component); function App() { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this)); _this.state = { active: false }; _this._onClick = _this._onClick.bind(_this); return _this; } _createClass(App, [{ key: "_onClick", value: function _onClick() { this.setState({ active: !this.state.active }); } }, { key: "render", value: function render() { var _this2 = this; //var iconArrayOne = ["Web", "Operations"]; //var iconArrayTwo = ["M & A", "Finance"]; var tooltipArrayOne = ["Web", "Operations"]; 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( "div", { className: "container" }, React.createElement( ButtonGroup, null, React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === prevInterpolatedStyles.length - 1 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i + 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i + 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', right: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' }, /* Using the goTo method */ onClick: goTo(iconArrayOne[i].link) }, React.createElement(Tooltip, { text: tooltipArrayOne[i] }), iconArrayOne[i].name ); }) ); } ), React.createElement( Motion, { defaultStyle: { s: 0.675 }, style: { s: spring(this.state.active ? 1 : 0.675, { stiffness: 330, damping: 14 }) } }, function(interpolatingStyles) { return React.createElement( Button, { className: "button--large", onClick: _this2._onClick, style: { transform: 'scale(' + interpolatingStyles.s + ')' } }, React.createElement("span", { className: _this2.state.active ? 'icon active' : 'icon' }) ); } ), React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === 0 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i - 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i - 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', left: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' }, onClick: goTo(iconArrayTwo[i].link) }, React.createElement(Tooltip, { text: tooltipArrayTwo[i] }), iconArrayTwo[i].name ); }) ); } ) ) ); } }]); return App; }(Component); var Tooltip = function Tooltip(props) { return React.createElement( "span", { className: "tooltip" }, props.text ); }; var ButtonGroup = function ButtonGroup(props) { return React.createElement( "div", { className: "button-group", style: props.style }, props.children ); }; var Button = function Button(props) { return React.createElement( "button", { className: classNames('button', props.className), style: props.style, onClick: props.onClick || noop }, props.children ); }; render(React.createElement(App, null), document.getElementById('root'));
Unterschied finden