Vuejs-Vue twentytwenty v0.10.1: vue-twentytwenty - Image comparison component, works with Vue.js 2.x

icon
Latest Release: v0.10.1
  • Brings back CSS extraction. This was causing issues with SSR apps since document was not defined. #13

The biggest change here is that you'll need to include the CSS file when using this component, i.e.

<template>
  <TwentyTwenty
    before="//placehold.it/600x200/E8117F/FFFFFF"
    after="//placehold.it/600x200/CCCCCC/FFFFFF" />
</template>

<script>
// NEW: Include the CSS file
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';

export default {
  components: {
    TwentyTwenty
  }
};
</script>
Source code(tar.gz)
Source code(zip)

TwentyTwenty

npm npm vue2

A small component to quickly let users see the differences between 2 images. Based on the work I did for ZURB's TwentyTwenty plugin.

Live Demo

Installation

$ npm install vue-twentytwenty --save

Or download the latest release using:

Usage

TwentyTwenty is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in a non-modular environment, TwentyTwenty will be registered as a global variable.

ES6

import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';

export default {
  // ...
  components: {
    TwentyTwenty
  }
  // ...
};

It can then be used like so:

<TwentyTwenty
  before="//placehold.it/600x200/E8117F/FFFFFF"
  after="//placehold.it/600x200/CCCCCC/FFFFFF" />

CommonJS

var Vue = require('vue')
var TwentyTwenty = require('vue-twentytwenty')

var YourComponent = Vue.extend({
  // ...
  components: {
    'twentytwenty': TwentyTwenty
  },
  // ...
})

Browser

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="//unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.css" />
</head>
<body>
  <div id="app">
    <twenty-twenty
      before="//placehold.it/600x200/E8117F/FFFFFF"
      after="//placehold.it/600x200/CCCCCC/FFFFFF" />
  </div>
  <script src="//unpkg.com/[email protected]/dist/vue.js"></script> 
  <script src="//unpkg.com/vue-twentytwenty/dist/vue-twentytwenty.umd.min.js"></script> 
  <script>
  new Vue({
    el: '#app'
  })
  </script> 
</body>
</html>

Props

Props Description Required Type Default
before URL of before image true String -
beforeLabel When hovering over image what label should show up over before image false String -
after URL of after image true String -
afterLabel When hovering over image what label should show up over after image false String -
offset How far from the left the slider should be on load (between 0 and 1) false Number 0.5
keyboardStep How far the slider should be moved on arrow key press (between 0 and 1) false Number 0.2

Usage

Simple

<template>
  <TwentyTwenty
    before="//placehold.it/600x200/E8117F/FFFFFF"
    after="//placehold.it/600x200/CCCCCC/FFFFFF" />
</template>

<script>
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';

export default {
  components: {
    TwentyTwenty
  }
};
</script>

Advanced

<template>
  <TwentyTwenty
    offset="0.7"
    before="//placehold.it/600x200/E8117F/FFFFFF"
    beforeLabel="BEFORE"
    after="//placehold.it/600x200/CCCCCC/FFFFFF"
    afterLabel="AFTER" />
</template>

<script>
import 'vue-twentytwenty/dist/vue-twentytwenty.css';
import TwentyTwenty from 'vue-twentytwenty';

export default {
  components: {
    TwentyTwenty
  }
};
</script>

Publish

From a clean repository (no pending changes) run the following:

yarn version --patch
git push --follow-tags

Comments

  • not working ie11
    not working ie11

    Oct 14, 2020

                                                                                                                                                                                                           
    Reply
  • vue 3 isn't support
    vue 3 isn't support

    May 7, 2021

    I have tried it on Vuejs 3 today and got some exception.

    Uncaught TypeError: Cannot read property 'component' of undefined
        at Module.fb15 (index.js:4)
        at __webpack_require__ (bootstrap:19)
        at bootstrap:83
        at bootstrap:83
        at chunk-S7VG5LVE.js?v=3cd53d8e:6
        at dep:vue-twentytwenty:1
    

    Here is my code:

    import 'vue-twentytwenty/dist/vue-twentytwenty.css'; // css or no still got the same error
    import TwentyTwenty from 'vue-twentytwenty';
    
    export default {
      // ...
      components: {
        TwentyTwenty
      }
      // ...
    };
    

    Any idea how to fix this please.

    Reply
  • Bump follow-redirects from 1.14.6 to 1.14.7
    Bump follow-redirects from 1.14.6 to 1.14.7

    Jan 14, 2022

    Bumps follow-redirects from 1.14.6 to 1.14.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump nanoid from 3.1.30 to 3.2.0
    Bump nanoid from 3.1.30 to 3.2.0

    Jan 22, 2022

    Bumps nanoid from 3.1.30 to 3.2.0.

    Changelog

    Sourced from nanoid's changelog.

    Change Log

    This project adheres to Semantic Versioning.

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • imgOffset.left is Undefined and Causes Application Error
    imgOffset.left is Undefined and Causes Application Error

    Jan 25, 2022

    Problem

    We currently use this plugin for some before/after scenarios and generally has been great.

    There is one issue though where if a user attempts to move the slider before the second image is loaded in (generally the image on the right) then an error is thrown and causes my application to break.

    Seems to be located here:

    ./node_modules/vue-twentytwenty/dist/vue-twentytwenty.common.js in apply at line 327:89
    
    
    moveSlide(event) {
          if (this.sliding) {
            var x = (event.touches ? event.touches[0].pageX : event.pageX) - this.imgOffset.left;
            x = x < 0 ? 0 : x > this.w ? this.w : x;
            return this.slideOffset = x / this.w;
          }
    

    Suggestion

    I think a simple check against this.imgOffset first would resolve this error from occurring.

    Thanks for your time.

    Reply
  • Bump url-parse from 1.4.7 to 1.5.1
    Bump url-parse from 1.4.7 to 1.5.1

    May 9, 2021

    Bumps url-parse from 1.4.7 to 1.5.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump elliptic from 6.5.2 to 6.5.3
    Bump elliptic from 6.5.2 to 6.5.3

    Jul 30, 2020

    Bumps elliptic from 6.5.2 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Refactored 'event.keyCode' into 'event.code' due to deprecation issue
    Refactored 'event.keyCode' into 'event.code' due to deprecation issue

    Dec 18, 2018

    Made keystroke event detection compliant to https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code.

    This PR includes current #7 and refers to #5 .

    Reply
  • Minor CSS improvements
    Minor CSS improvements

    Oct 28, 2017

    Hi Mark,

    I like this project, thanks for your work.

    I made some minor CSS improvements that should make it easier to integrate and customise the style of this component inside a different project:

    • Explicitly set box-sizing: content-box so the component layout is not broken when the website uses box-sizing resets (as recommended by e.g. https://css-tricks.com/box-sizing/ or https://www.paulirish.com/2012/box-sizing-border-box-ftw/).
    • Apply the overlay transition to the opacity property instead of to the background property. This simplifies the CSS definitions. In particular, setting a custom background or text colour for the overlay is now possible with just one CSS rule, without the :hover selector rules introducing potentially unexpected behaviour. I've also read somewhere that animating opacity should be more performant in most browsers compared to animating background.

    Greetings from another software developer, hiker & beer enthusiast.

    Stijn

    Reply
  • Add basic keyboard navigation (left/right) support
    Add basic keyboard navigation (left/right) support

    Dec 13, 2018

    Ref: https://github.com/mhayes/vue-twentytwenty/issues/5

    This PR add a basic keyboard support and a new property to set the keyboard offset.

    Note: I've also updated the package.json version to 0.7.0 and added the contributor key

    Reply
  • Keyboard accessibility issue and aria values
    Keyboard accessibility issue and aria values

    Dec 4, 2018

    Hi, we have some issue making this component WCAG compliant because it's not accessible by keyboard.

    Reply
  • On touch events, handle keeps sliding even if finger leaves area.
    On touch events, handle keeps sliding even if finger leaves area.

    Dec 11, 2017

    If a user clicks into the comparison frame on a mobile device, the touch event is captured there, but doesn't end until the user clicks the frame again.

    Basically, touchup isn't being registered properly.

    Reply
  • Add support for dragging on mobile
    Add support for dragging on mobile

    Nov 13, 2017

    This plugin doesn't work on mobile (at least on mobile webkit). I think this is due to safari's weird hover emulation behavior. Anyways, this patches things up.

    Reply
  • Fixed overlay flickering while dragging handle
    Fixed overlay flickering while dragging handle

    Dec 12, 2018

    When dragging the handle, the .twentytwenty-overlay previously faded in and out as soon as the mouse left the handle div. Now, the hover class is applied to the .twentytwenty-container directly and gets overwritten at the startSlide() event. Also, v-on:touchstart="startSlide" and v-on:mousedown="startSlide" were moved from the .twentytwenty-overlay to the .twentytwenty-handle to create a user experience more consistent with the original TwentyTwenty plugin.

    Reply
  • Critical Error on Vercel (upgrading from 0.6.2 to 0.9.0)
    Critical Error on Vercel (upgrading from 0.6.2 to 0.9.0)

    May 26, 2020

    Hello @mhayes 😄 really thank you for all the updates and care to this project.

    I've been using for the last weeks your plugin and everything was working great. Today I upgraded from 0.6.2 to 0.9.0 and I have a critical error on Vercel build.

    Vercel Critical Error

    Thank you! 🥇

    Reply