zuck.js
Version:
A javascript library that lets you add stories EVERYWHERE.
354 lines (328 loc) • 12.4 kB
HTML
<html>
<head>
<title>zuck.js</title>
<link rel="icon" href="ICON.png" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0"
/>
<!-- demo styles -->
<link rel="stylesheet" href="demo/style.css" />
<!-- lib styles -->
<link rel="stylesheet" href="dist/zuck.css" />
<!-- lib skins -->
<link rel="stylesheet" href="dist/skins/snapgram.css" />
<link rel="stylesheet" href="dist/skins/vemdezap.css" />
<link rel="stylesheet" href="dist/skins/facesnap.css" />
<link rel="stylesheet" href="dist/skins/snapssenger.css" />
</head>
<body>
<div id="root"></div>
<!-- Too much time needed to setup webpack and blablabla -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="dist/zuck.js"></script>
<script src="demo/script.js"></script>
<script type="text/babel">
class Demo extends React.Component {
render() {
return (
<div>
<h1 id="header"> </h1>
<a
href="https://ramon.codes/projects/zuck.js"
target="_blank"
className="disclaimer"
>
<img src="ICON.png" alt="zuck.js logo" />
<p>
This a demonstration of <strong>zuck.js</strong> javascript
library.
</p>
<p>
Not associated with Facebook, Instagram, WhatsApp or Snapchat.
</p>
</a>
<Stories />
<div className="skin">
Choose your theme:{' '}
<select
id="skin"
onChange={(event) => changeSkin(event.target.value)}
>
<option value="Snapgram">
Snapgram (without fullscreen)
</option>
<option value="FaceSnap">FaceSnap (with fullscreen)</option>
<option value="VemDeZAP">VemDeZAP (timeline + arrows)</option>
<option value="Snapssenger">
Snapssenger (with previews)
</option>
</select>
</div>
</div>
);
}
}
</script>
<script type="text/babel">
class Stories extends React.Component {
constructor(props) {
super(props);
// React ^16.3
// this.storiesElement = React.createRef();
this.storiesElement = null;
this.storiesApi = null;
this.state = {
stories: [
{
id: 'ramon',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/1.jpg',
name: 'Ramon',
time: timestamp(),
items: [
{
id: 'ramon-1',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/1.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/1.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'ramon-2',
type: 'video',
length: 0,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/2.mp4',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/2.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'ramon-3',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/3.png',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/3.png',
link: 'https://ramon.codes',
linkText: 'Visit my Portfolio',
time: timestamp()
}
]
},
{
id: 'gorillaz',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/2.jpg',
name: 'Gorillaz',
time: timestamp(),
items: [
{
id: 'gorillaz-1',
type: 'video',
length: 0,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/4.mp4',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/4.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'gorillaz-2',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/5.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/5.jpg',
link: '',
linkText: false,
time: timestamp()
}
]
},
{
id: 'ladygaga',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/3.jpg',
name: 'Lady Gaga',
time: timestamp(),
items: [
{
id: 'ladygaga-1',
type: 'photo',
length: 5,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/6.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/6.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'ladygaga-2',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/7.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/7.jpg',
link: 'http://ladygaga.com',
linkText: false,
time: timestamp()
}
]
},
{
id: 'starboy',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/4.jpg',
name: 'The Weeknd',
time: timestamp(),
items: [
{
id: 'starboy-1',
type: 'photo',
length: 5,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/8.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/8.jpg',
link: '',
linkText: false,
time: timestamp()
}
]
},
{
id: 'riversquomo',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/5.jpg',
name: 'Rivers Cuomo',
time: timestamp(),
items: [
{
id: 'riverscuomo-1',
type: 'photo',
length: 10,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/9.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/9.jpg',
link: '',
linkText: false,
time: timestamp()
}
]
}
]
};
}
componentDidMount() {
let currentSkin = getCurrentSkin(); // from demo
this.storiesApi = Zuck(this.storiesElement, {
backNative: true,
previousTap: true,
skin: currentSkin['name'],
autoFullScreen: currentSkin['params']['autoFullScreen'],
avatars: currentSkin['params']['avatars'],
paginationArrows: currentSkin['params']['paginationArrows'],
list: currentSkin['params']['list'],
cubeEffect: currentSkin['params']['cubeEffect'],
localStorage: true,
stories: this.state.stories,
reactive: true,
callbacks: {
onDataUpdate: function (currentState, callback) {
this.setState(
(state) => {
state.stories = [...currentState];
return state;
},
() => {
callback();
}
);
}.bind(this)
}
});
}
render() {
const timelineItems = [];
this.state.stories.forEach((story, storyId) => {
const storyItems = [];
story.items.forEach((storyItem) => {
storyItems.push(
<li
key={storyItem.id}
data-id={storyItem.id}
data-time={storyItem.time}
className={storyItem.seen ? 'seen' : ''}
>
<a
href={storyItem.src}
data-type={storyItem.type}
data-length={storyItem.length}
data-link={storyItem.link}
data-linkText={storyItem.linkText}
>
<img src={storyItem.preview} />
</a>
</li>
);
});
let arrayFunc = story.seen ? 'push' : 'unshift';
timelineItems[arrayFunc](
<div
className={story.seen ? 'story seen' : 'story'}
key={story.id}
data-id={story.id}
data-last-updated={story.lastUpdated}
data-photo={story.photo}
>
<a className="item-link" href={story.link}>
<span className="item-preview">
<img src={story.photo} />
</span>
<span
className="info"
itemProp="author"
itemScope=""
itemType="http://schema.org/Person"
>
<strong className="name" itemProp="name">
{story.name}
</strong>
<span className="time">
{(new Date(story.lastUpdated * 1000).toLocaleString())}
</span>
</span>
</a>
<ul className="items">{storyItems}</ul>
</div>
);
});
return (
<div>
<div
ref={(node) => (this.storiesElement = node)}
id="stories-react"
className="storiesWrapper"
>
{timelineItems}
</div>
</div>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render(<Demo />, document.getElementById('root'));
</script>
</body>
</html>