Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

working

  • Loading branch information...
commit 6351a676d03bdf1d08b323cf067a7b2e476ef10c 1 parent 67217a0
André Fiedler authored
Showing with 155 additions and 99 deletions.
  1. +1 −1  .c9settings.xml
  2. +2 −2 css/pageflip.css
  3. +152 −96 js/pageflip.js
View
2  .c9settings.xml
@@ -1 +1 @@
-<settings version="0.0.2" ><auto><configurations /><panel>{"ext/editors/editors":{"parent":{"visible":2,"flex":1},"visible":2,"flex":1},"ext/tree/tree":{"parent":{"visible":2,"width":"200"},"visible":true,"flex":3,"state":"normal"},"ext/console/console":{"parent":{"visible":2,"height":"41"},"visible":false,"flex":1}}</panel><tree>["folder[1]","folder[1]/folder[2]","folder[1]/folder[3]","folder[1]/folder[3]/file[2]","folder[1]/folder[1]","folder[1]/folder[1]/file[1]"]</tree><files active="/sunbox/mootools-pageflip/workspace/js/pageflip.js"><file path="/sunbox/mootools-pageflip/workspace/js/pageflip.js" type="file" size="2437" name="pageflip.js" contenttype="application/javascript; charset=utf-8" creationdate="" lockable="false" hidden="false" executable="false" scriptname="/home/ide_sunbox/workspaces/mootools-pageflip/js/pageflip.js"/><file path="/sunbox/mootools-pageflip/workspace/css/pageflip.css" type="file" size="159" name="pageflip.css" contenttype="text/css; charset=utf-8" creationdate="" lockable="false" hidden="false" executable="false" scriptname="/home/ide_sunbox/workspaces/mootools-pageflip/css/pageflip.css"/></files></auto><general name="General" page="pgSettingsGeneral" saveallbeforerun="1" openfiles="1"><keybindings name="Keybindings" page="pgSettingsKeybindings" /></general><editors name="Editor" page="pgSettingsEditors" ><code name="Code Editor" overwrite="false" selectstyle="line" activeline="true" showinvisibles="false" showprintmargin="true" printmargincolumn="80" softtabs="1" tabsize="4" scrollspeed="2" page="pgSettingsCode_Editor" /></editors></settings>
+<settings version="0.0.2" ><auto><configurations /><panel>{"ext/editors/editors":{"parent":{"visible":2,"flex":1},"visible":2,"flex":1},"ext/tree/tree":{"parent":{"visible":2,"width":"200"},"visible":true,"flex":3,"state":"normal"},"ext/console/console":{"parent":{"visible":2,"height":"41"},"visible":false,"flex":1}}</panel><tree>["folder[1]","folder[1]/folder[3]","folder[1]/folder[3]/file[2]","folder[1]/folder[1]","folder[1]/folder[1]/file[1]"]</tree><files active="/sunbox/mootools-pageflip/workspace/js/pageflip.js"><file path="/sunbox/mootools-pageflip/workspace/js/pageflip.js" type="file" size="3060" name="pageflip.js" contenttype="application/javascript; charset=utf-8" creationdate="" lockable="false" hidden="false" executable="false" scriptname="/home/ide_sunbox/workspaces/mootools-pageflip/js/pageflip.js"/></files></auto><general name="General" page="pgSettingsGeneral" saveallbeforerun="true"/><editors name="Editor" page="pgSettingsEditors"><code name="Code Editor" overwrite="false" selectstyle="line" activeline="true" showinvisibles="false" showprintmargin="true" printmargincolumn="80" softtabs="true" tabsize="4" scrollspeed="2"/></editors></settings>
View
4 css/pageflip.css
@@ -1,7 +1,7 @@
-body { background: #b1b094; }
+body { background: #b1b094 url(../gfx/content_back.jpg) repeat-x; }
#pageflip { position: relative; width: 975px; height: 700px; }
-#pageflip .page { position: absolute; left: 325px; top: 0; height: 700px; }
+#pageflip .page { position: absolute; left: 325px; top: 0; height: 700px; cursor: pointer; }
#pageflip .arrow-left,
#pageflip .arrow-right { position: absolute; display: block; width: 74px; height: 52px; top: 324px; }
#pageflip .arrow-left { background: url(../gfx/page-left.gif); left: 100px; }
View
248 js/pageflip.js
@@ -1,105 +1,161 @@
-window.addEvent('domready', function(){
-
- var container = $('pageflip');
- var images = ['front', 'page-1-1', 'page-1-2', 'page-2-1', 'page-2-2'];
- var els = [];
-
- var zIndex = 999;
-
- var la = new Element('a', {
- href: '#',
- 'class': 'arrow-left'
- }).inject(container);
- var ra = new Element('a', {
- href: '#',
- 'class': 'arrow-right'
- }).inject(container).fade('hide');
+var PageFlip = new Class({
- var running = false;
+ zIndex: 999,
- images.each(function(img){
- els[img] = new Element('div', {
- 'class': 'page',
- styles: {
- background: 'url(gfx/' + img + '.jpg) no-repeat',
- width: 0,
- 'z-index': zIndex--
- }
+ initialize: function(container, images){
+ var els = [];
+ var self = this;
+
+ var la = new Element('a', {
+ href: '#',
+ 'class': 'arrow-left'
}).inject(container);
+ var ra = new Element('a', {
+ href: '#',
+ 'class': 'arrow-right'
+ }).inject(container).fade('hide');
- els[img].get('morph').addEvent('complete', function(){
- running = false;
+ var running = false;
+
+ images.each(function(img){
+ els[img] = new Element('div', {
+ 'class': 'page',
+ styles: {
+ background: 'url(gfx/' + img + '.jpg) no-repeat',
+ width: 0,
+ 'z-index': self.zIndex--
+ }
+ }).inject(container);
+
+ els[img].get('morph').addEvent('complete', function(){
+ running = false;
+ });
});
- });
+ this.zIndex = 999;
+
+ els['front'].setStyle('width', 325);
+ els['page-1-2'].setStyle('width', 325);
+ //els['page-2-1'].setStyle('width', 325);
+
+
+ var i = 0;
+ container.addEvent('click', function(e){
+ e.stop();
+ if(running) return;
+ switch(i++){
+ case 0: // Seite 1 aufklappen
+ els['front'].set('morph', {
+ duration: 250
+ });
+ els['page-1-1'].set('morph', {
+ duration: 500
+ });
+ els['page-1-1'].setStyles({
+ left: 650,
+ 'background-position': 0
+ });
+ els['front'].morph({
+ width: 0
+ });
+ els['page-1-1'].morph({
+ left: 0,
+ width: 325
+ });
+ running = true;
+ la.fade('out');
+ ra.fade('in');
+ break;
+
+ case 1: // Seite 2 aufklappen
+ els['page-1-2'].set('morph', {
+ duration: 250
+ });
+ els['page-2-2'].set('morph', {
+ duration: 500
+ });
+ els['page-2-2'].setStyle('left', 325);
+ els['page-1-2'].morph({
+ left: 650,
+ width: 0,
+ 'background-position': -350
+ });
+ els['page-2-1'].morph({
+ width: 325
+ });
+ els['page-2-2'].morph({
+ left: 650,
+ width: 325
+ });
+ running = true;
+ ra.fade('out');
+ break;
+
+ case 2: // Seite 2 zuklappen
+ self.toTop(els['page-1-2']);
+ self.toTop(els['page-2-2']);
+ els['page-1-2'].set('morph', {
+ duration: 500
+ });
+ els['page-2-2'].set('morph', {
+ duration: 250
+ });
+ els['page-1-2'].setStyles({
+ left: 975,
+ width: 0,
+ 'background-position': 0
+ });
+ els['page-1-2'].morph({
+ left: 325,
+ width: 325
+ });
+ els['page-2-2'].morph({
+ width: 0
+ });
+ ra.fade.delay(250, ra, ['in']);
+ running = true;
+ break;
+
+ case 3: // Seite 1 zuklappen
+ self.toTop(els['front']);
+ self.toTop(els['page-1-1']);
+ els['front'].set('morph', {
+ duration: 500
+ });
+ els['page-1-1'].set('morph', {
+ duration: 250
+ });
+ els['front'].setStyles({
+ left: 0,
+ width: 0,
+ 'background-position': -350
+ });
+ els['page-1-1'].morph({
+ left: 325,
+ width: 0,
+ 'background-position': -320
+ });
+ els['front'].morph({
+ left: 325,
+ width: 325,
+ 'background-position': 0
+ });
+ la.fade.delay(250, la, ['in']);
+ ra.fade('out');
+ running = true;
+ i = 0;
+ break;
+ }
+ });
+ },
- els['front'].setStyle('width', 325);
- els['page-1-2'].setStyle('width', 325);
- //els['page-2-1'].setStyle('width', 325);
+ toTop: function(el){
+ el.setStyle('z-index', this.zIndex++);
+ }
+});
+
+
+window.addEvent('domready', function(){
+ new PageFlip($('pageflip'), ['front', 'page-1-1', 'page-1-2', 'page-2-1', 'page-2-2']);
- var i = 0;
- container.addEvent('click', function(e){
- e.stop();
- if(running) return;
- switch(i++){
- case 0: // Seite 1 aufklappen
- els['front'].set('morph', {
- duration: 250
- });
- els['page-1-1'].set('morph', {
- duration: 500
- });
- els['page-1-1'].setStyle('left', 650);
- els['front'].morph({
- width: 0
- });
- els['page-1-1'].morph({
- left: 0,
- width: 325
- });
- running = true;
- la.fade('out');
- ra.fade('in');
- break;
- case 1: // Seite 2 aufklappen
- els['page-1-2'].set('morph', {
- duration: 250
- });
- els['page-2-2'].set('morph', {
- duration: 500
- });
- els['page-2-2'].setStyle('left', 325);
- els['page-1-2'].morph({
- left: 650,
- width: 0,
- 'background-position': -350
- });
- els['page-2-1'].morph({
- width: 325
- });
- els['page-2-2'].morph({
- left: 650,
- width: 325
- });
- running = true;
- ra.fade('out');
- break;
- /*
- case 2: // Seite 2 zuklappen
- els['page-1-2'].morph({
- left: 325,
- width: 325,
- 'background-position': 0
- });
- els['page-2-1'].morph({
- width: 0
- });
- els['page-2-2'].morph({
- left: 325,
- width: 0
- });
- running = true;
- break;*/
- }
- });
});
Please sign in to comment.
Something went wrong with that request. Please try again.