Skip to content
Browse files

More figure processing. Added start to the paging functionality for m…

…ulti column sections
  • Loading branch information...
1 parent c35bf38 commit ca920418d09f49afa380023a057f41a5ba3b6674 @kjaebker kjaebker committed May 4, 2012
View
4 frontend/css/multiColumnSection.css
@@ -7,7 +7,7 @@
background: #eee;
margin: 60px 40px;
overflow: hidden;
- padding: 20px;
+ padding: 0;
position: absolute;
top: 0;
left: 0;
@@ -21,7 +21,7 @@
}
.page {
- margin: 0 0 20px 0;
+ margin: 0;
position: relative;
overflow: hidden;
}
View
4 frontend/devel.html
@@ -40,6 +40,7 @@
<script src="js/backbone/views/PageView.js"></script>
<script src="js/backbone/views/MultiColumnSectionView.js"></script>
<script src="js/backbone/views/MultiColumnPageView.js"></script>
+ <script src="js/backbone/views/MultiColumnFigureView.js"></script>
<script src="js/backbone/views/ToolbarView.js"></script>
<script src="js/backbone/views/ToolbarItemView.js"></script>
<script src="js/backbone/views/NavigationView.js"></script>
@@ -79,6 +80,9 @@
maxColumnWidth : 300,
gutterWidth : 40,
minLinesPerColumn : 5
+ },
+ figureViewTypeMap: {
+ 'default': 'MultiColumnFigure'
}
});
app.run();
View
6 frontend/js/backbone/Router.js
@@ -11,7 +11,11 @@ jQuery(function() {
},
initialize: function() {
-
+ app.dispatcher.on('layoutComplete', function(section) {
+
+ //TODO: router should decide if going to a selector or the first page
+ app.dispatcher.trigger("navigate", {page: 1});
+ }, this);
},
/**
View
3 frontend/js/backbone/collections/FiguresCollection.js
@@ -35,7 +35,8 @@ OsciTk.collections.Figures = OsciTk.collections.BaseCollection.extend({
position: $(markup).attr('data-position'),
columns: $(markup).attr('data-columns'),
options: JSON.parse($(markup).attr('data-options')),
- thumbnail_url: undefined // Defaults to image defined in css
+ thumbnail_url: undefined, // Defaults to image defined in css
+ type: $(markup).attr('data-figure_type')
};
// First, check for an explicit thumbnail
View
3 frontend/js/backbone/models/FigureModel.js
@@ -12,8 +12,7 @@ OsciTk.models.Figure = OsciTk.models.BaseModel.extend({
position: null,
columns: null,
body: null,
- options: {},
- processed: false
+ options: {}
};
}
});
View
1 frontend/js/backbone/templates/multi-column-section.tpl.html
@@ -0,0 +1 @@
+<div id="pages"></div>
View
28 frontend/js/backbone/views/MultiColumnFigureView.js
@@ -0,0 +1,28 @@
+// OsciTk Namespace Initialization //
+if (typeof OsciTk === 'undefined'){OsciTk = {};}
+if (typeof OsciTk.views === 'undefined'){OsciTk.views = {};}
+// OsciTk Namespace Initialization //
+
+
+OsciTk.views.MultiColumnFigure = OsciTk.views.BaseView.extend({
+
+ tagName: 'figure',
+ processed: false,
+
+ initialize: function() {
+ this.preRender();
+ },
+
+ render: function() {
+ console.log("rendering");
+ },
+
+ preRender: function() {
+ var modelData = this.model.toJSON();
+ //console.log(this.options.sectionDimensions, 'dimensions');
+
+ if (modelData.position === "n") {
+ this.$el.hide();
+ }
+ }
+});
View
54 frontend/js/backbone/views/MultiColumnPageView.js
@@ -5,25 +5,39 @@ if (typeof OsciTk.views === 'undefined'){OsciTk.views = {};}
OsciTk.views.MultiColumnPage = OsciTk.views.Page.extend({
columnTemplate : OsciTk.templateManager.get('multi-column-column'),
+ visible: true,
onClose: function() {
this.model = undefined;
},
+
+ hide: function() {
+ this.$el.css("visibility", "hidden");
+ this.visible = false;
+ },
+
+ show: function() {
+ this.$el.css("visibility", "visible");
+ this.visible = true;
+ },
+
render : function() {
if (this.processingData.rendered) {
return this;
}
+ this.hide();
+
//size the page to fit the view window
this.$el.css({
- width: this.parent.dimensions.innerPageWidth,
- height: this.parent.dimensions.innerPageHeight
+ width: this.parent.dimensions.innerSectionWidth,
+ height: this.parent.dimensions.innerSectionHeight
});
this.processingData.columns = [];
for (var i = 0; i < this.parent.dimensions.columnsPerPage; i++) {
this.processingData.columns[i] = {
- height : this.parent.dimensions.innerPageHeight,
- heightRemain : this.parent.dimensions.innerPageHeight,
+ height : this.parent.dimensions.innerSectionHeight,
+ heightRemain : this.parent.dimensions.innerSectionHeight,
'$el' : null,
offset : 0
};
@@ -66,26 +80,36 @@ OsciTk.views.MultiColumnPage = OsciTk.views.Page.extend({
}
//find figure references and process the figure
- var figureLinks = content.find("a.figure_reference:not(.processed)");
- if (figureLinks.length) {
- console.log(figureLinks, 'figureLinks');
- _.first(figureLinks, function(figureLink){
- figureLink = $(figureLink);
- var figureId = figureLink.attr("href").substring(1),
+ var figureLinks = content.find("a.figure_reference:not(.processed)"),
+ numFigureLinks = figureLinks.length;
+
+ if (numFigureLinks) {
+ for (var i = 0; i < numFigureLinks; i++) {
+ var figureLink = $(figureLinks[i]),
+ figureId = figureLink.attr("href").substring(1),
figure = app.collections.figures.get(figureId);
- console.log(figure);
if (figure.get('processed')) {
- return false;
+ continue;
}
//make sure the figure link is in the viewable area of the current column
var linkLocation = figureLink.position().top;
- if (linkLocation >= 0 && linkLocation <= column.height) {
-
+ if (linkLocation <= 0 || linkLocation >= column.height) {
+ break;
}
- });
+ var figureType = figure.get('type'),
+ typeMap = app.config.get('figureViewTypeMap'),
+ figureView = typeMap[figureType] ? typeMap[figureType] : typeMap['default'];
+
+ var figureViewInstance = new OsciTk.views[figureView]({
+ model : figure,
+ sectionDimensions : this.parent.dimensions
+ });
+ this.addView(figureViewInstance);
+ //console.log(figureViewInstance, "place the figure");
+ }
}
var contentMargin = {
View
36 frontend/js/backbone/views/MultiColumnSectionView.js
@@ -6,6 +6,8 @@ if (typeof OsciTk.views === 'undefined'){OsciTk.views = {};}
OsciTk.views.MultiColumnSection = OsciTk.views.Section.extend({
+ template: OsciTk.templateManager.get('multi-column-section'),
+
initialize: function() {
this.options.pageView = 'MultiColumnPage';
@@ -15,6 +17,12 @@ OsciTk.views.MultiColumnSection = OsciTk.views.Section.extend({
this.render();
}, this);
+ app.dispatcher.on("navigate", function(data) {
+ this.getChildViewByIndex(data.page - 1).show();
+ var offset = (data.page - 1) * (this.dimensions.innerSectionHeight)* -1;
+ this.$el.find("#pages").css("-webkit-transform", "translateY(" + offset + "px)");
+ }, this);
+
this.$el.addClass("oscitk_multi_column");
//set the default options
@@ -32,6 +40,8 @@ OsciTk.views.MultiColumnSection = OsciTk.views.Section.extend({
},
renderContent: function() {
+ this.$el.html(this.template());
+
this.calculateDimensions();
//setup location to store layout housekeeping information
@@ -47,7 +57,7 @@ OsciTk.views.MultiColumnSection = OsciTk.views.Section.extend({
var i = 0;
while(this.layoutData.items > 0) {
- var pageView = this.getPageForProcessing();
+ var pageView = this.getPageForProcessing(undefined, "#pages");
if (!pageView.processingData.rendered) {
pageView.render();
@@ -82,47 +92,47 @@ OsciTk.views.MultiColumnSection = OsciTk.views.Section.extend({
dimensions.gutterWidth = this.options.gutterWidth;
//get the margins of the section container
- dimensions.pageMargin = {
+ dimensions.sectionMargin = {
left : parseInt(this.$el.css("margin-left"), 10),
top : parseInt(this.$el.css("margin-top"), 10),
right : parseInt(this.$el.css("margin-right"), 10),
bottom : parseInt(this.$el.css("margin-bottom"), 10)
};
//get the padding of the section container
- dimensions.pagePadding = {
+ dimensions.sectionPadding = {
left : parseInt(this.$el.css("padding-left"), 10),
top : parseInt(this.$el.css("padding-top"), 10),
right : parseInt(this.$el.css("padding-right"), 10),
bottom : parseInt(this.$el.css("padding-bottom"), 10)
};
//determine the correct height for the section container to eliminate scrolling
- dimensions.outerPageHeight = windowHeight - dimensions.pageMargin.top - dimensions.pageMargin.bottom;
- dimensions.innerPageHeight = dimensions.outerPageHeight - dimensions.pagePadding.top - dimensions.pagePadding.bottom;
+ dimensions.outerSectionHeight = windowHeight - dimensions.sectionMargin.top - dimensions.sectionMargin.bottom;
+ dimensions.innerSectionHeight = dimensions.outerSectionHeight - dimensions.sectionPadding.top - dimensions.sectionPadding.bottom;
//determine the correct width for the section container
- dimensions.outerPageWidth = this.$el.outerWidth();
- dimensions.innerPageWidth = dimensions.outerPageWidth - dimensions.pagePadding.left - dimensions.pagePadding.right;
+ dimensions.outerSectionWidth = this.$el.outerWidth();
+ dimensions.innerSectionWidth = dimensions.outerSectionWidth - dimensions.sectionPadding.left - dimensions.sectionPadding.right;
//column width
- if (dimensions.innerPageWidth < this.options.maxColumnWidth) {
- dimensions.columnWidth = dimensions.innerPageWidth;
+ if (dimensions.innerSectionWidth < this.options.maxColumnWidth) {
+ dimensions.columnWidth = dimensions.innerSectionWidth;
} else {
dimensions.columnWidth = this.options.maxColumnWidth;
}
//Determine the number of columns per page
- dimensions.columnsPerPage = Math.floor(dimensions.innerPageWidth / dimensions.columnWidth);
- if (dimensions.innerPageWidth < (dimensions.columnsPerPage * dimensions.columnWidth) + ((dimensions.columnsPerPage - 1) * this.options.gutterWidth))
+ dimensions.columnsPerPage = Math.floor(dimensions.innerSectionWidth / dimensions.columnWidth);
+ if (dimensions.innerSectionWidth < (dimensions.columnsPerPage * dimensions.columnWidth) + ((dimensions.columnsPerPage - 1) * this.options.gutterWidth))
{
dimensions.columnsPerPage = dimensions.columnsPerPage - 1;
}
//Large gutters look ugly... reset column width if gutters get too big
- var gutterCheck = (dimensions.innerPageWidth - (dimensions.columnsPerPage * dimensions.columnWidth)) / (dimensions.columnsPerPage - 1);
+ var gutterCheck = (dimensions.innerSectionWidth - (dimensions.columnsPerPage * dimensions.columnWidth)) / (dimensions.columnsPerPage - 1);
if (gutterCheck > this.options.gutterWidth) {
- dimensions.columnWidth = (dimensions.innerPageWidth - (this.options.gutterWidth * (dimensions.columnsPerPage - 1))) / dimensions.columnsPerPage;
+ dimensions.columnWidth = (dimensions.innerSectionWidth - (this.options.gutterWidth * (dimensions.columnsPerPage - 1))) / dimensions.columnsPerPage;
}
this.dimensions = dimensions;
View
7 frontend/js/backbone/views/SectionView.js
@@ -40,7 +40,7 @@ OsciTk.views.Section = OsciTk.views.BaseView.extend({
onClose: function() {
this.model.removeAllPages();
},
- getPageForProcessing : function(id) {
+ getPageForProcessing : function(id, newTarget) {
var page;
if (id !== undefined) {
@@ -54,9 +54,10 @@ OsciTk.views.Section = OsciTk.views.BaseView.extend({
this.model.get('pages').add({});
page = new OsciTk.views[this.options.pageView]({
- model : this.model.get('pages').at(this.model.get('pages').length - 1)
+ model : this.model.get('pages').at(this.model.get('pages').length - 1),
+ pageNumber : this.model.get('pages').length
});
- this.addView(page);
+ this.addView(page, newTarget);
} else {
page = page.pop();
}
View
8 frontend/sample/nav.xhtml
@@ -9,16 +9,16 @@
<h1>Table of Contents</h1>
<ol>
<li>
- <a data-section_id='1' data-mlid='454' data-length='0' data-subtree_length='0' data-timestamp='1329923970' data-thumbnail="img/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-1.xhtml'>Front Section</a>
+ <a data-section_id='1' data-timestamp='1329923970' data-thumbnail="img/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-1.xhtml'>Front Section</a>
</li>
<li>
- <a data-section_id='2' data-mlid='455' data-length='0' data-subtree_length='0' data-timestamp='1329942442' data-thumbnail="img/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-2.xhtml'>Section 2</a>
+ <a data-section_id='2' data-timestamp='1329942442' data-thumbnail="img/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-2.xhtml'>Section 2</a>
</li>
<li>
- <a data-section_id='3' data-mlid='456' data-length='0' data-subtree_length='0' data-timestamp='1329860542' data-thumbnail="img/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-3.xhtml'>Section 3</a>
+ <a data-section_id='3' data-timestamp='1329860542' data-thumbnail="img/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-3.xhtml'>Section 3</a>
<ol>
<li>
- <a data-section_id='4' data-mlid='457' data-length='0' data-subtree_length='0' data-timestamp='1329860542' data-thumbnail="http://osci_tk.localhost/sites/default/files/styles/osci_tk_default/public/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-4.xhtml'>Section 4 as subsection</a>
+ <a data-section_id='4' data-timestamp='1329860542' data-thumbnail="http://osci_tk.localhost/sites/default/files/styles/osci_tk_default/public/avatar32.jpeg" data-subtitle="dun dun dun" href='sample/section-4.xhtml'>Section 4 as subsection</a>
</li>
</ol>
</li>

0 comments on commit ca92041

Please sign in to comment.
Something went wrong with that request. Please try again.