add favorite/reblog animations
This commit is contained in:
parent
b487240343
commit
72e7e18e0b
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -10471,6 +10471,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"web-animations-js": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.1.tgz",
|
||||
"integrity": "sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA="
|
||||
},
|
||||
"webauth": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/webauth/-/webauth-1.1.0.tgz",
|
||||
|
|
|
@ -66,6 +66,7 @@
|
|||
"testcafe": "^0.19.0",
|
||||
"timeago.js": "^3.0.2",
|
||||
"tiny-queue": "^0.2.1",
|
||||
"web-animations-js": "^2.3.1",
|
||||
"webpack": "^4.1.0",
|
||||
"webpack-bundle-analyzer": "^2.11.1",
|
||||
"workerize-loader": "^1.0.1",
|
||||
|
@ -100,7 +101,8 @@
|
|||
"FormData",
|
||||
"atob",
|
||||
"btoa",
|
||||
"Blob"
|
||||
"Blob",
|
||||
"Element"
|
||||
],
|
||||
"ignore": [
|
||||
"dist",
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
:disabled
|
||||
delegate-key="{{delegateKey}}"
|
||||
focus-key="{{focusKey || ''}}" >
|
||||
<svg class="icon-button-svg">
|
||||
<svg class="icon-button-svg" ref:svg>
|
||||
<use xlink:href="{{href}}" />
|
||||
</svg>
|
||||
</button>
|
||||
|
@ -18,7 +18,7 @@
|
|||
focus-key="{{focusKey || ''}}"
|
||||
:disabled
|
||||
on:click >
|
||||
<svg class="icon-button-svg">
|
||||
<svg class="icon-button-svg" ref:svg>
|
||||
<use xlink:href="{{href}}" />
|
||||
</svg>
|
||||
</button>
|
||||
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.icon-button.pressed .icon-button-svg {
|
||||
fill: var(--action-button-fill-color-pressed)
|
||||
fill: var(--action-button-fill-color-pressed);
|
||||
}
|
||||
|
||||
.icon-button.pressed:hover .icon-button-svg {
|
||||
|
@ -66,6 +66,16 @@
|
|||
import { classname } from '../_utils/classname'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
this.observe('animation', animation => {
|
||||
if (!animation) {
|
||||
return
|
||||
}
|
||||
let svg = this.refs.svg
|
||||
let animations = animation.map(({properties, options}) => svg.animate(properties, options))
|
||||
animations.forEach(anim => anim.play())
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
computedClass: (pressable, pressed, big, className) => {
|
||||
return classname(
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
disabled="{{reblogDisabled}}"
|
||||
href="{{reblogIcon}}"
|
||||
delegateKey="{{reblogKey}}"
|
||||
animation="{{animateReblog && reblogAnimation}}"
|
||||
/>
|
||||
<IconButton
|
||||
label="Favorite"
|
||||
|
@ -20,6 +21,7 @@
|
|||
pressed="{{favorited}}"
|
||||
href="#fa-star"
|
||||
delegateKey="{{favoriteKey}}"
|
||||
animation="{{animateFavorite && favoriteAnimation}}"
|
||||
/>
|
||||
<IconButton
|
||||
label="Show more options"
|
||||
|
@ -46,6 +48,7 @@
|
|||
import { goto } from 'sapper/runtime.js'
|
||||
import { importDialogs } from '../../_utils/asyncModules'
|
||||
import { updateProfileAndRelationship } from '../../_actions/accounts'
|
||||
import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
|
@ -69,11 +72,13 @@
|
|||
let originalStatusId = this.get('originalStatusId')
|
||||
let favorited = this.get('favorited')
|
||||
/* no await */ setFavorited(originalStatusId, !favorited)
|
||||
this.set({animateFavorite: !favorited})
|
||||
},
|
||||
onReblogClick() {
|
||||
let originalStatusId = this.get('originalStatusId')
|
||||
let reblogged = this.get('reblogged')
|
||||
/* no await */ setReblogged(originalStatusId, !reblogged)
|
||||
this.set({animateReblog: !reblogged})
|
||||
},
|
||||
onReplyClick() {
|
||||
let originalStatusId = this.get('originalStatusId')
|
||||
|
@ -88,6 +93,10 @@
|
|||
dialogs.showStatusOptionsDialog(originalStatusId)
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
favoriteAnimation: FAVORITE_ANIMATION,
|
||||
reblogAnimation: REBLOG_ANIMATION
|
||||
}),
|
||||
computed: {
|
||||
reblogLabel: (visibility) => {
|
||||
switch (visibility) {
|
||||
|
|
25
routes/_static/animations.js
Normal file
25
routes/_static/animations.js
Normal file
|
@ -0,0 +1,25 @@
|
|||
export const FAVORITE_ANIMATION = [
|
||||
{
|
||||
properties: [
|
||||
{transform: 'scale(1)'},
|
||||
{transform: 'scale(2)'},
|
||||
{transform: 'scale(1)'}
|
||||
],
|
||||
options: {
|
||||
duration: 400,
|
||||
easing: 'ease-in-out'
|
||||
}
|
||||
},
|
||||
{
|
||||
properties: [
|
||||
{fill: 'var(--action-button-fill-color)'},
|
||||
{fill: 'var(--action-button-fill-color-pressed)'}
|
||||
],
|
||||
options: {
|
||||
duration: 400,
|
||||
easing: 'linear'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
export const REBLOG_ANIMATION = FAVORITE_ANIMATION
|
|
@ -14,6 +14,10 @@ export const importIndexedDBGetAllShim = () => import(
|
|||
/* webpackChunkName: 'indexeddb-getall-shim' */ 'indexeddb-getall-shim'
|
||||
)
|
||||
|
||||
export const importWebAnimationPolyfill = () => import(
|
||||
/* webpackChunkName: 'web-animations-js' */ 'web-animations-js'
|
||||
)
|
||||
|
||||
export const importWebSocketClient = () => import(
|
||||
/* webpackChunkName: '@gamestdio/websocket' */ '@gamestdio/websocket'
|
||||
).then(mod => mod.default)
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
import {
|
||||
importIntersectionObserver,
|
||||
importRequestIdleCallback,
|
||||
importIndexedDBGetAllShim
|
||||
importIndexedDBGetAllShim,
|
||||
importWebAnimationPolyfill
|
||||
} from './asyncModules'
|
||||
|
||||
export function loadPolyfills () {
|
||||
return Promise.all([
|
||||
typeof IntersectionObserver === 'undefined' && importIntersectionObserver(),
|
||||
typeof requestIdleCallback === 'undefined' && importRequestIdleCallback(),
|
||||
!IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim()
|
||||
!IDBObjectStore.prototype.getAll && importIndexedDBGetAllShim(),
|
||||
!Element.prototype.animate && importWebAnimationPolyfill()
|
||||
])
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue