суббота, 7 мая 2011 г.

Небольшое улучшение для OpenClipArt

Среди прочих задач для Open ClipArt Library понадобилось решить следующую:
Движок сайта позволяет создавать растровые копии из SVG "на лету", для этого используется следующая конструкция ссылки:
http://www.openclipart.org/image/800px/svg_to_png/goose_necklace.png
Таким образом можно создавать файлы PNG с разрешением вплоть до 3840px.
Идея улучшения - иметь окно, для ввода желаемого разрешения и выводить текст результирующей ссылки туда же, для удобства копирования.

Код с комментариями:

<!-- lossy form handler -->
<script type="text/javascript">
// главная функция
function link_res_view(x)
{
var y=document.getElementById(x).value;
    TestVar = isNumberString (y); //вызов функции проверки поля ввода на недопустимые символы
    if (TestVar == 1) {           //если успешно, переход к проверке на максимальное значение
  if (y > 3840) {
   alert("Resolution couldn't be higher 3840px!\r\nPlease download SVG and produce bitmap locally.");
   $("input[name=resolution]").val('Type resolution of bitmap');} else { 
        var bitmap_link = $('a[href*="/image/800px/"]').attr('href').replace("800", y); 
        $("input[name=resolution]").val(bitmap_link);
  $('a[href*="/image/800px/"]').attr('href',bitmap_link); 
  }
    }
    else {
        alert("C'mon - resolution is digits only!");
        $("input[name=resolution]").val('Type resolution of bitmap');
   }

// проверка поля ввода на недопустимые символы (принимаются только цифры)
function isNumberString (InString)  {
    if(InString.length==0) return (false);
    var RefString="1234567890";
    for (Count=0; Count < InString.length; Count++)  {
        TempChar= InString.substring (Count, Count+1);
        if (RefString.indexOf (TempChar, 0)==-1)  
            return (false);
    }
    return (true);
}
}
// очистка поля ввода по клику   
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
// восстановление исходного текста, если ничего не введено
function clickrecall(thisfield, defaulttext){
    if (thisfield.value == "") {
        thisfield.value = defaulttext;
    }
}
</script>

И HTML-код:
<input type="text" name="resolution" id="resolution"
            value="Type resolution of bitmap" onclick="clickclear (this, 'Type resolution of bitmap')"
            onblur="clickrecall (this, 'Type resolution of bitmap')"
            onchange="link_res_view(this.id)">