bootybox 0.0.91

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 486fcc3625f3f27b54ec5b0675a58976478149bb
+  data.tar.gz: c16487cf2b1e3c6428144c48b326f379524324ef
+SHA512:
+  metadata.gz: 86ac5104b0f46c673dfffc733cca814cc39893134f710e6b40e7e07d76c95a5e82e052bd3b0d01539d3c61b54cf137099c4ab618e709b704244b9a35e57e772c
+  data.tar.gz: 5b201ef81e595a7f3a2ddc3e6c96f00dd348341a35be95dba2a09ba5d64351b0d0ea8ed2561632e2272d5a9c58998f83290e1f8d62405a36addcc90357851e1b

data/app/assets/javascripts/bootybox/defaults.js

@@ -0,0 +1,6 @@
+//= require bootybox/portfolio
+//= require bootybox/modal
+//= require bootybox/slideshow
+//= require handlebars
+//= require_tree ./vendor
+//= require_tree ./templates

data/app/assets/javascripts/bootybox/modal.js.coffee

@@ -0,0 +1,14 @@
+window.Bootybox = {} if typeof(window.Bootybox) is 'undefined' 
+
+window.Bootybox.showModal = (title, content, options = {}) ->
+  # Check if the modal target exists
+  divId = "bootybox-modal-container"
+  if $("#"+divId).length == 0
+    $("body").append HandlebarsTemplates["modal/modal_target"](id: divId)
+  
+  modalHtml = HandlebarsTemplates["modal/default"](title: title, content: content)
+  
+  $("#"+divId).html(modalHtml)
+  $("#currentModal").modal()
+
+        

data/app/assets/javascripts/bootybox/portfolio.js.coffee

@@ -0,0 +1,96 @@
+jQuery.fn.extend
+  portfolio: () ->
+    this.each ->
+      items = $(this).find(".portfolio-item")
+      
+      # Resetting styles
+      $(this).css
+        height: "auto"
+        width: "100%"
+      
+      
+      
+      i = 0
+     
+      maxDimensions = {top: 0, height: 0, left: 0, width: 0}
+      @itemPadding = parseInt($(this).data("image-padding"))
+        
+      if $(this).attr('class').match('vert')
+        items.css
+          opacity: 0
+          
+        numOfItemsInRow = Math.floor(($(this).width() / parseInt($(this).data("image-size"))))
+        requiredRows    = Math.ceil(items.length / numOfItemsInRow)
+        alignTop = true
+        for nR in [0..numOfItemsInRow-1]
+          alignTop = true
+          for nC in [1..requiredRows]  
+            if items[i] != undefined
+              currentItem = $(items[i])
+              
+              if i > 0
+                prevItem = $(items[i-1])
+              
+                newStyle = {top: 0, left: 0}
+                
+                if alignTop
+                  newStyle.top = 0
+                else
+                  newStyle.top = (prevItem.position().top + prevItem.outerHeight() + @itemPadding)
+              
+                if nR == 0
+                  newStyle.left = prevItem.position().left
+                else
+                  newStyle.left = (nR*(prevItem.outerWidth() + @itemPadding))
+                
+                if newStyle.top > maxDimensions.top
+                  maxDimensions.top = newStyle.top
+                  maxDimensions.height = newStyle.top+currentItem.outerHeight()  
+                
+                if newStyle.left > maxDimensions.left
+                  maxDimensions.left = newStyle.left
+                  maxDimensions.width = newStyle.left+currentItem.outerWidth()  
+                  
+                newStyle.top = newStyle.top+"px"
+                newStyle.left = newStyle.left+"px"
+                currentItem.css(newStyle)  
+              
+            i++  
+            alignTop = false
+        
+        $(this).css
+          height: maxDimensions.height+"px"
+          width: maxDimensions.width+"px"
+        items.animate({opacity: 1}, 1000)
+      
+      items.portofolioTooltip()
+      items.bind "click", (e) ->
+        e.stopPropagation()
+        contentVars =
+          image_url: $(this).find(".image").data("big-url")
+          name: $(this).find(".name").html()
+          text: $(this).find(".text").html()
+
+        content = HandlebarsTemplates['portfolio/portfolio_item'](contentVars)    
+
+        Bootybox.showModal(contentVars.name, content)
+          
+  portofolioTooltip: () ->
+    items = $(this)
+    items.each ->
+      if $(this).hasClass("portfolio-item")        
+        tooltip = $(this).find(".name")
+        $(this).bind "mouseenter", ->
+          tooltip.show()
+        $(this).bind "mouseleave", ->
+          tooltip.hide()
+        $(this).bind "mousemove", (e) ->
+          parentOffset = $(this).offset()
+          tooltip.css
+            left: (e.pageX - parentOffset.left)+5+"px"
+            top: (e.pageY - parentOffset.top)+5+"px"
+      
+
+$(window).bind "load resize", ->
+  $(".bootybox-portfolio").portfolio()  
+    

data/app/assets/javascripts/bootybox/slideshow.js.coffee

@@ -0,0 +1,12 @@
+window.Bootybox.slideShow = (id) ->
+  slideshow = $('#'+id)
+  previewPics = $("ul[data-slideshow-target='" + id + "'] li[data-slideshow-index]")
+
+  $(slideshow).carousel
+    interval: 5000
+
+  console.log(previewPics)
+
+  previewPics.bind 'click', ->
+    pic = $(this)
+    slideshow.carousel(parseInt(pic.attr('data-slideshow-index')));

data/app/assets/javascripts/bootybox/templates/modal/buttons/cancel.hbs

@@ -0,0 +1 @@
+<button type="submit" class="btn btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> {{label}}</button>

data/app/assets/javascripts/bootybox/templates/modal/default.hbs

@@ -0,0 +1,18 @@
+<!-- Modal -->
+<div class="modal fade" id="currentModal" role="dialog">
+  <div class="modal-dialog">
+    <!-- Modal content-->
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">{{title}}</h4>
+        </div>
+      <div class="modal-body">
+        {{{content}}}
+      </div>
+      <div class="modal-footer">
+        
+      </div>
+    </div>
+  </div>
+</div> 

data/app/assets/javascripts/bootybox/templates/modal/modal_target.hbs

@@ -0,0 +1 @@
+<div id="{{id}}">&nbsp;</div>

data/app/assets/javascripts/bootybox/templates/portfolio/portfolio_item.hbs

@@ -0,0 +1,4 @@
+<div class="portfolio-modal-item">
+  <div class="text">{{{text}}}</div>
+  <img src="{{image_url}}">
+</div>

data/app/assets/javascripts/bootybox/vendor/flip.js

@@ -0,0 +1,298 @@
+// **A lightweight jQuery plugin to create 3d flip animation.** 
+// See the [project page](http://nnattawat.github.io/flip/)
+// Released under the MIT license (16.08.2015)  
+
+
+(function( $ ) {
+  var flip = function($dom, callback) {
+    $dom.data("flipped", true);
+
+    var rotateAxis = "rotate" + $dom.data("axis");
+    $dom.find($dom.data("front")).css({
+      transform: rotateAxis + ($dom.data("reverse") ? "(-180deg)" : "(180deg)"),
+      "z-index": "0"
+    });
+
+    $dom.find($dom.data("back")).css({
+      transform: rotateAxis + "(0deg)",
+      "z-index": "1"
+    });
+
+    //Providing a nicely wrapped up callback because transform is essentially async
+     $dom.one(whichTransitionEvent(), function(){
+        $(this).trigger('flip:done');
+        if (callback !== undefined){
+          callback.call(this);
+        }
+      });
+  };
+
+  var unflip = function($dom, callback) {
+    $dom.data("flipped", false);
+
+    var rotateAxis = "rotate" + $dom.data("axis");
+    $dom.find($dom.data("front")).css({
+      transform: rotateAxis + "(0deg)",
+      "z-index": "1"
+    });
+
+    $dom.find($dom.data("back")).css({
+      transform: rotateAxis + ($dom.data("reverse") ? "(180deg)" : "(-180deg)"),
+      "z-index": "0"
+    });
+
+    //Providing a nicely wrapped up callback because transform is essentially async
+     $dom.one(whichTransitionEvent(), function(){
+        $(this).trigger('flip:done');
+        if (callback !== undefined){
+          callback.call(this);
+        }
+      });
+  };
+  // Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
+  var whichTransitionEvent = function(){
+    var t,
+        el = document.createElement("fakeelement"),
+    transitions = {
+      "transition"      : "transitionend",
+      "OTransition"     : "oTransitionEnd",
+      "MozTransition"   : "transitionend",
+      "WebkitTransition": "webkitTransitionEnd"
+    };
+
+    for (t in transitions){
+      if (el.style[t] !== undefined){
+        return transitions[t];
+      }
+    }
+  };
+  $.fn.flip = function(options, callback) {
+    if (typeof options == 'function'){
+      //This allows flip to be called for setup with only a callback (default settings)
+      callback = options;
+    }
+    this.each(function(){
+      var $dom = $(this);
+
+        if (options !== undefined && (typeof(options) == "boolean" || typeof(options) == "string")) { // Force flip the DOM
+          if (options == "toggle"){
+            options = !$dom.data("flipped");
+          }
+          if (options) {
+            flip($dom,callback);
+          } else {
+            unflip($dom,callback);
+          }
+          // //Providing a nicely wrapped up callback because transform is essentially async
+          //  $(this).one(whichTransitionEvent(), function(){
+          //     $(this).trigger('flip:done');
+          //     if (callback !== undefined){
+          //       callback.call(this);
+          //     }
+          //   });
+        } else if (!$dom.data("initiated")){ //Init flipable DOM
+          $dom.data("initiated", true);
+
+          var settings = $.extend({
+            axis: "y",
+            reverse: false,
+            trigger: "click",
+            speed: 500,
+            forceHeight: false,
+            forceWidth: false,
+            autoSize: true,
+            front: 'auto',
+            back: 'auto'
+          }, options );
+
+          //By defualt we first check for the old front and back selectors for backward compatibility
+          //if they arent there we fall back to auto selecting the first and second div
+          if (settings.front == "auto"){
+            settings.front = ($dom.find('.front').length > 0)? '.front' : 'div:first-child';
+          }else if (settings.front == "autostrict"){
+            settings.front = 'div:first-child';
+          }
+          if (settings.back == "auto"){
+            //Note, we must use the old 'div:first-child + div' for IE compatibility
+            settings.back = ($dom.find('.back').length > 0)? '.back' : 'div:first-child + div';
+          }else if (settings.back == "autostrict"){
+            settings.back = 'div:first-child + div';
+          }
+          // save reverse and axis css to DOM for performing flip
+          $dom.data("reverse", settings.reverse);
+          $dom.data("axis", settings.axis);
+          $dom.data("front", settings.front);
+          $dom.data("back", settings.back);
+
+          var rotateAxis = "rotate" + (settings.axis.toLowerCase() == "x" ? "x" : "y"), 
+              perspective = $dom["outer" + (rotateAxis == "rotatex" ? "Height" : "Width")]() * 2;
+
+          $dom.find($dom.data("back")).css({
+            transform: rotateAxis + "(" + (settings.reverse? "180deg" : "-180deg") + ")"
+          });
+
+          $dom.css({
+            perspective: perspective,
+            position: "relative"
+          });
+
+          var speedInSec = settings.speed / 1000 || 0.5;
+          var faces = $dom.find(settings.front).add(settings.back, $dom);
+          if (settings.forceHeight) {faces.outerHeight($dom.height());} else if (settings.autoSize) {faces.css({'height': '100%'});}
+          if (settings.forceWidth) {faces.outerWidth($dom.width());} else if (settings.autoSize) {faces.css({'width': '100%'});}
+          faces.css({
+            "backface-visibility": "hidden",
+            "transform-style": "preserve-3d",
+            position: "absolute",
+            "z-index": "1"
+          });
+          faces.find('*').css({
+            "backface-visibility": "hidden"
+          });
+          $dom.find($dom.data("back")).css({
+            transform: rotateAxis + "(" + (settings.reverse? "180deg" : "-180deg") + ")",
+            "z-index": "0"
+          });
+		  
+		  // Back face always visible on Chrome #39
+          if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window){
+            //Blink Engine, add preserve-3d to $dom
+			$dom.css({"-webkit-transform-style": "preserve-3d"});
+          }
+		  // /#39
+		  
+          // not forcing width/height may cause an initial flip to show up on
+          // page load when we apply the style to reverse the backface...
+          // To prevent this we first apply the basic styles and then give the
+          // browser a moment to apply them. Only afterwards do we add the transition.
+          setTimeout(function(){
+            // By now the browser should have applied the styles, so the transition
+            // will only affect subsequent flips.
+            faces.css({
+              transition: "all " + speedInSec + "s ease-out"
+            });
+            if (callback !== undefined){
+              callback.call(this);
+            }
+          //While this used to work with a setTimeout of zero, at some point that became
+          //unstable and the initial flip returned. The reason for this is unknown but we
+          //will temporarily use a short delay of 20 to mitigate this issue. 
+          }, 20);
+
+          if (settings.trigger.toLowerCase() == "click") {
+            $dom.on($.fn.tap ? "tap" : "click", function(event) {
+              if (!event) {event = window.event;}
+              if ($dom.find($(event.target).closest('button, a, input[type="submit"]')).length) {
+                return;
+              }
+
+              if ($dom.data("flipped")) {
+                unflip($dom);
+              } else {
+                flip($dom);
+              }
+            });
+          }
+          else if (settings.trigger.toLowerCase() == "hover") {
+            var performFlip = function() {
+              $dom.unbind('mouseleave', performUnflip);
+
+              flip($dom);
+
+              setTimeout(function() {
+                $dom.bind('mouseleave', performUnflip);
+                if (!$dom.is(":hover")) {
+                  unflip($dom);
+                }
+              }, (settings.speed + 150));
+            };
+
+            var performUnflip = function() {
+              unflip($dom);
+            };
+
+            $dom.mouseenter(performFlip);
+            $dom.mouseleave(performUnflip);
+          }
+        }else{
+          //The element has been initiated, all we have to do is change applicable settings
+          if (options && (options.axis !== undefined || options.reverse !== undefined)){
+            changeSettings.call(this,options,function(){
+              $dom.trigger('flip:change');
+              if (callback !== undefined){
+                callback.call(this);
+              }
+            });
+          }
+      }
+    });
+
+    return this;
+  };
+  var changeSettings = function(options,callback){
+    var changeNeeded = false;
+    if (options.axis !== undefined && $(this).data("axis") != options.axis.toLowerCase()){
+      $(this).data("axis", options.axis.toLowerCase());
+      changeNeeded = true;
+    }
+    if (options.reverse !== undefined && $(this).data("reverse") != options.reverse){
+      $(this).data("reverse", options.reverse);
+      changeNeeded = true;
+    }
+    if (changeNeeded){
+      var faces = $(this).find($(this).data("front")).add($(this).data("back"), $(this));
+      var savedTrans = faces.css("transition");
+      faces.css({
+        transition: "none"
+      });
+      //Only setting the axis if it needs to be
+
+      //options.axis = options.axis.toLowerCase();
+      //$(this).data("axis", options.axis);
+
+      //This sets up the first flip in the new direction automatically
+      var rotateAxis = "rotate" + $(this).data("axis");
+      if ($(this).data("flipped")){
+        $(this).find($(this).data("front")).css({
+          transform: rotateAxis + ($(this).data("reverse") ? "(-180deg)" : "(180deg)"),
+          "z-index": "0"
+        });
+      }else{
+        $(this).find($(this).data("back")).css({
+          transform: rotateAxis + "(" + ($(this).data("reverse")? "180deg" : "-180deg") + ")",
+          "z-index": "0"
+        });
+      }
+      //Providing a nicely wrapped up callback because transform is essentially async
+      setTimeout(function(){
+        faces.css({
+          transition: savedTrans
+        });
+          callback.call(this);
+      }.bind(this),0);
+    }else{
+      //If we didnt have to set the axis we can just call back.
+        setTimeout(callback.bind(this), 0);
+    }
+  };
+}( jQuery ));
+
+
+// This is the default initializer
+initFlip = function(){
+  $(".flippable").flip(
+    {
+      axis: "y",
+      trigger: "hover",
+      front: ".front",
+      back: ".back",
+    }
+  )
+}
+
+$(document).ready(function(){
+  initFlip()
+});
+$(document).on('page:load', function(){
+  initFlip()
+}) ;