Need assistance with my SVG plugin

Not sure what I am allowed to do this. Tried posting on the warrior forums and got permabanned with a cookiecutter explanation. Don’t want that to happen again.

My plugin is a pure JS gallery that uses HTML SVG syntax to give gallery elements shape.

Videos:
SVG shape and control:
http://www.screencast.com/t/NtMmXVJaWaRl
The first few seconds show the fallback CSS layout should JavaScript be disabled.

SVG Custom made shape via vector software (illustrator,inkscape,etc):
http://www.screencast.com/t/rOMck3cJfLrB

Easy-made Responsive breakpoints :
http://www.screencast.com/t/o3rTV0n1T

The project’s base level complete. The following is on the roadmap:
WordPress plugin version
**Font control (**SVG has a unique issue where text will not start a new line and must be coded in via JS)
Animation

Do you have a problem or question regarding this? What kind of discussion are you looking for here?

1 Like

Oooh boy do I…

Mainly going over some issues, some of which I posted about before but got little to no answer for.

  • Why do I have to double initiate a function to get an accurate width of the window when scroll does not exist?

  • I noticed that the elements have micro-gaps between them as a result of the calculations in the JavaScript. The calculations are really specific, so I am curious if there is a more reasonable way to approach it. Perhaps rounding? I am not comfortable rounding up or down as when I was building this plugin, there was unwarranted affects that forced me to tear out the whole function and start over.

  • I noticed when using firebug that the JS is constantly refreshing elements even though it no longer needs to. Like it runs through the same blocks over and over changing and resetting widths, positioning, etc, but it does not actually do anything visually on screen. Is this normal? Do I require something like a “delete object” or “when resize stops do something then stop”?

(yes I know I need to post code, just want to respond as fast as possible before I get reported for spam or something (stress is fun, yay!))

  • HTML SVG has an issue with text where it will not create a new line for you, you have to manually insert a new text tag. I will code this in but my other concern with this is that these text tags do not detect boundaries at all. They will bleed on one line forever. So I do not know where to start if someone were to put in a unique shape like an hourglass. Is there a way to detect boundaries of this nature?

  • I want to know if anyone on this site in particular finds this project interesting, gimmicky or otherwise.

1 Like

It’s fine to share a library you’ve created with the community, do you have the code available on Github and npm?

I like the look of the custom shape demo, that has a lot of utility. What sort of browser support does it have?

Thanks for sharing :slight_smile:

2 Likes

I actually have to go backwards now and remove a bunch of things for the free version. I trying to support as far back as IE9. And. Absolutely. Nothing. Older. So. Help. Me.

I will post a link to it either tonight or tomorrow in this thread. Just needed to get something up as a notice.

Also, in my initialize function, which is public, I have a lot of functions calls like:

functionName(
functionName2(cheese),
functionName3(cheese, vanilla)
);

fName2 and 3 return either 1 value or an array of values across the public initialize function. Is this a wise thing to do or should I move this processing to a private variable?

It’s hard to give advice on that snippet, ping me when it’s on Gihub and I can help you tidy it up if you like.

1 Like

SVGility Falcom (free version)
https://github.com/maverickvector/svgility

Does not have the customshape mode but you can cheat by inputting your own case in the polygon library.

I want to edit my opening post but it doesn’t look like I can. Also, I want to obfuscate and minify but I don’t know who to go to for both. I am currently using http://jscompress.com/, don’t know if it is good, bad, or the best, and any help would be good.

Also, I need help with the modal window.

// Closes and removes modal after opacity transition
function modalClose(e){
	modalBlock.removeAttribute("class");
	document.getElementById('svg-imgdisplay').removeEventListener("click", modalClose, false);
	var closeDelay = setInterval(function (){			
		if(window.getComputedStyle(modalBlock, null).getPropertyValue("opacity") == "0"  ) {
			modalBlock.parentNode.removeChild(modalBlock);
			clearInterval(closeDelay);
			console.log("boom " + i++);		
		};
	}, 100);
};

This code is so mind numbing I gave up on trying to have a transition. For some reason, when the if statement condition is not met it will still fire the console.log but not the rest of the code. And so, I get a “boom, boom” with the second fire doing nothing. I’ve tried a few other ways but I got a headache. So, both the Falcon and Eagle versions of the plugin are insta-close.

Hey, I’ll take a look later today, can you put a readme.md file in there with examples of how to use the library?

I can’t suggest a minification strategy that would work well and wouldn’t bother to be honest, what code are you trying to protect others from copying?

As an aside, I think you will struggle to get paid for a library like this. There’s so many great free open-source libraries available. There is not a single library I’ve paid for in 10 years, it’s a sharing economy, think of how many libraries you use for free.

You don’t want to use setInterval or check the DOM for this.

setTimeout(function() {
  modalBlock.parentNode.removeChild(modalBlock);
}, 100);

I did use setTimeout, it was the original format when I started coding the modal. I forgot what happened, I think the modal would freeze if clicked too many times. This was a particular issue with the video iframes that took longer to load. I took a whole day on different timings, none of them passed the spam click test. So I am clearly doing something wrong.

It’s not a library, its a plugin (yes I see the tomayto-tomahto). I am writing up the read me and wiki now.

Not trying to hide anything, not that you can… Just wanted to be as efficient as possible.

There is a zip in the repository with and HTML page for you to look at.

I am willing to void the premium nonsense if I can find a way to earn some income from this via donation or otherwise. I honestly prefer to earn it rather than force it.

You want to clear before each timeout.

if (timeout) {
  clearTimeout(timeout);
}
timeout = setTimeout(function() {}, 1000);

Plugins are extensions to something, your code seems like a stand-alone library to me :wink:

Not trying to hide anything, not that you can… Just wanted to be as efficient as possible.

Oh you’re talking about minification, uglify is a common one.
https://marijnhaverbeke.nl/uglifyjs

I am willing to void the premium nonsense if I can find a way to earn some income from this via donation or otherwise. I honestly prefer to earn it rather than force it.

Developers aren’t used to donating for libraries, but I’d be happy if I were proved wrong.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.