Commits

Anonymous committed 8b9e497

first release

Comments (0)

Files changed (4)

 <html>
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <title>Schmarchive2</title>
   <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&amp;subset=latin" rel="stylesheet" type="text/css"> 
   <script type="text/javascript" src="jquery-1.6.1.js"></script>
   <script type="text/javascript" src="jquery.tmpl.js"></script>
   <script type="text/javascript" src="schmarchive.js"></script>   
   <link rel="stylesheet" type="text/css" href="reset.css" />
   <link rel="stylesheet" type="text/css" href="schmarchive.css" />
-<script type="text/javascript" charset="utf-8">
+  <!--BEGIN TEMPLATES-->
+  <script id="item_tmpl" type="text/html" charset="utf-8">
+    <div class="inv_item ${type}{{if hidden}} hidden{{/if}}">
+      <div class="inv_item_name ${type}">${name}</div>
+      <button class="get">Get</button>
+      <div class="perms">
+      Permissions <br /> 
+        Current:
+        <span class="{{if mod}}enabled{{else}}disabled{{/if}}">m</span> /
+        <span class="{{if copy}}enabled{{else}}disabled{{/if}}">c</span> /
+        <span class="{{if trans}}enabled{{else}}disabled{{/if}}">t</span>
+      <br />
+        Next:
+        <span class="{{if next_mod}}enabled{{else}}disabled{{/if}}">m</span> /
+        <span class="{{if next_copy}}enabled{{else}}disabled{{/if}}">c</span> /
+        <span class="{{if next_trans}}enabled{{else}}disabled{{/if}}">t</span>
+      </div>
+    
+      {{if thumb}}<img class="thumb" src="http://secondlife.com/app/image/${thumb}/1" />{{/if}}
+    </div>
+  </script>
+  <script type="text/html" charset="utf-8">
+    <h2>${name}</h2>
+  </script>
+  <!--END TEMPLATES-->
+  
+  <script type="text/javascript" charset="utf-8">
 //when the dom is ready, query the prim.
 $(document).ready(function() {
-    console.log('domready');
     Schmarchive2.init('#frame');
 });
 </script>
 </head>
 <body>
 <div id="header">
-    <h2>Schmarchive2</h2>
+  <div id="title"></div>
+  <section id="options" class="clearfix"> 
+      <h3>Filters</h3> 
+ 
+      <ul id="filters" class="option-set clearfix" data-option-key="filter"> 
+        <li><a href="#filter" data-filter=":not(.hidden)" class="selected">default</a></li>
+        <li><a href="#filter" data-filter=".texture">texture</a></li> 
+        <li><a href="#filter" data-filter=".sound">sound</a></li> 
+        <li><a href="#filter" data-filter=".landmark">landmark</a></li> 
+        <li><a href="#filter" data-filter=".clothing">clothing</a></li> 
+        <li><a href="#filter" data-filter=".object">object</a></li> 
+        <li><a href="#filter" data-filter=".notecard">notecard</a></li> 
+        <li><a href="#filter" data-filter=".script">script</a></li> 
+        <li><a href="#filter" data-filter=".bodypart">bodypart</a></li> 
+        <li><a href="#filter" data-filter=".animation">animation</a></li> 
+        <li><a href="#filter" data-filter=".gesture">gesture</a></li> 
+        <li><a href="#filter" data-filter=".hidden">hidden</a></li> 
+      </ul> 
+  </section> <!-- #options --> 
 </div>
 <div id="frame">
 </div>

loading.gif

Added
New image
   /*min-height: 100px;*/
   background: #2e2e2e;
   padding: 5px;
+  width: 150px;
 }
 
 .inv_item_name {
     padding-left: 21px;
+    padding-top: 1px;
+    min-height: 20px;
     background-repeat: no-repeat;
-    /*cursor: pointer;*/
     margin-bottom: 5px;
-    font-size: 10px;
+    font-size: 14px;
 }
 
 .item_li {
 }
 
 .thumb {
-    /*float: right;*/
-    /*height: 75px;*/
-    /*margin-left: 5px;*/
   display: block;
-  width: 75px;
-  height: 75px;
+  width: 150px;
+  height: 150px;
+  float: right;
+  margin-top: 4px;
 }
 
 #item_send_status {
 p:first-child {
     margin-top: 0px;
 }
+
+.perms {
+  font-size: 10px;
+  color: #888;
+  float: left;
+}
+
+.perms .enabled{
+  color: green;
+}
+
+.perms .disabled{
+  color: red;
+}
+
+.inv_item button {
+  display: block;
+  float: right;
+}
+
+/* Support for isotope filtering, animating */
+.isotope-item {
+  z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+  pointer-events: none;
+  z-index: 1;
+}
+
+.isotope,
+.isotope .isotope-item {
+  /* change duration value to whatever you like */
+  -webkit-transition-duration: 0.8s;
+     -moz-transition-duration: 0.8s;
+          transition-duration: 0.8s;
+}
+
+.isotope {
+  -webkit-transition-property: height, width;
+     -moz-transition-property: height, width;
+          transition-property: height, width;
+}
+
+.isotope .isotope-item {
+  -webkit-transition-property: -webkit-transform, opacity;
+     -moz-transition-property:    -moz-transform, opacity;
+          transition-property:         transform, opacity;
+}
+
+#options {
+  padding-bottom: 1.0em;
+}
+
+#options h3 {
+  margin-bottom: 0.2em;
+  font-size: 15px;
+}
+
+#options h4 { 
+  font-weight: bold;
+}
+
+#options ul {
+  margin: 0;
+  list-style: none;
+}
+
+#options ul ul {
+  margin-left: 1.5em;
+}
+
+#options li {
+  float: left;
+  margin-bottom: 0.2em;
+}
+
+#options li a {
+  display: block;
+  padding: 0.4em 0.5em;
+  background-color: #DDD;
+  color: #222;
+  font-weight: bold;
+  text-decoration: none;
+  text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 );
+  background-image: -moz-linear-gradient( -90deg, 
+    hsla( 0, 0%, 100%, 0.5 ) , 
+    hsla( 0, 0%, 100%, 0.0 ) 
+  );
+  background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
+    from( hsla( 0, 0%, 100%, 0.5 ) ), 
+    to(   hsla( 0, 0%, 100%, 0.0 ) )
+  );
+  background-image: -o-linear-gradient( -90deg, 
+    hsla( 0, 0%, 100%, 0.5 ) , 
+    hsla( 0, 0%, 100%, 0.0 ) 
+  );
+}
+
+#options li a:hover {
+  background-color: #5BF;
+  text-decoration: none;
+}
+
+#options li a:active {
+  text-decoration: none;
+  background-color: #39D;
+  -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+     -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+       -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+          box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 );
+}
+
+#options li a {
+  text-decoration: none;
+  border-left:  1px solid hsla( 0, 0%, 100%, 0.3 );
+  border-right: 1px solid hsla( 0, 0%,   0%, 0.2 );
+}
+
+#options li:first-child a {
+  border-radius: 7px 0 0 7px;
+  border-left: none;
+}
+
+#options li:last-child a {
+  border-radius: 0 7px 7px 0;
+}
+
+#options li a.selected {
+  background-color: #13F;
+  text-shadow: none;
+  color: white;
+}
+
+/* Combination filter options*/
+
+#options .option-combo {
+  display: inline-block;
+  float: left;
+  margin-right: 10px;
+}
+
+#options .option-combo ul {
+  margin-right: 20px;
+  display: inline-block;
+}
+
+#options .option-combo h2,
+#options .option-combo h4 {
+  line-height: 34px;
+  margin-bottom: 0;
+  margin-right: 5px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+/* end isotope */
+
+/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
 var PERM_COPY = 0x00008000;
 var PERM_MODIFY = 0x00004000;
 var PERM_TRANSFER = 0x00002000;
+var NULL_KEY = "00000000-0000-0000-0000-000000000000"; 
 
 //make a fix for console.log so it doesn't crash the script in browsers that
 //don't have it.
     };
 }
 
-//TODO: figure out a way to put the templates in this js file instead of in the
-//html file
-
-
 var qParam = function(name) {
         name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
         var regexS = "[\\?&]"+name+"=([^&#]*)";
 Schmarchive2 = {
     infoPath: '/info/',
     invPath: '/inv/',
-    itemTmpl: '<div class="inv_item ${type}"><div class="inv_item_name ${type}">${name}</div>{{if thumb}}<img class="thumb" src="http://secondlife.com/app/image/${thumb}/1" />{{/if}}</div>',
+    givePath: '/give/',
+    itemTmpl: '#item_tmpl',
+    getButton: '.get',
+    filters: '#filters a',
     init: function(frame_selector) {
               // store params, request initial data
               this.frame = $(frame_selector);
               this.url = qParam('url');
               this.av = qParam('av');
               this.tok = qParam('tok');
-              console.log(this);
 
-              // get some info about the prim
-              //this.request(this.infoPath);
+              // set up click handler for the "get" buttons
+              var click_data = {
+                  widget: this
+              };
+              this.frame.delegate('.get', 'click', click_data, this.onGetClick);
 
               // get the inventory list
-              this.request(this.invPath, this.listInventory);
+              this.request(this.buildURL(this.invPath), this.listInventory, this);
+
+              // bind the filters bar
+              var filters = $(this.filters);
+              filters.click({widget: this}, this.onFilter);
+
+              // request the prim info
+              this.request(this.buildURL(this.infoPath), this.onInfo, this);
           },
     
-    _buildURL: function(path) {
+    buildURL: function(path) {
       var url = this.url + path + '?callback=?';
         url += "&av=" + this.av;
         url += "&tok=" + this.tok;
         return url; 
     },
     
-    request: function(path, callback, context) {
-        var url = this._buildURL(path);
+    request: function(url, callback, context) {
         $.ajax({
           url: url,
           dataType: 'jsonp',
           success: callback,
-          context: this
+          context: context
         });
     },
 
-    listInventory:  function(items) {
+    listInventory: function(items) {
+      // Loop over the items returned from the jsonp call
       for ( var i=0, len=items.length; i<len; ++i ){
         var item = items[i];
-        console.log(item);
-        $.tmpl(this.itemTmpl, item).appendTo(this.frame);
+
+        // unpack item permissions
+        item.mod = item.owner_perms_mask & PERM_MODIFY;
+        item.copy = item.owner_perms_mask & PERM_COPY;
+        item.trans = item.owner_perms_mask & PERM_TRANSFER;
+        
+        item.next_mod = item.next_perms_mask & PERM_MODIFY;
+        item.next_copy = item.next_perms_mask & PERM_COPY;
+        item.next_trans = item.next_perms_mask & PERM_TRANSFER;
+
+        // strip thumbnail if null key
+        if (item.thumb === NULL_KEY) {
+          delete item.thumb;
+        }
+
+        // optionally hide items whose name starts with "."
+        if (item.name.charAt(0) === ".") {
+            item.hidden = true;
+        }
+
+        // Using the item template identified by itemTmpl, append a div for
+        // this item to the main frame.
+        var pane = $(this.itemTmpl).tmpl(item).appendTo(this.frame);
+        pane.data('info', item);
       }
+
+      // call the isotope plugin on the frame
       $(this.frame).isotope({
         // options
         itemSelector : '.inv_item',
-        layoutMode : 'fitRows'
+        layoutMode : 'fitRows',
+        filter: '.inv_item:not(.hidden)',
+        animationEngine: 'best-available'
       });
+    },
+
+    onGetClick: function(ev) {
+        // pull the info for the item off the parent div.
+        var self = ev.data.widget;
+        var parent = $(this).parent();
+        var info = parent.data('info');
+
+        // do a jsonp request to have the item delivered
+        //
+        var img = $('<img src="loading.gif" class="loading" />').appendTo($(this).parent());
+        var url = self.buildURL(self.givePath) + "&item=" + info.name;
+        var context = {
+            pane: parent,
+            spinner: img
+        };
+        self.request(url, self.onGetResponse, context);
+    },
+
+    onGetResponse: function() {
+        // remove the loading spinner
+        this.spinner.remove();
+    },
+
+    onFilter: function(ev) {
+        var self = ev.data.widget;
+        var selector = $(this).attr('data-filter');
+        $(self.frame).isotope({ filter: selector });
+
+        // change highlighting on the filter bar
+        $(self.filters + '.selected').removeClass('selected');
+        $(this).addClass('selected');
     }
 };
-
-Schmarchive = {
-
-    requestInfo: function() {
-        console.log('requestInfo');
-        Schmarchive.getURLParams();
-        
-        var info_url = Schmarchive.buildURL('/info/');
-        $.getJSON(info_url, function(obj_data) {
-            //personalize
-            Schmarchive.renderInfo(obj_data);
-        });
-    },
-    
-    getURLParams: function() {
-        Schmarchive._baseURL = Schmarchive.qParam('url');
-        Schmarchive.userkey = Schmarchive.qParam('userkey');
-    },
-    
-    qParam: function(name) {
-        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
-        var regexS = "[\\?&]"+name+"=([^&#]*)";
-        var regex = new RegExp( regexS );
-        var results = regex.exec( window.location.href );
-        if( results == null ) {
-            return "";
-        } else {
-            return decodeURIComponent(results[1].replace(/\+/g, " "));
-        }
-    },
-    
-    buildURL: function(path) {
-        var url = Schmarchive._baseURL + path + '?callback=?';
-        url += "&userkey=" + Schmarchive.userkey;
-        url += "&tok=" + Schmarchive.tok;
-        return url; 
-    },
-
-    renderInfo: function(obj_data) {
-        console.log('renderInfo');
-
-        var rendered = $('#av_template').tmpl(obj_data);
-        $('#av_container').html(rendered);
-
-        //ADD some more data to the context object before rendering the box
-        //template
-        
-        //if this box has a parent url, create a full link for it.
-        if (obj_data.parenturl) {
-            obj_data.parentlink = Schmarchive.buildLink(obj_data.parenturl);
-        }
-
-        // If the inv_box has already been rendered (as when we're coming from a parent or child link), then just replace its content.
-        // If it has *not* yet been rendered (as when first loading the page), then just append to container.
-        obj_data.classes = 'shown';
-
-        var inv_block = $('#inv_block_' + obj_data.objkey);
-        var new_block = $('#inv_template').tmpl(obj_data);
-        if (inv_block.length) {
-            //replace inv_block with new_block
-            inv_block.replaceWith(new_block);
-        } else {
-            console.log("There's no inv block!");
-            new_block.appendTo('#inv_container');
-        }
-
-
-        //store a reference to the current inv block on the Schmarchive object
-        Schmarchive.current_inv_block = $('#inv_block_' + obj_data.objkey);
-        Schmarchive.current_inv_block.data('info', obj_data);
-
-        //stash some data in the new box
-        var inv_list = $('#inv_list_' + obj_data.objkey);
-        $(inv_list).data('give_url', Schmarchive.buildURL('/give/'));
-       
-        //if there's a parent button, bind its clicker 
-        if (obj_data.parenturl) {
-            var parentbutton = $('#parent_btn_' + obj_data.parentkey);
-            Schmarchive.bindParentSlider(parentbutton);
-        }
-
-        //show_children
-        var child_list = $('#child_list_' + obj_data.objkey);
-        var children_url = Schmarchive.buildURL('/children/');
-        $.getJSON(children_url, function(data) {
-            Schmarchive.fillChildren(child_list, data);
-            Schmarchive.fixHeight(Schmarchive.current_inv_block);
-        });
-
-        //show inventory
-        var inventory_url = Schmarchive.buildURL('/inv/'); 
-        $.getJSON(inventory_url, function(data) {
-            Schmarchive.fillContents(inv_list, data);
-            Schmarchive.fixHeight(Schmarchive.current_inv_block);
-        });
-    },
-
-    fillChildren: function(container, children) {
-        // 'container' is jquery of ul that children are being appended to
-        // 'children' is array of json objects returned from inworld.
-
-        console.log('fillChildren');
-
-        //sort the children in order of obj name
-        children.sort(function(a, b) {
-            a = a.objname.toLowerCase();
-            b = b.objname.toLowerCase();
-            if (a < b) {
-                return -1;
-            } else if (a > b) {
-                return 1;
-            } else {
-                return 0;
-            }
-        });
-        var template = '#child_template';
-        for (i in children) {
-            var child = children[i];
-            child.link = Schmarchive.buildLink(child.url)
-            $(template).tmpl(child).appendTo(container);
-            $('#' + child.objkey).data('info', child);            
-        }
-        Schmarchive.bindChildSliders(container);
-    },
-    
-    fillContents: function(container, items) {
-        console.log('fillContents');
-        var template = '#item_template';
-        for (i in items) {
-            var item = items[i];
-            //make a user friendly string out of the permissions mask.
-            item.perms_list = [];
-            if (item.perms_mask & PERM_MODIFY) {
-                item.perms_list.push('Modify');
-            }
-            if (item.perms_mask & PERM_COPY) {
-                item.perms_list.push('Copy');
-            }
-            if (item.perms_mask & PERM_MODIFY) {
-                item.perms_list.push('Transfer');
-            }
-            item.perms = item.perms_list.join(', ');
-            $(template).tmpl(item).appendTo(container);
-            //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('give_url') + '&item=' + encodeURIComponent($(item).text());
-            var info = $(item).data('info');
-            var info_guts = $('#info_item_template').tmpl(info).html();
-            $('#info_container').html(info_guts);
-            Schmarchive.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');
-                });
-            }); 
-        });
-    },
-
-    bindChildSliders: function(container) {
-        console.log('bindChildSliders');
-        var children = container.find('.inv_child');
-        children.click(function() {
-            var child = $(this);
-            child.parent().addClass('active');
-            console.log('child clicked: ' + child.text());
-            Schmarchive.slideChildIn(child);
-        });
-    },
-
-    slideChildIn: function(element) {
-        //create child inv box in overflow
-        var info = element.data('info');
-        info.classes = 'child';
-        $('#inv_template').tmpl(info).appendTo('#inv_container');
-
-        var new_block = $('#inv_block_' + info.objkey);
-        var old_block = Schmarchive.current_inv_block;
-       
-        //request the new info now so it can be in transit while the animation
-        //is playing
-        history.pushState({}, '', info.link);
-        Schmarchive.requestInfo();
-
-        //slide over
-        new_block.animate({left: '5px'}, function() {
-            console.log('finished child slide');
-            new_block.addClass('shown').removeClass('child');
-        });
-        
-        old_block.animate({left: '-305px'}, function() {
-            old_block.remove();
-        });
-    },
-
-    bindParentSlider: function(element) {
-        console.log('bindParentSlider name: ' + element.data('name'));
-        element.click(function() {
-            Schmarchive.slideParentIn($(this));
-        });
-    },
-
-    slideParentIn: function(element) {
-        //element will be the jquery-wrapped parent button that just got clicked.
-        console.log('slideParentIn: ' + element.data('name'));
-        
-        //create new inv box, positioned by 'parent' class, and rendered with
-        //data pulled of the parent btn that was passed into this function
-        var info = {
-            'objname': element.data('name'),
-            'objkey': element.data('key'),
-            'objlink': element.data('link'),
-            'objurl': element.data('url')
-        } 
-
-        console.log(info);
-
-        //add 'parent' class to position new box to the left
-        info.classes = 'parent';
-
-        //render new box
-        $('#inv_template').tmpl(info).appendTo('#inv_container');
-        console.log('added new block');
-        var new_block = $('#inv_block_' + info.objkey);
-        var old_block = Schmarchive.current_inv_block;
-
-        //request the new info now so it can be in transit while the animation
-        //is playing
-        history.pushState({}, '', info.objlink);
-        Schmarchive.requestInfo();
-        
-        //slide over
-        new_block.animate({left: '5px'}, function() {
-            console.log('finished parent slide');
-            new_block.addClass('shown').removeClass('parent');
-        });
-
-        old_block.animate({left: '305px'}, function() {
-            //Schmarchive.current_inv_block = new_block;
-            old_block.remove();
-        });
-    },
-
-    buildLink: function(prim_url) {
-        return '?url=' + prim_url + '&userkey=' + Schmarchive.qParam('userkey');
-    },
-
-    highlightItem: function(item) {
-        //remove highlight class from all inv_item parents
-        $('.item_li').removeClass('highlight');
-        //add highlight class to the parent of the one just clicked
-        $(item).parent().addClass('highlight');
-    },
-    
-
-    fixHeight: function(element) {
-        //make shown inv block as tall as inv box
-        //'element' will be jquery obj of the inv_block whose height we're matching.
-        var extra = 50;
-        var title = element.find('.inv_title');
-        var child_list = element.find('.child_list');
-        var inv_list = element.find('.inv_list');
-        var newheight = title.outerHeight() + child_list.outerHeight() + inv_list.outerHeight() + extra;
-        $('#inv_wrap').height(newheight);
-    }
-}
-
-
-