Skip to content

Commit 8e20c30

Browse files
davigmacodedavigmacode
committed
add new widget
1 parent edcfadd commit 8e20c30

31 files changed

+1273
-204
lines changed

‎demo/widget.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<html>
2+
<head>
3+
<title>Hivemind Widget</title>
4+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
5+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/swiper.min.css" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" />
7+
<style>
8+
.widgets:before,
9+
.widgets:after {
10+
content: "";
11+
display: table;
12+
}
13+
.widgets:after {
14+
clear: both;
15+
}
16+
.widgets {
17+
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
18+
margin-bottom: 20px;
19+
}
20+
.widget {
21+
box-sizing: border-box;
22+
padding: 20px;
23+
display: inline-block;
24+
float: left;
25+
width: 33.3%;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div class="widgets">
31+
<div class="widget" style="width:66.6%;height:450px">
32+
<hivemind-widget id="5a11578a07c38300c3eae7d6"></hivemind-widget>
33+
</div>
34+
<div class="widget" style="height:350px">
35+
<hivemind-widget id="5a11578a07c38300c3eae7d6"></hivemind-widget>
36+
</div>
37+
</div>
38+
<div class="widgets">
39+
<div class="widget">
40+
<hivemind-widget id="5a0e855485b27800c30f3f53"></hivemind-widget>
41+
</div>
42+
<div class="widget">
43+
<hivemind-widget id="5a0f9efa85b27800c30f3f57"></hivemind-widget>
44+
</div>
45+
<div class="widget">
46+
<hivemind-widget id="5a1054f0fc8bd800c3eee084"></hivemind-widget>
47+
</div>
48+
</div>
49+
50+
<script src="https://unpkg.com/[email protected]/dist/Chart.min.js"></script>
51+
<script src="https://unpkg.com/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
52+
<script src="https://unpkg.com/[email protected]/dist/js/swiper.min.js"></script>
53+
<script src="../dist/widget.js"></script>
54+
</body>
55+
</html>

‎dist/bundle.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundle.js.gz

193 Bytes
Binary file not shown.

‎dist/content.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/content.js.gz

125 Bytes
Binary file not shown.

‎dist/summary.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/summary.js.gz

190 Bytes
Binary file not shown.

‎dist/trend.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/trend.js.gz

7 Bytes
Binary file not shown.

‎dist/widget.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/widget.js.gz

40.8 KB
Binary file not shown.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "hivemind-widget",
3-
"version": "1.3.3",
3+
"version": "1.4.1",
44
"description": "Web component widget for hivemind",
55
"author": "Irfan Vigma Taufik",
66
"email": "[email protected]",

‎rollup.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import bundle from './rollup.bundle.config.js'
22
import content from './rollup.content.config.js'
33
import summary from './rollup.summary.config.js'
44
import trend from './rollup.trend.config.js'
5+
import widget from './rollup.widget.config.js'
56

67
export default [
78
bundle,
89
content,
910
summary,
10-
trend
11+
trend,
12+
widget
1113
]

‎rollup.widget.config.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import vue from 'rollup-plugin-vue'
2+
import buble from 'rollup-plugin-buble'
3+
import nodeResolve from 'rollup-plugin-node-resolve'
4+
import commonjs from 'rollup-plugin-commonjs'
5+
import gzip from 'rollup-plugin-gzip'
6+
import uglify from 'rollup-plugin-uglify'
7+
import replace from 'rollup-plugin-replace'
8+
9+
export default {
10+
input: 'src/widget.js',
11+
output: {
12+
file: 'dist/widget.js',
13+
format: 'iife'
14+
},
15+
plugins: [
16+
replace({
17+
'process.env.NODE_ENV': JSON.stringify('production')
18+
}),
19+
nodeResolve({
20+
module: true,
21+
jsnext: true,
22+
main: true,
23+
browser: true
24+
}),
25+
commonjs({
26+
include: [
27+
'node_modules/**'
28+
]
29+
}),
30+
vue({
31+
compileTemplate: true,
32+
css:true
33+
}),
34+
buble(),
35+
uglify(),
36+
gzip()
37+
]
38+
}

‎src/bundle.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import Vue from 'vue'
22
import Currency from './libraries/currency'
3+
import Shortnum from './libraries/shortnum'
34
import 'document-register-element'
45

56
Vue.prototype.$currency = Vue.currency = Currency
7+
Vue.prototype.$shortnum = Vue.shortnum = Shortnum
68
Vue.filter('currency', Currency)
9+
Vue.filter('shortnum', Shortnum)
710

811
// include vue-custom-element plugin to Vue
912
import VueCustomElement from 'vue-custom-element'
1013
Vue.use(VueCustomElement)
1114

1215
// import and register your component(s)
13-
import HivemindContent from './components/Content.vue'
14-
import HivemindSummary from './components/Summary.vue'
15-
import HivemindTrend from './components/Trend.vue'
16+
import HivemindContent from './widgets/Content.vue'
17+
import HivemindSummary from './widgets/Summary.vue'
18+
import HivemindTrend from './widgets/Trend.vue'
1619
Vue.customElement('hivemind-content', HivemindContent)
1720
Vue.customElement('hivemind-summary', HivemindSummary)
1821
Vue.customElement('hivemind-trend', HivemindTrend)

‎src/components/ChartInterval.js

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export default {
105105
}
106106
},
107107
mounted () {
108-
// let app = this.$root.$options
108+
let app = this
109109
let title = this.title || false
110110
let options = {
111111
responsive: true,
@@ -158,7 +158,12 @@ export default {
158158
},
159159
tooltips: {
160160
enabled: true,
161-
displayColors: false
161+
displayColors: false,
162+
callbacks: {
163+
label: function (tooltipItems, data) {
164+
return data.datasets[tooltipItems.datasetIndex].label + ': ' + app.$currency(tooltipItems.yLabel)
165+
}
166+
}
162167
},
163168
layout: {
164169
padding: 20
@@ -167,6 +172,17 @@ export default {
167172
animateScale: true,
168173
animateRotate: true
169174
},
175+
scales: {
176+
yAxes: [
177+
{
178+
ticks: {
179+
callback: function (label, index, labels) {
180+
return app.$shortnum(label)
181+
}
182+
}
183+
}
184+
]
185+
},
170186
plugins: {
171187
datalabels: {
172188
color: 'white',
@@ -190,7 +206,7 @@ export default {
190206
return value > 0
191207
},
192208
formatter: (value, context) => {
193-
return this.$currency(value)
209+
return app.$shortnum(value)
194210
}
195211
}
196212
}

‎src/components/ChartTotal.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default {
149149
let preset = presets[key]
150150
let value = chart.data.datasets[preset.dataset].data[preset.index]
151151
result.push({
152-
text: preset.label + ' (' + app.$currency(value) + ')',
152+
text: preset.label + ' (' + app.$shortnum(value) + ')',
153153
fillStyle: preset.color,
154154
lineWidth: 0
155155
})
@@ -166,7 +166,13 @@ export default {
166166
text: title
167167
},
168168
tooltips: {
169-
enabled: true
169+
enabled: true,
170+
callbacks: {
171+
label: function (tooltipItems, data) {
172+
let val = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index]
173+
return ' ' + data.labels[tooltipItems.index] + ': ' + app.$currency(val)
174+
}
175+
}
170176
},
171177
layout: {
172178
padding: 10

‎src/components/Error.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,6 @@
2727
.error-message {
2828
color: #78909C;
2929
font-weight: bold;
30+
text-align: center;
3031
}
3132
</style>

‎src/components/Slider.vue

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template>
2+
<!-- Slider main container -->
3+
<div
4+
class="swiper-container"
5+
@mouseenter.stop="autoplay('stop')"
6+
@mouseleave.stop="autoplay('start')">
7+
<!-- Additional required wrapper -->
8+
<div class="swiper-wrapper">
9+
<!-- Slides -->
10+
<div
11+
v-for="item in items"
12+
:key="item._id"
13+
class="swiper-slide">
14+
<div
15+
:data-background="item.full_picture"
16+
class="swiper-lazy">
17+
<div class="swiper-meta">
18+
<div class="swiper-meta-inner">
19+
<h3 class="swiper-meta-title">
20+
<a
21+
v-text="item.title"
22+
:href="item.link"
23+
:title="item.title"
24+
:target="widget.options.target"></a>
25+
</h3>
26+
<small class="swiper-meta-date" v-text="item.created_time"></small>
27+
</div>
28+
</div>
29+
<div class="swiper-lazy-preloader"></div>
30+
</div>
31+
</div>
32+
</div>
33+
<!-- If we need pagination -->
34+
<div class="swiper-pagination"></div>
35+
36+
<!-- If we need navigation buttons -->
37+
<div class="swiper-button-prev swiper-button-white"></div>
38+
<div class="swiper-button-next swiper-button-white"></div>
39+
</div>
40+
</template>
41+
42+
<script>
43+
export default {
44+
props: [
45+
'widget',
46+
'stories',
47+
'summaries',
48+
'screen'
49+
],
50+
data () {
51+
return {
52+
swiper: null
53+
}
54+
},
55+
computed: {
56+
items () {
57+
let posts = this.stories
58+
59+
// format posts data
60+
for (let i = 0; i < posts.length; i++) {
61+
let post = posts[i]
62+
63+
// format title and icon
64+
switch (post.type) {
65+
case 'photo':
66+
post.title = post.message || post.name
67+
post.icon = 'photo'
68+
break
69+
case 'link':
70+
post.title = post.name || post.message
71+
post.icon = 'launch'
72+
break
73+
case 'status':
74+
post.title = post.name || post.message
75+
post.icon = 'receipt'
76+
break
77+
case 'video':
78+
post.title = post.name || post.message
79+
post.icon = 'play_circle_filled'
80+
break
81+
}
82+
83+
// add analytics parameters
84+
let redirect = 'https://api.hivemind.id/widgets/' + this.widget._id + '/redirect?url='
85+
let utm = post.link.indexOf('?') === -1 ? '?' : '&'
86+
post.link += utm + 'utm_source=hivemind.id&utm_medium=widget'
87+
post.link = redirect + post.link
88+
}
89+
90+
return posts
91+
}
92+
},
93+
methods: {
94+
autoplay (action) {
95+
this.swiper.autoplay[action]()
96+
}
97+
},
98+
mounted () {
99+
this.swiper = new Swiper(this.$el, {
100+
autoplay: {
101+
delay: 3000,
102+
disableOnInteraction: false
103+
},
104+
navigation: {
105+
nextEl: '.swiper-button-next',
106+
prevEl: '.swiper-button-prev',
107+
hideOnClick: true
108+
},
109+
pagination: {
110+
el: '.swiper-pagination',
111+
type: 'fraction'
112+
},
113+
// enable keyboard control
114+
keyboard: true,
115+
// Disable preloading of all images
116+
preloadImages: false,
117+
// Enable lazy loading
118+
lazy: true,
119+
// enable loop
120+
loop: true
121+
})
122+
}
123+
}
124+
</script>
125+
126+
<style scoped>
127+
.swiper-lazy {
128+
display: block;
129+
background-repeat: no-repeat;
130+
background-size: cover;
131+
width: 100%;
132+
height: 100%;
133+
}
134+
.swiper-meta {
135+
position: absolute;
136+
z-index: 1;
137+
width: 100%;
138+
bottom: 0;
139+
background: rgba(0,0,0,0.5);
140+
}
141+
.swiper-meta-inner {
142+
display: block;
143+
padding: 20px;
144+
text-shadow: 1px 1px 3px rgba(0,0,0,.2);
145+
text-align: left;
146+
}
147+
.swiper-meta-title {
148+
margin: 0;
149+
}
150+
.swiper-meta-title > a {
151+
text-decoration: none;
152+
color: #fff;
153+
}
154+
.swiper-meta-date {
155+
display: block;
156+
margin-top: 7px;
157+
color: #fff;
158+
}
159+
.swiper-pagination-fraction {
160+
top: 10px;
161+
right: 10px;
162+
bottom: auto;
163+
left: auto;
164+
width: auto;
165+
color: #fff;
166+
background: rgba(0,0,0,0.5);
167+
padding: 5px 9px;
168+
border-radius: 2px;
169+
}
170+
</style>

0 commit comments

Comments
 (0)