gingersoulrecords / soulbuttons Goto Github PK
View Code? Open in Web Editor NEWA WordPress plugin that helps you create trackable, styled buttons.
A WordPress plugin that helps you create trackable, styled buttons.
I've seen this on a few sites that use SoulButtons. If we tell a menu to 'get off canvas,' that action is happening when the page loads, but I can see it for a second before it gets off the page.
I'm guessing that this is because we're using Tween.set to set the values, which isn't as 'quick' as CSS, which also means that more Soulbuttons may slow the process even more.
I see a few options - first, set initial CSS in addition to (or instead of) the Tween.set that gets evaluated way before any JS executes. Or, set up a callback with the page 'fade-in' that 'waits' until all DOM manipulation has completed before showing the page (this feels slower).
Lastly, as a backup, we may need to set something on the target element to hide it on page load, like an opacity class that gets removed on a callback.
Tough one! Would appreciate your feedback. Thx.
DB
Hi there!
I'd like to replicate some of the 'non-button' styles shown here:
We have a 'default' and a 'transparent' style - can we add a 'arrow' style that adds an arrow icon after the link text?
Also, adding a couple of simple hover animations (seen on Stripe and on https://www.uber.com/) would be useful. Ex. 'onhover="moveButtonUp" or "moveArrowRight."
Thanks
DB
Can we add a 'class' attribute to SoulButtons?
Default dashicons css = 20px
Let's change that to inherit and place the SoulButtons.css styles to come after the minified dashicons styles.
Hi, for submitting to WP.org there are a couple of things you would be better at doing, than I would:
P.S. is gsr
username on wordpress.org yours? it seems to be registered but never used really used. If it is, could you give me access to that account - I'll do your submissions using it.
Hey, I'm having trouble getting these to apply. See the homepage banner on GSR Developer.
[soulbutton style="transparent" color="white" href="#" icon="dashicons-arrow-down-alt" icon-position="after"]Explore[/soulbutton]
DB
Seeing this if a certain attr is undefined:
Notice: Undefined index: target-open in /nas/content/live/gsrdemo/wp-content/plugins/soulbuttons/soulbuttons.php on line 412
Hello!
I'm using SoulButtons' target & targetEffect attributes to position an off-canvas element (a menu). I'd like to be able to edit this menu in the Builder, so I need the AppendTo(body) and related styles (like fixed positioning, etc) only to apply outside of the Builder. The builder has an outer class of .fl-builder-edit, so that should be easy to check with jQuery.
Thx
What do you think is the best approach for removing padding on a button that's less of a 'rectangular button' and more of an inline link? See https://www.uber.com/ for examples - the 'sign up' buttons have padding, the links (further down the page, with > symbols) do not have padding.
I tried this on the GSR Developer build. Setting padding="0" may is getting evaluated as false, thus causing the button to inherit the default padding. Plus, this is getting into 'CSS territory' which I'd like to avoid if possible (but not if it makes things more complex).
Perhaps making padding="0" or padding="none" do the same thing - apply the appropriate CSS to the button, is a good start? I'm hesitant to add more attributes if our current attrs can 'handle it.'
Thanks!
DB
I got confused between 'link' and 'target' for ScrollTo functionality, so maybe a more specific attribute name would make sense?
Are classes supported as a link attribute? Your Soulbuttons on your demo site use IDs.
Content
Behavior
I mentioned this in SoulSections issues - having a global offset value that is equal to the height of an element (for example, a fixed navigation bar). Having a pixel-based offset is ok, but I'd like to allow the user to select 'scrollto-offset=(global offset value) so that all of their scrolls (from SoulButtons, SoulMenu, etc) use the same offset value.
Can you please add 'target' and 'target-effect' attrs into the shortcode builder and to the plugin docs?
Thx
DB
Hello!
On the Soulbuttons animation click functions, can you insert
function(e){
e.preventDefault();
}
To keep the URL from appending a hash?
Thx.
I just received an informal notice from WP plugin team that we should have different banner images icons for different plugins. They do not need to be completely different, but they need to be individualized
Hey, I was just adding a hamburger icon to
https://wornstaging.wpengine.com/
's mobile menu (have a look!) and I was wondering where the icon was. This has happened to me on another site :) so it feels like it should be on by default, and people can turn it off for performance if they're not using the icon features.
Thanks!
DB
Something similar in size to this one: https://github.com/ideag/content-cards/blob/master/content-cards-button.png
Could you make one like that?
In fixing #20, I've added some basic Beaver Builder detection, to know when to load admin_scripts()
in the frontend. It could use some work.
I'd like to prepend a close button to an overlay's top right corner that, on click, closes the overlay.
Can we insert links to SoulMatch & SoulButtons' settings pages to show before the 'Deactivate/Edit' controls in the Plugins list?
Thanks,
DB
EDD has a purchase link shortcode
http://docs.easydigitaldownloads.com/article/229-purchaselink
that you can use to create purchase buttons for products and services. I'd like this button to inherit the default soulbutton styles (color, padding, borders) - as it has its own styles that come via EDD.
Can we set a true/false attribute for whether we want the button's target 'open by default,' in which case, we apply the 'open' styles initially?
Thanks
D
Event trigger on SoulButtons open for SoulMagic
Currently 'a starter plugin template.'
When you make a new SoulButton, it inherits the default offcanvas-effect="fadeInFromCenter." This shouldn't populate the attribute unless a specific effect is selected.
Thx
GreenSock has some nifty scrollTo functionality that would be right at home with a Soulbutton.
attributes: defaults
scrollToTarget: false
scrollToSpeed: 1
scrollToOffset: 0
Adding support for icons - via iconfonts (Font Awesome and Dashicons)
Adding support for icon-position - before/after button text
Didn't have a ticket for this before - just a reminder to handle that.
Just to be consistent with all the GSR plugins :)
I'd like a shortcode attribute that adds a data-attribute (e.g. data-label) to the button element that we can tie to some Google Analytics events.
You can see an example of this behavior here: http://edfuel.org/peer-learning-communities-detroit/
<a class="trackme ctabutton" href="/wp-content/uploads/2016/09/2016-EdFuel-PLCs_Scope-and-Sequence_Detroit_Management-Essentials.pdf" data-label="2016-detroit-plc-management-essentials">Download Overview</a>
This button has a class of trackme
that has the following handler:
$('.trackme').on('click', function() { $thisLabel = $(this).attr('data-label'); __gaTracker('send', 'event', 'download', $thisLabel); });
Last I checked, that still works with a basic Google analytics config. If there's any way we can check for the __gaTracker function, even better.
This functionality will allow people to gather information about what SoulButtons are being clicked, and when.
Thanks
DB
Right now, we do not give almost any styling to the elements we are animating via target-effect. The result is not pretty at the moment.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.