Giter VIP home page Giter VIP logo

joryhogeveen / off-canvas-sidebars Goto Github PK

View Code? Open in Web Editor NEW
13.0 4.0 4.0 3.26 MB

This plugin will add various options to implement off-canvas sidebars in your WordPress theme based on the Slidebars jQuery plugin.

License: GNU General Public License v2.0

PHP 64.20% JavaScript 31.06% CSS 3.38% Shell 1.37%
canvas-sidebars slidebars-jquery-plugin off-canvas off-canvas-menu sidebars slidebars off-canvas-sidebars wordpress wordpress-plugin slide-in-menu

off-canvas-sidebars's Introduction

Off-Canvas Sidebars

Add off-canvas sidebars using the Slidebars jQuery plugin.

WordPress Plugin version WordPress Plugin WP tested version WordPress Plugin downloads WordPress Plugin rating Travis Code Climate
License Donate Project Stats

Off-Canvas Sidebars

Description

This plugin will add various options to implement off-canvas sidebars in your WordPress theme using the Slidebars jQuery plugin.

Overview / Features

  • Add off-canvas sidebars to the left, right, top and bottom of your website
  • Use sidebar areas (widget-ready areas), menu locations or custom hooks to place content into the off-canvas sidebars
  • You can add control buttons with a widget, menu item, shortcode or with custom code
  • Various customisation options and settings available in the Appearances menu

Compatibility (IMPORTANT!)

The structure of your theme is of great importance for this plugin. Please read the installation guide carefully!!

This plugin should work with most themes and plugins although I can't be sure for all use-cases. At this point it's still a 0.x version... If the plugin does not work for your theme, please let me know through the support and add a plugins and themes list and I will take a look!

Fixed elements (like sticky menu's)

There are known issues with fixed elements and Slidebars. Click here for more information I've created two possible solutions for this:

  1. Legacy CSS solution. Use basic CSS2 positioning instead of CSS3 transform with hardware acceleration.
  2. JavaScript solution. It is slower but still allows the use of hardware acceleration.

It's not working! / I found a bug!

Please let me know through support and add a plugins and themes list! :)
Or submit an issue here on GitHub

Credits

  • Slidebars jQuery plugin by Adam, thank you for this great plugin!

Translations

Please help translating this plugin on https://translate.wordpress.org/projects/wp-plugins/off-canvas-sidebars!

Installation

Installation of this plugin works like any other plugin out there. Either:

  1. Upload the zip file to the '/wp-content/plugins/' directory
  2. Activate the plugin through the 'Plugins' menu in WordPress

Or search for "Off-Canvas Sidebars" via your plugins menu.

Theme setup

Off-Canvas Sidebars won't work "out of the box" with most themes, please read the documentation! Click here for theme setup documentation.

Actions | Filters | API

Other Notes

You can find me here:

off-canvas-sidebars's People

Contributors

allworknoplay-95 avatar joryhogeveen avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

sofiaspain gbassoc allworknoplay-95

off-canvas-sidebars's Issues

PLUGGIN DOESN'T WORK WITH AURUM THEME (Minimalist WooCoomerce Shopping Theme)

Hello, the plugin does not work with my theme 'Aurum - minimalistisc shopping theme'. I think it's something related to the "hook name" although I do not know exactly what this is.
Can you help me? I would love to have the plugin.
or in case it is not due to "hook name", can you confirm me why it does not work?

Create docs/wiki

Create our own docs (alongside the Slidebar docs) to inform on how to change things

  • Actions and filters
  • JS hooks

Scroll lock: scrollbar issue

Since 0.4.1 With scroll lock enabled the <html> element sets overflow:hidden which causes the scrollbar to disapper.
When opening the sidebar the website slightly shifts due to the width change.
Mostly noticable when using overlay style.

Option to use basic "legacy" CSS for transitions instead of CSS3 tranform

  • Slidebar library modifications: Use left, top, right and bottom css properties for animation
  • Also prevents conflict with fixed elements because no transform property is used
  • Unfortunately isn't as "smooth" as the CSS3 transitions

Reason:
I've tried for months to get it al working AND use the current transitions with hardware acceleration but this is simply impossible due to browser structure. Wherever you look, loads of people have the same problems when using fixed elements within elements that use the transform properties.
Only IE seems to do this as expected (weirdly enough...).

A lot of plugins and libraries for off-canvas elements use these "legacy" transitions so I though "heck, why not".

Compatibility with Divi Theme

Expected Behavior

Is this plugin compatible with the divi theme? carbonsignature.com

Actual Behavior

Steps to Reproduce the Problem

Specifications

  • Plugin Version:
  • WordPress Version:
  • Other plugins installed:
  • Theme:
  • Browser:

Hooks on my theme OceanWP

Hi, Jory: I´m totally new to hooks. My theme (OceanWP) has a hook extension. I placed the text that you give in the BEFORE CONTENT hook and in the AFTER CONTENT hook. I also added an Off-Canvas Sidebar menu item.

The result is that the menu item appears, but nothing happens when I click on it.
Also, the hook text literally appears on the page. No side bar.

Where am I going wrong? Ocean WP has a long list of hooks. I tried BEFORE CONTENT and AFTER CONTENT. Should I try different ones?

Thank you in advance for your help.
Sofia

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Specifications

  • Plugin Version:
  • WordPress Version:
  • Other plugins installed:
  • Theme:
  • Browser:

Improve fixed element support in transitions

Allow the user to define which fixed elements need to be animated as well when opening sidebars.

Simple text field that allows for CSS selector input (comma separated)

  • Default mode
  • Legacy CSS mode
  • JS fix mode

Sidebar closes when user scrolls it with touch

Expected Behavior

The Sidebar should be able to be scrolled without being closed thereafter.

Actual Behavior

When a user scrolls the sidebar with touch and she happens to end the scroll on a link (<a> tag) then the sidebar closes.

Steps to Reproduce the Problem

  1. Go to https://www.mbi-geodata.com/en/ with a mobile browser or in mobile device emulation
  2. Open the off canvas mobile navigation
  3. Scroll the off canvas navigation with touch (or on mobile device emulation with clicking and dragging the mouse) – not with the scroll bar or with scroll functionality of your mouse.
  4. The off canvas sidebar closes

Specifications

  • Plugin Version: 0.4.2
  • WordPress Version: 4.9
  • Other plugins installed: admin-menu-editor advanced-export-for-wp-wpmu bwp-google-xml-sitemaps black-studio-tinymce-widget bulk-content-creator cms-tree-page-view content-aware-sidebars uk-cookie-consent display-posts-shortcode flowpaper-lite-pdf-flipbook gravityforms multisite-cloner multisite-language-switcher newsletter nextend-smart-slider3-pro nextgen-flex-slider-template nextgen-gallery nextgen-mbi nextgen-gallery-plus off-canvas-sidebars pods really-simple-ssl responsive-lightbox shariff shortcode-menu tinymce-advanced tinymce-and-tinymce-advanced-professsional-formats-and-styles user-switching w3-total-cache widget-clone wordpress-popular-posts wp-piwik yith-footer-banner wordpress-seo
  • Theme: not public
  • Browser: All Touch-Enabled (tested in Android 7, iOS 11 and Chrome with mobile device emulation)

Pointers

This code is probably responsible for this behaviour:

off-canvas-sidebars/js/off-canvas-sidebars.js

Lines 389 to 394 in 72a2d33

// Close the slidebar after clicking a link.
$( 'a' ).not( '.' + prefix + '-trigger' ).on( 'touchend click', function() {
if ( ! $(this).parents( '.' + prefix + '-trigger' ).length ) {
controller.close();
}
} );

Why do you include touchend in the list of events there? Doesn't all touch enabled browser emulate the click event?

JS glitch when opening/closing slidebars to fast

More info: https://wordpress.org/support/topic/compatibility-with-enfold-theme-3/

http://screencast-o-matic.com/watch/cbjZeplPkI

There, you see me open the widget area with a link twice, closing it each time with the ‘close’ button inside the sidebar. The third time I open it, I close it by clicking outside the sidebar, and it closes itself instantaneously (not transitioning out). Open it again, and it instantly closes itself, and proceeds to do this sort of rubber-banding thing over and over.

Menu Overwrite when you create a 2 or more Off-Canvas Sidebars

Expected Behavior

I try to use differents off canvas menu into a WordPress site

Actual Behavior

When you create a second Off Canvas Sidebar, this menu overwrites all other Off Canvas, except their style.

Example 1st menu:
captura de pantalla 2017-09-14 a las 11 08 05

Example 2nd menu
captura de pantalla 2017-09-14 a las 11 08 17

Menus configuration
captura de pantalla 2017-09-14 a las 11 09 37

Off Canvas Sidebars Created
captura de pantalla 2017-09-14 a las 11 06 38

If the last Off Canvas Sidebar created is disabled, all others will be disabled too.

Steps to Reproduce the Problem

1.Create Off Canvas Menu
1.Assign the Canvas Menu
1.Create another Canvas Menu

Specifications

  • Plugin Version:0.4
  • WordPress Version:4.8.1
  • Other plugins installed: Visual Composer, Ultimate Addons for Visual Composer, WooCommerce
  • Theme: The7
  • Browser: Google Chrome, Firefox

Feature: Configuration options for where which sidebars should appear

Currently all sidebars are global. It would be great if there is a way to select on which pages/taxes/etc. sidebars should/shouldn't appear.

Widget Logic has a quick way to deal with this using WP Conditional Tags. While this might be a good and flexible option, it does oppose a possible security issue by using eval().

Currenty available solutions:

  1. Using ocs_is_sidebar_enabled filter.
  2. Custom theme setup using the_ocs_off_canvas_sidebar()

ocs-site white space

Describe the bug

White space after content.
Firstly - very much thank you for this awesome plugin. :)

Steps to reproduce the behavior:

All time white space after content with fixed height as described here adchsm/Slidebars#10

Specifications

  • Plugin Version: newest
  • WordPress Version: newest
  • Other plugins installed:
  • Theme: storefront
  • Browser: all of them

Refactor tabs and settings

  • Refactor settings class into separate classes
    • Settings handler
    • Page main class
    • Tab classes
  • Refactor form handling, move logic into the correct class and inprove key validation
    • Keep sidebars under the sidebars key.
    • Move general settings under the general key.
    • Will also require reformat of the form class to set key prefixes.

Option to remove click delays (FastClick JS)

https://www.adchsm.com/slidebars/help/advanced-usage/removing-click-delays/

Devices with touch capability often have a 300ms delay on click triggers. Throughout this site I have recommended using jQuery's .on() API method assigning clicks to open, close or toggle Slidebars.
To remove this delay, I recommend using FastClick - a JavaScript library purposely built to elimate the delay where neccesary.
You can find FastClick on GitHub at: https://github.com/ftlabs/fastclick

Understrap Compatibility

Description

Describe the solution you'd like
I am using the plugin with Understrap (Bootstrap x _'s theme) and would like a solution for making the plugin work.

Is your feature request related to a problem? Please describe.
I have installed the plugin, can see the button for the menu, but the button does nothing. I cannot get the slidebar to work.

Other notes

Describe alternatives you've considered
I have tried changing the location of the button, tried different classes (div / button), I feel the problem y be with the hooks.

Additional context

Integrate shortcodes in WP Editor

Beta in v0.4
Related: #24

  • Shortcode generator WP Editor
  • Compat with existing editor plugins like wpeditimage (BETA)
    • Compat with images with captions

New animation: resize/scale

Requested by a user:

Instead of sliding the container add an option to scale the container width down (reduced by the width of the sidebar).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.