API tools faq
paste
Bnaya

JS TEST

Bnaya
Jan 9th, 2012
46
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. /**
  6.  
  7.     These are the answares for Q3 in the JavaScript Section[a-d] with some little closures help :P
  8.     Im sure its far from perfect, but i think its cover the principles
  9.  
  10.     UTY('div').addClass('makemered');
  11.     UTY('div').removeClass('makemered');
  12.     UTY('div').toggleClass('makemered');
  13.     Tools.data(UTY('div').elements, 'asd', 'lalala');
  14.     The last one $(‘#main li.item a’) is just a selector so we can use just document.querySelectorAll
  15.  
  16. **/
  17. function my(){
  18.     function UTY(input){
  19.         elements = document.querySelectorAll(input);
  20.         return {
  21.                     elements: elements,
  22.                     addClass:function(className){
  23.                         Tools.each(elements, function(){
  24.                            
  25.                             curr_classess = Tools.fetchClasses.call(this);
  26.                             curr_classess.push(className);
  27.                            
  28.                             Tools.setClasses.call(this,
  29.                                 curr_classess
  30.                             );
  31.                            
  32.                         });
  33.                    
  34.                     },
  35.                    
  36.                     removeClass:function(className){
  37.                             Tools.each(elements, function(){
  38.                                
  39.                                 curr_classess = Tools.fetchClasses.call(this);
  40.                                
  41.                                 new_classess = [];
  42.                                
  43.                                 for(i = 0; i < curr_classess.length; i++) {
  44.                                     if(curr_classess[i] != className) {
  45.                                         new_classess.push(curr_classess[i]);
  46.                                     }
  47.                                 }
  48.                                
  49.                                 Tools.setClasses.call(this,
  50.                                     new_classess
  51.                                 );
  52.                                
  53.                             });
  54.                     },
  55.                    
  56.                    toggleClass:function(className){
  57.                         this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
  58.                     },
  59.                    
  60.                    hasClass:function(className){
  61.                             has = false;
  62.                             Tools.each(elements, function(){
  63.                                 regE = new RegExp('$| ' + className + '^| ');
  64.                                 cval = this.getAttribute('class');
  65.                                 if(typeof cval == 'undefined' || cval == null || cval == '') {
  66.                                     return true;
  67.                                 }
  68.                                 has = cval.search(regE) > -1;
  69.                                 return !has;   
  70.                             }  
  71.                         );
  72.                        
  73.                         return has;
  74.                     },
  75.             };
  76.     }
  77.     return UTY;
  78. }
  79.  
  80.  
  81.  
  82. Tools = {
  83.     each: function(collection, callback) {
  84.             if(collection instanceof Array) {
  85.                 for(i = 0; i < collection.length; i++) {
  86.                     ret = callback.call(collection[i], i, collection[i]);
  87.                     if(typeof ret != 'undefined') {
  88.                         if(!ret)
  89.                             break;
  90.                     }
  91.                 }
  92.             } else {
  93.                 for(propi in collection) {
  94.                     if(collection.hasOwnProperty(propi)) {
  95.                         ret = callback.call(collection[propi], propi, collection[propi]) ;
  96.                         if(typeof ret != 'undefined') {
  97.                             if(!ret)
  98.                                 break;
  99.                         }
  100.                     }
  101.                 }
  102.                
  103.             }
  104.  
  105.             return collection;
  106.         },
  107.        
  108.     fetchClasses: function() {
  109.         return this.hasAttribute('class') ? this.getAttribute('class').split(' ') : [];
  110.     },
  111.    
  112.     setClasses: function(clsses) {
  113.         this.setAttribute('class', clsses.join(' '));
  114.     },
  115.    
  116.     data: function(elements, key, value) {
  117.    
  118.         Tools.each(elements, function(){
  119.             this.dataset[key] = value;
  120.         });
  121.     },
  122. };
  123.  
  124. UTY = my();
  125. </script>
  126. <style>
  127. div.makemered {
  128.     color: red;
  129. }
  130. </style>
  131. </head>
  132. <body>
  133.     <div>asd</div>
  134.     <div>asd</div>
  135.     <div>asd</div>
  136. </body>
  137. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!