64h
Advanced Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Новая фича: боковая панель. Первая экспериментальная реализация.
Код:| {"[Sidebar]":{"link":"^data:imagus_sidebar,([^|]+)\\|(.+)","loop":1,"url":":''","res":":\nfunction new_prepareCaption(trg, caption) {\n if (caption && typeof caption === 'string')\n trg.IMGS_caption = caption;\n else\n trg.IMGS_caption = '';\n}\n\nfunction add_element() {\n if (document.querySelector('html > div > p')) return;\n const p = document.createElement('p');\n p.setAttribute('id', 'imagus_p');\n document.querySelector('html > div').appendChild(p);\n}\n\nfunction inject_css() {\n if (document.getElementById('imagus_css')) return;\n const style = document.createElement('style');\n style.setAttribute('id', 'imagus_css');\n style.textContent = `\n html > div {\n transform: translateX(0px);\n }\n html > div > p {\n width: 350px;\n left: -350px;\n top: 0;\n margin: 0;\n position: fixed;\n white-space: pre-wrap;\n background: rgba(0, 0, 0, 0.92);\n color: rgb(255, 255, 255);\n font: 13px / 1.4em \"Trebuchet MS\", sans-serif;\n padding: 3px 8px 6px;\n box-shadow: rgb(221, 221, 221) 0px 0px 1px inset;\n border-radius: 3px;\n }\n `;\n document.head.appendChild(style);\n}\n\nfunction inject_js() {\n if (document.getElementById('imagus_js')) return;\n const script = document.createElement('script');\n script.setAttribute('id', 'imagus_js');\n script.textContent = `\n const callback = (mutationList, observer) => {\n mutationList.forEach((mutation, mutation_index) => {\n if (mutation.target.nodeName == 'DIV' && mutation.target.style.display == 'none')\n imagus_p.style.display = 'none';\n\n if (mutation.target.nodeName == 'SPAN')\n mutation.addedNodes.forEach((node, node_index) => {\n if (node.nodeName == '#text' && node.textContent.startsWith('[imagus_sidebar_enable]')) {\n node.textContent = node.textContent.replace('[imagus_sidebar_enable]', '');\n const text_array = JSON.parse(node.textContent);\n node.textContent = '';\n imagus_p.innerHTML = '';\n for (const line of text_array)\n if (line.startsWith('[imagus_caption]'))\n node.textContent = line.replace('[imagus_caption]', '');\n else\n imagus_p.innerHTML += line;\n imagus_p.style.display = 'block';\n if (imagus_p.getBoundingClientRect().x < 0)\n imagus_div.style.transform = 'translateX(' + Math.abs(imagus_p.getBoundingClientRect().x).toString() + 'px)';\n }\n });\n });\n };\n const config = { attributes: true, childList: true };\n const observer = new MutationObserver(callback);\n const imagus_span = document.querySelector('html > div > div > span');\n const imagus_div = document.querySelector('html > div');\n const imagus_p = document.querySelector('html > div > p');\n observer.observe(imagus_span, config);\n observer.observe(imagus_div, config);\n `;\n script.onload = () => { remove(); };\n document.head.appendChild(script);\n}\n\nthis.prepareCaption = new_prepareCaption;\nadd_element();\ninject_css();\ninject_js();\n\nreturn [decodeURI($[1]), '[imagus_sidebar_enable]' + decodeURI($[2])];"}} |
Панель вызывается и заполняется информацией из других фильтров. Вот как это работает на примере IMDb.
Код:| {"R_IMDb":{"useimg":1,"link":"^(?:m\\.)?imdb\\.com/title/tt\\d+(?:/\\?\\S*|/)?$","loop":1,"res":":\nlet image_url = $._.match(/=\"og:image\" content=\"([^\"]+)/)[1];\nif (image_url.includes('imdb_logo')) image_url = 'https://m.media-amazon.com/images/G/01/imdb/images-ANDW73HA/favicon_iPhone_retina_180x180.png';\nconst title = $._.match(/=\"og:title\" content=\"([^\"]+) \\([^\\)]+....IMDb\"/)[1];\nconst year = $._.match(/=\"og:title\" content=\"[^\"]+\\(([^\\)]+)....IMDb\"/)[1];\nconst description = $._.match(/=\"og:description\" content=\"([^\"]+)/)[1].slice(title.length + 2);\nconst rating_value = $._.match(/\"AggregateRating\"[^}]+\"ratingValue\":([\\d\\.]+)/)?.[1];\nconst rating_count = $._.match(/\"ratingCount\":(\\d+)/)?.[1];\nconst rating = (rating_value) ? `\\u2B50 ${Number(rating_value).toFixed(1)} (${rating_count})` : '';\n\nconst x_text = [\n '[imagus_caption]IMDb',\n `<b>${title} (${year})</b>`,\n (rating) ? `\\n${rating}\\n\\n` : '\\n\\n',\n description\n];\n\nreturn 'data:imagus_sidebar,' + image_url + '|' + JSON.stringify(x_text);","img":"^((?:(?:images\\.|(?:images-[a-z]{2}\\.ssl-|(?![gz]-)[^.?]+\\.)images-)amazon|ia\\.media-imdb|m\\.media-amazon)\\.com/images/[^/]/[^.]+(?:(?!\\.[A-Za-z]{3,4}$)\\.[^A-Z_.]+)*)(?:$|(?!_(?:CB|V)\\d{4,}_\\.)[^?]*\\.([^?]*).*)","to":":\nvar x=$[2]||'#jpg png#'\nreturn '#' + $[1] + '.' + x +'\\n'+$[1] + '._SY1024_SX1024_.'+x"}} |
kenko2
Цитата: http://ipic.su/7yYN9S
Когда звездочек меньше пяти, ты специально другие оставляешь? В смысле, без них нельзя обойтись или ты думаешь что так просто будет нагляднее/понятнее? Имхо достаточно просто 3, а не 3+2, иначе некая двусмысленность появляется... |
Да, это специально. Три звезды горят, две не горят. Соответственно, оценка три звезды. В интерфейсе Wildberries везде так. И на Amazon, кстати, тоже. Изначально я сделал, как ты предлагаешь, но это смотрится не очень, потому что не соответствует интерфейсу сайта.
|
Поставил - ничего не изменилось, кроме текста описания при наведении на внешнюю ссылку с IMDB - там добавилась оценка. Так более информативно, согласен. Правда в тексте описания появились служебные символы: [imagus_caption] / </b> / \n\n. Их как-то можно убрать? 