partystreusel 0.0.1

data/.gitignore

@@ -0,0 +1,5 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+.DS_Store

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in partystreusel.gemspec
+gemspec

data/README.md

@@ -0,0 +1,177 @@
+# Partystreusel
+
+## Installation
+Add **partystreusel** to your Gemfile `gem 'partystreusel'` and bundle. Done.
+
+## Available components:
+  * **Expandable Content:** enables a "read more" button to show or hide additional content.
+  * **Accordion:** Allows for multiple nested accordions.
+  * **Carousel:** Allows 2-dimensional scrolling in vertical and horizontal direction. The images are thereby divided into image-groups. The image-group to image-group scrolling is vertically, scrolling inside the image-group is horizontally.
+
+## Usage in Rails:
+Most components have a backbone.js dependency. Satisfy it by loading backbone.js and rails-underscore:
+
+    gem 'rails-backbone'
+    gem 'underscore-rails'
+
+Then, require backbone.js and underscore.js in your manifest, usually application.js(.coffee):
+
+    #= require underscore
+    #= require backbone
+
+## Expandable Content
+
+Load it inside your manifest, usually application.js(.coffee):
+
+    #= require sc.expandable_content
+
+#### Required Markup:
+
+    #jump_id.expandable
+      … your content …
+      %a.more{ :href => '#' } read more
+      .expandable-content.hidden
+        … read more content …
+        %a.less{ :href => '#jump_id' } read less
+
+#### Required Styles:
+
+    .hidden
+      display: none
+
+#### Use it:
+
+    $(".expandable").each ->
+      new SC.ExpandableContent(el: $(this))
+
+## Accordion
+
+Load it inside your manifest, usually application.js(.coffee):
+
+    #= require sc.accordion
+
+#### Required Markup:
+
+    .accordion
+      .accordion-item
+        .title
+          The clickable header of the accordion item
+        .content
+          … The content which is toggled by clicking the header …
+
+#### Required Styles:
+
+    .open .content
+      display: block
+
+    .content
+      display: none
+
+#### Use it:
+
+    $(".accordion").each ->
+      new SC.Accordion(el: $(this))
+
+## Carousel
+
+The carousel component has dependencies to jQuery and jQuery-UI-Effects.
+Load them together with the carousel inside your manifest, usually application.js(.coffee):
+
+    #= require jquery
+    #= require jquery-ui
+    #= require sc.carousel
+
+#### Required Model (json):
+
+The model needs a 'photos' attribute per image-group.<br />
+Inside the 'photos' the images with their specific urls are defined.<br />
+Here's an example of two image-groups. The first includes two images, the second three:
+
+    {
+      "photos": [
+        {
+          "image": {
+            "url": <imageUrl>
+          }
+        }, 
+        {
+          "image": {
+            "url": <imageUrl>
+          }
+        }
+      ]
+    }, 
+    {
+      "photos": [
+        {
+          "image": {
+            "url": <imageUrl>
+          }
+        }, 
+        {
+          "image": {
+            "url": <imageUrl>
+          }
+        },
+        {
+          "image": {
+            "url": <imageUrl>
+          }
+        }
+      ]
+    }
+
+#### Required Markup:
+
+    #projects-carousel-viewport
+      %script{:type=>'text/template', :id=>'project-details-template'}
+        … put HTML elements (e.g. a link with the title of the image-group and a paragraph with a short description of that image-group) here.
+        Those elements are then rendered into '.project-detail' div …
+
+      %script{:type=>'text/template', :id=>'photo-details-template'}
+        … put HTML elements (e.g. a link with the title of the image and a paragraph with a short description of that image) here.
+        Those elements are then rendered into '.photo-detail' div …
+
+      %script{:type=>'text/template', :id=>'project-template'}
+        … define here the HTML element into which the images defined in the model shall be rendered (e.g. %div or %a, whatever is needed).
+        The rendered elements are then put into '.stage' div …
+
+      .stage
+      
+      %span.project-detail
+
+      %span.photo-detail
+
+      %a{ :href => "#", :class => "previous-project" }
+      %a{ :href => "#", :class => "next-project" }
+      %a{ :href => "#", :class => "previous" }
+      %a{ :href => "#", :class => "next" }
+
+#### Required Styles:
+    
+    #projects-carousel-viewport
+      position: relative
+
+    .stage
+      img
+        position: absolute
+        display: none
+
+    .previous-project
+      <addYourStyleHere>
+
+    .next-project
+      <addYourStyleHere>
+
+    .previous
+      <addYourStyleHere>
+
+    .next
+      <addYourStyleHere>
+
+#### Use it:
+
+    $('#projects-carousel-viewport').each ->
+      projects = new SC.ProjectsCollection <yourModelJson>
+      app = new SC.Carousel projects: projects, el: this
+

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

data/lib/partystreusel.rb

@@ -0,0 +1,9 @@
+require "partystreusel/version"
+require "rails"
+
+module Partystreusel
+  # Your code goes here...
+  class Engine < Rails::Engine
+
+  end
+end

data/lib/partystreusel/version.rb

@@ -0,0 +1,3 @@
+module Partystreusel
+  VERSION = "0.0.1"
+end

data/partystreusel.gemspec

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "partystreusel/version"
+
+Gem::Specification.new do |s|
+  s.name        = "partystreusel"
+  s.version     = Partystreusel::VERSION
+  s.authors     = ["Immanuel Häussermann", "Donat Baier", "Franca Rast", "Noëlle Rosenberg"]
+  s.email       = ["haeussermann@gmail.com", "donat.baier@gmail.com", "franca.rast@screenconcept.ch", "noro660@hotmail.com"]
+  s.homepage    = "http://www.screenconcept.ch"
+  s.summary     = %q{A collection uf reusable javascript components by Screen Concept}
+  s.description = %q{Contains sliders, accordions, expandable contents and any other component we deem worthy of joining this collection of awesomeness.}
+
+  s.rubyforge_project = "partystreusel"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+  s.add_dependency "jquery-rails"
+end

data/vendor/assets/javascripts/carousel/models/photo.js.coffee

@@ -0,0 +1,10 @@
+window.SC ||= {}
+
+class SC.Photo extends Backbone.Model
+
+  show: (effect) ->
+    this.trigger("show:" + effect)
+    this.trigger 'activated'
+
+  hide: (effect) ->
+    this.trigger("hide:" + effect)

data/vendor/assets/javascripts/carousel/models/photos_collection.js.coffee

@@ -0,0 +1,10 @@
+window.SC ||= {}
+
+class SC.PhotosCollection extends Backbone.Collection
+  model:SC.Photo
+
+  successor_of:(member) ->
+    if this.last() == member then this.first() else this.at(this.indexOf(member) + 1)
+
+  predecessor_of:(member) ->
+    if this.first() == member then this.last() else this.at(this.indexOf(member) - 1)

data/vendor/assets/javascripts/carousel/models/project.js.coffee

@@ -0,0 +1,44 @@
+window.SC ||={}
+
+class SC.Project extends Backbone.Model
+
+  initialize: ->
+    @isRendered = false
+    @photos = new SC.PhotosCollection(this.get 'photos')
+    @currentPhoto = @photos.first()
+
+  switchToNextPhoto: ->
+    @currentPhoto.hide('slideLeft')
+    @currentPhoto = this.nextPhoto()
+    @currentPhoto.show('slideRight')
+
+  nextPhoto: ->
+    @photos.successor_of(@currentPhoto)
+
+  switchToPreviousPhoto: ->
+    @currentPhoto.hide('slideRight')
+    @currentPhoto = this.previousPhoto()
+    @currentPhoto.show('slideLeft')
+
+  previousPhoto: ->
+    @photos.predecessor_of(@currentPhoto)
+
+  activate: (effect) ->
+    @currentPhoto.show(effect)
+    this.trigger 'activated'
+
+  deactivate: (effect) ->
+    @currentPhoto.hide(effect)
+
+  showingFirstPhoto: ->
+    @currentPhoto == @photos.first()
+
+  showingLastPhoto: ->
+    @currentPhoto == @photos.last()
+
+  forwardPhotos: ->
+    @currentPhoto = @photos.last()
+
+  rewindPhotos: ->
+    @currentPhoto.hide('instant')
+    @currentPhoto = @photos.first()

data/vendor/assets/javascripts/carousel/models/projects_collection.js.coffee

@@ -0,0 +1,15 @@
+window.SC ||= {}
+
+class SC.ProjectsCollection extends Backbone.Collection
+  model:SC.Project
+
+  initialize: ->
+#    @url = '/projects'
+
+  successor_of:(member) ->
+    next = if this.last() == member then this.first() else this.at(this.indexOf(member) + 1)
+    next = this.first() unless next?
+    next
+
+  predecessor_of:(member) ->
+    if this.first() == member then this.last() else this.at(this.indexOf(member) - 1)

data/vendor/assets/javascripts/carousel/views/carousel.js.coffee

@@ -0,0 +1,105 @@
+window.SC ||= {}
+
+class SC.Carousel extends Backbone.View
+
+  events:{
+  'click .next':'switchToNext'
+  'click .previous':'switchToPrevious'
+  'click .next-project':'switchToNextProject'
+  'click .previous-project':'switchToPreviousProject'
+  }
+
+  initialize:->
+    @el = $('.stage')
+    @projects = @options['projects']
+    this.setDefaults()
+    #    new SC.ProjectsCollection()
+    #    @projects.url = '/projects'
+    #    @projects.fetch()
+    @currentProject = @projects.first()
+    this.render(@currentProject)
+    @currentProject.activate('instant')
+    this.preloadProjects()
+    this.prepareFiltering()
+    @warning = new SC.WarningView({model:@projects})
+
+  prepareFiltering: =>
+    @model.bind 'change', this.reloadProjects if @model?
+
+  setDefaults: ->
+    @stickyProjects = !!@options['stickyProjects']
+
+  reloadProjects: =>
+    @projects.fetch({data: {filter: @model.toJSON()}, success:this.refresh})
+
+  refresh: =>
+#   TODO refactor handling of empty projects collection
+    @projects.trigger 'change'
+    if @projects.isEmpty()
+      @projects.add @currentProject
+    else
+      this.switchToNextProject()
+
+  preloadProjects: ->
+    this.render this.nextProject()
+    this.render this.previousProject()
+
+  render: (project) ->
+    unless project.isRendered
+      v = new SC.ProjectView({model:project})
+      @el.append v.render()
+    return this
+
+  switchToNext: ->
+    return this.switchToNextPhoto() if @stickyProjects == true
+    if @currentProject.showingLastPhoto()
+      this.switchToNextProject()
+    else
+      this.switchToNextPhoto()
+    false # Stop event
+
+  switchToPrevious: ->
+    return this.switchToPreviousPhoto() if @stickyProjects == true
+    if @currentProject.showingFirstPhoto()
+      this.switchToPreviousProject(true)
+    else
+      this.switchToPreviousPhoto()
+    false # Stop event
+
+  switchToNextPhoto:->
+    @currentProject.switchToNextPhoto()
+    false # Stop event
+
+  switchToPreviousPhoto:->
+    @currentProject.switchToPreviousPhoto()
+    false # Stop event
+
+  switchToNextProject:=>
+    next = this.nextProject()
+    this.rewindProjects() if next == @projects.first()
+    this.render next
+    @currentProject.deactivate('slideUp')
+    @currentProject = next
+    @currentProject.activate('slideDown')
+    this.preloadProjects()
+    false #stop event
+
+  nextProject:->
+    @projects.successor_of(@currentProject)
+
+  switchToPreviousProject: (forwardPhotos) ->
+    previous = this.previousProject()
+    this.render previous
+    @currentProject.deactivate('slideDown')
+    @currentProject = this.previousProject()
+    @currentProject.forwardPhotos() if forwardPhotos == true #true!, not the event object or something else
+    @currentProject.activate('slideUp')
+    this.preloadProjects()
+    false #stop event
+
+  previousProject:->
+    @projects.predecessor_of(@currentProject)
+
+  rewindProjects: ->
+    for project in @projects.models
+      project.rewindPhotos()

data/vendor/assets/javascripts/carousel/views/photo-details-view.js.coffee

@@ -0,0 +1,10 @@
+window.SC ||= {}
+
+class SC.PhotoDetailsView extends Backbone.View
+
+  initialize: ->
+    @el = $('.photo-detail')
+
+  render: ->
+    template = _.template $("#photo-details-template").html(),{image:@model.get('image')}
+    @el.html(template)

data/vendor/assets/javascripts/carousel/views/photo_view.js.coffee

@@ -0,0 +1,62 @@
+window.SC ||= {}
+
+class SC.PhotoView extends Backbone.View
+
+  tagName:"img"
+
+  initialize:->
+    this.render()
+    @model.bind 'show:slideLeft', this.slideInLeft
+    @model.bind 'show:slideRight', this.slideInRight
+    @model.bind 'show:slideUp', this.slideInUp
+    @model.bind 'show:slideDown', this.slideInDown
+    @model.bind 'show:instant', this.show
+    @model.bind 'hide:slideLeft', this.slideOutLeft
+    @model.bind 'hide:slideRight', this.slideOutRight
+    @model.bind 'hide:slideUp', this.slideOutUp
+    @model.bind 'hide:slideDown', this.slideOutDown
+    @model.bind 'hide:instant', this.hide
+    @model.bind 'activated', this.renderDetails
+
+  render:->
+    $(@el).attr 'src', @model.get('image').url
+    
+  renderDetails: =>
+    v = new SC.PhotoDetailsView({model:@model})
+    v.render()
+
+  slideOutLeft: =>
+    this.slideOut('left')
+
+  slideOutRight: =>
+    this.slideOut('right')
+
+  slideOutUp: =>
+    this.slideOut('up')
+
+  slideOutDown: =>
+    this.slideOut('down')
+
+  slideOut: (direction) ->
+    $(@el).hide('slide', {direction: direction}, 500)
+
+  slideInLeft: =>
+    this.slideIn('left')
+
+  slideInRight: =>
+    this.slideIn('right')
+
+  slideInUp: =>
+    this.slideIn('up')
+
+  slideInDown: =>
+    this.slideIn('down')
+
+  slideIn:(direction) ->
+    $(@el).show('slide', {direction: direction}, 500)
+
+  show: =>
+    $(@el).show()
+
+  hide: =>
+    $(@el).hide()

data/vendor/assets/javascripts/carousel/views/project_details_view.js.coffee

@@ -0,0 +1,10 @@
+window.SC ||= {}
+
+class SC.ProjectDetailsView extends Backbone.View
+
+  initialize: ->
+    @el = $('.project-detail')
+
+  render: ->
+    template = _.template $("#project-details-template").html(),{project:@model}
+    @el.html(template)

data/vendor/assets/javascripts/carousel/views/project_view.js.coffee

@@ -0,0 +1,29 @@
+window.SC ||= {}
+
+class SC.ProjectView extends Backbone.View
+
+  initialize:->
+    this.initEl()
+    this.initPhotoViews()
+    @model.bind 'activated', this.renderDetails
+
+  initEl: ->
+    template = _.template $("#project-template").html(), {project:@model}
+    @el = $(template)
+
+  initPhotoViews:->
+    @photoViews = []
+    for photo in @model.photos.models
+      @photoViews.push new SC.PhotoView({model:photo})
+
+  render:->
+    for photo in @photoViews
+      $(@el).append photo.el
+    @model.isRendered = true
+    @el
+
+  renderDetails: =>
+    v = new SC.ProjectDetailsView({model:@model})
+    v.render()
+
+

data/vendor/assets/javascripts/carousel/views/warning_view.js.coffee

@@ -0,0 +1,14 @@
+window.SC ||= {}
+
+class SC.WarningView extends Backbone.View
+
+  initialize: ->
+    @el = $('#carousel-error-message')
+    this.render()
+    @model.bind 'change', this.render
+
+  render: =>
+    if @model.isEmpty()
+      @el.show()
+    else
+      @el.hide()

data/vendor/assets/javascripts/sc.accordion.js.coffee

@@ -0,0 +1,47 @@
+# Easy handling of accordion elements
+# The structure should be as follows:
+#
+# <div class='accordion'>
+#   <div class='accordion-item'>
+#     <div class='title'>Title</div>
+#     <div class='content'> ... your content ... </div>
+#   </div>
+#
+#   // repeat accordion-items ...
+# </div>
+#
+
+window.SC ||= {}
+
+class window.SC.Accordion extends Backbone.View
+
+  events:
+    "click .title" : "handleClick"
+
+  initialize: ->
+    @items = @$("> .accordion-item")
+    @open  = null
+    @initiallyOpenItem()
+
+  initiallyOpenItem: ->
+    if window.location.hash
+      elem = $(window.location.hash)
+      @openItem(elem.parent()) if elem.hasClass("title")
+
+  openItem: (elem) ->
+    @closeItem(@open) if @open
+    @open = elem.addClass("open")
+
+  closeItem: (elem) ->
+    elem.removeClass("open")
+    @open = null
+
+  toggleItem: (elem) ->
+    if elem.hasClass("open")
+      @closeItem(elem)
+    else
+      @openItem(elem)
+
+  handleClick: (event) =>
+    item = $(event.currentTarget).parent()
+    @toggleItem(item)

data/vendor/assets/javascripts/sc.carousel.js.coffee

@@ -0,0 +1,3 @@
+#= require_tree './carousel'
+
+window.SC ||= {}

data/vendor/assets/javascripts/sc.expandable_content.js.coffee

@@ -0,0 +1,40 @@
+# Easy handling of content elements that are expandable/collapsable via a more/less links.
+# The structure should be as follows:
+#
+# <div id='something' class='expandable'>
+#   some content
+#   <a href='' class='more'>more</a>
+#   <div class='expandable-content hidden'>
+#     some content
+#     <a href='#something' class='less'>less</a>
+#   </div>
+# </div>
+#
+# NOTE: Ideally, the less href points to the id of the .expandable div, so that
+# when collapsing the expandable container the browser jumps back up.
+
+window.SC ||= {}
+
+class SC.ExpandableContent extends Backbone.View
+
+  events:
+    "click .more" : "handleOpen"
+    "click .less" : "handleClose"
+
+  initialize: ->
+    @content = @$(".expandable-content")
+    @more    = @$(".more")
+
+  handleOpen: (event) =>
+    @content.removeClass("hidden")
+    @more.addClass("hidden")
+    # allow anchoring, but prevent the event to bubble
+    # up and open the content again in IE
+    event.stopPropagation()
+
+  handleClose: (event) =>
+    @content.addClass("hidden")
+    @more.removeClass("hidden")
+    # allow anchoring, but prevent the event to bubble
+    # up and open the content again in IE
+    event.stopPropagation()

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification
+name: partystreusel
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Immanuel Häussermann
+- Donat Baier
+- Franca Rast
+- Noëlle Rosenberg
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-12-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Contains sliders, accordions, expandable contents and any other component
+  we deem worthy of joining this collection of awesomeness.
+email:
+- haeussermann@gmail.com
+- donat.baier@gmail.com
+- franca.rast@screenconcept.ch
+- noro660@hotmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- README.md
+- Rakefile
+- lib/partystreusel.rb
+- lib/partystreusel/version.rb
+- partystreusel.gemspec
+- vendor/assets/javascripts/carousel/models/photo.js.coffee
+- vendor/assets/javascripts/carousel/models/photos_collection.js.coffee
+- vendor/assets/javascripts/carousel/models/project.js.coffee
+- vendor/assets/javascripts/carousel/models/projects_collection.js.coffee
+- vendor/assets/javascripts/carousel/views/carousel.js.coffee
+- vendor/assets/javascripts/carousel/views/photo-details-view.js.coffee
+- vendor/assets/javascripts/carousel/views/photo_view.js.coffee
+- vendor/assets/javascripts/carousel/views/project_details_view.js.coffee
+- vendor/assets/javascripts/carousel/views/project_view.js.coffee
+- vendor/assets/javascripts/carousel/views/warning_view.js.coffee
+- vendor/assets/javascripts/sc.accordion.js.coffee
+- vendor/assets/javascripts/sc.carousel.js.coffee
+- vendor/assets/javascripts/sc.expandable_content.js.coffee
+homepage: http://www.screenconcept.ch
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: partystreusel
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: A collection uf reusable javascript components by Screen Concept
+test_files: []