sashomaga

Prototypal OOP

Jun 3rd, 2013
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. if (!Object.create) {
  2.     Object.create = function (obj) {
  3.         function f() { };
  4.         f.prototype = obj;
  5.         return new f();
  6.     }
  7. }
  8.  
  9. var Image = {
  10.     init: function (title, thumbnailUrl, largeUrl) {
  11.         this.title = title;
  12.         this.thumbnailUrl = thumbnailUrl;
  13.         this.largeUrl = largeUrl;
  14.     }
  15. };
  16.  
  17. var slider = (function () {
  18.     var currentIndex = 0;
  19.     var bigSlider = document.getElementById("big");
  20.     var images = [];
  21.     function add(image) {      
  22.         images.push(image);
  23.     }
  24.     function render() {
  25.         var privBtn = document.getElementById("privBtn");
  26.         privBtn.addEventListener("click", privBtnClick, false);
  27.         var nextBtn = document.getElementById("nextBtn");
  28.         nextBtn.addEventListener("click", nextBtnClick, false);
  29.        
  30.         bigSlider.setAttribute("src", images[0].largeUrl);
  31.         var cont = document.getElementById("cont");
  32.         cont.addEventListener("click", onClick, false);
  33.         var documentFragmen = document.createDocumentFragment();
  34.         for (index in images) {
  35.             var img = document.createElement("img");          
  36.             img.setAttribute("src", images[index].thumbnailUrl);            
  37.             documentFragmen.appendChild(img);
  38.         }
  39.         cont.appendChild(documentFragmen);
  40.     }
  41.     function onClick(ev) {
  42.         var elem = ev.target;
  43.         var counter = 0;
  44.         while(elem.previousElementSibling){
  45.             counter++;            
  46.             elem = elem.previousElementSibling;
  47.         }
  48.         currentIndex = counter;
  49.         bigSlider.setAttribute("src", images[currentIndex].largeUrl);
  50.         //var urlArr = url.split("/");
  51.         //var index = urlArr[urlArr.length - 1].substring(0, 1);
  52.         //bigSlider = document.getElementById("big");
  53.         //bigSlider.setAttribute("src", "image/" + index + "big.jpg")
  54.     }
  55.     function privBtnClick() {
  56.  
  57.         //var index = bigSlider.getAttribute("src").split("/")[1][0] | 0;
  58.         currentIndex--;
  59.         if (currentIndex < 0) {
  60.             currentIndex = images.length - 1;
  61.         }
  62.         bigSlider.setAttribute("src", images[currentIndex].largeUrl);
  63.        
  64.     }
  65.     function nextBtnClick() {      
  66.         //var index = bigSlider.getAttribute("src").split("/")[1][0] | 0;
  67.         currentIndex++;
  68.         if (currentIndex === images.length) {
  69.             currentIndex = 0;
  70.         }
  71.         bigSlider.setAttribute("src", images[currentIndex].largeUrl);
  72.     }
  73.     return {
  74.         add: add,
  75.         render: render
  76.     }
  77. }());
  78.  
  79. var img1 = Object.create(Image);
  80. img1.init("first", "image/1small.jpg", "image/1big.jpg");
  81. slider.add(img1);
  82.  
  83. var img2 = Object.create(Image);
  84. img2.init("second", "image/2small.jpg", "image/2big.jpg");
  85. console.log(img2);
  86. slider.add(img2);
  87.  
  88. var img3 = Object.create(Image);
  89. img3.init("third", "image/3small.jpg", "image/3big.jpg");
  90. slider.add(img3);
  91.  
  92. var img4 = Object.create(Image);
  93. img4.init("fourth", "image/4small.jpg", "image/4big.jpg");
  94. slider.add(img4);
  95.  
  96. var img5 = Object.create(Image);
  97. img5.init("fifth", "image/5small.jpg", "image/5big.jpg");
  98. slider.add(img5);
  99.  
  100. slider.render();
Advertisement
Add Comment
Please, Sign In to add comment