Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Buttons in web view, reverse supported, fixing bullets

  • Loading branch information...
commit 3060db88a27232e4727c125e97d403fe9cc516eb 1 parent 06880ad
@jakearchibald authored
View
7 css/_bullets.scss
@@ -19,9 +19,6 @@
font-size: 24px;
}
- &.previous {
- opacity: 0.5;
- }
&.animate {
@include transition(all, .5s, $ease-in-out-quad);
@@ -30,4 +27,8 @@
&.on {
opacity: 1;
}
+
+ &.previous {
+ opacity: 0.5;
+ }
}
View
3  css/_presentation.scss
@@ -7,6 +7,7 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
+ -webkit-perspective: 823;
}
* {
@@ -20,5 +21,5 @@
top: 0;
left: 0;
- @include transform-style(preserve-3d);
+ //@include transform-style(preserve-3d);
}
View
9 css/_supported.scss
@@ -26,6 +26,15 @@
&.on:not(.no-support) img {
-webkit-filter: grayscale(0) blur(0);
}
+
+ &.deactivated .version {
+ opacity: 0;
+ @include transform( scale(0.1) );
+ }
+
+ &.deactivated:not(.no-support) img {
+ -webkit-filter: grayscale(1) blur(2px);
+ }
}
& .version {
View
8 css/_web-view.scss
@@ -47,6 +47,14 @@
& div {
padding: 4px 10px 4px 26px;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
}
}
+ & .back div {
+ background-image: url(imgs/web-view/back.png);
+ }
+ & .refresh div {
+ background-image: url(imgs/web-view/reload.png);
+ }
}
View
103 css/all.css
@@ -41,103 +41,99 @@ html, body {
width: 100%;
height: 100%; }
-/* line 49, all.scss */
-body {
- -webkit-perspective: 823; }
-
/* Reset */
-/* line 54, all.scss */
+/* line 50, all.scss */
ul, ol, li, form, dl, dt, dd {
padding: 0;
margin: 0;
display: block; }
-/* line 59, all.scss */
+/* line 55, all.scss */
ul, ol {
list-style: none; }
-/* line 63, all.scss */
+/* line 59, all.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
-/* line 66, all.scss */
+/* line 62, all.scss */
img {
-ms-interpolation-mode: bicubic; }
/* Text/Fonts */
-/* line 68, all.scss */
+/* line 64, all.scss */
body, select, input, textarea {
color: #000; }
-/* line 71, all.scss */
+/* line 67, all.scss */
body {
font: 13px/1.231 sans-serif;
*font-size: small; }
-/* line 75, all.scss */
+/* line 71, all.scss */
pre, code, kbd, samp {
font-family: monospace, sans-serif; }
-/* line 76, all.scss */
+/* line 72, all.scss */
sub, sup {
font-size: 75%;
line-height: 0;
position: relative; }
-/* line 77, all.scss */
+/* line 73, all.scss */
sup {
top: -0.5em; }
-/* line 78, all.scss */
+/* line 74, all.scss */
sub {
bottom: -0.25em; }
-/* line 79, all.scss */
+/* line 75, all.scss */
p {
line-height: 1.4; }
/* Links */
-/* line 83, all.scss */
+/* line 79, all.scss */
a img {
border: 0; }
-/* line 87, all.scss */
+/* line 83, all.scss */
a:link, a:visited {
text-decoration: none;
color: #289de9; }
-/* line 92, all.scss */
+/* line 88, all.scss */
a:hover, a:active {
text-decoration: underline; }
/* Forms */
/* Webkit browsers add a 2px margin outside the chrome of form elements */
-/* line 97, all.scss */
+/* line 93, all.scss */
select, input, textarea, button {
font: 99% sans-serif;
margin: 0; }
-/* line 99, all.scss */
+/* line 95, all.scss */
input, select {
vertical-align: middle;
_vertical-align: text-bottom; }
-/* line 104, all.scss */
+/* line 100, all.scss */
input[type="radio"] {
vertical-align: text-bottom; }
-/* line 105, all.scss */
+/* line 101, all.scss */
input[type="checkbox"] {
vertical-align: bottom;
*vertical-align: baseline; }
-/* line 107, all.scss */
+/* line 103, all.scss */
textarea, input {
font-family: arial, sans-serif;
font-size: 1em; }
-/* line 112, all.scss */
+/* line 108, all.scss */
button.custom {
padding: 0;
margin: 0;
@@ -149,16 +145,16 @@ button.custom {
font-size: 1em;
width: auto; }
-/* line 123, all.scss */
+/* line 119, all.scss */
button.custom::-moz-focus-inner {
border: 0;
padding: 0; }
-/* line 127, all.scss */
+/* line 123, all.scss */
legend {
*margin-left: -7px; }
-/* line 129, all.scss */
+/* line 125, all.scss */
label, input[type="button"], input[type="submit"], input[type="image"], button {
cursor: pointer; }
@@ -206,24 +202,20 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
- user-select: none; }
+ user-select: none;
+ -webkit-perspective: 823; }
-/* line 12, _presentation.scss */
+/* line 13, _presentation.scss */
* {
cursor: none !important; }
-/* line 16, _presentation.scss */
+/* line 17, _presentation.scss */
.mankini-presentation {
width: 100%;
height: 100%;
position: absolute;
top: 0;
- left: 0;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
- transform-style: preserve-3d; }
+ left: 0; }
/* line 1, _slide.scss */
.slide {
@@ -306,19 +298,19 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
left: -37px;
top: 7px;
font-size: 24px; }
- /* line 22, _bullets.scss */
- .mankini-bullet.previous {
- opacity: 0.5; }
- /* line 26, _bullets.scss */
+ /* line 23, _bullets.scss */
.mankini-bullet.animate {
-webkit-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
-moz-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
-ms-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
-o-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s; }
- /* line 30, _bullets.scss */
+ /* line 27, _bullets.scss */
.mankini-bullet.on {
opacity: 1; }
+ /* line 31, _bullets.scss */
+ .mankini-bullet.previous {
+ opacity: 0.5; }
/* line 1, _arrows.scss */
.mankini-arrow1 {
@@ -554,7 +546,15 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
text-indent: -5000px; }
/* line 48, _web-view.scss */
.mankini-toolbar [role='button'] div {
- padding: 4px 10px 4px 26px; }
+ padding: 4px 10px 4px 26px;
+ background-position: 50% 50%;
+ background-repeat: no-repeat; }
+ /* line 54, _web-view.scss */
+ .mankini-toolbar .back div {
+ background-image: url(imgs/web-view/back.png); }
+ /* line 57, _web-view.scss */
+ .mankini-toolbar .refresh div {
+ background-image: url(imgs/web-view/reload.png); }
/* line 1, _pointer.scss */
.mankini-pointer {
@@ -669,7 +669,18 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
/* line 26, _supported.scss */
.mankini-supported .supported-item.on:not(.no-support) img {
-webkit-filter: grayscale(0) blur(0); }
- /* line 31, _supported.scss */
+ /* line 30, _supported.scss */
+ .mankini-supported .supported-item.deactivated .version {
+ opacity: 0;
+ -webkit-transform: scale(0.1);
+ -moz-transform: scale(0.1);
+ -ms-transform: scale(0.1);
+ -o-transform: scale(0.1);
+ transform: scale(0.1); }
+ /* line 35, _supported.scss */
+ .mankini-supported .supported-item.deactivated:not(.no-support) img {
+ -webkit-filter: grayscale(1) blur(2px); }
+ /* line 40, _supported.scss */
.mankini-supported .version {
position: absolute;
top: 0;
@@ -688,20 +699,20 @@ label, input[type="button"], input[type="submit"], input[type="image"], button {
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transform: scale(0.1); }
- /* line 48, _supported.scss */
+ /* line 57, _supported.scss */
.mankini-supported img {
width: 142px;
-webkit-filter: grayscale(1) blur(2px);
margin: 0 auto;
display: block; }
- /* line 55, _supported.scss */
+ /* line 64, _supported.scss */
.mankini-supported.animate {
-webkit-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
-moz-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
-ms-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
-o-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
- /* line 59, _supported.scss */
+ /* line 68, _supported.scss */
.mankini-supported.on {
opacity: 1; }
View
4 css/all.scss
@@ -46,10 +46,6 @@ html, body {
height: 100%;
}
-body {
- -webkit-perspective: 823;
-}
-
/* Reset */
ul, ol, li, form, dl, dt, dd {
padding: 0;
View
BIN  css/imgs/web-view/back.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  css/imgs/web-view/reload.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
10 js/mankini/Builder.js
@@ -7,7 +7,7 @@
function Builder(presentation) {
this._presentation = presentation;
- this._notes = new mankini.Notes( true );
+ this._notes = new mankini.Notes( 0 );
this._pointer = new mankini.Pointer();
this._pointer.$container.appendTo( document.body );
@@ -273,6 +273,14 @@
});
};
+ BuilderProto.supportedDeactivate = function(item) {
+ var builder = this;
+
+ return this.action(function( animate, $slide ) {
+ builder._supported.deactivate( animate, item );
+ });
+ };
+
BuilderProto.startHere = function() {
this._presentation.reset();
return this;
View
12 js/mankini/slide/Supported.js
@@ -2,7 +2,7 @@
function Supported(className) {
this.$container = $('<div class="mankini-supported"/>').addClass( className || '' );
this._index = 0;
- this._items = [];
+ this._$items = $();
}
var SupportedProto = Supported.prototype;
@@ -22,19 +22,25 @@
$supportedItem.addClass('no-support');
}
- this._items.push( $supportedItem );
+ this._$items.push( $supportedItem[0] );
$supportedItem.appendTo( this.$container );
return this;
};
SupportedProto.showNext = function( animate ) {
- mankini.utils.animateToClass( animate, this._items[ this._index++ ] );
+ mankini.utils.animateToClass( animate, this._$items.eq( this._index++ ) );
};
SupportedProto.show = function( animate ) {
mankini.utils.animateToClass( animate, this.$container );
};
+ SupportedProto.deactivate = function( animate, item ) {
+ var $toDeactivate = this._$items.filter( '.' + item );
+
+ mankini.utils.animateToClass( animate, $toDeactivate, 'deactivated' );
+ };
+
mankini.slide.Supported = Supported;
})();
View
36 js/mankini/slide/WebView.js
@@ -5,8 +5,8 @@
this.$container = $('' +
'<div class="mankini-web-view">' +
'<div class="mankini-toolbar">' +
- '<div role="button" class="back"><div>Back</div></div>' +
- '<div role="button" class="refresh"><div>Refresh</div></div>' +
+ '<div role="button" class="back no-label"><div>Back</div></div>' +
+ '<div role="button" class="refresh no-label"><div>Refresh</div></div>' +
'</div>' +
'<iframe src="about:blank"></iframe>' +
'</div>' +
@@ -15,6 +15,7 @@
});
this._$iframe = this.$container.find('iframe');
+ this._shown = false;
this.$container.find('.back').on('click', function(event) {
webView.back();
@@ -32,22 +33,25 @@
WebViewProto.url = function(animate, str) {
var webView = this;
- if (animate) {
- this._$iframe.one('load', function() {
- webView.$container.transition({
- height: webView.$container.fullHeight(),
+ if ( !this._shown ) {
+ if (animate) {
+ this._$iframe.one('load', function() {
+ webView.$container.transition({
+ height: webView.$container.fullHeight(),
+ opacity: 1
+ }, {
+ duration: 300,
+ easing: 'easeOutQuad'
+ });
+ });
+ }
+ else {
+ webView.$container.css({
+ height: 'auto',
opacity: 1
- }, {
- duration: 300,
- easing: 'easeOutQuad'
});
- });
- }
- else {
- webView.$container.css({
- height: 'auto',
- opacity: 1
- });
+ }
+ this._shown = true;
}
this._$iframe[0].src = str;
View
7 js/mankini/transitions.js
@@ -43,6 +43,7 @@
presentation.$container.vendorCss({
transform: 'translate3d(0,0,0) rotateY(0deg) translate3d(0,0,0)',
+ transformStyle: 'preserve-3d',
backfaceVisibility: 'hidden'
}).transition({
transform: 'translate3d(-50%,0,0) rotateY(-90deg) translate3d(-50%,0,0)'
@@ -56,19 +57,19 @@
}
});
},
- zoomSpin: function(presentation, oldSlide, newSlide) {
+ zoom: function(presentation, oldSlide, newSlide) {
presentation.$container.append( newSlide.$container );
newSlide.init( true );
newSlide.$container.vendorCss({
- transform: 'rotate(25deg) scale(1.5)',
+ transform: 'scale(15)',
backfaceVisibility: 'hidden',
opacity: 0
}).transition({
transform: '',
opacity: 1
}, {
- duration: 500,
+ duration: 300,
easing: 'easeOutQuad',
complete: function() {
newSlide.$container[0].style.cssText = '';
Please sign in to comment.
Something went wrong with that request. Please try again.