i have open function once triggered, plays video in dedicated panel.
this function can triggered in 2 ways - 1 click , 1 page load (window load) url contains valid anchor tag.
they work fine codes of window load handler repetitive , i'm not sure how can keep dry.
please take , point me in directions on how can write better. commented in open function which.
$.videowatch.prototype = { init: function() { this.$openlinks = this.$element.find(".open"); this.$closelinks = this.$element.find(".close"); this.open(); this.close(); }, _getcontent: function(element) { var $parent = element.parent(), id = element.attr('href').substring(1), title = $parent.data('title'), desc = $parent.data('desc'); return { title: title, desc: desc, id: id } }, open: function() { var self = this; //open theatre window load #hash id window.onload = function() { var hash = location.hash; var $a = $('a[href="' + hash + '"]'), content = self._getcontent($a), $li = $a.parents("li"), $theatrevideo = $(".playing"), $theatretitle = $(".theatre-title"), $theatretext = $(".theatre-text"); $(".theatre").attr('id', content.id); $theatretitle.text(content.title); $theatretext.text(content.desc); if ($theatretext.text().length >= 90) { $(".theatre-text").css({ 'overflow': 'hidden', 'max-height': '90px', }); $morebutton.insertafter($theatretext); } $a.parent().addclass("active"); $(".theatre").insertafter($li); $(".theatre").slidedown('fast', scrolltotheatre); oldindex = $li.index(); } //open theatre click event self.$openlinks.on("click", function(e) { // e.preventdefault(); if (curid == $(this).parent().attr("id")) { $("figure").removeclass("active"); $("button.more").remove(); $(".theatre").slideup('fast'); $('.playing').attr("src", ""); removehash(); oldindex = -1; curid = ""; return false } else { curid = $(this).parent().attr("id"); } var $a = $(this), content = self._getcontent($a), $li = $a.parents("li"), $theatrevideo = $(".playing"), $theatretitle = $(".theatre-title"), $theatretext = $(".theatre-text"); $(".theatre").attr('id', content.id); $theatretitle.text(content.title); $theatretext.text(content.desc); if ($theatretext.text().length >= 90) { $(".theatre-text").css({ 'overflow': 'hidden', 'max-height': '90px', }); $morebutton.insertafter($theatretext); } if (!($li.index() == oldindex)) { $("figure").removeclass("active"); $(".theatre").hide(function(){ $a.parent().addclass("active"); $(".theatre").insertafter($li); $(".theatre").slidedown('fast', scrolltotheatre); oldindex = $li.index(); }); } else { $(".theatre").insertafter($li); scrolltotheatre(); $("figure").removeclass("active"); $a.parent().addclass("active"); } }); }, ...
simplified , refactored open method:
open: function() { var self = this; var serviceobj = { theatrevideo : $(".playing"), theatre: $(".theatre"), theatretitle : $(".theatre-title"), theatretext : $(".theatre-text"), settheatrecontent: function(content){ this.theatre.attr('id', content.id); this.theatretitle.text(content.title); this.theatretext.text(content.desc); if (this.theatretext.text().length >= 90) { this.theatretext.css({ 'overflow': 'hidden', 'max-height': '90px', }); $morebutton.insertafter(this.theatretext); } }, activateteatre: function(a, li){ a.parent().addclass("active"); this.theatre.insertafter(li); this.theatre.slidedown('fast', scrolltotheatre); oldindex = li.index(); } }; //open theatre window load #hash id window.onload = function() { var hash = location.hash; var $a = $('a[href="' + hash + '"]'), content = self._getcontent($a), $li = $a.parents("li"); serviceobj.settheatrecontent(content); serviceobj.activateteatre($a, $li); } //open theatre click event self.$openlinks.on("click", function(e) { // e.preventdefault(); if (curid == $(this).parent().attr("id")) { $("figure").removeclass("active"); $("button.more").remove(); $(".theatre").slideup('fast'); $('.playing').attr("src", ""); removehash(); oldindex = -1; curid = ""; return false } else { curid = $(this).parent().attr("id"); } var $a = $(this), content = self._getcontent($a), $li = $a.parents("li"); serviceobj.settheatrecontent(content); if (!($li.index() == oldindex)) { $("figure").removeclass("active"); $(".theatre").hide(function(){ serviceobj.activateteatre($a, $li); }); } else { $(".theatre").insertafter($li); scrolltotheatre(); $("figure").removeclass("active"); $a.parent().addclass("active"); } }); }, 
Comments
Post a Comment