Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Breaking out css and js into separate files.
- Loading branch information
Showing
3 changed files
with
144 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| .ui-flipbook { float: left; } | ||
|
|
||
| .ui-flipbook-controls { | ||
| margin: 0; padding: 0.5em 1em; float: left; width: 12em; | ||
| border-width: 0 1px 0 0; | ||
| } | ||
| .ui-flipbook-status { height: 1.5em; line-height: 1.5em; padding: 0.2em; } | ||
| .ui-flipbook-buttons { margin: 0.8em auto; width: 9em; } | ||
| .ui-flipbook-buttons a:last-child { margin-right: 0; } | ||
| .ui-flipbook-speed { | ||
| margin-top: 0.8em; | ||
| height: 5px; | ||
| } | ||
| .ui-flipbook-speed .ui-slider-handle { | ||
| height: 9px; width: 9px; | ||
| top: -3px; margin-left: -6px; | ||
| } | ||
| .ui-flipbook-loop { width: 9em; margin: 0.8em auto; float: none; } | ||
| .ui-flipbook-loop .fg-button { display: block; float: none; width: 100%; margin: -1px 0 0; } | ||
| .ui-flipbook-loop .ui-state-hover { z-index: 13; } | ||
| .ui-flipbook-loop .ui-state-active { z-index: 17; } | ||
| ul.ui-flipbook-indicators { list-style-type: none; clear: both; margin: 0; padding: 0; width: 100%; font-size: 1.2em; } | ||
| ul.ui-flipbook-indicators li { float: left; color: green; margin: 0 0 0.2em; padding: 0 0.2em; } | ||
| ul.ui-flipbook-indicators li.disabled { color: red; background: none !important; } | ||
| ul.ui-flipbook-indicators li.active { background: #85B5D9; } | ||
|
|
||
| .ui-flipbook-images { | ||
| position: relative; float: left; | ||
| border-width: 0 0 0 1px; | ||
| margin-left: -1px; | ||
| padding: 3px; | ||
| } | ||
| .ui-flipbook-images img { position: absolute; top: 3px; left: 3px; } | ||
|
|
||
| .ui-flipbook-normal { color: #777777; text-shadow: 0 0 0 white; } | ||
| .ui-flipbook-accent { color: #2E6E9E; text-shadow: 0 0 8px #E17009; } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
|
|
||
| (function(jq) { | ||
|
|
||
| jq.widget('ui.flipbook', { | ||
|
|
||
| _init: function( ) { | ||
| var context = this.element[0]; | ||
|
|
||
| this.element | ||
| .addClass('ui-flipbook ui-widget ui-widget-content ui-corner-all ui-helper-clearfix') | ||
| .attr({role: 'flipbook'}) | ||
| .append( | ||
| '<div class="ui-flipbook-controls ui-widget-content ui-corner-left">' + | ||
| ' <div class="ui-flipbook-status ui-widget-content ui-corner-all"></div>' + | ||
| ' <div class="ui-flipbook-buttons ui-helper-clearfix">' + | ||
| ' <a class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Prev"><span class="ui-icon ui-icon-seek-prev"></span>Prev</a>' + | ||
| ' <a class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Play"><span class="ui-icon ui-icon-play"></span>Play</a>' + | ||
| ' <a class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Next"><span class="ui-icon ui-icon-seek-next"></span>Next</a>' + | ||
| ' </div>' + | ||
| ' <div class="ui-flipbook-speed"></div>' + | ||
| ' <div class="ui-flipbook-loop fg-buttonset fg-buttonset-single">' + | ||
| ' <button name="Forward" class="fg-button ui-state-default ui-priority-primary ui-corner-top ui-state-active">Forward</button>' + | ||
| ' <button name="Reverse" class="fg-button ui-state-default ui-priority-primary">Reverse</button>' + | ||
| ' <button name="Bounce" class="fg-button ui-state-default ui-priority-primary ui-corner-bottom">Bounce</button>' + | ||
| ' </div>' + | ||
| ' <ul class="ui-flipbook-indicators ui-helper-clearfix"></ul>' + | ||
| '</div>' + | ||
| '<div class="ui-flipbook-images ui-widget-content ui-corner-right" style="width:500px;height:375px;">' + | ||
| '</div>' | ||
| ); | ||
|
|
||
| // slider for animation speed | ||
| jq('.ui-flipbook-speed', context).slider({ | ||
| min: 1, | ||
| max: 100, | ||
| range: 'min' | ||
| }); | ||
|
|
||
| // all hover and mousedown/up logic for buttons | ||
| jq('.fg-button:not(.ui-state-disabled)', context) | ||
| .hover( | ||
| function(){ | ||
| jq(this).addClass('ui-state-hover'); | ||
| }, | ||
| function(){ | ||
| jq(this).removeClass('ui-state-hover'); | ||
| } | ||
| ) | ||
| .mousedown(function(){ | ||
| jq(this).parents('.fg-buttonset-single:first').find('.fg-button.ui-state-active').removeClass('ui-state-active'); | ||
| if( jq(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ jq(this).removeClass('ui-state-active'); } | ||
| else { jq(this).addClass('ui-state-active'); } | ||
| }) | ||
| .mouseup(function(){ | ||
| if(! jq(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button, .fg-buttonset-multi .fg-button') ){ | ||
| jq(this).removeClass('ui-state-active'); | ||
| } | ||
| }); | ||
|
|
||
| jq('a[title=Play]', context).click(function() { | ||
| console.log('play'); | ||
| }); | ||
| jq('a[title=Prev]', context).click(function() { | ||
| console.log('prev'); | ||
| }); | ||
| jq('a[title=Next]', context).click(function() { | ||
| console.log('next'); | ||
| }); | ||
|
|
||
|
|
||
| jq('button[name=Forward]', context).click(function() { | ||
| console.log('forward'); | ||
| }); | ||
| jq('button[name=Reverse]', context).click(function() { | ||
| console.log('reverse'); | ||
| }); | ||
| jq('button[name=Bounce]', context).click(function() { | ||
| console.log('bounce'); | ||
| }); | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| jq.extend(jq.ui.flipbook, { | ||
| version: '0.0.0', | ||
| defaults: { | ||
| delay: 500, | ||
| planningTimes: [11, 13, 15] | ||
| } | ||
| }); | ||
|
|
||
| })(jQuery); | ||
|
|