Geekly Articles each Day
📜 ⬆️ ⬇️

The basics of Dojo on the example of a self-made Habr-parser

Introduction


image
Greetings to the readers.
During the development of the project, I needed to make a small parser for an adjacent site.
Shortly before the team decided to use the Dojo framework
As a result of thinking, the idea was born to make a beautiful Habra parser, at the same time sacking Dojo and solving the problem of saving traffic for mobile (I often read on the go).
This manual is purely practical in nature and does not claim to be perfect execution.


Functions


Functions of our parser will be only 2:
  1. Loading a page and highlighting topics from its content, displaying titles
  2. Enabling the user to close unwanted topics

The PHP parser Simple Html Dom will help us with the first function, and the second will be implemented using Dojo.

Page organization

The page will be in a minimalist style.
 <html> <head> <script src='dojo.js'></script> <!-- Dojo --> <script src='script.js'></script> <!--    --> <link rel='stylesheet' href='style.css' type='text/css' /> <!--   --> </head> <body> <div id='bzone'> <!--  ,    --> <span>  </span> <!--    --> <div id='box'> <!--     --> <div id='tit' class='tit'>   <!--       --> <div id='close' class='close'></div> <!-- ,   --> </div> <div id='text'>   <!--       --> </div> </div> </div> </body> </html>
<html> <head> <script src='dojo.js'></script> <!-- Dojo --> <script src='script.js'></script> <!-- --> <link rel='stylesheet' href='style.css' type='text/css' /> <!-- --> </head> <body> <div id='bzone'> <!-- , --> <span> </span> <!-- --> <div id='box'> <!-- --> <div id='tit' class='tit'> <!-- --> <div id='close' class='close'></div> <!-- , --> </div> <div id='text'> <!-- --> </div> </div> </div> </body> </html>

CSS- file is not of particular interest, just give the code:
') 
 body{ background:lightgrey; } #bzone{ background:gray; width:600px; min-height:600px; position:absolute; left:50%; margin-left:-300px; margin-top:50px; padding-bottom:10px; border-radius:10px; } #bzone span{ height:15px; padding:2px; position:relative; top:7px; display:block; width:597px; border-top:2px white solid; border-bottom:2px white solid; color:grey; background:lightgray; font-weight:bold; text-align:center; } #box{ width:550px; display:block; position:relative; left:25px; background:white; border:2px lightgrey solid; margin-top:10px; border-radius:10px; } #box #tit{ background:lightgrey; min-height:20px; width:100%; position:relative; font-weight:bold; color:grey; text-align:center; } #box #tit #close{ width:16px; height:16px; display:block; position:relative; float:right; background:url('img/close.png'); } #box #tit #close:hover{ background:url('img/close_h.png'); } #tit span{ display:none; } #box #text{ padding:2px; text-align:center; } #box a{ text-decoration:none; font-weight:bold; color:grey; } #box a:hover{ color:#ff6600; }
body{ background:lightgrey; } #bzone{ background:gray; width:600px; min-height:600px; position:absolute; left:50%; margin-left:-300px; margin-top:50px; padding-bottom:10px; border-radius:10px; } #bzone span{ height:15px; padding:2px; position:relative; top:7px; display:block; width:597px; border-top:2px white solid; border-bottom:2px white solid; color:grey; background:lightgray; font-weight:bold; text-align:center; } #box{ width:550px; display:block; position:relative; left:25px; background:white; border:2px lightgrey solid; margin-top:10px; border-radius:10px; } #box #tit{ background:lightgrey; min-height:20px; width:100%; position:relative; font-weight:bold; color:grey; text-align:center; } #box #tit #close{ width:16px; height:16px; display:block; position:relative; float:right; background:url('img/close.png'); } #box #tit #close:hover{ background:url('img/close_h.png'); } #tit span{ display:none; } #box #text{ padding:2px; text-align:center; } #box a{ text-decoration:none; font-weight:bold; color:grey; } #box a:hover{ color:#ff6600; }

Here's what we got:


Parser operation

Connect the downloaded parser Simple Html Dom and load the adored page:
 require 'simple_html_dom.php'; $html = file_get_html('http://habrahabr.ru/');
require 'simple_html_dom.php'; $html = file_get_html('http://habrahabr.ru/');

We will recognize topics by reference class : class = "topic"
 foreach ($html->find('.topic') as $e) { /*   */ echo" <div id='box'> /*  */ <div id='tit' class='tit'> "; echo "<a href='"; /*     */ echo $e->href; echo "'>"; echo $e->href; echo "</a>"; echo" <div id='close' class='close'></div> </div> <div id='text'>"; /*   -  */ echo $e->innertext ; echo " </div> </div> "; }
foreach ($html->find('.topic') as $e) { /* */ echo" <div id='box'> /* */ <div id='tit' class='tit'> "; echo "<a href='"; /* */ echo $e->href; echo "'>"; echo $e->href; echo "</a>"; echo" <div id='close' class='close'></div> </div> <div id='text'>"; /* - */ echo $e->innertext ; echo " </div> </div> "; }

Thus, the project is already fully functional, it remains to add usability and beauty.

Japanese magic


At the beginning of the article we connected 2 scripts - dojo.js and script.js.
Here in the second file I brought out all the code related to usability:
 dojo.addOnLoad(function(){ dojo.query(".tit .close").connect("onclick",function(){ //        var nn=this; dojo.anim(nn,{height:0}).play(); dojo.anim(nn.parentNode,{height:0}).play(); //  ,  ,     dojo.anim(nn.parentNode.parentNode,{height:0}).play(); dojo.empty(nn.parentNode.parentNode); }); });
dojo.addOnLoad(function(){ dojo.query(".tit .close").connect("onclick",function(){ // var nn=this; dojo.anim(nn,{height:0}).play(); dojo.anim(nn.parentNode,{height:0}).play(); // , , dojo.anim(nn.parentNode.parentNode,{height:0}).play(); dojo.empty(nn.parentNode.parentNode); }); });

Now the blocks will roll up nicely when you click on the close button.

Conclusion

Our small parser pretty quickly pulls out topics from Habr and
presents them as a ribbon.
In addition, we can hide the elements that we are not interested in, which will be accompanied by a nice looking smooth animation.
Final result

The project requires a lot of improvements, but its function, as an elementary practical guide, performs well.

I hope the article will be useful to someone, I plan to develop this topic.

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

More articles:


All Articles