k4slide 0.0.3 → 0.0.4

data/assets-src/javascripts/lib/k4/slide/config.js

@@ -26,8 +26,8 @@ k4.slide.Config.DEFAULT_CONFIG = {
     },
     'slide': {
         'pattern': 'div[role="slide"]',
-        'width': 640,
-        'height': 480,
+        'width': 1024,
+        'height': 768,
         'ratio': 1.0,
         'class': {
             'current': 'current',
@@ -69,7 +69,7 @@ k4.slide.Config.prototype.set= function(key, val) {
         if (i == lastIndex) {
             tmp[k] = val;
         } else {
-            tmp = (goog.isDefAndNotNull(tmp) && goog.isObject(tmp)) ? tmp[k] : undefined;
+            tmp = tmp[k];
         }
     }, this);
 };

data/assets-src/javascripts/lib/k4/slide/controller.js

@@ -34,9 +34,9 @@ k4.slide.Controller = function(config) {
     this.current_ = 0;
 
     /**
-     * @type {goog.history.Html5History}
+     * @type {goog.History}
      */
-    this.history_ = null;
+    this.history_ = new goog.History();
 }
 goog.inherits(k4.slide.Controller, goog.ui.Component);
 
@@ -91,18 +91,27 @@ k4.slide.Controller.prototype.calculateSlideSizeAndPosition_ = function() {
     if (aspectRatio > slideAspect) {
         toHeight = Math.floor(winHeight - (winMargin * 2));
         slideRatio = toHeight / slideHeight;
+        toWidth = slideWidth * slideRatio;
     } else {
         toWidth = Math.floor(winWidth - (winMargin * 2));
         slideRatio = toWidth / slideWidth;
+        toHeight = slideHeight * slideRatio;
         isHorizonal = false;
     }
     c.set('slide.ratio', slideRatio);
 
     // position
+    // current
     var slideTop = Math.round((winHeight - slideHeight) / 2);
     var slideLeft = Math.round((winWidth - slideWidth) / 2);
-    c.set('slide.top', slideTop);
-    c.set('slide.left', slideLeft)
+    c.set('slide.current.top', slideTop);
+    c.set('slide.current.left', slideLeft);
+    // next
+    var nextLeft = ((winWidth + slideWidth) / 2) + (toWidth - slideWidth) + c.get('window.margin');
+    c.set('slide.next.left', nextLeft);
+    // prev
+    var prevLeft = ((winWidth - slideWidth) / 2) - (toWidth) - c.get('window.margin');
+    c.set('slide.prev.left', prevLeft);
 
     // set ratio
     this.setSlideScale_();
@@ -110,13 +119,21 @@ k4.slide.Controller.prototype.calculateSlideSizeAndPosition_ = function() {
 
 k4.slide.Controller.prototype.setSlideScale_ = function() {
     var c = this.config_;
+    var sTop  = c.get('slide.current.top');
+    var sLeft = c.get('slide.current.left');
+    var nLeft = c.get('slide.next.left');
+    var pLeft = c.get('slide.prev.left');
     var ratio = c.get('slide.ratio');
 
     var installStyles = [
+        'div.current{top:'+ sTop.toString() +'px; left:'+ sLeft.toString() +'px;}',
+        'div.next{top:'+ sTop.toString() +'px; left:'+ nLeft.toString() +'px;}',
+        'div.prev{top:'+ sTop.toString() +'px; left:'+ pLeft.toString() +'px;}',
         'div[role="slide"]{',
         '-webkit-transform: scale('+ ratio.toString() +');}',
         '-moz-transform: scale('+ ratio.toString() +');',
-        '}'
+        '}',
+        ''
     ].join("");
     goog.style.installStyles(installStyles);
 };
@@ -192,28 +209,52 @@ k4.slide.Controller.prototype.getPrev = function() {
  * @return {k4.slide.|null|undefined}
  */
 k4.slide.Controller.prototype.updateTitle = function() {
-    if (this.history_) {
-        var c = this.getCurrent();
-        if (c) {
-            var el = c.getElement();
-            if (el) {
-                var page = el.getAttribute('page');
-                if (page) {
-                    this.history_.setToken(page);
-                }
-            }
+    var c = this.getCurrent();
+    if (c) {
+        var p = c.getPage();
+        if (p) {
+            this.setToken(p);
         }
     }
 };
 
+/**
+ * Get current slide object
+ * @return {k4.slide.|null|undefined}
+ */
+k4.slide.Controller.prototype.getCurrentPageNumber = function() {
+    var page = 0;
+    if (this.history_) {
+        page = parseInt(this.history_.getToken(), 10);
+    }
+    return page;
+};
+
+/**
+ * Get current slide object
+ * @return {k4.slide.|null|undefined}
+ */
+k4.slide.Controller.prototype.setToken = function(val) {
+    if (this.history_) {
+        this.history_.setToken(val);
+    }
+};
 
 /**
  * start presentation
  */
 k4.slide.Controller.prototype.start = function() {
+    var l = 0;
     if (goog.isArrayLike(this.slides_) && this.slides_.length > 0) {
-        this.slides_[0].applyClasses(this.config_.get('slide.class.current'));
-        this.slides_[0].show();
+        goog.array.forEach(this.slides_, function(s, i, a) {
+            if (i == l) {
+                s.toCurrent();
+            } else if (i < l) {
+                s.toPrev();
+            } else if (i > l) {
+                s.toNext();
+            }
+        }, this);
     }
 };
 
@@ -227,6 +268,7 @@ k4.slide.Controller.prototype.next = function() {
         currentSlide.toPrev();
         nextSlide.toCurrent();
         this.current_++;
+        this.updateTitle();
     }
 };
 
@@ -240,6 +282,21 @@ k4.slide.Controller.prototype.back = function() {
         currentSlide.toNext();
         prevSlide.toCurrent();
         this.current_--;
+        this.updateTitle();
+    }
+};
+
+/**
+ * goto
+ */
+k4.slide.Controller.prototype.goTo = function(page) {
+    var currentSlide = this.getCurrent();
+    var gotoSlide = this.slides_[parseInt(page, 10)];
+    if (gotoSlide) {
+        currentSlide.toNext();
+        prevSlide.toCurrent();
+        this.current_--;
+        this.updateTitle();
     }
 };
 

data/assets-src/javascripts/lib/k4/slide/slide.js

@@ -2,6 +2,7 @@ goog.provide('k4.slide.Slide');
 
 goog.require('goog.dom.classes');
 goog.require('goog.style');
+goog.require('goog.string');
 goog.require('goog.math.Size');
 goog.require('goog.math.Coordinate');
 goog.require('goog.ui.Component');
@@ -38,9 +39,8 @@ k4.slide.Slide.prototype.init_ = function() {
     // size
     this.setSizeByConfig();
     // position
-    this.setPositionByConfig();
-    // hide
-    goog.style.showElement(el, false);
+    // this.setPositionByConfig();
+    this.hide();
 };
 
 /**
@@ -85,7 +85,8 @@ k4.slide.Slide.prototype.setPositionByConfig = function() {
  */
 k4.slide.Slide.prototype.show = function() {
     var el = this.getElement();
-    goog.style.showElement(el, true);
+    goog.style.setOpacity(el, 1);
+    // goog.style.showElement(el, true);
 };
 
 /**
@@ -93,7 +94,8 @@ k4.slide.Slide.prototype.show = function() {
  */
 k4.slide.Slide.prototype.hide = function() {
     var el = this.getElement();
-    goog.style.showElement(el, false);
+    goog.style.setOpacity(el, 0);
+    // goog.style.showElement(el, false);
 };
 
 /**
@@ -140,17 +142,30 @@ k4.slide.Slide.prototype.toCurrent = function() {
 k4.slide.Slide.prototype.applyClasses = function(addClasses, opt_removeClasses) {
     var el = this.getElement();
 
+    if (goog.isArrayLike(opt_removeClasses)) {
+        goog.array.forEach(opt_removeClasses, function(cls, i, arr) {
+            goog.dom.classes.remove(el, cls);
+        }, this);
+    }
+
     if (goog.isArrayLike(addClasses)) {
         goog.array.forEach(addClasses, function(cls, i, arr) {
             goog.dom.classes.add(el, cls);
         }, this);
     }
+};
 
-    if (goog.isArrayLike(opt_removeClasses)) {
-        goog.array.forEach(opt_removeClasses, function(cls, i, arr) {
-            goog.dom.classes.remove(el, cls);
-        }, this);
+/**
+ * return config instance.
+ */
+k4.slide.Slide.prototype.getPage = function() {
+    var page = null;
+    var el = this.getElement();
+    if (el) {
+        page = el.getAttribute('page');
+        page = (!goog.string.isEmpty(page)) ? parseInt(page, 10) : null;
     }
+    return page;
 };
 
 /**

data/assets-src/stylesheets/k4slide.scss

@@ -1,11 +1,73 @@
 // base.css
 
-body {}
+$bg-color: #FFF;
+$font-color: #333;
+$border-color: #666;
 
-div[role="slide"] {
-    position: absolute;
-    top: 0px;
-    left: 0px;
+@import 'themes/base';
+@import 'transitions/slide';
+
+body {
+    background-color: $bg-color;
+    color: $font-color;
+    overflow: hidden;
+
+    * {
+        font-size: 18pt;
+        color: $font-color;
+    }
 }
 
-@import 'themes/base';
+div[role="slide"] {
+    padding: 2%;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+
+    $radius: 1%;
+    border-radius: $radius;
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+
+    > h1, h2, h3, h4, h5, ul, ol, li {
+        margin: 0px;
+        padding: 0px;
+    }
+
+    &[slide-level="1"], &[slide-level="2"] {
+        > h1, h2 {
+            @include horizonal-centerize;
+            margin-top: 40% * 3 / 4;
+            margin-bottom: 5% * 3 / 4;
+            padding-left: 1%;
+            font-size: 140%;
+        }
+        > h1 {
+            border-bottom: 1px solid $border-color;
+            border-left: 10px solid $border-color;
+        }
+        > h2 {
+            border-left: 10px solid $border-color;
+        }
+        > ul, ol {
+            text-align: right;
+            list-style-type: none;
+        }
+    }
+
+    &[slide-level="3"] {
+        > h3 {
+            border-bottom: 1px solid $border-color;
+            font-size: 120%;
+        }
+    }
+
+    &:last-child {
+        > h3 {
+            display: none;
+        }
+        > p {
+            @include horizonal-centerize;
+            text-align: center;
+        }
+    }
+}

data/assets-src/stylesheets/themes/base.scss

@@ -1,68 +1,8 @@
 //
 
-@import "_mixin.scss";
-@import "_config.scss";
+@import "../lib/_mixin.scss";
 
 
-body {
-    background-color: #000000;
-    color: #FFFFFF;
-    * {
-        font-size: 18pt;
-        color: $font-color;
-    }
-}
-
 div[role="slide"] {
-    padding: 2%;
-    box-sizing: border-box;
-    background-color: #FFFFFF;
-
-    $radius: 1%;
-    border-radius: $radius;
-    -webkit-border-radius: $radius;
-    -moz-border-radius: $radius;
-
-    > h1, h2, h3, h4, h5, ul, ol, li {
-        margin: 0px;
-        padding: 0px;
-    }
-
-    &[slide-level="1"], &[slide-level="2"] {
-        > h1, h2 {
-            @include horizonal-centerize;
-            margin-top: 40% * 3 / 4;
-            margin-bottom: 5% * 3 / 4;
-            padding-left: 1%;
-            font-size: 140%;
-        }
-        > h1 {
-            border-bottom: 1px solid $border-color;
-            border-left: 10px solid $border-color;
-        }
-        > h2 {
-            border-left: 10px solid $border-color;
-        }
-        > ul, ol {
-            text-align: right;
-            list-style-type: none;
-        }
-    }
-
-    &[slide-level="3"] {
-        > h3 {
-            border-bottom: 1px solid $border-color;
-            font-size: 120%;
-        }
-    }
-
-    &:last-child {
-        > h3 {
-            display: none;
-        }
-        > p {
-            @include horizonal-centerize;
-            text-align: center;
-        }
-    }
+    position: absolute;
 }

data/assets-src/stylesheets/transitions/_mixin.scss

@@ -0,0 +1,13 @@
+
+
+@mixin _transition($val...) {
+    transition: $val;
+    -webkit-transition: $val;
+    -moz-transition: $val;
+}
+
+@mixin _transform($val...) {
+    transform: $val;
+    -webkit-transform: $val;
+    -moz-transform: $val;
+}

data/assets-src/stylesheets/transitions/slide.scss

@@ -0,0 +1,8 @@
+// transition
+@import '_mixin';
+
+$duration: .3s;
+
+div[role="slide"] {
+    @include _transition(left $duration linear 0, opacity $duration linear 0, -webkit-transform $duration linear 0);
+}