最初は、javascriptの基礎に関する学習コースのテスト問題のインスピレーションを探していましたが、すぐに頻繁に訪れるリソースのオープンスペースでそれを探すことにしました。 そして、Habrが選ばれました。
最初に訪れたのは、投稿やコメントですべての写真を非表示にするというアイデアでした。それらはしばしば干渉するだけだったからです。 しかし、それらを表示するためのボタンはまだ痛くないでしょう。
少し先を見て、すぐにコードを論理ブロックに分割する必要が生じたと言います。作業の準備、画像の操作、コメントへの回答の操作の3つを特定しました。 各ブロックには複雑さのレベルが割り当てられ、以前に学習した資料をより簡単に統合し、タスクの複雑さを徐々に高めることから始めることにしました。
長い間画像を非表示にする方法は考えていませんでした。ページを読み込むときに「display：none」プロパティを使用し、ボタンを押すと選択した要素の「display：block」プロパティが返されます。 imgタグをネストするためのさまざまなオプションがあるため、デバッガーで以前にスパイされた要素を探してDOMを歩き回りました。 必要な要素をすべて隠した最初のブロックは次のようになりました。
function initialHide() { function hideReply() { var replies = document.querySelectorAll('.reply_comments'); for (var r = 0; r < replies.length; r++) { var reply = replies[r]; reply.style.display = 'none'; } } hideReply(); function hideImages() { var images = document.querySelectorAll(".content > img, .content > div > img, .content > div > div > img, .content > a > img, .content > a > div > img, .content > table > tbody > tr> td> a > img, .content > table > tbody > tr> td> img, .content > ul > li > img, .content > ul > li > table > tbody > tr> td> img, .message > a > img, .message > img, .sidebar_right > .banner_300x500, .sidebar_right > #htmlblock_placeholder"); for (var m = 0; m < images.length; m++) { var image = images[m]; image.style.display = "none"; } } hideImages(); }
今ではボタンを作成してスタイルを適用する必要がありました。ネイティブの外観をハブラーのようにしたかったからです。
それから私はさまざまなオプションを読んで、あいまいな記事に出会いました。 起こったことは次のとおりです。
function imgPosts() { var imgs = document.querySelectorAll(".content > img, .content > div > img, .content > div > div > img, .content > a > img, .content > a > div > img, .content > table > tbody > tr> td> a > img, .content > table > tbody > tr> td> img, .content > ul > li > img, .content > ul > li > table > tbody > tr> td> img, .message > a > img, .message > img"); var button = document.createElement("input"); button.type = "button"; button.className = "habraimage"; button.value = "◄ "; document.querySelectorAll(".main_menu")[0].appendChild(button); button.onclick = function () { for (var x = 0; x < imgs.length; x++) { var img = imgs[x]; img.style.display = (img.style.display != 'none' ? 'none' : 'block'); } }; function addCSSRule(sheet, selector, rules) { if (sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}"); } else { sheet.addRule(selector, rules); } } addCSSRule(document.styleSheets[0], ".habraimage", "position:fixed; right: 6%; z-index: 1; height: 2.45em; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-image: -webkit-linear-gradient(top, #eeeeee, #e1e1e1); background-image: linear-gradient(top, #eeeeee, #e1e1e1); background-image: -moz-linear-gradient(top, #eeeeee, #e1e1e1); background-repeat: repeat-x; border: 1px solid #d9d8d8; border-color: #d9d8d8 #cccbcb #aeaeae; text-shadow: 0 1px 0px rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0px 1px 7px rgba(177, 180, 199, 1); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0px 1px 7px rgba(177, 180, 199, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0px 1px 7px rgba(177, 180, 199, 1);"); addCSSRule(document.styleSheets[0], ".habraimage:hover", "background-color: #fcfcfc !important; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#e8e8e8));background-image: -webkit-linear-gradient(top, #fcfcfc, #e8e8e8); background-image: linear-gradient(top, #fcfcfc, #e8e8e8); background-image: -moz-linear-gradient(top, #fcfcfc, #e8e8e8);background-repeat: repeat-x; text-decoration: none;"); }
スタイルを操作する方法についてのコメント-IEはすぐに計画に含まれていましたが、小さなssdでのテスト用の仮想マシンのための場所がまったくありませんでした。
次のブロックは最も難しく、同時に興味深いものでした。 各コメントの回答を非表示にするだけでなく、ユーザーのst迷に陥らないように回答の不足も考慮する必要がありました。 ボタンを作成するときに、回答の数が考慮され、それがゼロに等しい場合、そのようなコメントのある側のボタンは作成されませんでした。 また、応答の数は、本文にボタンを表示するために使用されました。 ただし、数字だけを表示することはできません。「答え」という名詞を追加する必要があります。数字に応じて傾斜させることをお勧めします。 それから私は自転車を書き始めましたが、私は時間の感覚に来て、おそらく私なしですでに決定されていたと思いました。 そうです、すぐに解決策が見つかりました。
function declOfNum(number, titles) { cases = [2, 0, 1, 1, 1, 2]; return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]; }
結果は3番目のブロックで、各コメントの現在の回答数が表示されたボタンを使用して、コメントの応答ツリーを非表示/表示します。
hideReplies(); function hideReplies() { function getChildrenByClassName(el, className) { var children = []; for (var i = 0; i < el.childNodes.length; i++) { if (el.childNodes[i].className == className) { children.push(el.childNodes[i]); } } return children; } function addBtn() { var comments = document.querySelectorAll(".comments_list > .comment_item"), comment, combody; function declOfNum(number, titles) { cases = [2, 0, 1, 1, 1, 2]; return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]; } for (var i = 0; i < comments.length; i++) { comment = comments[i]; var replies = comment.querySelectorAll('.reply_comments .comment_body'); if (replies.length > 0) { combody = getChildrenByClassName(comment, 'comment_body')[0]; if (combody) { var btn = document.createElement("input"); btn.type = "button"; btn.className = "hidereplies"; btn.value = replies.length + declOfNum(replies.length, [' ', ' ', ' ']); combody.appendChild(btn); } } } function addCSSRule(sheet, selector, rules) { if (sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}"); } else { sheet.addRule(selector, rules); } } addCSSRule(document.styleSheets[0], ".hidereplies", "height: 2em; margin-bottom: 2em; border-radius: 6px; background-image: -webkit-linear-gradient(top, #eeeeee, #e1e1e1); background-image: -o-linear-gradient(top, #eeeeee, #e1e1e1); background-image: linear-gradient(top, #eeeeee, #e1e1e1); background-image: -moz-linear-gradient(top, #eeeeee, #e1e1e1); background-repeat: repeat-x; border: 1px solid #d9d8d8; border-color: #d9d8d8 #cccbcb #aeaeae; text-shadow: 0 1px 0px rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);"); addCSSRule(document.styleSheets[0], ".hidereplies:hover", "background-color: #fcfcfc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fcfcfc), to(#e8e8e8));background-image: -webkit-linear-gradient(top, #fcfcfc, #e8e8e8); background-image: linear-gradient(top, #fcfcfc, #e8e8e8); background-image: -moz-linear-gradient(top, #fcfcfc, #e8e8e8);background-repeat: repeat-x; text-decoration: none;"); addCSSRule(document.styleSheets[0], ".hidereplies:active", "-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); background: #e1e1e1 !important; border: 1px solid #a4a7ac; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #a4a7ac #d2d3d4 #e1e1e1; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);"); } addBtn(); function hideR() { var buttons = document.querySelectorAll(".hidereplies"); for (a = 0; a < buttons.length; a++) { var btn = buttons[a]; btn.onclick = function (event) { var btn = event.currentTarget; var comments = btn.parentNode.parentNode.querySelectorAll(".reply_comments"); for (var y = 0; y < comments.length; y++) { var reply = comments[y]; reply.style.display = (reply.style.display != 'none' ? 'none' : 'block'); } }; } } hideR(); }
そして、すべてのブロックを匿名の自己呼び出し関数でラップしました。
結果はgithubに投稿されました。
カットの下で、プラグインをインストールした後のHabrの外観を確認できます 
ブラウザー拡張機能の作成では、複雑なことを掘り下げることはせず、 ChromeとSafariの開発者向けの公式ドキュメントを読んだ後にそれらを行いました。 Chromeにインストールするには、拡張機能をダウンロードしてから、拡張機能の開いている設定項目にドラッグする必要があります。
最後の努力で集まって最後まで読んでくれたすべての人に感謝します。 ミス、コードの足跡、および混乱をおforびします。 私の経験を共有することを願っています。その主な教訓は、興味深いタスクでより生産的で楽しいことを学ぶことです。 私はまだ始まったばかりで、建設的な批判に非常に満足しています。 また、誰かと一緒にこのスクリプトの作業を続けられることをうれしく思います。また、近い将来、他の数人と一緒に仕事をすることもできます。経験豊富なメンターとして、また私のような初心者として嬉しく思います。