Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

a lot of

  • Loading branch information...
commit 480f6ff79e121887001f0b405db53760e117e672 1 parent cf88571
Daniele Guido authored
18 glue/models.py
View
@@ -99,6 +99,18 @@ def __unicode__(self):
def bib( self ):
return bibtex( self.content )
+ def plaintext( self ):
+ return """
+ |
+
+ %s
+ ===
+
+ #%s %s
+ language: %s
+ mimetype: %s
+
+ ___""" %( self.title, self.id, self.slug, self.language, self.mimetype )
def json( self ):
return{
@@ -186,8 +198,10 @@ def json( self ):
'duration': self.duration,
'sort': self.sort,
'abstract': self.abstract,
- 'pin': self.pin.json(),
+ 'title': self.pin.title,
'role': self.role,
+
+ 'mimetype': self.pin.mimetype,
'type': self.type
}
@@ -223,7 +237,7 @@ class Serie( PageAbstract ):
tags = models.ManyToManyField( Tag, blank=True, null=True ) # add tags !
- def json( self, load_frames=False ):
+ def json( self, load_frames=True ):
# when load frames is True return the list. otherwise null
return{
'id': self.id,
54 static/css/stack.css
View
@@ -0,0 +1,54 @@
+body {
+ background: #929292;
+ margin: auto;
+ width: 1280px;
+}
+
+a {
+ color: #6baed6;
+}
+
+a:not(:hover) {
+ text-decoration: none;
+}
+
+.stack {
+ background: #222;
+ color: #fff;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ display: none;
+ font-size: 48px;
+ height: 800px;
+ padding: 160px 80px;
+ width: 1280px;
+ -webkit-transform: translate3d(0,0,0);
+}
+
+.active {
+ box-shadow: 0px 4px 8px rgba(0,0,0,.5);
+ display: block;
+ position: fixed;
+}
+
+.grey {
+ color: #969696;
+}
+
+@media
+screen and (max-device-width: 1024px) {
+ body {
+ width: 1200px;
+ }
+
+ .stack {
+ margin: 40px 0;
+ }
+
+ .stack {
+ display: block;
+ }
+}
392 static/js/oo/glue copy.js
View
@@ -1,392 +0,0 @@
-var oo = oo || {}; oo.vars.pin = oo.vars.pin || {}; oo.glue = {};
-
-/*
-
-
- Magic
- =====
-
-*/
-oo.magic = oo.magic || {};
-oo.magic.reload = function(){
- window.location.reload();
-}
-
-oo.magic.page = oo.magic.page || {};
-
-oo.magic.page.add = function( result ){
- oo.log("[oo.magic.page.add]", result);
- window.location.reload();
-}
-
-oo.magic.pin = oo.magic.pin || {};
-oo.magic.pin.add = function( result ){
- oo.log("[oo.magic.pin.add]", result);
- window.location.reload();
-}
-oo.magic.pin.get = function( result ){
- oo.log("[oo.magic.pin.get]", result);
- // window.location.reload();
-}
-
-
-
-/*
-
-
- Pin/Page Ajax API
- =================
-
-*/
-oo.api.pin = {};
-oo.api.pin.add = function( params ){ oo.log( '[oo.api.pin.add]', params );
- $.ajax( $.extend( oo.api.settings.post,{
- url: oo.urls.add_pin,
- data: params,
- success:function(result){
- oo.log( "[oo.api.pin.add] result:", result );
- oo.api.process( result, oo.magic.pin.add, "id_add_pin" );
- }
- }));
-};
-
-oo.api.pin.get = function( pk, params, callback ){
- $.ajax( $.extend( oo.api.settings.get,{
- url: oo.api.urlfactory( oo.urls.get_pin, pk ),
- data: params,
- success:function(result){
- oo.log( "[oo.api.pin.get] result:", result );
- oo.api.process( result, typeof callback == "function"? callback: oo.magic.pin.get );
- }
- }));
-};
-
-oo.api.pin.edit = function( pk, params, callback ){
- $.ajax( $.extend( oo.api.settings.post,{
- url: oo.api.urlfactory( oo.urls.edit_pin, pk ),
- data: params,
- success:function(result){
- oo.log( "[oo.api.pin.edit] result:", result );
- oo.api.process( result, typeof callback == "function"? callback: oo.magic.reload,"id_edit_pin" );
- }
- }));
-};
-
-oo.api.pin.delete = function( pk, params, callback ){
- $.ajax( $.extend( oo.api.settings.post,{
- url: oo.api.urlfactory( oo.urls.edit_pin, pk ),
- data: $.extend({'method':'DELETE'}, params),
- success:function(result){
- oo.log( "[oo.api.pin.delete] deleted : "+ pk);
- oo.api.process( result, typeof callback == "function"? callback: oo.magic.reload);
- }
- }));
-};
-
-oo.api.pin.publish = function( pk, params, callback ){
- $.ajax( $.extend( oo.api.settings.post,{
- url: oo.api.urlfactory( oo.urls.publish_pin, pk ),
- data: params,
- success:function(result){
- //oo.log( "[oo.api.pin.publish] pin #"+ pk+"new status is : "+params.new_status);
- oo.api.process( result, typeof callback == "function"? callback: oo.magic.reload);
- }
- }));
-};
-
-
-oo.api.page = {};
-oo.api.page.add = function( params ){
- oo.log("[oo.api.page.add]");
- $.ajax( $.extend( oo.api.settings.post,{
- url: oo.urls.add_page,
- data: params,
- success:function(result){
- oo.log( "[oo.api.page.add] result:", result );
- oo.api.process( result, oo.magic.page.add, "id_add_page" );
- }
- }));
-}
-
-/*
-
-
- Pin/Page Init
- =============
-
- Require wysihtml5 plugin
-
-*/
-oo.glue = {};
-oo.glue.init = function(){ oo.log("[oo.glue.init]");
-
- // input.repeatable: copy $.val() to targeted data-target element
- $(document).on('keyup', 'input.repeatable', function(event){ var $this = $(this); $( '#' + $this.attr('data-target') ).val( oo.fn.slug( $this.val() ) );});
-
- // remove invalid elements
- $(document).click( function(event){ $(".invalid").removeClass('invalid');});
-
-
-
-
- $("#add-page").on("click", function(event){ event.preventDefault(); oo.api.page.add({
- title_en:$("#id_add_page_title_en").val(),
- title_fr:$("#id_add_page_title_fr").val(),
- slug:$("#id_add_page_slug").val()
- });});
-
-
- // generic pin adder, with error control
- $(".add-walt-pin").on("click", function(event){ event.preventDefault();
- var el = $(this);
-
- // get django form auto_id
- var auto_id = el.attr("data-auto-id"); // eg add_walt_
-
- // build stuff
- var permalink = $("#id_add_pin_permalink").val();
- var page_slug = el.attr("data-page-slug");
- var pin_slug = el.attr("data-pin-slug");
- var content = $("#id_add_pin_content").val();
- var mimetype = $("#id_add_pin_mimetype").val();
-
-
- oo.log("[oo.glue.init:click] #add-pin, page-slug:", page_slug, ", parent-pin-slug:", pin_slug );
-
- var params = {
- title_en:$("#id_add_pin_title_en").val(),
- title_fr:$("#id_add_pin_title_en").val(),
- title_it:$("#id_add_pin_title_en").val(),
- slug:$("#id_add_pin_slug").val()
- }
-
-
- if ( typeof permalink != "undefined" && permalink.length ){
- $.extend(params,{permalink:permalink});
- }
-
- if ( typeof content != "undefined" && content.length ){
- $.extend(params,{content:content});
- }
-
- if ( typeof mimetype != "undefined" && mimetype.length ){
- $.extend(params,{mimetype:mimetype});
- }
-
- if ( typeof page_slug != "undefined" && page_slug.length ){
- $.extend(params,{page_slug:page_slug});
- }
-
- if ( typeof pin_slug != "undefined" && pin_slug.length ){
- $.extend(params,{parent_pin_slug:pin_slug});
- }
- oo.api.pin.add( params );
- });
-
-
-
-
- $("#add-pin").on("click", function(event){ event.preventDefault();
- var el = $(this);
- var permalink = $("#id_add_pin_permalink").val();
- var page_slug = el.attr("data-page-slug");
- var pin_slug = el.attr("data-pin-slug");
- var content = $("#id_add_pin_content").val();
- var mimetype = $("#id_add_pin_mimetype").val();
-
-
- oo.log("[oo.glue.init:click] #add-pin, page-slug:", page_slug, ", parent-pin-slug:", pin_slug );
-
- var params = {
- title_en:$("#id_add_pin_title_en").val(),
- title_fr:$("#id_add_pin_title_en").val(),
- title_it:$("#id_add_pin_title_en").val(),
- slug:$("#id_add_pin_slug").val()
- }
-
-
- if ( typeof permalink != "undefined" && permalink.length ){
- $.extend(params,{permalink:permalink});
- }
-
- if ( typeof content != "undefined" && content.length ){
- $.extend(params,{content:content});
- }
-
- if ( typeof mimetype != "undefined" && mimetype.length ){
- $.extend(params,{mimetype:mimetype});
- }
-
- if ( typeof page_slug != "undefined" && page_slug.length ){
- $.extend(params,{page_slug:page_slug});
- }
-
- if ( typeof pin_slug != "undefined" && pin_slug.length ){
- $.extend(params,{parent_pin_slug:pin_slug});
- }
- oo.api.pin.add( params );
- });
-
-
- $("#edit-pin").on("click", function(event){ event.preventDefault(); oo.api.pin.edit( $(this).attr("data-pin-id"),{
- title:$("#id_edit_pin_title").val(),
- content:$("#id_edit_pin_content").val(),
- abstract:$("#id_edit_pin_abstract").val()
- });});
-
- $("#id_add_page_title_en").on('keyup', function( event ){ $("#id_add_page_slug").val( oo.fn.slug( $("#id_add_page_title_en").val() ) ) });
- $("#id_add_pin_title_en").on('keyup', function( event ){ $("#id_add_pin_slug").val( oo.fn.slug( $("#id_add_pin_title_en").val() ) ) });
-
-
-
-
-
- // html5 pin editor
- try{
- var editor = new wysihtml5.Editor("id_edit_pin_content", { // id of textarea element
- toolbar: "wysihtml5-toolbar", // id of toolbar element
- parserRules: wysihtml5ParserRules // defined in parser rules set
- });
- } catch(e){
- oo.log("[oo.glue.init:exception]",e);
- }
-
- // ADD PIN
- $(document).on("click",".add-pin", function(event){
- var el = $(this);
- oo.log("[oo.glue.init:click] .add-pin", el.attr("data-page-slug"), el.attr('data-parent-pin-slug') );
- // $('#add-pin-modal').modal('show');
- $('#add-pin-modal').reveal();
-
- if( typeof el.attr('data-parent-pin-slug') == "undefined"){
- $('#parent-pin-slug').empty();
- } else {
- $('#parent-pin-slug').html( "→" + el.attr('data-parent-pin-slug') )
- }
-
- if( typeof el.attr('data-page-slug') == "undefined"){
- $('#parent-page-slug').empty(); // news!
- } else {
- $('#parent-page-slug').html( "→" + el.attr('data-parent-slug') )
- }
-
- $('#add-pin').attr("data-parent-pin-slug", el.attr('data-parent-pin-slug') );
- $('#add-pin').attr("data-page-slug", el.attr('data-page-slug') );
-
- });
-
- $(document).on("click",".edit-pin", function(event){
- // load content before all
- oo.api.pin.get( $(this).attr('data-pin-id'), {}, function(result){
- // $('#edit-pin-modal').modal('show');
- $('#id_edit_pin_title').val( result.object.title )
- $('#id_edit_pin_abstract').val( result.object.abstract )
- $('#id_edit_pin_content').val( result.object.content )
- editor.setValue( result.object.content );
- // $('#edit-pin-modal').result.object.title
- $('#edit-pin').attr("data-pin-id",result.object.id );
- });
- oo.log("eeee");
- });
-
- // Delete PIN
- $(document).on("click",".delete-pin", function(event){
- oo.api.pin.delete($(this).attr('data-pin-id'),{});
- });
-
- //Publish PIN
- $(document).on("click",".publish-pin", function(event){
- oo.api.pin.publish($(this).attr('data-pin-id'),{'new_status':$(this).attr('new-status')});
- });
-
-
- // bib text
- oo.glue.bibtex.init();
-};
-
-oo.glue.bibtex = { timer:0 }
-oo.glue.bibtex.wait = function( event ){
- clearTimeout( oo.glue.bibtex.timer );
- oo.glue.bibtex.timer = setTimeout( oo.glue.bibtex.parse, 1000);
-}
-
-oo.glue.bibtex.parse = function(){
- try{
- var bib = oo.fn.bibtex( $("#id_add_pin_content").val() );
- $("#id_add_pin_title_en").val( bib.title );
- $("#id_add_pin_slug").val( oo.fn.slug( bib[ bib.bibtext_key ] ) );
- } catch( e ){
- oo.log( e );
- }
-}
-
-oo.glue.bibtex.init = function(){
- // content as bibtext parser !@!
- $("#id_add_pin_content").on("keyup", oo.glue.bibtex.wait );
-
-}
-
-
-oo.glue.upload = { is_dragging:false }
-oo.glue.upload.enable = function()
-{
- oo.log("[oo.glue.upload.enable]");
- $('#fileupload').fileupload('enable');
-}
-
-oo.glue.upload.disable = function(){
- oo.log("[oo.glue.upload.disable]");
- $('#fileupload').fileupload('disable');
-}
-oo.glue.upload.init = function(){
- oo.log("[oo.glue.init]");
-
- $('#fileupload').fileupload({
- url: oo.urls.pin_upload,
- dataType: 'json',
- sequentialUploads: true,
- dragover: function(e,data){
- if (oo.glue.upload.is_dragging)
- return;
- oo.log("[oo.glue.upload] dragover");
- oo.glue.upload.is_dragging = true;
- },
- drop:function(e,data){
- oo.log("[oo.glue.upload] drop");
- oo.glue.upload.is_dragging = false;
- },
- done: function (e, data) {
- oo.log( e, data.result);
- oo.toast("uploaded finished", { stayTime: 2000,cleanup:true });
- if( data.result.status == "ok"){
- oo.toast( "COMPLETED GUY!:!!!" );
- } else{
- oo.toast( data.result.error, ds.i18n.translate("error"), { stayTime: 2000, cleanup:true });
- }
- },
- start: function (e, data) {
- oo.toast(oo.i18n.translate("start uploading"), { stayTime: 2000 });
- },
- fail: function( e, data){
- oo.log(e, data);
- oo.fault( e.type);
- },
- progressall: function (e, data) {
- var progress = parseInt(data.loaded / data.total * 100, 10);
- $('#progress .bar').width( progress + '%');
- },
-
- add: function (e, data) {
- var slug = $('body').attr('data-page-slug');
- if( slug.length > 0 ){
- data.formData = { 'page_slug':slug };
- }
- data.submit();
-
- }
- });
- // enabled by default, or comment
- // oo.glue.upload.disable();
-};
-
-
124 static/js/oo/grain.js
View
@@ -0,0 +1,124 @@
+/*
+ GRAIN
+ a small and simple template engine. Alternative to ember.js or angular.
+
+
+ 1. create somewhere on page your element with data-object attribute. This will be your
+ base template for 'serie' objects
+
+ <div data-object='serie'>
+ <h3>(( title ))</h3>
+ <h3>(( title ))</h3>
+ <h3>(( title ))</h3>
+ <ul data-for-object='serie.frame'>
+
+ </ul>
+ </div>
+
+ 2. handle list of objects
+
+ <ul data-for-object='serie'>
+
+ </ul>
+
+ 3.
+
+*/
+
+var oo = oo || {};
+
+oo.grain = {}
+
+oo.grain.templates = {}
+
+oo.grain.templatetags = {
+ url:function( factor, args ){
+ return oo.api.urlfactory( args[0], factor )
+ },
+ loop:function( items, args ){
+ oo.log( items, args )
+ var template = args[0];
+
+ el = $("<div/>")
+
+ for (var i in items){
+
+ oo.log(oo.grain.templates[ template ], items[i])
+ el.append( oo.grain.templates[ template ].load( items[i] ) )
+ }
+ return el.html()
+ // call a template engine foreach
+ },
+ length: function(a){
+ return a.length
+ }
+}
+
+
+oo.grain.register = function(a, i){
+ var el = $(this)
+
+ var t = el.attr( 'data-object' );
+
+ if ( typeof oo.grain.templates[ t ] == "undefined" ){
+ oo.grain.templates[ t ] = new oo.grain.Template({ type:t, element:el });
+ }
+
+ oo.log(el.attr( 'data-object' ));
+}
+
+oo.grain.init = function(){
+ // load template in page
+ $('*[data-object]').each( oo.grain.register );
+}
+
+
+oo.grain.transform = function( el, object ){
+
+ var d = /\(\(\s?([\d\w-_\.]+)\s?\)\)/g;
+ // with function... eval? split with |, args with "," so don't use it
+ var fn = /\(\(\s?([\d\w-\|_,\/\.]+)\s?\)\)/g;
+
+ var str = "" + el.clone().wrap('<p>').parent().html().replace(d, function(){
+ return typeof object[ arguments[1] ] != "undefined"? object[ arguments[1] ]: arguments[0];
+ }).replace(fn, function(){
+ args = arguments[1].split("|")
+ if (args.length < 2 || typeof oo.grain.templatetags[ args[0] ] == "undefined"){
+ return arguments[0]; // no templatetags...!
+ }
+
+ var func = oo.grain.templatetags[ args.shift() ];
+ var item = object[ args.shift() ]
+
+ return func( item, args );
+
+ });
+ el.replaceWith( str );
+ return str;
+}
+
+oo.grain.Template = function( options ){
+ var h = this;
+
+ this.settings = $.extend({
+ type:'',
+ id:'',
+ element:''
+ }, options );
+
+ this.init = function(){
+ oo.log( "[oo.grain.Template:"+this.settings.type+"]", this.settings.type )
+ }
+
+
+ this.load = function( object ){
+ var el = h.settings.element.clone()
+
+ return oo.grain.transform( el.show(), object );
+ // returna cloned element
+ }
+
+ this.html = ''
+
+ h.init()
+}
39 static/js/oo/rice.js
View
@@ -64,7 +64,7 @@ oo.rice.init = function(){oo.log("[oo.rice.init]");
// load last serie from cookie
oo.rice.serie = new oo.rice.Serie({
autoload:true,
- id: $( ".frames" ).attr("data-serie-id")
+ id: 0
});
// start global listeners: append frame
@@ -73,6 +73,9 @@ oo.rice.init = function(){oo.log("[oo.rice.init]");
// use serie
$(document).on("click",".change-serie", function(event){ oo.trigger( oo.rice.events.serie.change, { id: $(this).attr('data-id')});});
+
+ $("*[data-make-small=parent]").click( function(){ $(this).parent().css("left","-40%"); });
+
// add serie on click
$("#add-serie").click( function(){ event.preventDefault();
title = $("#id_add_serie_title_en").val();
@@ -113,13 +116,15 @@ oo.rice.Serie = function( options ){
this.settings = $.extend({
autoload: false,
collection: '.frames',
- source_selector: '.draggable',
+ modal: '#serie-viewer',
frames:[],
slug:'',
language:'',
id: 0
}, options );
+ this.quasi_frames = [];
+
/*
Expose publicly serie frames
*/
@@ -139,10 +144,14 @@ oo.rice.Serie = function( options ){
*/
this.load = function( result ){
serie.settings.frames = [];
+ // when here, result.status = "ok"
+
+
- oo.log( "[serie:oo.rice.Serie] load", result );
- $("#timeline-serie .title").text( result.object.title + '(' + result.object.frames.length + ')');
+ oo.grain.transform( $(serie.settings.modal), result['objects'][0] )
+
+
serie.open();
};
@@ -151,6 +160,17 @@ oo.rice.Serie = function( options ){
It expects an object of type oo.rice.Frame to be delivered.
*/
this.append_frame = function( event, frame ){
+
+ oo.log( serie.settings.id);
+ if (serie.settings.id == 0){
+ // load last saved serie
+ oo.api.serie.list({limit:1, order_by:'["-date_last_modified"]'}, serie.load );
+ serie.quasi_frames.push( frame );
+ return
+ }
+
+ $(serie.settings.modal).show();
+
// add and send
oo.log( "[serie:oo.rice.Serie] append_frame to ", frame, serie.settings.collection );
serie.settings.frames.push( frame );
@@ -195,9 +215,8 @@ oo.rice.Serie = function( options ){
}
this.open = function(){
- // has a serie ?
-
- $("#timeline-serie").css({bottom:0});
+ $(serie.settings.modal).show().draggable();
+ $(serie.settings.modal + " .frames").sortable();
}
@@ -240,13 +259,15 @@ oo.rice.Serie = function( options ){
// intitialize history
serie.history = new oo.rice.History()
- //
-
+
// start sortable plugin
$( serie.settings.collection ).sortable();
+ // autoload!
+ // http://127.0.0.1:8000/api/serie/?limit=1&order_by=[%22-date_last_modified%22]
+
// start listeners
oo.on( oo.rice.events.frame.append, serie.append_frame );
9,382 static/js/vendor/d3.v2.js
View
9,382 additions, 0 deletions not shown
150 static/less/style.less
View
@@ -6,12 +6,13 @@
@red: #cc1600;
-@grigio-0: lighten(#3E454C, 65%);
-@grigio-1: lighten(#3E454C, 20%);
+@grigio-0: lighten(#3E454C, 60%);
+@grigio-1: lighten(@grigio-0, 2%);
@grigio-2: darken(#FFF6E5, 10%);
@grigio-3: #FFF6E5;
@blue: #2185C5;
+@crimson: #cc1600;
//
// ================
@@ -35,7 +36,17 @@
}
+a.crimson{
+ color: crimson;
+}
+a.open-attach-tag{
+ height:16px;
+ width: 16px;
+ background: url( ../img/tag.png);
+
+
+}
@@ -66,6 +77,7 @@ header{
#menu{
//background-color: @grigio-3;
+ text-align: center
}
#navbar{
background-color: @grigio-0;
@@ -73,27 +85,42 @@ header{
h2{
border-bottom: 0px solid transparent;
- background:@blue;
-
+ background:@grigio-0;
margin-top: 0;
padding-top: @grid-padding / 2;
margin-bottom: 0;
- padding-bottom: @grid-padding / 2;
+ padding-bottom: @grid-padding / 1.5;
+
+
text-align: center;
- .mono(14px, lowercase);
+ .mono(16px, lowercase);
a, a:visited{
- color: white;
+ color: @blue;
+ }
+
+ &.crimson{
+ color: @crimson;
+ a, a:visited{
+ color: @crimson;
+ }
}
+
}
.shadow div{
- //border-top: 1px solid #999;
- //border-bottom: 1px solid #ccc;
+ border-top: 2px solid @blue;
+ border-bottom: 1px solid @blue;
height:3px;
overflow: hidden;
+
+ &.crimson{
+ border-top: 1px dashed @crimson;
+ border-bottom: 1px solid @crimson;
+
+ }
}
}
@@ -166,52 +193,86 @@ h2{
.item{
margin-bottom: @grid-padding;
-
- padding-bottom: @grid-padding / 2;
-
padding: @grid-padding/4 @grid-padding/2;
+ padding: 0;
+
// .border-distribute( #ababab );
background-color: #fff;
// .box-shadow( 0 1px 3px fade(#999, 65%) );
h3{
.serif-slant(16px);
+ margin: @grid-padding/4 @grid-padding/2;
color: #000;
a{
color: #292929;
}
}
h4{
+ margin: @grid-padding/4 @grid-padding/2;
+
.serif(15px);
color: #000;
}
blockquote{
padding: @grid-padding/3;
.sans-serif(12px);
- margin:0;
+ margin: @grid-padding/4 @grid-padding/2;
}
- .metadata{
- margin-bottom: @grid-padding/2;
+ >.content{
+ margin: @grid-padding/4 @grid-padding/2;
+ }
+ >.authors{
+ margin: @grid-padding/4 @grid-padding/2;
+ }
+ >.metadata{
+ margin: @grid-padding/4 @grid-padding/2;
}
.actions{
- border-top: 1px solid #e1e1e1;
- margin: @grid-padding/2 0;
- padding: @grid-padding/2 0 0 0;
+ background: @grigio-1;
+ border: 1px solid darken( @grigio-1, 5% );
+
+ margin: @grid-padding/2;
+ padding: 0;
overflow:auto;
a.action{
display:block;
float:left;
- border-left: 1px solid #e1e1e1;
- padding: @grid-padding/8 @grid-padding/2;
+ border-left: 1px solid #ccc;
+ padding: 0;
&:first-child{
border-left: 1px solid transparent;
}
+
+ height: 48px;
+ width: 48px;
+ .icon{
+ height:16px;
+ width: 16px;
+ margin: 16px;
+ &.edit{
+ background: url( ../img/edit.png);
+ }
+ &.link{
+ background: url( ../img/link.png);
+ }
+ &.remove{
+ background: url( ../img/bin.png);
+ }
+ &.tag{
+ background: url( ../img/tag.png);
+ }
+ }
+
+ &:hover{
+ background-color: @blue;
+ }
}
}
- border: 1px solid white;
+ border: 1px solid @grigio-0;
&:hover{
// .box-shadow( 0 0px 2px @blue );
border: 1px solid @blue;
@@ -331,7 +392,7 @@ left: 30px;
}
- &.ui-sortable-placeholder { border: 1px dashed crimson; visibility: visible !important; }
+ &.ui-sortable-placeholder { border: 1px dashed crimson; width:3px; visibility: visible !important; }
}
@@ -573,4 +634,47 @@ input.invalid, textarea.invalid{
blockquote{
border-left: 0px solid transparent;
-}
+}
+
+
+/*
+
+ D3 stack
+
+*/
+.stack-enabled{
+ header{
+ position:fixed;
+ z-index: 9999999;
+ top: 0;
+ left: 0;
+ }
+ p,div{
+ .sans-serif(22px);
+ }
+ .authors{
+ .sans-serif(18px);
+ }
+ a, a:visited{
+ color: @blue;
+ }
+ h1{
+ .serif-slant(48px);
+ }
+
+}
+
+
+/*
+
+ Serie VIEWER
+
+*/
+#serie-viewer{
+ .box-shadow( 0 1px 3px rgba( 25,26,27, 0.3) );
+ .border-distribute( #bbb );
+ width: 50%;
+ position:fixed;
+ top:100px;
+ left: 25%;
+}
11 templates/walt/boilerplate.html
View
@@ -56,10 +56,10 @@
<![endif]-->
<!-- Add your site or application content here -->
- {% block body %}
-
- {% endblock %}
+ {% block body %}{% endblock %}
+ <!-- all ajax magic templates -->
+ {% block grain %}{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ STATIC_URL }}/js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
@@ -76,7 +76,8 @@
<script src="{{ STATIC_URL }}/js/oo.js"></script>
<script src="{{ STATIC_URL }}/js/oo/glue.js"></script>
<script src="{{ STATIC_URL }}/js/oo/rice.js"></script>
- <script src="{{ STATIC_URL }}/js/walt.js"></script>
+ <script src="{{ STATIC_URL }}/js/oo/grain.js"></script>
+
<script>
{% block urls %}
@@ -97,7 +98,7 @@
oo.api.init();
oo.glue.init();
oo.rice.init();
-
+ oo.grain.init();
{% endblock %}
});
17 templates/walt/index.html
View
@@ -14,6 +14,9 @@
oo.urls.edit_serie = "{% url glue_api_serie 0 %}";
oo.urls.sync_serie = "{% url glue_api_serie_frames 0 %}";
+ oo.urls.serie_stack = "{% url walt_serie_stack 0 %}";
+
+
oo.urls.get_pin = "{% url glue_api_pin 0 %}";
oo.urls.list_pin = "{% url glue_api_pins %}";
oo.urls.edit_pin = "{% url glue_api_pin 0 %}";
@@ -75,12 +78,12 @@ <h2 class="grid_3 omega">
</h2>
</div>
- <!-- div class="grid_12 shadow" >
+ <div class="grid_12 shadow" >
<div class="grid_3 alpha">&nbsp;</div>
<div class="grid_3">&nbsp;</div>
<div class="grid_3">&nbsp;</div>
<div class="grid_3 omega">&nbsp;</div>
- </div -->
+ </div>
{% endblock %}
@@ -166,7 +169,7 @@ <h2 style="text-align: center"><a href="{% url walt_login %}">&rarr; {% trans "p
<a href="{% url walt_tag tag.type|lower tag.slug %}" class="tag" alt="{{ tag.name }} ( {{ tag.type }} )">{{ tag.name }}</a>
{% if not forloop.last %},{%endif %}
{% endfor %}
-
+ <a href="#" class="open-attach-tag" data-pin-slug="{{ pin.slug }}" alt="attach tag"><div class="icon"></div></a>
</div>
<blockquote>
@@ -237,7 +240,7 @@ <h2 style="text-align: center"><a href="{% url walt_login %}">&rarr; {% trans "p
<a href="{% url walt_tag tag.type|lower tag.slug %}" class="tag" alt="{{ tag.name }} ( {{ tag.type }} )">{{ tag.name }}</a>
{% if not forloop.last %},{%endif %}
{% endfor %}
- <a href="#" class="open-attach-tag" data-pin-slug="{{ pin.slug }}" alt="attach tag">+</a>
+ <a href="#" class="open-attach-tag" data-pin-slug="{{ pin.slug }}" alt="attach tag"></a>
</div>
<div>
{{ pin.content|safe }}
@@ -256,11 +259,11 @@ <h2 style="text-align: center"><a href="{% url walt_login %}">&rarr; {% trans "p
</span>
<div class="actions">
- <a href="#{% url admin:glue_pin_change pin.id %}" class="edit-pin action" data-id="{{ pin.id }}" title="{% trans "edit" %}">{% trans "edit" %}</a>
+ <a href="#{% url admin:glue_pin_change pin.id %}" class="edit-pin action" data-id="{{ pin.id }}" title="{% trans "edit" %}"><div class="icon edit"></div></a>
- <a class="external action" href="{{ pin.permalink}}">{% trans "link" %}</a>
+ <a class="external action" href="{{ pin.permalink}}" title="{% trans "link" %}"><div class="icon link"></div></a>
{% if user in authors %}
- <a class="remove-pin action warning" data-id="{{ pin.id }}">{% trans "delete" %}</a>
+ <a class="remove-pin action warning" data-id="{{ pin.id }}" title="{% trans "delete" %}"><div class="icon remove"></div></a>
{% endif %}
</div>
{% endwith %}
34 templates/walt/middle.html
View
@@ -7,8 +7,10 @@
<header >
<div class="container_12">
<div id="menu" class="grid_12">
- <h1 style="float: left; margin:0; margin-right:24px"><a href="{% url walt_home %}">walt.</a></h1>
- <div style="margin:12px; ">
+ <h1><a href="{% url walt_home %}">walt.</a></h1>
+ <div style="margin:12px 0 ">
+ <a href="{% url walt_series %}" class="crimson">{% trans "series" %} </a> |
+
<!-- a href="{% url walt_home %}" {% if 'home' in tags %}class="active"{% endif %}>{% trans "all walts" %}</a> |
{% if user.is_authenticated %}
<a href="{% url walt_spiff user.username %}" {% if 'my-walt' in tags %}class="active"{% endif %}>{% trans "my walt"%} ( {{ user.username }} )</a> ||
@@ -352,4 +354,32 @@ <h1 style="float: left; margin:0; margin-right:24px"><a href="{% url walt_home %
{% endif %}
+{% endblock %}
+
+
+{% block grain %}
+
+ <div id="serie-viewer" data-object="serie" class="item" style="display:none">
+ <div style="float: right" data-make-small="parent">&larr;</div>
+ <h3>
+ <a href="(( url|slug|{% url walt_serie 0 %} ))">(( title )) (( slug ))</a></h3>
+ <span>( (( length|frames )) frames, type (( type )) )</span>
+ <a href="(( url|slug|{% url walt_serie_stack 0 %} ))">{% trans "view as stack" %}</a>
+ <div class="">
+ <div class="timeline-inner">
+ <div class="frames ui-sortable" data-serie-id="(( id ))">
+ (( loop|frames|frame ))
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div data-object="frame" class="frame" style="display:none">
+ <div class="icon"></div>
+ <div class="title">(( title ))</div>
+ <div class="counter-wrapper"><div class="counter">(( sort ))</div></div>
+ </div>
+
+
{% endblock %}
16 templates/walt/pin.html
View
@@ -1,11 +1,17 @@
{% extends "walt/middle.html" %}
{% load i18n %}
{% load extras %}
+{% block navbar %}
+
+
+ <div class="grid_6 push_3 shadow" >
+ <div class="grid_6 alpha omega">&nbsp;</div>
+ </div>
+
+{% endblock %}
{% block page %}
<div class="grid_12">
- <div class="grid_3 alpha">
- <h2>{% trans "previous in serie" %}</h2>
- </div>
+ <div class="grid_3 alpha">&nbsp;</div>
<div class="grid_6">
{% ifequal pin.mimetype "text/x-bibtex" %}
{% with bibtex=pin.bib %}
@@ -42,7 +48,7 @@
<p><a href="{% url admin:glue_pin_change pin.id %}">&rarr; {% trans "edit" %}</a></p>
</div>
<blockquote>
- {{ pin.abstract }}
+ {{ pin.abstract }}
</blockquote>
{{ pin.content|safe }}
@@ -58,7 +64,7 @@
{% endifequal %}
</div>
<div class="grid_3 omega">
- <h2>{% trans "next in serie" %}</h2>
+
</div>
</div>
{% endblock %}
140 templates/walt/serie.html
View
@@ -1,72 +1,138 @@
{% extends "walt/middle.html" %}
{% load i18n %}
{% load extras %}
+
+
+
+{% block navbar %}
+ <div class="grid_12 shadow" >
+ <div class="grid_9 alpha crimson">&nbsp;</div>
+ <div class="grid_3 alpha">&nbsp;</div>
+ </div>
+
+ <div class="grid_7">
+ <div class="serie item" style="background:white">
+
+ <h3>
+ <a href="{% url walt_serie serie.slug %}">{{ serie.title }}</a></h3>
+
+ <h2>
+ ( {{ serie.frames.count }} {% trans "frames" %}, {% trans "type" %} {{ serie.type }} )</h2>
+
+
+
+
+ <div class="">
+ <div class="timeline-inner">
+ <div class="frames" data-serie-id="{{ serie.id }}" >
+
+ {% for frame in serie.frames.all %}
+ <div title="{{ frame.pin.title }}" class="frame {% for frame_page in frame.pin.page.all %}{{frame_page.slug}}{%if not forloop.last %}-{%endif%}{% endfor %} {{ frame.role }}">
+ <div class="icon"></div>
+ <div class="title">
+ {{ frame.pin.title }}
+ </div>
+ <div class="counter-wrapper"><div class="counter">{{ forloop.counter }}</div></div>
+ <!-- a href="{% url admin:glue_frame_change frame.id %}" class="title" title="{{ frame.pin.title }}"> {{ frame.pin.title|truncatewords:3 }}</a -->
+ </div>
+
+ {% endfor %}
+
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="grid_12 shadow" >
+ <div class="grid_3 push_9 alpha omega">&nbsp;</div>
+ </div>
+{% endblock %}
+
{% block page %}
<div class="grid_12">
- <div class="grid_3 alpha">
+ <div class="grid_2 alpha">
&nbsp;
</div>
- <div class="grid_6">
- <h2>{{ serie.title }}
- <div class="description">{{ serie.abstract }}</div>
- </h2>
+ <div class="grid_7">
<div class="items">
- {% for pin in serie.frames.all %}
+ {% for frame in serie.frames.all %}
- {% ifequal pin.mimetype "text/x-bibtex" %}
- {% with bibtex=pin.bib %}
- <div class="item">
- <h4>{{ bibtex.author }}</h4>
- <h3>{{ bibtex.title }}</h3>
- <div class="metadata">
- <p>{{ bibtex.publisher }}, {{ bibtex.year }}</p>
- {% for tag in bibtex.keywords|split %}
- <a href="#" class="tag" alt="{{ tag }}">{{ tag }}</a>
- {% if not forloop.last %},{%endif %}
- {% endfor %}
- <p><a href="{% url admin:glue_pin_change pin.id %}">&rarr; {% trans "edit" %}</a></p>
- </div>
- <blockquote>
- {% if bibtex.abstract %}{{ bibtex.abstract }}{% endif %}
-
- {{ pin.abstract }}
-
- </blockquote>
- {{ pin.content }}
- </div>
+ {% ifequal frame.pin.mimetype "text/x-bibtex" %}
+ {% with bibtex=frame.pin.bib %}
+
{% endwith %}
{% else %}
-
+
<div class="item">
- <h3><a href="{% url walt_pin pin.slug %}">{{ pin.title }} </a></h3>
- <div class="metadata"><span class="date">{% if pin.date %}{{ pin.date }}{% else %}{{ pin.date_last_modified }}{% endif %}</span>
- {% for tag in pin.tags.all %}
+ <h3><a href="{% url walt_pin frame.pin.slug %}"><!-- #{{ pin.id }} --> {{ frame.pin.title }} </a></h3>
+ <div class="metadata"><span class="date">{% if frame.pin.date %}{{ frame.pin.date }}{% else %}{{ frame.pin.date_last_modified }}{% endif %}</span>
+ {% for tag in frame.pin.tags.all %}
<a href="{% url walt_tag tag.type|lower tag.slug %}" class="tag" alt="{{ tag.name }} ( {{ tag.type }} )">{{ tag.name }}</a>
{% if not forloop.last %},{%endif %}
{% endfor %}
- <p><a href="{% url admin:glue_pin_change pin.id %}">&rarr; {% trans "edit" %}</a></p>
+
+
</div>
<blockquote>
- {{ pin.abstract }}
-
+ {{ frame.pin.abstract }}
</blockquote>
- {{ pin.content|safe }}
- <a class="external" href="{{ pin.permalink}}">&rarr; {{ pin.permalink}}</a>
+ <div class="content">
+ {{ frame.pin.content|safe }}
+ </div>
+
+ {% with authors=frame.pin.authors.all %}
+
+ <span class="authors">
+ {%trans "posted by" %}
+ {% for u in authors %}
+ <a href="{% url walt_spiff u.username %}">{{ u.username }}</a>
+ {% if not forloop.last %}, {% endif %}
+ {% endfor %}
+ </span>
+
+ <div class="actions">
+
+ {% if frame.pin.permalink %}
+ <a class="external action" href="{{ frame.pin.permalink}}">{% trans "link" %}</a>
+ {% endif %}
+
+ {% if user in authors %}
+ <a href="#" class="edit-pin action" data-id="{{ frame.pin.id }}" title="{% trans "edit" %}">{% trans "edit" %}</a>
+
+
+ {% if workon_serie %}
+ <a href="#"
+ class="append-frame action" data-slug="{{ frame.pin.slug }}" data-title="{{ frame.pin.title }}" data-page-slug="" data-id="{{ frame.pin.id }}" >{% trans "use in serie" %}</a>
+ {% endif %}
+
+
+ <a class="remove-pin action warning" data-id="{{ frame.pin.id }}">{% trans "delete" %}</a>
+ {% endif %}
+ </div>
+
+ {% endwith %}
+
+
{% for child in pin.children.all|slice:":10" %}
<div class="comment">
<a href="#" class="author"> </a> {{ child.abstract }}
</div>
{% endfor %}
-
+
</div>
+
+
+
+
{% endifequal %}
{% endfor %}
</div>
</div>
+
<div class="grid_3 omega">
</div>
57 templates/walt/series.html
View
@@ -0,0 +1,57 @@
+{% extends "walt/middle.html" %}
+{% load i18n %}
+{% load extras %}
+
+{% block navbar %}
+ <h2 class="grid_6 push_3 crimson">
+
+
+ <a href="{% if spiff %}{% url walt_w_spiff spiff %}{% else %}{% url walt_w %}{% endif %}">{% if spiff %} his/her {% endif %} {% trans "series" %}
+ ( {{ series.count }} )
+ </a>
+ {% if user.is_authenticated %}
+ | <a href="#add-serie-modal" role="button" data-toggle="modal">+ {% trans "add serie" %}</a>
+ {% endif %}
+
+
+ </h2>
+
+ <div class="grid_12 shadow" >
+ <div class="grid_6 push_3 crimson alpha">&nbsp;</div>
+ </div>
+{% endblock %}
+
+
+{% block page %}
+ <div class="grid_12">
+ <div class="grid_3 alpha">
+ &nbsp;
+
+ </div>
+ <div class="grid_6">
+ <div class="items">
+ {% for serie in series %}
+ <div class="item serie">
+ <h2>{{ serie.title }}
+
+ </h2>
+ <blockquote class="abstract">{{ serie.abstract }}</blockquote>
+
+ <a href="{% url walt_serie_stack serie.slug %}">{% trans "view as stack" %}</a>
+
+ {% for frame in serie.frames.all %}
+ <div>{{frame.pin.id}}</div>
+ {% endfor %}
+
+ <div class="actions">
+ </div>
+
+ </div>
+ {% endfor %}
+ </div>
+
+ <div class="grid_3 omega">
+
+ </div>
+ </div>
+{% endblock %}
277 templates/walt/stack.html
View
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+{% load i18n %}
+<head>
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="{{ STATIC_URL }}/css/normalize.css">
+ <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/fonts.css">
+ <link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}/less/style.less">
+ <script src="{{ STATIC_URL }}js/vendor/less-1.3.0.min.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="{{ STATIC_URL }}/css/stack.css">
+ <style>
+
+ .big {
+ font-size: 128px;
+ }
+
+ .caption {
+ font-size: 96px;
+ text-align: center;
+ text-shadow: 0px 2px 6px rgba(0,0,0,.5);
+ }
+
+ </style>
+
+
+
+
+</head>
+
+<body class="overview stack-enabled">
+
+<header >
+ <a href="{% url walt_home %}">walt.</a>
+ <a href="{% url walt_series %}">series</a>
+ {% if user.is_authenticated %}
+ <a href="{% url walt_logout %}">{% trans "logout" %} {{ user.username }}</a>
+ {% else %}
+ <a href="{% url walt_login %}">{% trans "login" %}</a>
+ {% endif %}
+ <!-- {{ tags}} -->
+ </div>
+</header>
+
+<section>
+ <h1>{{ serie.title }}</h1>
+ {% with authors=serie.authors.all %}
+ <p>a composition of {{ serie.frames.count }} fragments</p>
+ <div class="authors">
+ {% trans "created by" %}
+ {% for u in authors %}
+ <a href="{% url walt_spiff u.username %}">{{ u.username }}</a>
+ {% if not forloop.last %}, {% endif %}
+ {% endfor %}
+ </div>
+ {% endwith %}
+
+ <p class="grey">Scroll down to continue.
+</section>
+
+{% for frame in serie.frames.all %}
+<section>
+ <h1>{{ frame.pin.title }}</h1>
+</section>
+{% endfor %}
+<section>
+ <p>Stack is made by <a href="http://bost.ocks.org/mike/" rel="author">Mike Bostock</a>
+ <br>and is available on <a href="https://github.com/mbostock/stack">GitHub</a>
+ <br>under the <a href="https://github.com/mbostock/stack/blob/gh-pages/LICENSE">BSD license</a>.
+ <p class="grey">View source to get started.
+</section>
+
+
+<script src="{{ STATIC_URL }}/js/vendor/d3.v2.js"></script>
+<script>
+ var stack = (function() {
+ var stack = {},
+ event = d3.dispatch("activate", "deactivate"),
+ section = d3.selectAll("section"),
+ self = d3.select(window),
+ body = document.body,
+ root = document.documentElement,
+ timeout,
+ duration = 250,
+ ease = "cubic-in-out",
+ screenY,
+ size,
+ yActual,
+ yFloor,
+ yTarget,
+ yMax,
+ yOffset,
+ n = section[0].length;
+
+ // Invert the z-index so the earliest slides are on top.
+ section.classed("stack", true).style("z-index", function(d, i) { return n - i; });
+
+ // Detect the slide height (by showing an active slide).
+ section.classed("active", true);
+ size = section.node().getBoundingClientRect().height;
+ section.classed("active", false);
+
+ // Sets the stack position.
+ stack.position = function(y1) {
+ console.log("slide changed")
+ var y0 = body.scrollTop / size;
+ if (arguments.length < 1) return y0;
+
+ // clamp and round
+ if (y1 >= n) y1 = n - 1;
+ else if (y1 < 0) y1 = Math.max(0, n + y1);
+ y1 = Math.floor(y1);
+
+ if (y0 - y1) {
+ self.on("scroll.stack", null);
+ leap(y1);
+ d3.select(body).transition()
+ .duration(duration)
+ .ease(ease)
+ .tween("scrollTop", tween(yTarget = y1))
+ .each("end", function() { yTarget = null; self.on("scroll.stack", scroll); });
+ }
+
+ location.replace("#" + y1);
+
+ return stack;
+ };
+
+ // Don't do anything fancy for iOS.
+ if (section.style("display") == "block") return;
+
+ self
+ .on("keydown.stack", keydown)
+ .on("resize.stack", resize)
+ .on("scroll.stack", scroll)
+ .on("mousemove.stack", snap)
+ .on("hashchange.stack", hashchange);
+
+ resize();
+ scroll();
+ hashchange();
+
+ // if scrolling up, jump to edge of previous slide
+ function leap(yNew) {
+ if ((yActual < n - 1) && (yActual == yFloor) && (yNew < yActual)) {
+ event.deactivate.call(section[0][yFloor], yFloor);
+ event.activate.call(section[0][--yFloor], yFloor);
+ yActual -= .5 - yOffset / size / 2;
+ scrollTo(0, yActual * size);
+ return true;
+ }
+ }
+
+ function resize() {
+ yOffset = (window.innerHeight - size) / 2;
+ yMax = 1 + yOffset / size;
+
+ d3.select(body)
+ .style("margin-top", yOffset + "px")
+ .style("margin-bottom", yOffset + "px")
+ .style("height", (n - .5) * size + yOffset + "px");
+ }
+
+ function hashchange() {
+ var hash = +location.hash.slice(1);
+ console.log("hashchange")
+ if (!isNaN(hash)) stack.position(hash);
+ }
+
+ function keydown() {
+ var delta;
+ switch (d3.event.keyCode) {
+ case 39: // right arrow
+ if (d3.event.metaKey) return;
+ case 40: // down arrow
+ case 34: // page down
+ delta = d3.event.metaKey ? Infinity : 1; break;
+ case 37: // left arrow
+ if (d3.event.metaKey) return;
+ case 38: // up arrow
+ case 33: // page up
+ delta = d3.event.metaKey ? -Infinity : -1; break;
+ case 32: // space
+ delta = d3.event.shiftKey ? -1 : 1;
+ break;
+ default: return;
+ }
+ if (timeout) timeout = clearTimeout(timeout);
+ if (yTarget == null) yTarget = (delta > 0 ? Math.floor : Math.ceil)(yActual == yFloor ? yFloor : yActual + (.5 - yOffset / size / 2));
+ stack.position(yTarget = Math.max(0, Math.min(n - 1, yTarget + delta)));
+ d3.event.preventDefault();
+ }
+
+ function scroll() {
+
+ // Detect whether to scroll with documentElement or body.
+ if (body !== root && root.scrollTop) body = root;
+
+ var yNew = Math.max(0, body.scrollTop / size);
+ if (yNew >= n - 1.51 + yOffset / size) yNew = n - 1;
+
+ // if scrolling up, jump to edge of previous slide
+ if (leap(yNew)) return;
+
+ var yNewFloor = Math.max(0, Math.floor(yActual = yNew)),
+ yError = Math.min(yMax, (yActual % 1) * 2);
+
+ if (yFloor != yNewFloor) {
+ if (yFloor != null) event.deactivate.call(section[0][yFloor], yFloor);
+ event.activate.call(section[0][yNewFloor], yNewFloor);
+ yFloor = yNewFloor;
+ }
+
+ section
+ .classed("active", false);
+
+ d3.select(section[0][yFloor])
+ .style("-webkit-transform", yError ? "translate3d(0," + (-yError * size) + "px,0)" : null)
+ .style("-o-transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
+ .style("-moz-transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
+ .style("transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
+ .classed("active", yError != yMax);
+
+ d3.select(section[0][yFloor + 1])
+ .style("-webkit-transform", yError ? "translate3d(0,0,0)" : null)
+ .style("-o-transform", yError ? "translate(0,0)" : null)
+ .style("-moz-transform", yError ? "translate(0,0)" : null)
+ .style("transform", yError ? "translate(0,0)" : null)
+ .classed("active", yError > 0);
+ }
+
+ function snap() {
+ var y = d3.event.clientY;
+ if (y === screenY) return; // ignore move on scroll
+ screenY = y;
+
+ if (yTarget != null) return; // don't snap if already snapping
+
+ var y0 = stack.position(),
+ y1 = Math.max(0, Math.round(y0 + .25));
+
+ // if we're before the first slide, or after the last slide, do nothing
+ if (y0 <= 0 || y0 >= n - 1.51 + yOffset / size) return;
+
+ // if the previous slide is not visible, immediate jump
+ if (y1 > y0 && y1 - y0 < .5 - yOffset / size) scrollTo(0, y1 * size);
+
+ // else transition
+ else if (y1 !== y0) stack.position(y1);
+ }
+
+ function tween(y) {
+ return function() {
+ var i = d3.interpolateNumber(this.scrollTop, y * size);
+ return function(t) { scrollTo(0, i(t)); scroll(); };
+ };
+ }
+
+ stack.duration = function(_) {
+ if (!arguments.length) return duration;
+ duration = _;
+ return stack;
+ };
+
+ stack.ease = function(_) {
+ if (!arguments.length) return ease;
+ ease = _;
+ return stack;
+ };
+
+ d3.rebind(stack, event, "on");
+
+ return stack;
+})();
+
+</script>
+</body>
151 templates/walt/walt.html
View
@@ -1,45 +1,34 @@
{% extends "walt/middle.html" %}
{% load i18n %}
{% load extras %}
-{% block page %}
-
- <!-- div class="grid_12">
- <h2 style="border-width:0px">Protocols</h2>
- <div class="stories">
- <div class="story">
- <div class="title">Grimm fairy tale analysis. <span><a href="#">play</a></span></div>
- <div class="timeline">
- <div class="inner">
- <div class="start">1867 &rarr;</div>
- <div class="end">2013</div>
-
- </div>
- </div>
- </div>
+{% block navbar %}
+ <div class="grid_12" >
+
+ <h2 class="grid_6 alpha">
+ <a href="#">{{ page.title }} ( {{ pins.count }} )</a>
+ {% if user.is_authenticated %}
+ | <a href="#add-walt-{{ page.slug|slice:":1" }}-modal" role="button" data-toggle="modal">+ {% trans "add bookmark" %}</a>
+ {% endif %}
- <div class="story">
- <div class="title">Learn how to get more value out of metadata easily <span><a href="#">play</a></span></div>
- <div class="timeline">
- <div class="inner">
- <div class="start">2005 &rarr;</div>
+ </h2>
- <div class="end">2013</div>
- </div>
- </div>
- </div>
- </div>
- </div -->
+ <h2 class="grid_6 omega crimson">
+ {% trans "series using" %} {{ page.title }} ( {{ series.count }} )
+ </h2>
+ </div>
+ <div class="grid_12 shadow" >
+ <div class="grid_6 alpha">&nbsp;</div>
+ <div class="grid_6 omega crimson">&nbsp;</div>
+ </div>
+{% endblock %}
+{% block page %}
<div class="grid_12">
<div class="grid_6 alpha">
- <h2>{{ page.title }}
- <div class="description">
- {{ page.abstract }} ( {{ pins.count }} ) <a href="#" class="add-pin">add</a>
- </div>
- </h2>
+
<div class="items">
{% for pin in page.pins.all|slice:":10" %}
@@ -66,59 +55,81 @@ <h2 style="border-width:0px">Protocols</h2>
</div>
{% endwith %}
{% else %}
-
<div class="item">
-
- <h3><a href="{% url walt_pin pin.slug%}"><!-- #{{ pin.id }} --> {{ pin.title }} </a></h3>
- <div class="metadata"><span class="date">{% if pin.date %}{{ pin.date }}{% else %}{{ pin.date_last_modified }}{% endif %}</span>
- {% for tag in pin.tags.all %}
- <a href="{% url walt_tag tag.type|lower tag.slug %}" class="tag" alt="{{ tag.name }} ( {{ tag.type }} )">{{ tag.name }}</a>
- {% if not forloop.last %},{%endif %}
- {% endfor %}
+
+ <h3><a href="{% url walt_pin pin.slug %}"><!-- #{{ pin.id }} --> {{ pin.title }} </a></h3>
+ <div class="metadata"><span class="date">{% if pin.date %}{{ pin.date }}{% else %}{{ pin.date_last_modified }}{% endif %}</span>
+ {% for tag in pin.tags.all %}
+ <a href="{% url walt_tag tag.type|lower tag.slug %}" class="tag" alt="{{ tag.name }} ( {{ tag.type }} )">{{ tag.name }}</a>
+ {% if not forloop.last %},{%endif %}
+ {% endfor %}
+
+
+ </div>
+ <blockquote>
+ {{ pin.abstract }}
+ </blockquote>
+ <div class="content">
+ {{ pin.content|safe }}
+ </div>
- {% for u in pin.authors.all %}
-
- <a href="{% url walt_spiff u.username %}">{{ u.username }}</a>
- {% endfor %}
- <p><a href="{% url admin:glue_pin_change pin.id %}">&rarr; {% trans "edit" %}</a></p>
- </div>
- <blockquote>
- {{ pin.abstract }}
+ {% with authors=pin.authors.all %}
+
+ <span class="authors">
+ {%trans "posted by" %}
+ {% for u in authors %}
+ <a href="{% url walt_spiff u.username %}">{{ u.username }}</a>
+ {% if not forloop.last %}, {% endif %}
+ {% endfor %}
+ </span>
+
+ <div class="actions">
+ <a href="#{% url admin:glue_pin_change pin.id %}" class="edit-pin action" data-id="{{ pin.id }}" title="{% trans "edit" %}">{% trans "edit" %}</a>
+
+ {% if pin.permalink %}
+ <a class="external action" href="{{ pin.permalink}}">{% trans "link" %}</a>
+ {% endif %}
+
+ {% if workon_serie %}
+ <a href="#{% url admin:glue_pin_change pin.id %}"
+ class="append-frame action" data-slug="{{ pin.slug }}" data-title="{{ pin.title }}" data-page-slug="wander" data-id="{{ pin.id }}" >{% trans "use in serie" %}</a>
+ {% endif %}
+
+ {% if user in authors %}
+ <a class="remove-pin action warning" data-id="{{ pin.id }}">{% trans "delete" %}</a>
+ {% endif %}
+ </div>
+
+ {% endwith %}
+
+
+
+ {% for child in pin.children.all|slice:":10" %}
+ <div class="comment">
+ <a href="#" class="author"> </a> {{ child.abstract }}
+ </div>
+ {% endfor %}
+
+ </div>
- </blockquote>
- {{ pin.content|safe }}
- {% if pin.permalink %}
- <a class="external" href="{{ pin.permalink}}">&rarr; {{ pin.permalink}}</a>
- {% endif %}
-
- {% for child in pin.children.all|slice:":10" %}
- <div class="comment">
- <a href="#" class="author"> </a> {{ child.abstract }}
- </div>
- {% endfor %}
-
- </div>
{% endifequal %}
{% endfor %}
</div>
</div>
<div class="grid_6 omega">
- <h2>{% trans "series" %}( {{ series.count }} )
- <div class="description">
- series or protocols using 'wander' items
- </div>
-
-
- </h2>
-
<div class="items">
{% for serie in series %}
- <div class="item">
- <h3>{{ serie.title }}</h3>
+ <div class="item serie">
+ <h3><a href="{% url walt_serie serie.slug %}">{{ serie.title }}</a></h3>
<div class="abstract">
{{ serie.abstract }}
</div>
+ <a href="{% url walt_serie_stack serie.slug %}">{% trans "view as stack" %}</a>
+
+ {% for frame in serie.frames.all %}
+ <div>{{frame.pin.id}}</div>
+ {% endfor %}
</div>
{% endfor %}
</div>
6 walt/maize.js
View
@@ -0,0 +1,6 @@
+var http = require('http');
+http.createServer(function (req, res) {
+ res.writeHead(200, {'Content-Type': 'text/plain'});
+ res.end('Hello World\n');
+}).listen(1337, '127.0.0.1');
+console.log('Server running at http://127.0.0.1:1337/');
8 walt/urls.py
View
@@ -35,9 +35,13 @@
url(r'^u/(?P<username>[a-z\.]+)/$', 'walt.views.spiff', name='walt_spiff'),
url(r'^tag/(?P<tag_type>[a-z\-]+)/(?P<tag_slug>[a-zA-Z\d\-]+)/', 'walt.views.tag', name='walt_tag'),
- url(r'^series/', 'walt.views.serie', name='walt_series'),
- url(r'^serie/(?P<serie_slug>[a-zA-Z\_\d\-]+)/', 'walt.views.serie', name='walt_serie'),
+ url(r'^series/$', 'walt.views.series', name='walt_series'),
+ url(r'^serie/(?P<serie_slug>[a-zA-Z\_\d\-]+)/$', 'walt.views.serie', name='walt_serie'),
# Uncomment the admin/doc line below to enable admin documentation:
+
+ # serie specific layout
+ url(r'^serie/(?P<serie_slug>[a-zA-Z\_\d\-]+)/stack/$', 'walt.views.serie_stack', name='walt_serie_stack'),
+
# url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
# Uncomment the next line to enable the admin:
24 walt/views.py
View
@@ -157,6 +157,13 @@ def pin( request, pin_slug ):
return render_to_response( "walt/pin.html", RequestContext(request, data ) )
@login_required
+def series( request ):
+ data = sc( request, tags=[ "serie" ] )
+ data['series'] = Serie.objects.filter( language=data['language'] )
+
+ return render_to_response( "walt/series.html", RequestContext(request, data ) )
+
+@login_required
def serie( request, serie_slug ):
data = sc( request, tags=[ "serie" ] )
data['serie'] = get_object_or_404( Serie, slug=serie_slug, language=data['language'] )
@@ -164,14 +171,29 @@ def serie( request, serie_slug ):
return render_to_response( "walt/serie.html", RequestContext(request, data ) )
+@login_required
+def serie_stack( request, serie_slug ):
+ data = sc( request, tags=[ "serie" ] )
+ data['serie'] = get_object_or_404( Serie, slug=serie_slug, language=data['language'] )
+
+ return render_to_response( "walt/stack.html", RequestContext(request, data ) )
+
+
+
+
def _walt( data, slug, username ):
+ """
+ This loader is a common walt-page loader; it should be used as view helper
+ and not as standalone view.
+ (n.b. function name starts with an underscore )
+ """
data['page'] = get_object_or_404( Page, language=data['language'], slug=slug )
data['pins'] = Pin.objects.filter( language=data['language'], page__slug=slug ).filter( **data['filters'] )
# top series (series using )
- data['series'] = Serie.objects.filter( frames__pin__page__slug=slug ).distinct()
+ data['series'] = Serie.objects.filter( frames__pin__page__slug=slug, language=data['language'] ).distinct()
return data
Please sign in to comment.
Something went wrong with that request. Please try again.