Commits

Brent Tubbs  committed c9f1b12

got sliding working, but facing weirdness from not being strict in my querying

  • Participants
  • Parent commits 62491e1

Comments (0)

Files changed (4)

File animations.html

+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+    <title>Animations</title>
+<!-- 
+Plan: 
+- Wrapper div with overflow set to clip.
+- jquery template for block to stick in the wrapper.
+- a button to click to stick a thing in the wrapper.
+- click it again and build another thing in the overflow area, then slide it in from the right, while the first one slides out to the left.
+-->    
+<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
+<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script id="block_template" type="text/html">
+    <div class="slidey_block ${classes}">
+        This is a slidey block!
+    </div>
+</script>
+
+<script>
+$(document).ready(function() {
+
+    var getReady = function() {
+        $('.slidey_block.shown').click(function() {
+            //make a new unshown guy.
+            addNew();
+            //slide self out, and slide him in.
+            doSlidey();
+        });
+    }
+    
+    $('#add_item').click(function() {
+        var data = {classes: 'shown'};
+        $('#block_template').tmpl(data).appendTo('#wrapper');
+        getReady(); 
+    });
+
+    var doSlidey = function() {
+        $('.slidey_block.shown').addClass('dying');
+        $('.slidey_block.shown').animate({
+            left: '-305px'
+        }, function() {
+            $('.slidey_block.dying').remove();
+            $('.slidey_block.new').addClass('shown').removeClass('new');
+            getReady();
+        });
+        $('.slidey_block.new').animate({left: '5px'});
+    }
+
+    $('#slideytown').click(function() {
+        doSlidey();
+    });
+
+    var addNew = function() {
+        console.log('add offscreen');
+        var data = {classes: 'new'};
+        $('#block_template').tmpl(data).appendTo('#wrapper');
+    }
+
+    $('#add_offscreen').click(function() {
+        addNew();
+    });
+
+    $('#pushstate').click(function(){
+        history.pushState({}, 'blerg', '?wut');
+    });
+});
+</script>
+
+<style>
+    #wrapper {
+        position: relative;
+        width: 300px;
+        min-height: 300px;
+        border-radius: 5px;
+        background: #2e2e2e;
+        padding: 5px;
+        overflow: hidden;
+    }
+
+    .slidey_block {
+        position: absolute;
+        color: white;
+        background-color: green;
+        border-radius: 5px;
+        margin: 5px 0;
+        width: 300px;
+    }
+
+    .slidey_block.new {
+        left: 315px;
+    }
+</style>
+</head>
+<body>
+<div id="wrapper">
+    
+</div>
+<button id="add_item">Add Item</button>
+<button id="add_offscreen">Add Offscreen</button>
+<button id="slideytown">Slidey Town!</button>
+<button id="pushstate">?wut</button>
+</body>
+</html>
 
 <script id="box_template" type="text/html">
 <div class="inv_block ${classes}">
-    <h4>${objname}</h4>
-    <ul class="inv_box" id="${objkey}">
+    <h4 class="inv_title">${objname}</h4>
+    {{if parentlink}}<button id="${parentkey}" class="inv_parent">&laquo; ${parentname}</button>{{/if}}
+    <ul class="inv_list" id="${objkey}">
     </ul>
 </div>
 </script>
 </script>
 
 <script id="child_template" type="text/html">
-    <li><span id="${objkey}" class="inv_child"><a data-link="${link}">${objname}</a></span></li>
+    <li><span id="${objkey}" class="inv_child"><a>${objname} &raquo;</a></span></li>
 </script>
 
 <script id="av_template" type="text/html">
-<h4 class="displayname">${displayname}</h4>
-<img class="thumb" src="http://my-secondlife.s3.amazonaws.com/users/${username}/sl_image.png" />
+    <h4 class="displayname">${displayname}</h4>
+    {{if username}}
+    <img class="thumb" src="http://my-secondlife.s3.amazonaws.com/users/${username}/sl_image.png" />{{/if}}
 <span class="username">${username}</span>
-<p>You are currently browsing as ${username}.  All items will be sent to this account.</p>
+<p>You are currently browsing as {{if username}}${username}{{else}}${userkey}{{/if}}.  All items will be sent to this account.</p>
 </script>
 
 <script id="info_item_template" type="text/html">
         <h3>You</h3>
         <div id="av_container" class="inset_block"></div>
     </div>
+    <div style="clear: both;"></div>
 </div>
 </body>
 </html>

File schmarchive.css

     background-image: url('gesture.png');
 }
 
-.inv_box li {
+.inv_list {
+    margin-top: 10px;
+}
+
+.inv_list li {
     padding: 2px 0;
     list-style: none;
 }
 
-.inv_box li:nth-child(even) {
+.inv_list li:nth-child(even) {
     background: #222;
 }
 
-.inv_box li.highlight {
+.inv_list li.highlight {
     background: #324D00;
 }
 
 
 #maincontent {
     padding: 10px;
+    margin-bottom: 20px;
 }
 
 .inset_block {
 
 .block_wrapper {
     float: left;
-    margin: 10px;
+    margin: 10px 10px 30px 10px;
 }
 
 .block_wrapper h3 {
 #inv_container {
     position: relative;
     min-height: 300px;
+    height: 100%;
 }
 
 .inv_block {
     width: 300px;
 }
 
-.inv_block.new {
+.inv_block.child {
     left: 310px;
 }
+
+.inv_block.parent {
+    left: -310px;
+}
+
+.inv_block h4 {
+    display: inline;
+    font-size: 20px;
+}
+
+.inv_parent {
+    float: right;
+    display: inline;
+    font-size: 10px;
+}

File schmarchive.js

     }
 }
 
-console.log('testing');
 
 //make a namespace
 if (typeof Schmo === 'undefined') {
     }
 }
 
-Schmo.init = function() {
+Schmo.grabURLParams = function() {
     Schmo._baseURL = Schmo.qParam('url');
     Schmo.userkey = Schmo.qParam('userkey');
-    Schmo.tok = Schmo.qParam('tok');
 }
 
-Schmo.getURL = function(path) {
+Schmo.grabURL = function(path) {
     var url = Schmo._baseURL + path + '?callback=?';
     url += "&userkey=" + Schmo.userkey;
     url += "&tok=" + Schmo.tok;
 
 //TODO: figure out a way to put the templates in this js file instead of in the
 //html file
+//
+var fixHeight = function() {
+    //make shown inv block as tall as inv box
+    var title = $('.inv_title');
+    console.log(title.length);
+    var list = $('.inv_list');
+    var newheight = title.height() + list.height();
+    $('#inv_wrap').height(newheight + 44);
+}
 
 Schmo.inventory = {
     fillContents: function(container, items) {
             //find that item and stick its data in there.
             $('#' + item.key).data('info', item);
         }
+        
+        //bind a function to each item in the box that will make it fill the
+        //info pane on touch
+        var items_q = $(container).find('.inv_item');
+        $(items_q).parent().click(function() {
+            console.log('inv item clicked');
+            var item = $(this).find('.inv_item')
+            var give_url = $(container).data('box_url') + '&item=' + encodeURIComponent($(item).text());
+            var info = $(item).data('info');
+            var info_guts = $('#info_item_template').tmpl(info).html();
+            $('#info_container').html(info_guts);
+            highlightItem(item);
+            $('#info_container .bigassbutton').click(function() {
+                console.log('deliver button clicked');
+                $('#item_send_status').removeClass('success');
+                $('#item_send_status').addClass('loading');
+                $.getJSON(give_url, function(data){
+                    $('#item_send_status').removeClass('loading');
+                    $('#item_send_status').addClass('success');
+                });
+            }); 
+        });
     },
 
-    bindSlider: function() {
+    bindChildSlider: function() {
+        console.log('bindChildSlider');
         $('.inv_child').click(function() {
+            console.log('child clicked');
             //create 'new' inv box
             var info = $(this).data('info');
-            info.classes = 'new';
+            info.classes = 'child';
             $('#box_template').tmpl(info).appendTo('#inv_container');
             //slide over
             $('.inv_block.shown').addClass('dying');
-            $('.inv_block.shown').animate({
-                left: '-305px'
-            }, function() {
+            $('.inv_block.child').animate({left: '5px'});
+            
+            console.log($('.inv_block.shown'));
+            $('.inv_block.shown').animate({left: '-305px'}, function() {
+                console.log('finished child slide');
                 $('.inv_block.dying').remove();
-                $('.inv_block.new').addClass('shown').removeClass('new');
-                Schmo.inventory.bindSlider();
+                $('.inv_block.child').addClass('shown').removeClass('child');
+                history.pushState({}, '', info.link);
+                //Schmo.inventory.bindChildSlider();
+                requestInfo();
             });
-            $('.inv_block.new').animate({left: '5px'});
+        });
+    },
+    
+    bindParentSlider: function(element, data) {
+        console.log('bindParentSlider name: ' + data.name);
+        console.log('bindParentSlider elementtext: ' + element.text());
+        element.data('info', data);
+        element.click(function() {
+            console.log('inv parent clicked');
+            //create 'new' inv box
+            var info = $(this).data('info');
+            info.classes = 'parent';
+            $('#box_template').tmpl(info).appendTo('#inv_container');
+            //slide over
+            $('.inv_block.shown').addClass('dying');
+            $('.inv_block.parent').animate({left: '5px'});
+
+            //this flag is an ugly hack to prevent a double call on clicking
+            //the parent.  It's ugly because I don't know why the double call
+            //was happening in the first place :(
+            var infoRequested = false;
+
+            $('.inv_block.shown').animate({left: '305px'}, function() {
+                console.log('finished parent slide');
+                if (!infoRequested) {
+                    $('.inv_block.dying').remove();
+                    $('.inv_block.parent').addClass('shown').removeClass('parent');
+                    history.pushState({}, '', info.link);
+                    //Schmo.inventory.bindParentSlider();
+                    requestInfo();
+                    infoRequested = true;
+                }
+            });
         });
     },
 
+    buildLink: function(prim_url) {
+        return '?url=' + prim_url + '&userkey=' + Schmo.qParam('userkey');
+    },
+
     fillChildren: function(container, children) {
+        console.log('fillChildren');
 
         //sort the children in order of obj name
         children.sort(function(a, b) {
         var template = '#child_template';
         for (i in children) {
             var child = children[i];
-            child.link = '?url=' + child.url + '&userkey=' + Schmo.qParam('userkey');
+            child.link = Schmo.inventory.buildLink(child.url)
             $(template).tmpl(child).appendTo(container);
             $('#' + child.objkey).data('info', child);            
         }
-        Schmo.inventory.bindSlider();
+        Schmo.inventory.bindChildSlider();
     },
 }
 
     $(item).parent().addClass('highlight');
 }
 
+var fixHeight = function(list, container) {
+    
+}
+
+var renderInfo = function(obj_data) {
+    console.log('renderInfo');
+
+    var rendered = $('#av_template').tmpl(obj_data);
+    $('#av_container').html(rendered);
+
+    //if this box has a parent url, create a full link for it.
+    if (obj_data.parenturl) {
+        obj_data.parentlink = Schmo.inventory.buildLink(obj_data.parenturl);
+    }
+
+    //create a new box for this inv box
+    obj_data.classes = 'shown';
+    $('#box_template').tmpl(obj_data).appendTo('#inv_container');
+
+
+    if (obj_data.parenturl) {
+        //stick the parent's data on its element
+        var parentdata = {
+            "key": obj_data.parentkey,
+            "link": obj_data.parentlink,
+            "name": obj_data.parentname,
+            "url": obj_data.parenturl
+        };
+        var parentbutton = $('#' + obj_data.parentkey);
+        //console.log('binding parent info to parent button');
+        //console.log(parentdata);
+        Schmo.inventory.bindParentSlider(parentbutton, parentdata);
+    }
+
+    //stash some data in the new box
+    var new_box = $('#' + obj_data.objkey);
+    $(new_box).data('box_url', Schmo.grabURL('/give/'));
+
+    //show_children
+    var children_url = Schmo.grabURL('/children/');
+    $.getJSON(children_url, function(data) {
+        Schmo.inventory.fillChildren(new_box, data);
+    });
+
+    //show inventory
+    var inventory_url = Schmo.grabURL('/inv/'); 
+    $.getJSON(inventory_url, function(data) {
+        Schmo.inventory.fillContents(new_box, data);
+        fixHeight();
+    });
+}
+
+var requestInfo = function() {
+    console.log('requestInfo');
+    Schmo.grabURLParams();
+    
+    var info_url = Schmo.grabURL('/info/');
+    $.getJSON(info_url, function(obj_data) {
+        //personalize
+        renderInfo(obj_data);
+    });
+}
+
 $(document).ready(function() {
-    Schmo.init();
-    //TODO: show children 
-    //show info
-    var info_url = Schmo.getURL('/info/');
-    $.getJSON(info_url, function(obj_data) {
-        console.log(obj_data);
-        //personalize
-        var rendered = $('#av_template').tmpl(obj_data);
-        $('#av_container').html(rendered);
-        //create a new box for this inv box
-        obj_data.classes = 'shown';
-        $('#box_template').tmpl(obj_data).appendTo('#inv_container');
-        var new_box = $('#' + obj_data.objkey);
-        //stash some data in the new box
-        $(new_box).data('box_url', Schmo.getURL('/give/'));
-
-        //show_children
-        var children_url = Schmo.getURL('/children/');
-        $.getJSON(children_url, function(data) {
-            console.log('children');
-            console.log(data);
-            Schmo.inventory.fillChildren(new_box, data);
-        });
-
-        //show inventory
-        var inventory_url = Schmo.getURL('/inv/'); 
-        $.getJSON(inventory_url, function(data) {
-            Schmo.inventory.fillContents(new_box, data);
-            //bind a function to each item in the box that will make it get delivered on touch
-            var items_q = '#' + obj_data.objkey + ' .inv_item';
-            $(items_q).parent().click(function() {
-                var item = $(this).find('.inv_item')
-                var give_url = $(new_box).data('box_url') + '&item=' + encodeURIComponent($(item).text());
-                var info = $(item).data('info');
-                var info_guts = $('#info_item_template').tmpl(info).html();
-                $('#info_container').html(info_guts);
-                highlightItem(item);
-                $('#info_container .bigassbutton').click(function() {
-                    $('#item_send_status').removeClass('success');
-                    $('#item_send_status').addClass('loading');
-                    $.getJSON(give_url, function(data){
-                        $('#item_send_status').removeClass('loading');
-                        $('#item_send_status').addClass('success');
-                    });
-                }); 
-            });
-        });
-    });
+    console.log('domready!');
+    requestInfo();
 });
 
+//$(window).bind('popstate', function(event) {
+    //console.log('popstate!');
+    ////console.log(event);
+    ////requestInfo();
+//})