Browse Source
move vue and vue-calendar-heatmap to webpack (#10188)
- unvendor vue and vue-calendar-heatmap
- remove unused moment.js leftover from previous heatmap version
- ensure webpack loads the full version of vue
- fix vue devmode warning related to 'searchLimit' type
I wanted to name the chunk heatmap.js but adblockers don't like that
filename [1].
[1] 3899d5dff3/easyprivacy/easyprivacy_general.txt (L2095)
for-closed-social
silverwind
4 years ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 154 additions and 263 deletions
Split View
Diff Options
-
+0 -1.eslintrc
-
+35 -0package-lock.json
-
+3 -1package.json
-
+4 -9public/vendor/librejs.html
-
+0 -1public/vendor/plugins/moment/moment.min.js
-
+0 -1public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js
-
+0 -112public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css
-
+0 -21public/vendor/plugins/vue/LICENSE
-
+0 -6public/vendor/plugins/vue/vue.min.js
-
+0 -8templates/base/footer.tmpl
-
+2 -3templates/base/head.tmpl
-
+2 -1templates/pwa/serviceworker_js.tmpl
-
+98 -0web_src/js/features/userHeatmap.js
-
+7 -99web_src/js/index.js
-
+3 -0webpack.config.js
+ 0
- 1
.eslintrc
View File
+ 35
- 0
package-lock.json
View File
+ 3
- 1
package.json
View File
+ 4
- 9
public/vendor/librejs.html
View File
+ 0
- 1
public/vendor/plugins/moment/moment.min.js
File diff suppressed because it is too large
View File
+ 0
- 1
public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js
File diff suppressed because it is too large
View File
+ 0
- 112
public/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.css
View File
| @ -1,112 +0,0 @@ | |||
| svg.vch__wrapper[data-v-a9cfea66] { | |||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |||
| line-height: 10px; | |||
| } | |||
| svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66] { | |||
| font-size: 10px; | |||
| } | |||
| svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66], | |||
| svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] { | |||
| font-size: 9px; | |||
| } | |||
| svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66], | |||
| svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66], | |||
| svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66] { | |||
| fill: #767676; | |||
| } | |||
| svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { | |||
| stroke: #555; | |||
| stroke-width: 1px; | |||
| } | |||
| svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:focus { | |||
| outline: none; | |||
| } | |||
| .vue-tooltip-theme.tooltip { | |||
| display: block !important; | |||
| z-index: 10000; | |||
| } | |||
| .vue-tooltip-theme.tooltip .tooltip-inner { | |||
| background: rgba(0, 0, 0, .7); | |||
| border-radius: 3px; | |||
| color: #ebedf0; | |||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |||
| font-size: 12px; | |||
| line-height: 16px; | |||
| padding: 14px 10px; | |||
| } | |||
| .vue-tooltip-theme.tooltip .tooltip-inner b { | |||
| color: white; | |||
| } | |||
| .vue-tooltip-theme.tooltip .tooltip-arrow { | |||
| width: 0; | |||
| height: 0; | |||
| border-style: solid; | |||
| position: absolute; | |||
| margin: 5px; | |||
| border-color: black; | |||
| z-index: 1; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="top"] { | |||
| margin-bottom: 5px; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="top"] .tooltip-arrow { | |||
| border-width: 5px 5px 0 5px; | |||
| border-left-color: transparent !important; | |||
| border-right-color: transparent !important; | |||
| border-bottom-color: transparent !important; | |||
| bottom: -5px; | |||
| left: calc(50% - 5px); | |||
| margin-top: 0; | |||
| margin-bottom: 0; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="bottom"] { | |||
| margin-top: 5px; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="bottom"] .tooltip-arrow { | |||
| border-width: 0 5px 5px 5px; | |||
| border-left-color: transparent !important; | |||
| border-right-color: transparent !important; | |||
| border-top-color: transparent !important; | |||
| top: -5px; | |||
| left: calc(50% - 5px); | |||
| margin-top: 0; | |||
| margin-bottom: 0; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="right"] { | |||
| margin-left: 5px; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="right"] .tooltip-arrow { | |||
| border-width: 5px 5px 5px 0; | |||
| border-left-color: transparent !important; | |||
| border-top-color: transparent !important; | |||
| border-bottom-color: transparent !important; | |||
| left: -5px; | |||
| top: calc(50% - 5px); | |||
| margin-left: 0; | |||
| margin-right: 0; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="left"] { | |||
| margin-right: 5px; | |||
| } | |||
| .vue-tooltip-theme.tooltip[x-placement^="left"] .tooltip-arrow { | |||
| border-width: 5px 0 5px 5px; | |||
| border-top-color: transparent !important; | |||
| border-right-color: transparent !important; | |||
| border-bottom-color: transparent !important; | |||
| right: -5px; | |||
| top: calc(50% - 5px); | |||
| margin-left: 0; | |||
| margin-right: 0; | |||
| } | |||
| .vue-tooltip-theme.tooltip[aria-hidden='true'] { | |||
| visibility: hidden; | |||
| opacity: 0; | |||
| transition: opacity .15s, visibility .15s; | |||
| } | |||
| .vue-tooltip-theme.tooltip[aria-hidden='false'] { | |||
| visibility: visible; | |||
| opacity: 1; | |||
| transition: opacity .15s; | |||
| } | |||
+ 0
- 21
public/vendor/plugins/vue/LICENSE
View File
| @ -1,21 +0,0 @@ | |||
| The MIT License (MIT) | |||
| Copyright (c) 2013-present, Yuxi (Evan) You | |||
| Permission is hereby granted, free of charge, to any person obtaining a copy | |||
| of this software and associated documentation files (the "Software"), to deal | |||
| in the Software without restriction, including without limitation the rights | |||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |||
| copies of the Software, and to permit persons to whom the Software is | |||
| furnished to do so, subject to the following conditions: | |||
| The above copyright notice and this permission notice shall be included in | |||
| all copies or substantial portions of the Software. | |||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |||
| THE SOFTWARE. | |||
+ 0
- 6
public/vendor/plugins/vue/vue.min.js
File diff suppressed because it is too large
View File
+ 0
- 8
templates/base/footer.tmpl
View File
+ 2
- 3
templates/base/head.tmpl
View File
+ 2
- 1
templates/pwa/serviceworker_js.tmpl
View File
+ 98
- 0
web_src/js/features/userHeatmap.js
View File
| @ -0,0 +1,98 @@ | |||
| import Vue from 'vue'; | |||
| const { AppSubUrl, heatmapUser } = window.config; | |||
| export default async function initHeatmap() { | |||
| const el = document.getElementById('user-heatmap'); | |||
| if (!el) return; | |||
| const { CalendarHeatmap } = await import(/* webpackChunkName: "userheatmap" */'vue-calendar-heatmap'); | |||
| Vue.component('calendarHeatmap', CalendarHeatmap); | |||
| const vueDelimeters = ['${', '}']; | |||
| Vue.component('activity-heatmap', { | |||
| delimiters: vueDelimeters, | |||
| props: { | |||
| user: { | |||
| type: String, | |||
| required: true | |||
| }, | |||
| suburl: { | |||
| type: String, | |||
| required: true | |||
| }, | |||
| locale: { | |||
| type: Object, | |||
| required: true | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| isLoading: true, | |||
| colorRange: [], | |||
| endDate: null, | |||
| values: [], | |||
| totalContributions: 0, | |||
| }; | |||
| }, | |||
| mounted() { | |||
| this.colorRange = [ | |||
| this.getColor(0), | |||
| this.getColor(1), | |||
| this.getColor(2), | |||
| this.getColor(3), | |||
| this.getColor(4), | |||
| this.getColor(5) | |||
| ]; | |||
| this.endDate = new Date(); | |||
| this.loadHeatmap(this.user); | |||
| }, | |||
| methods: { | |||
| loadHeatmap(userName) { | |||
| const self = this; | |||
| $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => { | |||
| const chartData = []; | |||
| for (let i = 0; i < chartRawData.length; i++) { | |||
| self.totalContributions += chartRawData[i].contributions; | |||
| chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions }; | |||
| } | |||
| self.values = chartData; | |||
| self.isLoading = false; | |||
| }); | |||
| }, | |||
| getColor(idx) { | |||
| const el = document.createElement('div'); | |||
| el.className = `heatmap-color-${idx}`; | |||
| document.body.appendChild(el); | |||
| const color = getComputedStyle(el).backgroundColor; | |||
| document.body.removeChild(el); | |||
| return color; | |||
| } | |||
| }, | |||
| template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><h4 class="total-contributions" v-if="!isLoading"><span v-html="totalContributions"></span> total contributions in the last 12 months</h4><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/></div>' | |||
| }); | |||
| new Vue({ | |||
| delimiters: vueDelimeters, | |||
| el, | |||
| data: { | |||
| suburl: AppSubUrl, | |||
| heatmapUser, | |||
| locale: { | |||
| contributions: 'contributions', | |||
| no_contributions: 'No contributions', | |||
| }, | |||
| }, | |||
| }); | |||
| } | |||