Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.

Allow PIE to be invoked as a standalone JS library #19

Closed
lojjic opened this issue Jul 6, 2010 · 11 comments
Closed

Allow PIE to be invoked as a standalone JS library #19

lojjic opened this issue Jul 6, 2010 · 11 comments

Comments

@lojjic
Copy link
Owner

lojjic commented Jul 6, 2010

Making PIE run as a .htc behavior has several advantages: users don't have to write any JS, the FOUS is avoided because the behavior is applied as soon as each element is ready, automatic cleanup when the element is unbound, etc.

However it might be useful, especially for third party libraries, to be able to invoke PIE as a pure .js file, without the .htc wrapper. We could expose a PIE.applyTo() element which accepts an element reference or maybe a selector, and a corresponding method to remove it.

We're probably pretty close to being able to do this. We'd have to rework a few things, like the fact that element-specific values are stored as local variables in the .htc would have to be changed so they are stored on the element itself or using a data hash with id indexes like jQuery does. We'd also have to attach the event listeners programatically, and make sure to clean them up on unload to prevent memory leaks.

The resulting .js file would be an addition to the PIE distribution; the .htc would still be the preferred method of attachment for the above stated reasons.
@subtleGradient
Copy link

If you do decide to do this please make the selector engine modular. E.g. Use MooTools or jQuery selector engines if they are already available on the page.

If you do include a selector engine to include in the source, be sure to check the latest results of the SlickSec cross-library selector engine test suite.

http://github.com/mootools/slick

@hbchai
Copy link

hbchai commented Oct 26, 2010

We would really love to see the standalone javascript feature. We're facing a problem using PIE in an IE browser control that loads content without setting its URL. Its URL remains about:blank, and any attempt to load HTC's results in access denied script errors. Exposing a javascript method sounds like a suitable workaround for us.

Any idea how much work is left to complete this item, or what I can do to help?

@lojjic
Copy link
Owner Author

lojjic commented Oct 26, 2010

@hbchai: Most of the work is already done, and the build script now produces a PIE.js in addition to PIE.htc.

The part that is remaining is deciding what public API is going to be available for hooking up elements. Right now, there are only two public methods: PIE.attach and PIE.detach, both of which accept a single element reference as argument (see http://github.com/lojjic/PIE/blob/master/sources/PIE_API.js). This is obviously very limited and pretty inconvenient for users. We definitely want something more powerful and convenient; I see a couple decent options:

A) Expose something similar to what DD_roundies does, where the user calls a public method passing it a selector or set of selectors. A downside to this is that the user has to maintain the PIE initialization code in JS separately from the CSS.

B) Have users invoke a CSS expression which initializes PIE on the element (PIE would then clear the expression right away to prevent continual evaluation) -- this would look something like: behavior:expression(PIE.attach(this));

It's of course possible to do both. If anyone has better suggestions I'd love to hear them. :)

I should also mention the big downside to any of these approaches: unlike .htc there is no way I'm aware of to automatically clean up the PIE rendering when the target element is removed from the DOM. That would have to be a manual process and would make PIE pretty tough to use in highly dynamic DOMs.

@hbchai
Copy link

hbchai commented Oct 26, 2010

The HTC approach is certainly the most elegant, and I wish we could use it. :)

Approach B) certainly sounds interesting as a more user-friendly way of exposing the API. Behaviors were completely new to me before encountering PIE - and now this expression syntax is completely fresh too.

I tried a simple test using PIE.attach() from the latest code. The div that I'm testing gets rounded borders, but also unexpectedly turns black (at least in IE8, so far). Is this due to a different issue? Here's my test:

<html>
<head>
<style type="text/css">

#testbox {
  position: absolute;
  top: 50px;
  left; 50px;
  width: 400;
  height: 300;
  background-color: orange;

  /* ??? */
  border-radius: 16px;
}

</style>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> -->
<script type="text/javascript" src="PIE.js"></script>
<script type="text/javascript">

// foo

</script>
</head>

<body>

<input type="button" onclick="PIE.attach(document.getElementById('testbox'));" value="Attach!" />
<input type="button" onclick="PIE.detach(document.getElementById('testbox'));" value="Detach!" />
<div id="testbox">
Some Text Inside
</div>

</body>

@lojjic
Copy link
Owner Author

lojjic commented Oct 26, 2010

Try using a color other than 'orange'... VML only supports a subset of CSS color keywords and I think orange is not one of them. See if a hex value works.

@hbchai
Copy link

hbchai commented Oct 27, 2010

You're right - changing the color worked! Thanks!

@lojjic
Copy link
Owner Author

lojjic commented Oct 30, 2010

Regarding my prior suggestion of using css expressions to invoke the JS attach method (option B)... I just remembered that expressions are not supported in IE8 standards mode, so this is not a viable option for users.

@JamieS
Copy link

JamieS commented Apr 25, 2011

Any word on the development of a non htc version of css3pie? I almost always use a CDN for asset delivery and htc files do not work on an external domain.

@lojjic
Copy link
Owner Author

lojjic commented Apr 25, 2011

@JamieS: http://css3pie.com/documentation/pie-js/ -- it's been included since beta3. The API is currently very rudimentary, so this ticket is just kept open to track improving that. But it should be usable.

@JamieS
Copy link

JamieS commented Apr 25, 2011

Great! I'll add feedback today if I see a need. Thanks for the quick reply!

@lojjic
Copy link
Owner Author

lojjic commented Nov 28, 2011

I'm closing this as finished, as the standalone JS has been part of the build since beta3 and I think the current API, though extremely simplistic, seems to be sufficient for most needs.

@lojjic lojjic closed this as completed Nov 28, 2011
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@subtleGradient @JamieS @lojjic @hbchai