Geekly Articles each Day

ユビキタス：単なる別のマッププラグイン

ユビキタスロゴ

Firefox用のすばらしいプラグイン-Ubiquityに関するHabrに関する記事がすでにありました 。 非常に実験的なプラグイン。 少なくともそれを見ることをお勧めします。

だから、私は彼が本当に好きで、私の拡張機能を書きました-mapia.uaマップで住所を検索します 私が記事について書いたもの。


プレビュー


このユビキタスで注目すべき点は何ですか？

プラグインの作者からの紹介ビデオです。

すべてのアクションは、ブラウザーのコマンドラインで実行されます。 Ctrl +スペースを押すだけです。 ことわざにあるように、POSIXのすべての愛好家に捧げます。 しかし、すべてが非常にシンプルで明確であるため、サルはそれを習得します。コマンドを完全に入力する必要はありません（提案）。 デフォルトでは、コマンドの最初の引数はページ上でマウスで選択されたものです。 実際、これは、たとえば、ドイツ語から記事を翻訳するときに大きなプラスです（ちなみに、Enterキーを押すと、選択したテキストがページ上で直接翻訳されます）。 または、友人の石鹸にテキストを投げます。 一般的に、Azaは素晴らしい仕事をしました。

自転車


独自の奇跡サービスを作成するには、実際、 UbiquityがインストールされたFirefoxが必要です。 ありますか 始めましょう。

カード、カード、あなたが恋しい


マピアのロゴ

Ubiquityには既にGoogleマップがプリインストールされています。 しかし、キエフの栄光の都市の居住者として、私は他の人を使用していました-http://mapia.uaはい、そして例として-降りてくる:-)
はい、特にmultibukafが好きでない人のために- 既製のプラグインへのリンクがあります 。

編集を開始するには、[編集]をクリックします。 ありがとうキャップ！


Ctrl + Spaceを押してhelpと入力し、Ubiquity設定ページに移動し、「Hack Ubiquity」を見つけてクリックします。 エディタにいます。 textareaでコーディングするのがあまり便利でない場合は、外部エディターを接続して作業することができます（たとえば、 notepad ++が望ましい）。

最初のステップ


CmdUtils.CreateCommand({
names: [ "mapia" , "mpi" ],
icon: "http://mapia.ua/favicon.ico" ,
description: _( "Kiev map powered by mapia.ua" ),
author: {name: "Kottenator" , email: "kottenator@gmail.com" },
license: "MIT"
});

* This source code was highlighted with Source Code Highlighter .

ここではすべてが非常に簡単です。

そして、すでに実行してコマンドを確認できます。
Ctrl +スペース->「mapia」または「mpi」と入力->これが表示されます。

スクリーンショット1

彼は彼の行為に誇りを持っています！ :)しかし続けましょう：
CmdUtils.CreateCommand({
names: [ "mapia" , "mpi" ],
icon: "http://mapia.ua/favicon.ico" ,
description: _( "Kiev map powered by mapia.ua" ),
author: {name: "Kottenator" , email: "kottenator@gmail.com" },
license: "MIT" ,

arguments: [
{role: 'object' , nountype: noun_arb_text, label: _( 'address' )}
],

preview: function preview(pblock, args) {
var msg = "You'd just typed \"${text}\"" ;
pblock.innerHTML = _(msg, { text: args. object .text });
},

execute: function execute(args) {
var msg = "You choose address: \"${text}\"" ;
displayMessage(_(msg, { text: args. object .text }));
}
});

* This source code was highlighted with Source Code Highlighter .

私たちは何をしましたか？

保存、再生、美しさ：

スクリーンショット2

実際、カードはどこにありますか？ Mapia Static APIから始めましょう-これは単なる地図領域の写真です。 コードを続けましょう：
arguments: [
{role: 'object' , nountype: noun_arb_text, label: _( 'address' )},
{role: 'goal' , nountype: noun_arb_text, label: _( 'zoom' )},
{role: 'source' , nountype: noun_arb_text, label: _( 'map size' )}
],

previewDelay: 800,

getStaticURL: function (address, zoom, size) {
var mapUrl = "http://mapia.ua/static?" ;

address = address || '' ;
zoom = parseInt(zoom, 10) || 15;
zoom = Math.min(18, Math.max(zoom, 6));
size = size || '400x300' ;

var params = {
address: address,
zoom: zoom,
size: size
};

return mapUrl + jQuery.param( params );
},

preview: function preview(pblock, args) {
var img = '<img src="${url}" />' ;
var url = this .getStaticURL(args. object .text, args.goal.text, args.source.text);
pblock.innerHTML = _(img, { url: url });
},

* This source code was highlighted with Source Code Highlighter .


結果は次のとおりです。

スクリーンショット3

まあ、それで終わりかもしれませんが、私は本当に便利なものを作りたかったのです。 静的な図面は私のニーズには十分ではありません。 そして、これが私がやったことです...

第二段階


実際、序文。 Mapiaは、番地を検索するためのオープンなWebサービスを提供していません。 しかし、彼らのサイトでは機能します！ そして、私は思った-結局のところ、私はXSSを介して彼らの検索を使用するという事実に犯罪者は何もありませんか？ 最後に、これは脆弱性ではなく、私は害を与えません、私は何も盗みませんが、 これらの人のために追加の広告を作成するだけです ;-)

このメソッドを追加します。
loadDetails: function (pblock, args, page_num) {
var baseUrl = "http://mapia.ua/search" ;
var params = {city: "%u041A%u0438%u0435%u0432" , "search[query]" : args. object .text};
var self = this ;

jQuery.ajax({
type: "GET" ,
url: baseUrl,
data: params ,
dataType: 'html' ,
error: function () { },
success: function (html) {
$( '#content' , pblock).html(html);
}
});
},

preview: function preview(pblock, args) {
var img = '<img src="${url}" /><div id="content"></div>' ;
var url = this .getStaticURL(args. object .text, args.goal.text, args.source.text);
pblock.innerHTML = _(img, { url: url });

this .loadDetails(pblock, args);
}

* This source code was highlighted with Source Code Highlighter .

ご覧のとおり、UbiquityはjQueryをサポートしています。 これは素晴らしい！
そして、これがまさにmapiaの検索です- “ mapia.ua/search?city= Kiev＆search [query] = 入力された住所 ”
loadDetails(...)メソッドloadDetails(...)何をloadDetails(...)ますか？ 検索結果をプレビューに読み込むだけです。 コードは明確で説明できないと思います。

スクリーンショット4

検索結果は次のとおりです。 しかし、何らかの理由でどこにも行けません。 リンクが機能しない、すべてが悪い。 実際、これは正常です:)上で述べたように、このメカニズムは私たちのためではなく、mapia.uaウェブサイト自体のためのものです。 しかし、Ubiquityを使用すると、クロスドメインクエリを実行できます。

したがって、ファイルを操作する必要があります（RegExpプレフィックス+ jQueryポストフィックス）：
mapiaURL: "http://mapia.ua/#popup_class=${cat}&popup_id=${sid}" ,

clearSearchResultsCode: function (html) {
html = html.replace(/<div id="search_bar_title">((?:.|\s)*?)<\/div>/i, '<h3 class="search_bar_title">$1</h3>')
.replace(/<p>.*?<\/p>/i, '<p><small>( mapia.ua)</small></p>')
.replace(/(<div class="buildings_info")[^>]*>/gi, '$1>')
.replace(/<a href="\/center\/street\/(\d+)[^>]*>/i, '<a href="' + _(this.mapiaURL, {cat: 'Street', sid: "$1"}) + '">')
.replace(/<a[^<>]+onclick="\$\('street_\d+_buildings'\).*?<\/a>/i, '')
.replace(/<a href="\/center\/address\/(\d+)[^>]*>/gi, '<a href="' + _(this.mapiaURL, {cat: 'Address', sid: "$1"}) + '">')
.replace(/<a href="\/center\/feature\/(\d+)[^>]*>/gi, '<a href="' + _(this.mapiaURL, {cat: 'Feature', sid: "$1"}) + '">')
.replace(/<a href="\/center\/station\/(\d+)[^>]*>/gi, '<a href="' + _(this.mapiaURL, {cat: 'Station', sid: "$1"}) + '">')
.replace(/<a href="\/center\/city\/(\d+)[^>]*>/gi, '<a href="' + _(this.mapiaURL, {cat: 'City', sid: "$1"}) + '">')
.replace(/(<div id="search_bar_title"(?:.|\s)*?)<span(?:.|\s)*?<\/span>/i, '$1')
.replace(/(<div id="search_bar_title"(?:.|\s)*?)<span(?:.|\s)*?<\/span>/i, '$1') /* not a duplicate */
.replace(/href="\/search?[^"]*pages_feature=(\d+)[^"]*"/gi, 'page_num="$1"')
.replace(/<p><a[^<>]*onclick="load_content(?:.|\s)*?<\/p>/i, '')
.replace(/<script>(?:.|\s)*?<\/script>/i, '');
return html;
},

loadDetails: function (pblock, args, page_num) {
var baseUrl = "http://mapia.ua/search" ;
var params = {city: "%u041A%u0438%u0435%u0432" , "search[query]" : args. object .text};
if (page_num)
params.pages_feature = page_num;
var self = this ;

jQuery.ajax({
type: "GET" ,
url: baseUrl,
data: params,
dataType: 'html' ,
error: function () {},
success: function (html) {
// Pre-fixes via RegExp
html = self.clearSearchResultsCode(html);

$( '#content' , pblock).html(html);

// After-fixes via jQuery
$( 'div.pagination a' , pblock).click( function (e){
self.loadDetails(pblock, args, $( this ).attr( 'page_num' ));
e.preventDefault();
return false ;
})
}
});
}

* This source code was highlighted with Source Code Highlighter .

ここでは、それがどのように機能するかを長い間説明します:) htmlを不要なものから削除し、リンクをクリック可能にするだけです。

外観は次のとおりです。

スクリーンショット5

できた！


それだけです、患者は健康で退院することができます。 誰かがこれまでに行を読んでくれてうれしいです:)

ここでは、一緒にアセンブルされたコードをダウンロードできます 。

Source: https://habr.com/ru/post/J74514/

More articles:


All Articles