Starting Reel without Javascript #193

Closed
pisi opened this Issue May 20, 2013 · 4 comments

Comments

Projects
None yet
2 participants
@pisi
Owner

pisi commented May 20, 2013

Traditionally Reel instance can be started in three-step process:

  1. Link the external jquery.reel.js Javascript file.
  2. Have an <img> tag.
  3. Execute a Javascript command (call .reel()) to connect these two and to configure the resulting Reel.

Something like this:

<img src="some/image.jpg" width="300" height="200" id="my_reel_image">
<script>
  $('#my_image').reel({
    image: "some/image-reel.jpg",
    frames: 24
  });
</script>

Problem is, that people often indicate struggles with step 3, with the need to use the Javascript. Most significant source of these troubles are security-motivated restrictions on using <script> tag or user scripting in general where HTML is otherwise allowed on blog engines, forums, CMSs, e-commerce etc.

Let's simplify! This brand new feature allows to define the Reel directly on the <img> tag itself by using HTML data attributes. Without a single line of Javascript! This will eliminate the need for step 3 completely, leaving us with a much streamlined two-step process:

  1. Link the external jquery.reel.js Javascript file.
  2. Have an <img> tag configured for Reel.

This way:

<img src="some/image.jpg" width="300" height="200" id="my_reel_image"
  class="reel"
  data-image="some/image-reel.jpg"
  data-frames="24">

When such an <img> tag is found in your HTML, Reel will automatically convert all such to Reels on DOM ready. When you add such an tag by Javascript afterwards, call $.reel.scan() to re-scan.

Note, that this feature does NOT remove the means of Javascript initialization or manipulation - the old way. All facilities remain in place without any change and all traditional techniques still work. To complement them this adds an alternative non-Javascript technique - the new way.

@ghost ghost assigned pisi May 20, 2013

pisi added a commit that referenced this issue May 20, 2013

Mission is to simplify Reel creation (and examples). As a first step …
…the boundary between code needed to run Reel instance and the typography and other stuff aimed to make the example pretty and readable when viewed as a web page is clearly marked. And `indicator` is the first to move below the line. #193

pisi added a commit that referenced this issue May 20, 2013

But the most important change would be in actual initialization of Re…
…el. Albeit Javascript viewer Reel you won't need to use Javascript at all to start Reel, just a `"reel"` class name and configuration as simple HTML data attributes of your original image (and use any HTML node as annotation). This change should allow even easier integration. #193

pisi added a commit that referenced this issue May 20, 2013

Revised examples to all use explicit sprite filename to make very cle…
…ar of what sprite is Reel instance made of. (The automatic buildup of sprite filename with `suffix` when there's no `image` will remain functional.) #193

pisi added a commit that referenced this issue May 20, 2013

Added pretty syntax highlighted code to examples. HTML attributes lin…
…k to definitions and URLs used link to the respective image (or a sample of a sequence) #193

pisi added a commit that referenced this issue May 20, 2013

In order to pickup the data-configured HTML images, a `$.reel.scan()`…
… function is automatically called on DOM ready. For programmatic creation of Reel via the data configuration, you will currently need to make another scan yourself with `$.reel.scan()`. Automatic detection will be placed in the future. #193

pisi added a commit that referenced this issue May 20, 2013

Images carrying the class `"reel"`, which aren't Reel instance yet, a…
…re picked up, have their data payload taken off and fed to `.reel()` as the usual options hash. #193

pisi added a commit that referenced this issue May 20, 2013

`data-images` can carry either a sequence string or an array (multipl…
…e comma-separated values), which needs to be first made into an actual Array type #193

pisi added a commit that referenced this issue May 20, 2013

Annotations can also be defined with pure HTML (and anywhere in the D…
…OM). The node must carry `"reel-annotation"` class, has its own unique ID defined and must reference the Reel instance by its ID with the `data-for` attribute. Such annotations are then picked up, hi-jacked from their original position in the DOM and again their data are removed and serve as annotation definitions, much like the data on the image node does. #193

pisi added a commit that referenced this issue May 20, 2013

Extended the initial existence check to throw out instances when they…
… have both the class and are not inside overlay #193

pisi added a commit that referenced this issue May 20, 2013

Simplified the scan elements check into a single selector. Also the e…
…lements in question are being returned by the function. #193
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 20, 2013

Owner

This feature fully working is already available in the gh-193-data-config branch along with improved examples.

Owner

pisi commented May 20, 2013

This feature fully working is already available in the gh-193-data-config branch along with improved examples.

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 21, 2013

Owner

Works pretty well :) Why didn't I think of that earlier?! Elevated to development branch and ready for release.

Owner

pisi commented May 21, 2013

Works pretty well :) Why didn't I think of that earlier?! Elevated to development branch and ready for release.

@IsraelThompson

This comment has been minimized.

Show comment
Hide comment
@IsraelThompson

IsraelThompson Jul 9, 2013

This is great! I've been thinking along the same lines regarding use of the data-attributes, but was going about intertwining the two my own way. Knowing this, will save me some headache in the future!

This is great! I've been thinking along the same lines regarding use of the data-attributes, but was going about intertwining the two my own way. Knowing this, will save me some headache in the future!

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Nov 5, 2013

Owner

Released today as part of v1.3.0

Owner

pisi commented Nov 5, 2013

Released today as part of v1.3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment