Дата и час: Пет Юни 22, 2018 11:53 pm

Часовете са според зоната UTC + 2 часа [ DST ]




 Страница 1 от 1 [ 5 мнения ] 
Автор Съобщение
 Заглавие: Hyper Extract - Динамични постове
МнениеПубликувано на: Нед Май 10, 2015 4:30 pm 
Аватар
 
 

Регистриран на: Съб Сеп 24, 2005 3:30 pm
Мнения: 10616
Местоположение: Варна
Днеска се събудих и си викам, отдавна не съм писал нищо за AnimeS-bg... Очевадно WordPress темата не виждам да имам желание да я приключа, въпреки че е готова и просто трябва да добавя content...Но мързела си казва думата.

Затова реших да напиша на бързо един extension за Chrome. (FF потребителите ги игнорирах тъй като там extensions не ми се е налагало да пиша до сега) Уви отделих само един предиобяд за това и мога да кажа, че е грозничко...но върши работа. =))



    Изисквания:
  • Imgur API key
  • Basic JS/jQuery knowledge

*Какво прави extension-a?*
На кратко работи с текст. На широко, в зависимост от добавния JSON обект генерира точно определно структуриран текст, който е готов да бъде вкаран като нова тема в даден форум.

*Защо ни трябва Imgur API key?*
Extension-a е вързан с техния API и щом се подаде дадено изображение (примерно от cover-a от AniDB за някое аниме), той качва автоматично сниката на техния сървар и ви предоставя връзка към изображението, която може да се hotlink-ва от форума. За да работи нормално обаче, ви трябва API key, който си генерирате след регистрация там.

*Не разбирам от JS/jQuery мога ли да го ползвам?*
Може да го използвате, но ще трябва да помолите някой да ви напише JSON обекта за даден сайт и структурата, в която искате текста да ви излиза.

*Как да го инсталирам?*
Влизате в Settings -> Extensions чеквате Developer Mode и ще ви се покаже един бутон "Load unpacked extension..." натискате го и отивате до мястото, където се разархивирали extension-a. След това му давате Enable и трябва да ви се покаже една червена иконка в toolbar-a на Chrome.

*Как да си въведа API key & JSON обекта?*
Натискате десен бутон в/у иконката на extension-a и избирата Options. Ще ви закара в една грозна страница, където пише Settings. От там ще трябва да въведете Imgur Client ID и JSON Object. След това цъката "Save" и сте готови.

*Може ли да видим примерен JSON обект?*
Долу съм пуснал примерен обект, който включва частична логика за генериране на текст от AniDB:


*Може ли да работи и за други сайтове освен AniDB?*
Може да работи за всеки един сайт стига той да ползва HTML маркъп и не е вкаран в iframe. Разбира се пак ще трябва да си напишете JSON логиката за въпросния сайт, от койот искате да вземете информацията.

*Защо не го качиш като официално приложение в Chrome store-a?*
Не е тествано и нз дали ще го довърша.

*Малко разяснения какъв синтаксис трябва да следвам за JSON обекта?*
Като цяло трябва да следва този синтаксис:
Код за потвърждение: Избери целия код
{
    "HOST": [
        {
            "code": "JS CODE",
            "image": "$1:{{{data}}}"
        },
        {
            "code": "JS CODE",
            "string": "{{data}}"
        }
    ]
}


HOST - това е host-a (домайн-а на сайта), в който extension-a има право да работи, ако не сте вавели host за сайта, с който искате да работи extension-a...просо няма да работи. :)

code - това е мястото, където трябва да бъде вашата JS логика. Трябва да връща САМО string! Не може да връщате обекти, но може да подавате фукции, които връщат даден string. Тъй като трябва да спазвате валиден синтаксис за JSON, нямате право да пишете многоредов код, само едноредов без new lines.

string - това е текста, който ще се покаже. Има един елемент {{data}} той ще се замени с string-a, който ще върне code обекта. Важно е винаги да присъства!

image - това е специален обект и трябва да се изпозлва само за избражения. Тук JS логиката ви трябва да връща string, с пътя на избражението или на кратко трябва да завършва на .jpg/.png/.gif, за да може да се подаде на Imgur и да се качи динамично с нова връзка към него. Важно е string-a за този обект да се намира в "$1:{...}" като числото трябва да е различно, ако има повече от 1 image обект.

Забележка: Това е още алфа версия. Тестването обхваща 4 часа писане на код... :lol:
Както обикновенно този пост не цели реклама. :P


Bugs:
* Extension-a трябва да приема задължително 1 изображение и текст ( ако има 2 изборажения или само текст, кода ще се счупи )


Последна промяна dripper на Нед Май 10, 2015 4:52 pm, променена общо 3 пъти


_________________
Изображение
Offline
 Профил  
 
 Заглавие: Re: Hyper Extract - Динамични постове
МнениеПубликувано на: Нед Май 10, 2015 4:35 pm 
Аватар
Ecchi Warrior

Регистриран на: Пон Яну 08, 2007 5:24 pm
Мнения: 18432
Местоположение: Tōkyō
Изглежда супер добро. :cheers:



_________________
Изображение
Offline
 Профил  
 
 Заглавие: Re: Hyper Extract - Динамични постове
МнениеПубликувано на: Нед Май 10, 2015 6:44 pm 
Аватар
 
 

Регистриран на: Нед Мар 18, 2012 5:39 pm
Мнения: 677
Поздравления! Добро е. :)
Може да пуснеш няколко шаблончета за хората които нямат знанията да си ги напишат.
Примерно и за MAL и/или за някой друг полезен сайт.



_________________
Изображение Изображение
Offline
 Профил  
 
 Заглавие: Re: Hyper Extract - Динамични постове
МнениеПубликувано на: Пон Май 11, 2015 2:44 am 
Аватар
Културовед

Регистриран на: Чет Яну 12, 2006 2:33 pm
Мнения: 5206
Местоположение: Nemuri no Mori
Good stuff :) :thumb:



_________________
Изображение
Offline
 Профил  
 
 Заглавие: Re: Hyper Extract - Динамични постове
МнениеПубликувано на: Вто Май 12, 2015 11:00 pm 
Аватар
 
 

Регистриран на: Съб Сеп 24, 2005 3:30 pm
Мнения: 10616
Местоположение: Варна
Ъпдейтнат JSON, който включва и MAL, там леко нахакано се таргетват елементите:
Код за потвърждение: Избери целия код
{
    "anidb.net": [
        {
            "code": "$('.image img').attr('src')",
            "image": "$1:{[img]{{data}}[/img]}\n"
        },
        {
            "code": "$('.romaji .value .shortlink').attr('href')",
            "string": "[url={{data}}]AniDB[/url]\n\n"
        },
        {
            "code": "string = $('#layout-main > h1.anime').text().replace(/Anime: /,'');",
            "string": "[b]Заглавие:[/b] {{data}}\n"
        },
        {
            "code": "$('#tab_1_pane tr.type td.value').text()",
            "string": "[b]Тип:[/b] {{data}}\n"
        },
        {
            "code": "$('#tab_1_pane tr.year td.value').text()",
            "string": "[b]Година:[/b] {{data}}\n"
        },
        {
            "code": "(function (){ var textString = '';$('#tab_1_pane tr.tags td.value span a').each(function(){var $this = $(this);var clonedEle = $this.clone(); var text = clonedEle.children().remove().end().text(); if(textString.length > 0){ textString = textString + ', ' + text;}else {textString = textString + text;}}); return textString;})();",
            "string": "[b]Тагове:[/b] {{data}}\n\nИнфо:\n"
        },
        {
            "code": "$('.g_bubble.desc').text();",
            "string": "{{data}}\n"
        }
    ],
    "myanimelist.net": [
        {
            "code": "$('#content > table .borderClass div[style=\"text-align: center;\"] img').attr('src')",
            "image": "$1:{[img]{{data}}[/img]}\n"
        },
        {
            "code": "window.location.href",
            "string": "[url={{data}}]MyAnimeList[/url]\n\n"
        },
        {
            "code": "string = $('#contentWrapper > h1').clone().find('div').remove().end().text();",
            "string": "[b]Заглавие:[/b] {{data}}\n"
        },
        {
            "code": "(function() {var maintext; $('#content .borderClass h2').each(function(){var $this = $(this); if ($this.text() == 'Information') {maintext = $this.next('div').clone().find('.dark_text').remove().end().text(); } }); return maintext; })()",
            "string": "[b]Тип:[/b] {{data}}\n"
        },
        {
            "code": "(function() {var maintext; $('#content .borderClass div span').each(function(){var $this = $(this); if ($this.text() == 'Episodes:') {maintext = $this.parent().clone().find('.dark_text').remove().end().text(); } }); return maintext.trim(); })()",
            "string": "[b]Епизоди:[/b] {{data}}\n"
        },
        {
             "code": "(function() {var maintext; $('#content .borderClass div span').each(function(){var $this = $(this); if ($this.text() == 'Status:') {maintext = $this.parent().clone().find('.dark_text').remove().end().text(); } }); return maintext.trim(); })()",
            "string": "[b]Статус:[/b] {{data}}\n"
        },
        {
            "code": "(function() {var maintext; $('#content .borderClass div span').each(function(){var $this = $(this); if ($this.text() == 'Aired:') {maintext = $this.parent().clone().find('.dark_text').remove().end().text(); } }); return maintext.trim(); })()",
            "string": "[b]Година:[/b] {{data}}\n"
        },
        {
            "code": "(function() {var maintext; $('#content .borderClass div span').each(function(){var $this = $(this); if ($this.text() == 'Producers:') {$this.parent().find('a').each(function(){if (maintext === undefined) {maintext = $(this).text(); }else{maintext = maintext + ', ' + $(this).text(); } }) } }); return maintext; })()",
            "string": "[b]Продукция:[/b] {{data}}\n"
        },
        {
            "code": "(function() {var maintext; $('#content .borderClass div span').each(function(){var $this = $(this); if ($this.text() == 'Genres:') {$this.parent().find('a').each(function(){if (maintext === undefined) {maintext = $(this).text(); }else{maintext = maintext + ', ' + $(this).text(); } }) } }); return maintext; })()",
            "string": "[b]Жанрове:[/b] {{data}}\n\n"
        },
        {
            "code": "$('ul.breadcrumb').next().find('td:eq(0)').clone().find('h2:eq(0)').remove().end().find('.border_top').remove().end().text()",
            "string": "[b]Инфо:[/b]\n\n {{data}}\n"
        }
    ]
}





_________________
Изображение
Offline
 Профил  
 
Покажи мненията от миналия:  Сортирай по  
 Страница 1 от 1 [ 5 мнения ] 

Часовете са според зоната UTC + 2 часа [ DST ]


Кой е на линия

Потребители разглеждащи този форум: 0 регистрирани и 4 госта


Вие не можете да пускате нови теми
Вие не можете да отговаряте на теми
Вие не можете да променяте собственото си мнение
Вие не можете да изтривате собствените си мнения

Търсене:
Иди на: