janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

impressive class names refactoring

Browse Source
This commit is contained in:
Bartek Szopka
2012-03-10 15:39:22 +01:00
parent 5cb28b612f
commit 9d495abba7
3 changed files with 52 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/impress-demo.css
View File

@@ -167,7 +167,7 @@ body { pointer-events: none; }
transition: opacity 1s, transform 0.5s 1s; transition: opacity 1s, transform 0.5s 1s;
} }
.step-bored + .hint { .impress-on-bored .hint {
opacity: 1; opacity: 1;
-webkit-transition: opacity 1s 5s, -webkit-transform 0.5s; -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
@@ -425,7 +425,7 @@ body { pointer-events: none; }
/* on overview step everything is visible */ /* on overview step everything is visible */
#impress.step-overview .step { .impress-on-overview .step {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }

54
index.html
View File

@@ -95,29 +95,44 @@
<link rel="shortcut icon" href="favicon.png" /> <link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head> </head>
<body>
<!-- <!--
That's the wrapper for your presentation steps. In this element all the impress.js magic happens. Body element is used by impress.js to set some useful class names, that will allow you to detect
It doesn't have to be a `<div>`. Only `id` is important here as that's how the script find it. the support and state of the presentation in CSS or other scripts.
It's worth to notice the `impress-not-supported` class. This class means, that browser doesn't First very useful class name is `impress-not-supported`. This class means, that browser doesn't
support features required by impress.js, so you can apply some fallback styles in your CSS. support features required by impress.js, so you should apply some fallback styles in your CSS.
It's not necessary to add it manually on this element. If the script detects that browser is not It's not necessary to add it manually on this element. If the script detects that browser is not
good enough it will add this class, but keeping it in HTML means that users without JavaScript good enough it will add this class, but keeping it in HTML means that users without JavaScript
will also get fallback styles. will also get fallback styles.
The class name on this element also depends on currently active presentation step. More details about When impress.js script detects that browser supports all required features, this class name will
it can be found below, when `hint` element is being described. be removed.
The class name on body element also depends on currently active presentation step. More details about
it can be found later, when `hint` element is being described.
--> -->
<div id="impress" class="impress-not-supported"> <body class="impress-not-supported">
<div class="fallback-message"> <!--
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p> For example this fallback message is only visible when there is `impress-not-supported` class on body.
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser. Upcoming version 10 of Internet Explorer <i>should</i> also handle it.</p> -->
</div> <div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<!--
Now that's the core element used by impress.js.
That's the wrapper for your presentation steps. In this element all the impress.js magic happens.
It doesn't have to be a `<div>`. Only `id` is important here as that's how the script find it.
-->
<div id="impress">
<!-- <!--
@@ -267,19 +282,20 @@
But it can show you how to use impress.js features in creative way. But it can show you how to use impress.js features in creative way.
When the presentation step is shown (selected) it's element get's the class of "active" and `#impress` root When the presentation step is shown (selected) its element gets the class of "active" and the body element
element get's the class based on active step id `step-ID` (where ID is the step id)... It probably is not gets the class based on active step id `impress-on-ID` (where ID is the step's id)... It may not be
so clear because of all these IDs in here, so for example when the first step (the one with id of `bored`) so clear because of all these "ids" in previous sentence, so for example when the first step (the one with
is active, `#impress` element get a class of `step-bored`. the id of `bored`) is active, body element gets a class of `impress-on-bored`.
This class is used by this hint below. Check CSS file to see how it's shown with delayed CSS animation. This class is used by this hint below. Check CSS file to see how it's shown with delayed CSS animation when
the first step of presentation is visible for a couple of seconds.
... ...
And when it comes to this piece of JavaScript below ... kids, don't do this at home ;) And when it comes to this piece of JavaScript below ... kids, don't do this at home ;)
It's just a quick and dirty workaround to get different content for touch devices. It's just a quick and dirty workaround to get different hint text for touch devices.
In a real world it should be at least placed in separate JS file ... and the touch content should be In a real world it should be at least placed in separate JS file ... and the touch content should be
probably just hidden somewhere in HTML, not hard-coded in the script. probably just hidden somewhere in HTML - not hard-coded in the script.
Just sayin' ;) Just sayin' ;)

26
js/impress.js
View File

@@ -110,13 +110,23 @@
}; };
// CHECK SUPPORT // CHECK SUPPORT
var body = document.body;
var ua = navigator.userAgent.toLowerCase(); var ua = navigator.userAgent.toLowerCase();
var impressSupported = ( pfx("perspective") != null ) && var impressSupported = ( pfx("perspective") != null ) &&
( document.body.classList ) && ( body.classList ) &&
( document.body.dataset ) && ( body.dataset ) &&
( ua.search(/(iphone)|(ipod)|(android)/) == -1 ); ( ua.search(/(iphone)|(ipod)|(android)/) == -1 );
if (!impressSupported) {
// we can't be sure that `classList` is supported
body.className += " impress-not-supported ";
return;
} else {
body.classList.remove("impress-not-supported");
body.classList.add("impress-supported");
}
var roots = {}; var roots = {};
var defaults = { var defaults = {
@@ -143,13 +153,6 @@
var root = byId( rootId ); var root = byId( rootId );
if (!impressSupported) {
root.className = "impress-not-supported";
return;
} else {
root.className = "";
}
// viewport updates for iPad // viewport updates for iPad
var meta = $("meta[name='viewport']") || document.createElement("meta"); var meta = $("meta[name='viewport']") || document.createElement("meta");
// hardcoding these values looks pretty bad, as they kind of depend on the content // hardcoding these values looks pretty bad, as they kind of depend on the content
@@ -188,7 +191,7 @@
document.documentElement.style.height = "100%"; document.documentElement.style.height = "100%";
css(document.body, { css(body, {
height: "100%", height: "100%",
overflow: "hidden" overflow: "hidden"
}); });
@@ -297,10 +300,11 @@
if ( active ) { if ( active ) {
active.classList.remove("active"); active.classList.remove("active");
body.classList.remove("impress-on-" + active.id);
} }
el.classList.add("active"); el.classList.add("active");
root.className = "step-" + el.id; body.classList.add("impress-on-" + el.id);
// Setting fragment URL with `history.pushState` // Setting fragment URL with `history.pushState`
// and it has to be set after animation finishes, because in Chrome it // and it has to be set after animation finishes, because in Chrome it