चाचा फेडर से पत्र लिखने के लिए एक उपकरण लिखें!

मैंने कल हबेरी पर दही का एक पोस्ट या अंकल फेडर के एक पत्र को पढ़ा। विचार दिलचस्प है, लेकिन।

टिप्पणियाँ डरावनी हैं।

मैं समझाऊंगा क्यों।

वहाँ की टिप्पणियाँ सशर्त रूप से दो प्रकारों में विभाजित की जा सकती हैं

• "कितने स्वर्गदूत सुई के अंत में फिट होते हैं" "छंटाई की तारीखों के बारे में",
• "एक इलेक्ट्रॉन माइक्रोस्कोप के साथ नाखूनों को कैसे हथौड़ा दिया जाए" "हम एक उद्यम शैली में इतना बड़ा कुछ लिखेंगे।"

कवि की आत्मा इसे बर्दाश्त नहीं कर सकी, आधे घंटे का समय मिला, और उपयोगकर्तास्क्रिप्ट को आकर्षित किया।

स्क्रिप्ट हॉरर के लिए सरल है - एक विशेष मार्कर की तलाश में सभी टिप्पणियों पर निर्भर करता है। यदि कोई मार्कर पाया जाता है - पॉप-अप विंडो में एक मार्कर के साथ सभी टिप्पणियां दिखाता है।

हर कोई जो सुधार में भाग लेना चाहता है, उसका स्वागत है प्रौद्योगिकी वापस लाने के लिए , इसलिए बोलने के लिए। अगर आपकी टिप्पणी को पोस्ट में जोड़ने की आवश्यकता है - टिप्पणी के अंदर इस तरह लिखें [भी] । और मैं, इस अपमान के सर्जक के रूप में, जैसा कि मैं करूँगा, अपनी इच्छाओं को पोस्ट में स्थानांतरित कर देगा। और तदनुसार - स्क्रिप्ट में सुधार करने के लिए भी।



यह कुछ इस तरह दिखता है:


और अब गीत बग़ल में हैं, और विचार करें कि हम यहां क्या कर रहे हैं।

मानक शुरुआत - ग्रीसेमोनकी को समझाएं कि यह क्या है और क्यों है। और हम भी कुछ चर शुरू करते हैं - एक खिड़की के लिए और एक मार्कर के लिए।

// ==UserScript== // @name Prostokvashino // @namespace habrahabr.ru // @description habrahabr.ru/post/213263 // @include http://*.habrahabr.ru/post/* // @include http://habrahabr.ru/post/* var MARKER = '[also]'; var floatingDiv = null; 

अब मुख्य एल्गोरिथ्म पर विचार करें - चूंकि यह पांच सेंट के रूप में सरल है। पहले, खोजें कि टिप्पणियाँ कहाँ हैं, परिणामों के लिए एक सरणी तैयार करें (पाया):

 function showMarkedComments () { var commentsBlock = document.getElementById('comments'); var eltList = commentsBlock.getElementsByTagName('div'); var found = []; 

हम बहुत सरलता से आगे बढ़ेंगे - हम वास्तविक पाठों के साथ, सभी divs के माध्यम से सॉर्ट करेंगे।

  for(var j=0; j<eltList.length; ++j) { var elt = eltList[j]; if(elt.className != 'comment_body' ) continue; // now elt has two sub-divs - info with author and div with text // in version 0.1 we're ignoring authors and other technical stuff - just use div with text for(var k=0; k < elt.childNodes.length; ++k) { if(elt.childNodes[k].nodeName.toLowerCase() == "div") { ... } } } 

इष्टतमता के ऊपर नहीं, लेकिन यह पृष्ठ में वर्णित क्रम में टिप्पणियों, इसके अलावा, जवाब के साथ पूरी पदानुक्रम को बायपास करेगा। वोइला - आपको तारीखों के बारे में नहीं सोचना है।

वास्तव में, सत्यापन और याद रखना इतना स्पष्ट है (और यह भी इष्टतम नहीं) कि इस पर टिप्पणी करने के लिए कुछ भी नहीं है:

  divtxt = elt.childNodes[k].innerHTML; if(divtxt.indexOf(MARKER) < 0) continue; found.push(divtxt); 

सामग्री के साथ पॉप-अप विंडो को भरने के लिए - एक ट्रिफ़ल बचा था। एक पुराने कट्टर चालक की तरह, मैंने ट्रैक्टर से एक रास्प के साथ आकर्षित किया, इसलिए इस अपमान को सुधारने के लिए jQuery प्लग-इन को खराब करना सबसे महत्वपूर्ण स्थान है।

 // in found, we have list of HTML texts together with marker. // All we need is to place it in floating div and make it visible if(found.length < 1) return; var buf = new StringBuffer(); for(var j = 0; j < found.length; ++j) { buf.append('<div id="comment_"'+j+' class="comment_item">\n'); buf.append('<div class="comment_body">'); buf.append('<div class="message html_format "><hr/>'); buf.append(found[j]); buf.append('</div>'); buf.append('</div>\n'); buf.append('</div>\n'); } buf.append('<hr/>'); floatingDiv.innerHTML = buf.toString(); floatingDiv.style.top = (window.pageYOffset + 10) + 'px'; floatingDiv.style.display = ''; } 

यहां, एक रास्प के साथ काटने की प्रक्रिया में, मैंने अचानक प्रदर्शन के लिए खुद को संभाल लिया, जल्दी से अपने घुटने पर स्ट्रिंगबफ़र / स्ट्रिंगब्यूलर के एनालॉग को जन्म दिया। यहाँ वास्तविक स्पेयर पार्ट है :

 // simple string buffer function StringBuffer() { this.buffer = []; } StringBuffer.prototype.append = function append(string) { this.buffer.push(string); return this; }; StringBuffer.prototype.toString = function toString() { return this.buffer.join(""); }; 

यदि आपको इस पर टिप्पणी करने की आवश्यकता है, तो किसी को बताएं। मेरे लिए, कोड इतना स्पष्ट है, लेकिन आप कभी नहीं जानते हैं। शुक्रवार की शाम, 23 फरवरी ...

छोटी चीजें बची हैं - एक खिड़की खींचने के लिए, घटनाओं को लटकाने के लिए , रस के लिए जाएं , और यहां यह है - एक स्क्रिप्ट।



खैर, और एक ही शैली में एक ही कार्य के एक जोड़े:

 function mk_Link(code, label) { var newElt = document.createElement('a'); newElt.appendChild(document.createTextNode('[' + label + ']')); newElt.href= 'javascript:void(-' + code + ')'; return newElt; } 

हालांकि, एक चौकस पाठक एक भयानक विधर्म देखेंगे। न केवल HTML टुकड़े टुकड़ों की लाइनों के साथ एक साथ रहना! इसमें निर्मित कुछ अस्पष्ट हैक भी हैं। ये हैं

newElt.href = 'जावास्क्रिप्ट: शून्य ((' + कोड + ')';

खुद सदमे में! शायद किसी ने भांग का केक मिलाया ...

यहां विचार निम्नलिखित है - हम लेख और टिप्पणियों के बीच एक अलग लिंक बनाते हैं, जिस पर क्लिक करके सभी काम किए जाते हैं। यह इस कारण से किया जाता है - ताकि आप पृष्ठ को फिर से लोड किए बिना टिप्पणियों को अपडेट करने के लिए अन्य सुविधाजनक स्क्रिप्ट और बटन का उपयोग कर सकें। और चूंकि टिप्पणियां लोड होने के बाद हमारे पास आ सकती हैं और यहां तक ​​कि "बाद में" - तो हमारे एल्गोरिथ्म को किसी भी सुविधाजनक समय पर काम करने में सक्षम होना चाहिए।

और चूंकि यह सब मेरे घुटने पर चित्रित किया गया था, ताकि निष्पादन के संदर्भों और उनके प्रिंसिपलों के साथ मेरे माथे को हिट न करने के लिए, मैंने लिंक का गठन किया ताकि न तो साइट कोड और न ही ब्राउज़र लिंक के साथ कुछ भी उपयोगी हो सके। लेकिन मेरे हैंडलर में, मैं आसानी से यह पता लगा सकता हूं कि इसके बारे में क्या करना है। आप अश्लील शब्द भी लिख सकते हैं, यदि केवल यह एक वैध लिंक या एक वैध कोड नहीं था।

हालाँकि, आखिरी स्पर्ट बचा था! कोई मशीन नहीं चोट लगी होगी ... ik! हम एक हैंडलर को पंजीकृत करते हैं - एक दस्तावेज़ को लोड करने और एक भयानक हैक को संसाधित करने के लिए:

 window.addEventListener("load", goLoad, true); document.addEventListener('click', goClick, true); 

पृष्ठ लोड करते समय, हम लेख और टिप्पणियों के बीच एक विशेष लिंक जोड़ते हैं। उस पर क्लिक करके, हम सभी काम करेंगे:

 function goLoad() { // starting here: extra links plus other stuff var commentsBlock = document.getElementById('comments'); commentsBlock.parentNode.insertBefore(makeDivWExtraLinks(), commentsBlock); makeFloatingDiv(); floatingDiv.addEventListener('click', goHide, true); } 

और यहाँ इस लिंक पर क्लिक करके प्रसंस्करण है:

 function goClick(event) { if(event.target.href) { var j = event.target.href.indexOf('javascript:void(-'); if( j >=0 ) { // kind is group of operations' prefix: 0..9 var kind = event.target.href.substring(j + 16, j + 18); if(kind == '-1') showMarkedComments(); } } } 

आपका ध्यान देने के लिए धन्यवाद।

UPD: और यहाँ टिप्पणियाँ हैं!

[भी] मार्कर को डिबगिंग के लिए वहां सेट किया जा सकता है - जब मैंने डीबग किया, तो मैं आमतौर पर ब्रैकेट सेट करता हूं। और फिर इस अंकन के साथ कोई जीवित पोस्ट नहीं हैं - केवल यह एक।

[भी] कुछ नहीं हुआ ...

आपको याद दिला दूं, स्क्रिप्ट यहां है । ओह, मुझे कॉल करें - मैंने केवल फ़ायरफ़ॉक्स में चेक किया। अन्य ब्राउज़रों में क्या होता है - यह भी नहीं देखा। खासकर अगर यह IE ;-)

[भी] आप गलत अंकल फेडर, उपयोगकर्ता स्क्रिप्ट करते हैं - अगर कुछ पोस्ट में इस तरह के [भी] बहुत सारे हैं, तो जब आप इसे खोलेंगे तो डरावना लगेगा - स्थिति के बजाय सीधे पेज में पेस्ट करना बेहतर है: निरपेक्ष।

सच्ची टिप्पणी। फिक्स्ड। कोड सरल और छोटा बना दिया।

 function makeFloatingDiv() { if(!floatingDiv) { floatingDiv = document.createElement('div'); floatingDiv.style.backgroundColor = '#f2f2f2'; floatingDiv.style.borderColor = 'red'; floatingDiv.style.borderWidth = '2px'; floatingDiv.style.borderStyle = 'groove'; floatingDiv.style.padding = '2px'; floatingDiv.valign = 'top'; floatingDiv.align = 'left'; floatingDiv.textAlign = 'left'; floatingDiv.style.overflow = 'auto'; floatingDiv.style.display = 'none'; floatingDiv.innerHTML = "..."; } return floatingDiv; } function goLoad() { // starting here: extra links plus other stuff var commentsBlock = document.getElementById('comments'); commentsBlock.parentNode.insertBefore(makeFloatingDiv(), commentsBlock); commentsBlock.parentNode.insertBefore(makeDivWExtraLinks(), floatingDiv); floatingDiv.addEventListener('click', goHide, true); } 

और अब ऐसा दिखता है