A JavaScript plugin that provides snapping functionality to a set of panels within your interface.

Related tags

Learning resource panelsnap
Overview

PanelSnap

Codacy Status Build Status Version License Bundled Size

A JavaScript library that provides snapping functionality to a set of panels within your interface.

Introduction

PanelSnap is a framework agnostic JavaScript library. This means that it works in every JavaScript project, wheter you use Vue, React, jQuery or plain vanilla JavaScript. It can snap both horizontally & vertically, connect with menu's and fire events based on user behaviour.

Installation

npm install panelsnap
import PanelSnap from 'panelsnap';

const instance = new PanelSnap();
<body>
  <section>
    ...
  </section>
  <section>
    ...
  </section>
  <section>
    ...
  </section>
</body>

Documentation

In its simplest form, PanelSnap does not need any configuration. For more advanced scenarios, PanelSnap can be aopted to about every usecase through its settings object.

Check out the documentation at https://panelsnap.com or the docs folder for all the different possibilities.

Credits

  • jellea for early feedback and brainpickings.
  • aalexandrov for small improvements & bugfixes.
  • akreitals for fixing keyboard navigation when disabled.
  • brumm far a panel count bug.
  • dpaquette for the offset option.
  • wudi96 for button navigation.
Comments
  • Add horizontal snapping functionality

    Add horizontal snapping functionality

    Horizontal snapping functionality is currently not present. Can this be added without increasing the plugin footprint unreasonably?

    Opinions on wether or not you think this is crucial please.

    enhancement 
    opened by guidobouman 46
  • onSnapFinish and onSnapStart getting triggered unnecessarily

    onSnapFinish and onSnapStart getting triggered unnecessarily

    Hi, I am using this plugin for one of my project,everything works fine except that the plugin callback functions(onSnapFinish,onSnapStart) are getting called even when we click anywhere on the website,this happens in Chrome 34.0.1847.137 and Firefox 26.0.

    Basically I am doing some animation on onSnapFinish but when user is clicking any menu or anywhere on the page, onSnapFinish gets triggered and my animation runs again.

    Can you please check if its a bug or am I doing something wrong

    Thanks Ramesh

    opened by rameshteegapur 22
  • space between panels, console error

    space between panels, console error

    Regardless of what I do I get the console error 'PanelSnap does not support space between panels, snapping back.'

    this is also an error on http://panelsnap.com

    bug 
    opened by jshbll 16
  • Container inside react component

    Container inside react component

    I am having a hard time with the container option. Could you please assist in helping me create a container? Not all my section will need to have a snap option.

    componentDidMount() { const node = ReactDOM.findDOMNode(this); this.panelSnapInstance = new PanelSnap({ container: node, panelSelector: '.panel' }); }

    opened by BKengagement 11
  • Doesn't work for sections with height

    Doesn't work for sections with height "200vh"

    When setting up a site with sections that are 2x the viewport height the plugin doesn't work. When scrolling to the first section the plugin kicks in and scrolls all the way to the bottom on the page.

    bug 
    opened by robpoole 11
  • Chrome update broke panelsnap?

    Chrome update broke panelsnap?

    Had panelsnap working fine yesterday but noticed it was not working for others in the office. I did not update Chrome until this morning. Since doing so, panelsnap is now not working for me too.

    It does not seem to be able to work out the scrolldifference value.

    Chrome 33.0.1750.117 also not working in FireFox 27.0.1, but working fine in Safari 7.0.1 (9537.73.11).

    opened by phpMagpie 10
  • Section will be snapped even if section height is larger than viewPort

    Section will be snapped even if section height is larger than viewPort

    Surprisingly it will snap to the second section even if the current section is larger than view port and the second section is not in view! So assuming -> is a section and x indicates which section is viewed

    1-> x 2->

    If I scroll down but still stay within 1's view port it'll snap to section 2

    1-> 2-> x

    Also if scrolled amount is less than directionalThresh it will snap back to the top of the section (so content at the bottom of a section can never be viewed if it's larger than viewPort). I tried modifying the library to support sections bigger than view port but no luck yet.

    bug 
    opened by arijoon 9
  • Implementing in a div

    Implementing in a div

    Hello, I have been trying for days now to implement this plugin on my Wordpress site - http//www.zactech.co.uk/ (note i haven't designed it yet - this theme is just taken from one of my other sites and stripped down). When I put the < section > tags in the header.php file, it worked perfectly (apart from the sites navigation bar was below the sections - kind of a big issue) I have called ".panel_container" instead of "body" the JS and tried "overflow:scroll" etc by looking around the issues on GitHub. Sorry to be stupid - I know the issue will be staring me in the face.

    Thanks, Zac

    opened by finchyz 9
  • activate panel on scroll even when snapping is disabled

    activate panel on scroll even when snapping is disabled

    Panel activate event and any corresponding menu's now respond to scrolling even when snapping is disabled.

    You can see an example using my fork in this Plunk.

    We may want to play with some kind of additional threshold here as well.

    opened by akreitals 8
  • Move up/down 1 only panel per scrolling event (single mousepad swipe, up/down arrow, scroll-wheel click)

    Move up/down 1 only panel per scrolling event (single mousepad swipe, up/down arrow, scroll-wheel click)

    First, thanks Guido: this is beautiful.

    My only concern is the limitation of the directionThreshold variable. For example, on my MacBook, a quick swipe of the mousepad might scroll 5000px in a browser, whereas a full swipe at a slower speed might scroll ~1000px.

    I think it would be more intuitive to limit travel per scrolling event (a single swipe, scroll-wheel click, arrow key up-down) so there's predictable behavior regardless of the scrolling method/hardware configuration.

    opened by michaelfemia 8
  • When using touch, if you stop moving your finger it won't snap

    When using touch, if you stop moving your finger it won't snap

    I am currently looking into this, but figured more eyes is better, so I'm submitting an issue.

    Description

    So if you're using a touch device or touchpad on a laptop, if you stop scrolling with your finger (keep it still and on the screen / touchpad) before you release it from the surface, it will scroll as per normally, but it won't snap to a panel. Here is how I initialize panelsnap

    //Panelsnap Initialization

var sectOffset = $(window).height() * 0.15;

jQuery(function($) {
    $('body').panelSnap({
        delay: 5,
        directionThreshold: 1,
        offset: sectOffset
    });
});

    I realize this is probably a weird initialization, but I'm doing something a little outside the usual, so yeah.

    My Findings

    I've found that in this situation where there's an issue, the scrollStop() function isn't called, which leads me to believe that the event isn't fired. Perhaps then another event listener needs to be added, or the event listener that this function is bound to needs to be changed.

    I'm not intimately familiar with this domain, so I'll do some research and update this if I find a solution. That being said, I'm not sure I will be able to check whether or not this breaks other implementations.

    bug 
    opened by tortilaman 7
  • build(deps): bump json5 and tsconfig-paths

    build(deps): bump json5 and tsconfig-paths

    Bumps json5 and tsconfig-paths. These dependencies needed to be updated together. Updates json5 from 2.2.0 to 2.2.3

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Updates tsconfig-paths from 3.9.0 to 3.10.1

    Changelog

    Sourced from tsconfig-paths's changelog.

    [3.10.1] - 2021-07-06

    Fixed

    • Add register.js to published files

    [3.10.0] - 2021-07-06

    Added

    • feat(tsconfig-loader): extends config from node_modules (#106). Thanks to @​zorji for this PR!

    Fixed

    Commits

    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 
    opened by dependabot[bot] 0
  • build(deps): bump qs from 6.5.2 to 6.5.3

    build(deps): bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    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 
    opened by dependabot[bot] 0
  • Update Disable / Enable functions

    Update Disable / Enable functions

    I have a use case where I'd like to disable and re-enable PanelSnap. As it stands the (undocumented) enable/disable functions work for this, however the library will continue to log to console as the events are still attached to the scroll container.

    Would it be possible to add removing/re-adding the relevant events to the disable and enable methods?

    enhancement 
    opened by Gaffen 2
  • Add support for vertical & horizontal snapping at the same time

    Add support for vertical & horizontal snapping at the same time

    PanelSnap supports vertical & horizontal snapping. But only one axis per container. This breaks when a container has both horizontal & vertical scrolling. The calculation for which panel to snap to falls apart.

    The search mechanism has to take into account that panels can be next to each other when scrolling vertically. And that they can be below each other when scrolling horizontally.

    Please vote if you need this functionality

    enhancement help wanted 
    opened by guidobouman 0
Releases(v1.3.0)

  • v1.3.0(Jul 31, 2019)

  • v1.2.2(Jul 4, 2019)

  • v1.2.1(Jun 27, 2018)

  • v1.2.0(May 14, 2018)

  • v1.1.0(May 13, 2018)

  • v1.0.0(May 12, 2018)

    1.0.0 (2018-05-12)

    Bug Fixes

    • activate panel when skipping the snap action (f68030b)
    • add missing events array on instance creation (e69e20d)
    • Allow direct descendant selector with scoped querySelector (9bcb296)
    • fix broken snapping because of undefined delay variable (3257eab)
    • Fix getElementsInContainerViewport not returning elements when larger than the viewport. (e414362)
    • Fix getTargetScrollTop not working for body (874efc1)
    • Make body in demo full height (af95332)
    • only bind passive events when supported (8ad9ebf)
    • only take directionThreshold into account when actually snapping (079f390)
    • Prevent duplicate PanelSnap instances on the same container (cf4ea6a)
    • Run new build that includes getScrollingElement (0605675)
    • snap to last panel in viewport when navigating up (9c00c2a)
    • Stop animation when a user interacts with the page (80a0f96)

    chore

    • drop support for bower (3fd757e)
    • oficially rename to PanelSnap (7d75a69)

    Features

    • Add basic snapping functionality. (374ded2)
    • add cross-browser & -platform interaction detection (21bcbe9)
    • add delay support (1c87367)
    • Add elementFillsContainer utility function (3f15f3a)
    • add enable & disable methods (dcf6db9)
    • add event binding to panelSnap (b3e8678)
    • Add getElementsInContainerViewport utility function (aa76466)
    • add horizontal snapping to PanelSnap (913cde7), closes #7
    • add horizontal support to getTargetScrollOffset utility method (896bbc3)
    • add missing duration setting (6c6d83d)
    • Add snapToPanel method (a9ba05c)
    • Add the option to find scrollTop of element bottom (08e2ed7)
    • drop support for offset (84a8205)
    • First version of findSnapTarget method, not fully working yet (ae36726)
    • Homogenize exports of PanelSnap (507856d)
    • Let PanelSnap snap to bottom (f9338fc)
    • make panel target selection less naive (d1a514e)
    • Prevent snapping when in large panel (e2de722)
    • remove old jQuery.panelSnap setup in favor of new PanelSnap setup (3efee66)
    • Setup a first panelSnap without jQuery (7808c2b)
    • take direction into account when snapping back to active panel (1992088)

    BREAKING CHANGES

    • The plugin is renamed to PanelSnap to reflect the decoupling from jQuery. PanelSnap is now framework agnostic. Install through npm install panelsnap. The jQuery repo publication is dropped in the process. This might get added back once a new adapter is in place.
    • Bower is no longer supported. Use npm instead.
    • jQuery.panelSnap is no longer supported in v1.0. An adapter will be provided in the near future.
    • The option slideSpeed has been renamed to duration. Also, the default value for duration is now 300ms, instead of 200ms.
    • Offset is no longer supported in PanelSnap. This can be taken into account inside the panels.
    • The old activate event is now called activatePanel, more in line with the other (more descriptive) event names. Event binding now happens with the panelSnapInstance.on('eventName', function) method. Instead of supplying callback functions during initialisation.
    Source code(tar.gz)
    Source code(zip)

  • v0.16.0(Jan 21, 2018)

Owner
Guido Bouman
Engineering Manager on the frontend foundational level, yet I travel all over the stack to delight the end-user experience.
Guido Bouman
GitHub https://panelsnap.com
Toggle the theme in Obsidian's panels

Obsidian Theme Toggler Toggle the theme individually for each of Obsidian's panels. What the plugin does It adds a theme toggle button to each pane in

Lars Magnus Klavenes 13 Nov 28, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
A powerful and simple JavaScript library provides a history for undo/redo functionality. Just like a time machine! 🕐

UndoRedo.js A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! ?? Installation: Node.j

${Mr.DJA} 26 Dec 14, 2022
Codebraid Preview provides a Markdown preview for Pandoc documents within VS Code.

Codebraid Preview provides a Markdown preview for Pandoc documents within VS Code. Most Markdown previews don't support all of Pandoc's extensions to Markdown syntax. Codebraid Preview supports 100% of Pandoc features—because the preview is generated by Pandoc itself! There is also full bidirectional scroll sync and document export.

Geoffrey Poore 12 Dec 28, 2022
A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YAML support designed to be easy to set up and use

About A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YML

Shuruhatik 5 Dec 28, 2022
This provides an extension integration with Docker Desktop to run k9s quickly and easily through the Docker Desktop interface.

k9s extension for Docker Desktop This provides an extension integration with Docker Desktop to allow k9s quickly and easily through the Docker Desktop

James Spurin 14 Dec 16, 2022
CloudCrafter CLI is a command-line interface tool that provides templates for common cloud resources to help you get started quickly.

CloudCrafter CLI CloudCrafter CLI is a command-line interface tool that provides templates for common cloud resources to help you get started quickly.

Missio 7 May 5, 2023
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.

customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus

Suraj Aswal 17 Sep 10, 2022
📦 Alpine JS plugin to extend the functionality of the official $persist plugin

Alpine JS Persist Extended Alpine JS magic method $storage extends the official $persist plugin to help you work with local storage ?? Example ?? <div

Mark Mead 11 Dec 28, 2022
Mekna'7, a subsidiary of the ONCF group, which provides bus services to cities not served by train, needs to set up a computer system by creating a database for managing customer reservations.

Online-bus-ticket-reservation Introduction Hello everyone, this is a project that I have done for assignment. This project is a simple online bus tick

Hala Ziani 5 Oct 25, 2022
Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application

Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application. It uses html5 canvas to create cropped images and css3, so it only works on latest browsers.

null 1 Feb 15, 2022
SET Revision is a website to help you identify "sets" in the card game SET.

Welcome to SET Revision! SET Revision is a website to help you identify "sets" in the card game SET. The code in this repository is aimed for learners

Benjamin Piper 2 Oct 3, 2022
Superlight vanilla javascript plugin improving forms look and functionality

Superlight pure javascript form switch plugin by LCweb Give a modern look to your applications and take advantage of javascript events and public func

Luca 31 Mar 9, 2022
Maintain your API development, documentation and experimentation all within your codebase.

dostman Maintain your API development, documentation and experimentation all within your codebase. This project is a new release! Feel free to contact

Ege Çavuşoğlu 16 Mar 11, 2022
Preview and reply to your messages from within Alfred. Keep your hands on that keyboard!

Mouseless Messenger Mouseless Messenger offers you rapid keyboard-driven access to send and read conversations in the macOS Messages app via Alfred —

Stephan Casas 37 Dec 30, 2022
To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease.

TODO-LIST To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease. Additional description a

Steve 12 Jul 22, 2022
Plugin that lets you create diagrams from textual representation (aka 'Diagrams as Code') within Logseq

Logseq - Diagrams as Code Plugin that lets you create diagrams (and other visualizations) from textual representation (aka 'Diagrams as Code') within

Nicolai P. Großer 80 Dec 21, 2022
Plugin to enable PDF files as first class citizens within an Obsidian vault.

Obsidian-PDF Plugin to enable PDF files as first class citizens within an Obsidian vault. What does this plugin do for me? All PDF files in your vault

Noah Cabral 16 Nov 26, 2022
A jQuery plugin allowing you to scroll an image within a container element

jQuery Scroll Image Inside v0.1 A jQuery plugin allowing you to scroll an image within a container element Usage <div id="window"> <img src="reall

Derek Ashauer 1 Apr 11, 2021