Create js widget for up and down voting.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am looking for a simple small footprint js widget that we can embed in a variety of apps/sites which will let users up/down vote the content. We have the design of the widget and are looking for someone to help make it come to life with function and animated effect for the up and down click.

here is the comp of it on a system page
https://www.dropbox.com/s/td0nhzxx3933z4h/2019-04-25_15-55-28.png?dl=0

notice it has 6 possible positions.

Top - right/left

Middle - right/left

Bottom - right/left

We are trying to get some animated effect on it as seen here -
https://www.dropbox.com/s/c65yx1m8xbmq72m/2019-04-25_16-01-05.MP4?dl=0

my designer gave me the assets and this file called a "pie" file which has the layers of the animation in it. seems it needs https://www.protopie.io to run. Hoping we can convert this to svg and js/css and make it act like the animation in the video.

All of the asset files we have can be found here.

https://www.dropbox.com/s/7502wwuxb4bk755/upvote-widget.zip?dl=0

open to any micro frameworks, ideally we dont need to rely on jquery here.

awarded to Wuddrum
Tags
javascript

Crowdsource coding tasks.

3 Solutions


Here's my solution https://codepen.io/farolan/pen/axPVVE

Updates

  • added small mode and handlers
Winning solution

Hey Qdev, here's my solution:

Demo: https://wuddrum.github.io/voting-widget/

Demo (slightly upscaled): https://wuddrum.github.io/voting-widget/

Source: https://github.com/Wuddrum/voting-widget

Usage

A site should include widget's .js and .css files and then create a new instance of VotingWidget and call its show() method. E.g.:

<link rel="stylesheet" href="voting-widget.css">
<script src="voting-widget.js"></script>

<script>
    var widget = new VotingWidget();
    widget.show();
</script>  

API

options - VotingWidget constructor accepts an options object as a parameter, options object can have the following properties:

  • id (string) - Sets the id that will be used for the widget element's id attribute
    • Default: empty string
  • containerElement (HTMLElement) - Sets the element that the widget should anchor around
    • Default: document.body
  • state (VoteState) - Sets the initial vote state for the widget
    • Default: VoteState.Neutral
  • horizontalPosition (HorizontalPosition) - Sets the horizontal position for the widget
    • Default: HorizontalPosition.Left
  • verticalPosition (VerticalPosition) - Sets the vertical position for the widget
    • Default: VerticalPosition.Top
  • horizontalAnchor (HorizontalAnchor) - Sets the horizontal anchor point for the widget. Determines whether the widget will anchor itself on the inside or outside of the element
    • Default: HorizontalAnchor.Inside
  • verticalAnchor (VerticalAnchor) - Sets the vertical anchor point for the widget. Determines whether the widget will anchor itself on the inside or outside of the element
    • Default: VerticalAnchor.Inside
    • Note: verticalAnchor is ignored if option floating is set to true
  • layout (Layout) - Sets the layout for the widget element
    • Default: Layout.Horizontal
  • floating (boolean) - Sets the widget to float within browser's viewport, if its container is visible.
    • Default - false
    • Note: verticalAnchor option is ignored if floating is set to true. Because the widget will always stay inside the bounds of its container
  • stateChangedCallback (function) - Sets the function that's called when widget's vote state is changed.
    • Default: null

The above properties can also be accessed and modified under widget's options property. Example usage of modifying widget's options:

var widget = new VotingWidget({ id: 'someId' });
widget.options.horizontalAnchor = HorizontalAnchor.Outside;

stateChangedCallback - A callback that's passed a data object when it's invoked, here's the object's properties:

  • state (VoteState) - Widget's new state
  • widget (VotingWidget) - Instance of VotingWidget that's invoking the callback
  • widgetEl (HTMLElement) - Html element of the widget

Example usage of callback:

function onStateChanged(data) {
    console.log(data.state);
}

VotingWidget functions:

  • show() - Shows the widget
  • hide() - Hides the widget

Example usage:

var widget = new VotingWidget();
widget.show();
widget.hide();  

VoteState - Used to get/set widget's vote state. Possible Values:

  • VoteState.Neutral - Neither widget's vote button is active
  • VoteState.Upvoted - Widget's upvote button is active
  • VoteState.Downvoted - Widget's downvote button is active

HorizontalPosition - Used to get/set widget's horizontal position. Possible Values:

  • HorizontalPosition.Left - Position widget around the left side of the container element
  • HorizontalPosition.Right - Position widget around the right side of the container element

VerticalPosition - Used to get/set widget's vertical position. Possible values:

  • VerticalPosition.Top - Position widget around the top of the container element
  • VerticalPosition.Middle - Position widget around the middle of the container element
  • VerticalPosition.Bottom - Position widget around the bottom of the container element

HorizontalAnchor - Used to get/set widget's horizontal anchor point. Possible values:

  • HorizontalAnchor.Inside - Position widget horizontally on the inside of the container element
  • HorizontalAnchor.Outside - Position widget horizontally on the outside of the container element

VerticalAnchor - Used to get/set widget's vertical anchor point. Possible values:

  • VerticalAnchor.Inside - Position widget vertically on the inside of the container element
  • VerticalAnchor.Outside - Position widget vertically on the outside of the container element

Layout - Used to get/set widget's layout orientation. Possible values:

  • Layout.Horizontal - Set widget's layout orientation to horizontal
  • Layout.Vertical - Set widget's layout orientation to vertical

Compatibility

Works on all modern browsers and IE10+.

Afterthoughts & Questions

  1. I'm currently using widget's size as close as possible to the provided design comp of it. But as you can see, it doesn't look too well at such small sizes, at least on low dpi screens. I'll probably try to make a slightly upscaled version of it.
  2. I've currently added an option to provide a function that's invoked when widget's state changes. This means that users' sites will need to handle saving widget's states themselves. Is this the intended scenario or are you planning on using a centralized API for handling vote states? In which case more information about the API would be appreciated.
  3. The design of the widget is using an external font, should I include it or leave it to Arial, sans-serif?

Edit: Optimized the thumb svg so it looks better on such a small size. Added a slightly upscaled version of the widget + some other improvements. Added floating option to enable the widget to float within browser's viewport, inside of its container. The floating function is debounced on scroll events to not use resources on continuous scrolling.

Edit2: Fixed formatting.

really impressive! integrating it now. thx
Qdev 3 months ago

Here is my CodePen: https://codepen.io/kostasx/pen/axPEgo?editors=1100

Just added the sparkling animation.

Added a version that does not need the fontawesome library.
Updated the latest version with a sparkling-star effect instead of the fontawesome spinner icon used previously:
https://codepen.io/kostasx/pen/PgVQdQ?editors=0100

View Timeline