Permalink
Browse files

Documentation is there!

  • Loading branch information...
garris committed Jul 6, 2014
1 parent 033c25d commit 855a1c3aed8399790e7e5995e585b10f70d0826f
Showing with 226 additions and 125 deletions.
  1. +125 −28 boilerplate/index.html
  2. +1 −1 dist/Tremula.js
  3. +68 −68 docs-info.js
  4. +1 −1 index.html
  5. +1 −1 index_dev.html
  6. 0 libs/require.js
  7. +11 −10 src/Projections.js
  8. +4 −4 src/Tremula.js
  9. +2 −2 tremulaConfig.js
  10. +13 −10 tremulaControls.js
View
@@ -36,16 +36,20 @@
margin: 0;
text-shadow: 0px 1px 0px rgba(255,255,255,1);
}
/* Tremula Styles */
/* === Tremula Styles === */
/* Note: any gridBox border added must be compensated for by adding negative margin */
.gridBox{
border:#fff 10px solid;
margin: -10px 0 0 -10px;
}
/* .tremulaContainer must have actual dimentionality (set H&W) */
.tremulaContainer{
height:400px;
width:80%;
width:90%;
position:relative;
top:0;
left:0;
@@ -70,45 +74,96 @@
setTimeout(function(){
window.tremula = tremulaInit();//does not need to be on the window -- implemented here for convienience.
loadFlickr()
},0);
},1000);
});
function tremulaInit(){
$tremulaContainer = $('.tremulaContainer');
var tremula = new Tremula();
function tremulaInit(){
// .tremulaContainer must exist and have actual dimentionality
// requires display:block with an explicitly defined H & W
$tremulaContainer = $('.tremulaContainer');
tremula.doScrollEvents = function(o){
if(o.scrollProgress>.7){
if(!tremula.cache.endOfScrollFlag){
tremula.cache.endOfScrollFlag = true;
pageCtr++;
loadFlickr();
console.log('END OF SCROLL!')
}
}
};
//this creates a hook to a new Tremula instance
var tremula = new Tremula();
//Create a config object -- this is how most default behaivior is set.
//see updateConfig(prop_val_object,refreshStreamFlag) method to change properties of a running instance
var config = {
onChangePub : tremula.doScrollEvents,
//method called after each frame is painted. Passes internal parameter object.
//see fn definition below
onChangePub : doScrollEvents,
//content/stream data can optionally be passed in on init()
data : null,
maxWidthClassMap : {mini:50,small:143,medium:244,large:2000},//large will apply to anything over medium limit
lastContentBlock : {template :'<div class="lastContentItem"></div>',layoutType :'tremulaBlockItem',noScaling:true,w:300,h:390,isLastContentBlock:true},
adapter : null,//tremula.dataAdapters.JudyItem,//a default adapter incase none is specified during import
// lastContentBlock enables a persistant content block to exist at the end of the stream at all times.
// Common use case is to target $('.lastContentItem') with a conditional loading spinner when API is churning.
lastContentBlock : {
template :'<div class="lastContentItem"></div>',
layoutType :'tremulaBlockItem',
noScaling:true,
w:300,
h:300,
isLastContentBlock:true
},
//dafault data adapter method which is called on each data item -- this is used if none is supplied during an import operation
//enables easy adaptation of arbitrary API data formats -- see flickr example
adapter :null,
//Size of the static axis in pixels
itemConstraint :250,
itemMargins :[30,30],
staticAxisOffset :0,//px
//Margin in px added to each side of each content item
itemMargins :[30,30],//x(l&r),y(t&b) in px
//Display offset of static axis (static axis is the non-scrolling dimention)
staticAxisOffset :20,//px
//Display offset of scroll axis (this is the amount of scrollable area added before the first content block)
scrollAxisOffset :20,//px
scrollAxis :'x',
//Sets the scroll axis 'x'|'y'.
//NOTE: projections generally only work with one scroll axis
//when changeing this value, make sure to use a compatible projection
scrollAxis :'x',//'x'|'y'
//how many rows (or colums) to display. note: this is zero based -- so a value of 0 means there will be one row/column
staticAxisCount :0,//zero based
//enables looping with the current seet of results
isLooping :false,
defaultLayout :tremula.layouts.basicGridLayout,//<--- TODO: tremula is not yet implemented.
surfaceMap :tremula.projections.centerLinear,
//the grid that will be used to project content
//NOTE: Generally, this will stay the same and various surface map projections
//will be used to create various 3d positioning effects
defaultLayout :tremula.layouts.basicGridLayout,
//surfaceMap is the projection/3d-effect which will be used to display grid content
//following is a list of built-in projections with their corresponding scroll direction
//NOTE: Using a projection with an incompatible Grid or Grid-Direction will result in-not-so awesome results
//----------------------
// (x or y) xyPlain
// (x) streamHorizontal
// (y) pinterest
// (x) mountain
// (x) turntable
// (x) enterTheDragon
//----------------------
surfaceMap :tremula.projections.streamHorizontal,
//it does not look like this actually got implemented so, don't worry about it ;)
itemPreloading :true,
//enables the item-level momentum envelope
itemEasing :false,
//if item-level easing is enabled, it will use the following parameters
//NOTE: this is experimental. This effect can make people queasy.
itemEasingParams :{
touchCurve :tremula.easings.easeOutCubic,
swipeCurve :tremula.easings.easeOutCubic,
@@ -118,12 +173,40 @@
}
};
//initalize the tremula instance with 3 parameters:
//a DOM container, a config object, and a parent context
tremula.init($tremulaContainer,config,this);
//return the tremula hook
return tremula;
}
//This method is called on each paint frame thus enabling low level behaivior control
//it receives a single parameter object of internal instance states
//NOTE: below is a simple example of infinate scrolling where new item
//requests are made when the user scrolls past the existing 70% mark.
//
//Another option here is multiple tremula instancechaining i.e. follow the scroll events of another tremula instance.
//use case of this may be one tremula displaying close up data view while another may be an overview.
function doScrollEvents(o){
if(o.scrollProgress>.7){
if(!tremula.cache.endOfScrollFlag){
tremula.cache.endOfScrollFlag = true;
pageCtr++;
loadFlickr();
console.log('END OF SCROLL!')
}
}
};
//Basic example of API integration
//=================================
//DATA FUNCTIONS OF NOTE:
//tremula.refreshData(returned_set_array,dataAdapter)//replaces current data set with returned_set_array
//tremula.appendData(returned_set_array,dataAdapter)//appends current data set with returned_set_array
//tremula.insertData(returned_set_array,dataAdapter)//prepends current data set with returned_set_array
//=================================
var pageCtr = 1;
function loadFlickr(){
var dataUrl = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=c149b994c54c114bd7836b61539eec2e&tags=street+art&format=json&page='+pageCtr+'&extras=url_z';
@@ -142,8 +225,9 @@
}
// for use with flickr API
// DATA ADAPTER EXAMPLE
//=====================
// flickrDataAdapter() is for use with the flickr API
// https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=c149b994c54c114bd7836b61539eec2e&tags=sky%2C+night%2C+day&format=json&page=1
function flickrDataAdapter(data,env){
this.data = data;
@@ -154,6 +238,19 @@
this.template = this.data.template||('<img class="moneyShot" onload="imageLoaded(this)" src=""/>');
}
// updateConfig() enables updating of configuration parameters after an instance is running.
// adding an optional true parameter will force a tremula grid redraw with the new parameter in effect
// ----------------------------
// EXAMPLE: tremula.Grid.updateConfig({itemConstraint:100},true);
// ----------------------------
// Use toggleScrollAxis() to set the scrollAxis,
// NOTE: not all projections will work with this setting.
// see: surfaceMap projection compatibility list above
// ----------------------------
// EXAMPLE: tremula.Grid.toggleScrollAxis('y');
// ----------------------------
</script>
@@ -164,9 +261,9 @@
<body class="doReflect">
<h1>TremulaJS</h1>
<div class="tremulaContainer"></div>
<h1>TremulaJS</h1>
</body>
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -1,73 +1,73 @@
tremulaConfig = {
//method called after each frame is painted. Passes internal parameter object.
onChangePub : this.doScrollEvents,
//content/stream data can optionally be passed here
data : null,
//the last content block -- allows a persistant content block to appear at the end of the stream
//common use case is to target $('.lastContentItem') with a conditional loading spinner or result summary.
lastContentBlock : {
template :'<div class="lastContentItem"></div>',
layoutType :'tremulaBlockItem',
noScaling :true,
w:300,//px
h:390,//px
isLastContentBlock:true
},
//dafault data adapter method which is called for each data item -- this is used if none is supplied during an import operation
//enables easy adaptation of arbitrary API data formats -- see flickr example
adapter : this.dataAdapters.JudyItem,
//size of the static axis in pixels
itemConstraint : 300,//px
//size of margins added to each side of each content item
itemMargins : [30,30],//x,y in px
//offset of static axis
staticAxisOffset : 0,//px
//offset of scroll axis
scrollAxisOffset : 20,//px
//sets the scroll axis. accepts 'x'|'y'
scrollAxis : 'x',
//how many rows (or colums) to display
staticAxisCount : 0,//zero based
//enables looping with the current seet of results
isLooping : false,
//the grid that will be used to project content
defaultLayout : this.layouts.basicGridLayout,
//this is the projection/effect which will be used to display grid content
surfaceMap : this.projections.centerLinear,
//enables item level momentum envelope
itemEasing : false,
//if item-level easing is enabled, it will use the following parameters -- experimental
itemEasingParams : {
touchCurve :this.easings.easeOutCubic,
swipeCurve :this.easings.easeOutCubic,
transitionCurve :this.easings.easeOutElastic,
easeTime :1000,//in ms
springLimit :80 //in px -- maximum distance an object will independently move when directly dragged
}
//this config determines DOM class when new content is processed. useful for classifying content css behaivior -- experimental
//maxWidthClassMap : {mini:50,small:143,medium:244,large:2000},
//itemPreloading : true, //experimental
})
}
//method called after each frame is painted. Passes internal parameter object.
onChangePub : this.doScrollEvents,
//content/stream data can optionally be passed here
data : null,
//the last content block -- allows a persistant content block to appear at the end of the stream
//common use case is to target $('.lastContentItem') with a conditional loading spinner or result summary.
lastContentBlock : {
template :'<div class="lastContentItem"></div>',
layoutType :'tremulaBlockItem',
noScaling :true,
w:300,//px
h:390,//px
isLastContentBlock:true
},
//dafault data adapter method which is called for each data item -- this is used if none is supplied during an import operation
//enables easy adaptation of arbitrary API data formats -- see flickr example
adapter : this.dataAdapters.JudyItem,
//size of the static axis in pixels
itemConstraint : 300,//px
//size of margins added to each side of each content item
itemMargins : [30,30],//x,y in px
//offset of static axis
staticAxisOffset : 0,//px
//offset of scroll axis
scrollAxisOffset : 20,//px
//sets the scroll axis. accepts 'x'|'y'
scrollAxis : 'x',
//how many rows (or colums) to display
staticAxisCount : 0,//zero based
//enables looping with the current seet of results
isLooping : false,
//the grid that will be used to project content
defaultLayout : this.layouts.basicGridLayout,
//this is the projection/effect which will be used to display grid content
surfaceMap : this.projections.streamHorizontal,
//enables item level momentum envelope
itemEasing : false,
//if item-level easing is enabled, it will use the following parameters -- experimental
itemEasingParams : {
touchCurve :this.easings.easeOutCubic,
swipeCurve :this.easings.easeOutCubic,
transitionCurve :this.easings.easeOutElastic,
easeTime :1000,//in ms
springLimit :80 //in px -- maximum distance an object will independently move when directly dragged
}
//this config determines DOM class when new content is processed. useful for classifying content css behaivior -- experimental
//maxWidthClassMap : {mini:50,small:143,medium:244,large:2000},
//itemPreloading : true, //experimental
})
}
}
View
@@ -87,7 +87,7 @@ <h1>TremulaJS</h1>
<div class="buttons" >
<ul class="group main presets"><li class="centerLinear">centerLinear</li><li class="pinterest">pinterest</li><li class="btnL2">turntable</li><li class="mountain">mountain</li><li class="btnL3">enterTheDragon</li><li class="btnL5">headExpansion</li></ul>
<ul class="group main presets"><li class="streamHorizontal">streamHorizontal</li><li class="pinterest">pinterest</li><li class="btnL2">turntable</li><li class="mountain">mountain</li><li class="btnL3">enterTheDragon</li><li class="btnL5">headExpansion</li></ul>
<ul class="group main">
<li class="more">Experimental controls...</li>
View
@@ -87,7 +87,7 @@ <h1>TremulaJS</h1>
<div class="buttons" >
<ul class="group main presets"><li class="centerLinear">centerLinear</li><li class="pinterest">pinterest</li><li class="btnL2">turntable</li><li class="mountain">mountain</li><li class="btnL3">enterTheDragon</li><li class="btnL5">headExpansion</li></ul>
<ul class="group main presets"><li class="streamHorizontal">streamHorizontal</li><li class="pinterest">pinterest</li><li class="btnL2">turntable</li><li class="mountain">mountain</li><li class="btnL3">enterTheDragon</li><li class="xy">xyPlain (toggle)</li></ul>
<ul class="group main">
<li class="more">Experimental controls...</li>
View
0 libs/require.js 100755 → 100644
No changes.
Oops, something went wrong.

0 comments on commit 855a1c3

Please sign in to comment.