integracion de css y js para meteor

client/bootmetro-charms.css

@@ -0,0 +1,132 @@
+/* charms */
+#charms {
+   background-color: #004D60;
+   position: fixed;
+   top: 0%;
+   right: 0%;
+   width: 320px;
+   height: 100%;
+   padding: 0;
+   margin: 0;
+   display: none;
+}
+   #charms .charms-section {
+      margin: 0 40px 40px 40px;
+   }
+
+   #charms .charms-header {
+      position: relative;
+      padding: 40px 0 10px 0;
+   }
+      #charms .charms-header a.win-command span.win-commandimage.win-commandring,
+      #charms .charms-header a.win-command {
+      font-size: 20px;
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      vertical-align: top;
+   }
+      #charms .charms-header h2 {
+         display: inline-block;
+         color: #FFF;
+         margin-left: 10px;
+      }
+
+      #charms a.win-command {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+   }
+   #charms .charms-header a#pin-charms {
+      color: #FFF;
+      font-size: 11px;
+      height: 20px;
+      position: absolute;
+      right: 2px;
+      text-align: center;
+      top: 2px;
+      width: 20px;
+      margin-right: -24px;
+   }
+   #charms .charms-header a#pin-charms.active {
+      background-color: #FFF;
+      -webkit-border-radius: 50%;
+         -moz-border-radius: 50%;
+              border-radius: 50%;
+      color: #000;
+   }
+
+
+#charms-body {
+   min-width: 350px;
+}
+
+#charms h2,
+#charms h3,
+#charms h4,
+#charms p,
+#charms a,
+#charms label {color: #19BFC9;}
+#charms a:hover {background-color: #216475}
+
+#charms hr {border: 1px solid #357281}
+
+
+/* transictions */
+#charms.slide {
+  right: -320px;
+  -webkit-transition: 0.6s ease-in-out left;
+     -moz-transition: 0.6s ease-in-out left;
+      -ms-transition: 0.6s ease-in-out left;
+       -o-transition: 0.6s ease-in-out left;
+          transition: 0.6s ease-in-out left;
+}
+
+#charms.slide.in { right: 0;}
+
+
+/*
+#charms-user {
+   height: 100%;
+   display: none;
+}
+
+#charms-search {
+   color: White;
+   display: none;
+   height: 100%;
+   padding: 40px 20px 20px 20px;
+   width: 265px;
+}
+
+#charms-search li {
+   margin-left: -10px;
+   font-size: 10pt;
+   margin: 5px 0px 5px 0px;
+}
+
+#charms-search a:link, #charms-search a:visited, #charms-search a:hover, #charms-search a:active {
+   color: White;
+   text-decoration: none;
+}
+
+#charms-searchTextbox {
+   display: none;
+}
+
+ul#searchResults {
+   list-style-type: square;
+}
+
+.charms-block {
+   display: block;
+   float: none;
+   margin-top: 16px;
+}
+
+
+
+.highlight {
+   color: #1BA1E2;
+}
+*/

client/bootmetro-charms.js

@@ -0,0 +1,163 @@
+/*!
+ * jQuery Charms Plugin
+ * Original author: @aozora
+ * Licensed under the MIT license
+ */
+
+;
+(function($, window, document, undefined){
+
+   // undefined is used here as the undefined global
+   // variable in ECMAScript 3 and is mutable (i.e. it can
+   // be changed by someone else). undefined isn't really
+   // being passed in so we can ensure that its value is
+   // truly undefined. In ES5, undefined can no longer be
+   // modified.
+
+   // window and document are passed through as local
+   // variables rather than as globals, because this (slightly)
+   // quickens the resolution process and can be more
+   // efficiently minified (especially when both are
+   // regularly referenced in your plugin).
+
+   // Create the defaults once
+   var pluginName = 'charms',
+       defaults = {
+          width: '320px',
+          animateDuration: 600
+       };
+
+   // The actual plugin constructor
+
+   function Charms(element, options){
+      this.element = element;
+
+      // jQuery has an extend method that merges the
+      // contents of two or more objects, storing the
+      // result in the first object. The first object
+      // is generally empty because we don't want to alter
+      // the default options for future instances of the plugin
+      this.options = $.extend({ }, defaults, options);
+
+      this._defaults = defaults;
+      this._name = pluginName;
+
+      this.init();
+   }
+
+   Charms.prototype = {
+      init: function(){
+         // Place initialization logic here
+         // You already have access to the DOM element and
+         // the options via the instance, e.g. this.element
+         // and this.options
+         // you can add more functions like the one below and 
+         // call them like so: this.yourotherfunction(this.element, this.options).
+
+         // check if the charms is pinned
+         /*var isPinned = $.cookie('charms_pinned');
+         if (isPinned != null || isPinned == 'true')
+         {
+            $("a#pin-charms").addClass("active");
+            $(this.element).width($.cookie('charms_width'));
+         }*/
+
+      },
+
+      showSection: function(sectionId, width){
+         var w = this.options.width;
+
+         if (width != undefined)
+            w = width;
+
+         //$(this.element).animate({ width: w }, this.options.animateDuration, function () {
+         //   $(sectionId).show();
+         //});
+         //$(this.element).show();
+         var transition = $.support.transition && $(this.element).hasClass('fade');
+
+         $(this.element).show();
+
+         if (transition) {
+            $(this.element).eq(0).offsetWidth(); // force reflow
+         }
+
+         $(this.element).addClass('in');
+
+         return false;
+      },
+
+      close: function(){
+         $(this.element).hide(); //.animate({ width: '0' }, this.options.animateDuration);
+         return false;
+      },
+
+      togglePin: function () {
+         var isPinned = $.cookie('charms_pinned');
+
+         if (isPinned == null)
+         {
+            // pin
+            $.cookie('charms_pinned', 'true');
+            $.cookie('charms_width', $(this.element).width() );
+            $("a#pin-charms").addClass("active");
+         }
+         else
+         {
+            // unpin
+            $.cookie('charms_pinned', null);
+            $.cookie('charms_width', null );
+            $("a#pin-charms").removeClass("active");
+         }
+
+      }
+
+   };
+
+
+   // A really lightweight plugin wrapper around the constructor, 
+   // preventing against multiple instantiations and allowing any
+   // public function (ie. a function whose name doesn't start
+   // with an underscore) to be called via the jQuery plugin,
+   // e.g. $(element).defaultPluginName('functionName', arg1, arg2)
+   $.fn[pluginName] = function(options){
+      var args = arguments;
+      if (options === undefined || typeof options === 'object')
+      {
+         return this.each(function(){
+            if (!$.data(this, 'plugin_' + pluginName))
+            {
+               $.data(this, 'plugin_' + pluginName, new Charms(this, options));
+            }
+         });
+      } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init')
+      {
+         return this.each(function(){
+            var instance = $.data(this, 'plugin_' + pluginName);
+            if (instance instanceof Charms && typeof instance[options] === 'function')
+            {
+               instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+            }
+         });
+      }
+   };
+
+})(jQuery, window, document);
+
+
+(function ($)
+{
+   $("#charms").charms();
+
+   $('.close-charms').click(function(e){
+      e.preventDefault();
+      $("#charms").charms('close');
+   });
+
+   /*$("a#pin-charms").click(function () {
+      $(this)
+      $("#charms").charms('togglePin');
+   });*/
+
+
+})(jQuery);