javascript - Refactoring WeatherSlider code -
i working weatherslider widget http://kreaturamedia.com/weatherslider-premium-jquery-weather-widget/ client’s intranet , refactor wrote facilitate readability.
so far have:
$(document).ready(function() { $('.ws-widget').weatherslider({ imgpath : 'includes/weatherslider/img/', cssanimations : true, jsanimations : true, snow : true, rain : true, wind : true, lightnings : true, //further options removed brevity wwoapikey : '3jwfoo7mk9ktvgrnsbythbar' }); }); $('ul li a').click(function() { var cityloc = $(this).attr("data-city"); if (cityloc == 'toronto') { var data = '<span class="ws-location">toronto, ontario, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); $('.ws-widget').weatherslider({ imgpath : 'includes/weatherslider/img/', cssanimations : true, jsanimations : true, snow : true, rain : true, wind : true, lightnings : true, //further options removed brevity wwoapikey : '3jwfoo7mk9ktvgrnsbythbar' }); } else if (cityloc == 'montreal') { var data = '<span class="ws-location">montreal, quebec, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); $('.ws-widget').weatherslider({ imgpath : 'includes/weatherslider/img/', cssanimations : true, jsanimations : true, snow : true, rain : true, wind : true, lightnings : true, //further options removed brevity wwoapikey : '3jwfoo7mk9ktvgrnsbythbar' }); } else if (cityloc == 'calgary') { var data = '<span class="ws-location">calgary, alberta, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); $('.ws-widget').weatherslider({ imgpath : 'includes/weatherslider/img/', cssanimations : true, jsanimations : true, snow : true, rain : true, wind : true, lightnings : true, //further options removed brevity wwoapikey : '3jwfoo7mk9ktvgrnsbythbar' }); } else if (cityloc == 'vancouver') { var data = '<span class="ws-location">vancouver, british columbia, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); $('.ws-widget').weatherslider({ imgpath : 'includes/weatherslider/img/', cssanimations : true, jsanimations : true, snow : true, rain : true, wind : true, lightnings : true, //further options removed brevity wwoapikey : '3jwfoo7mk9ktvgrnsbythbar' }); } else if (cityloc == 'london') { var data = '<span class="ws-location">london, uk</span>'; $(".ws-widget").hide().html(data).fadein('fast'); $('.ws-widget').weatherslider({ imgpath : 'includes/weatherslider/img/', cssanimations : true, jsanimations : true, snow : true, rain : true, wind : true, lightnings : true, //further options removed brevity wwoapikey : '3jwfoo7mk9ktvgrnsbythbar' }); } return false; });
what .weatherslider()
call used in $(document).ready(function())
used in of conditional sections of $('ul li a').click(function())
i thought there might little more involved in refactoring bit of code, however, solution found in simple wrapping code wanted reused in function.
i guess first rule in kiss.
function weathersettings() { $('.ws-widget').weatherslider({ imgpath : 'includes/weatherslider/img/', cssanimations : true, jsanimations : true, snow : true, rain : true, wind : true, lightnings : true, //further options removed brevity wwoapikey : '3jwfoo7mk9ktvgrnsbythbar' }); } $(document).ready(function() { weathersettings(); }); $('ul li a').click(function() { var cityloc = $(this).attr("data-city"); if (cityloc == 'toronto') { var data = '<span class="ws-location">toronto, ontario, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); weathersettings(); } else if (cityloc == 'montreal') { var data = '<span class="ws-location">montreal, quebec, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); weathersettings(); } else if (cityloc == 'calgary') { var data = '<span class="ws-location">calgary, alberta, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); weathersettings(); } else if (cityloc == 'vancouver') { var data = '<span class="ws-location">vancouver, british columbia, canada</span>'; $(".ws-widget").hide().html(data).fadein('fast'); weathersettings(); } else if (cityloc == 'london') { var data = '<span class="ws-location">london, uk</span>'; $(".ws-widget").hide().html(data).fadein('fast'); weathersettings(); } return false; });
Comments
Post a Comment