Sobota, 24 czerwca 2017 • 175 dzień roku • Imieniny: Jana, Danuty, Janiny Kontakt

Jak przy pomocy Javascriptu zrobić widget (wtyczkę)?


Jako przykład posłuży nam wtyczka wyświetlająca losowo wybrane aforyzmy (umieszczone w osobnym pliku w formacie JSON ). Wykorzystanie wtyczki do własnych celów wymaga wprowadzenia niewielkich zmian w celu dostosowania sposobu i treści wyświetlanych danych do własnych potrzeb, wskazana jest więc podstawowa znajomość Javascriptu i PHP. Głównym elementem wtyczki jest widoczny poniżej skrypt Javascript:

Pobierz plik

(function() {
   
   var BASE_URL = 'http://www.foxtrade.eu/programowanie/javascript/jak-zrobic-widget/';

   function uid() {
       var id = '_' + (new Date()).getTime();
       for(var i=0; i<8; i++) {
           id += '0123456789'.charAt(Math.floor(Math.random()*10));
	}
	return id;
   }
   
   var id = uid();
   var div_id = 'foxtrade_dot_eu' + id;
	
   function requestContent() {
      var script = document.createElement('script');
      script.src = BASE_URL + "widget-demo.php?callback=" + id;
      document.getElementsByTagName('head')[0].appendChild(script);
   }
   
  function createCallback(div_id) {
     return function(data) {
       
         var div = document.getElementById(div_id);
         div.style.padding = '4px';
         div.style.marginBottom = '4px';
         div.style.marginTop = '4px';
         div.style.fontFamily= 'Verdana';
	 div.style.fontStyle = 'italic';

	 var text = data.text;
	 var text_color = '#5376a2';
	 var author = data.author;
	 var author_color = '#5376a2';
	 
	 var text_link = '<a href="http://www.foxtrade.eu"' +
	 		   	' title="www.foxtrade.eu"' + 
	 		   	' style="text-decoration:none; outline:none;"><span style="color:' + text_color + ';">' + text + '</span></a>';
	 		   
	 var author_link = '<a href="http://www.foxtrade.eu"' + 
	 			' title="www.foxtrade.eu"' + 
	 			' style="text-decoration:none; outline:none;"><span style="color:' + author_color + ';">' + author + '</span></a>';
	
	 var txt = '';
	 txt += '<tr><td style="padding:0 3px; font-size:120%; color:' + text_color + '; text-align:left; text-decoration:none;"><strong>' + text_link + '</strong></td></tr>';
	 txt += '<tr><td style="padding:0 3px; font-size:92%; color:' + author_color + '; white-space:nowrap; text-align:right;"><strong>' + author_link + '</strong></td></tr>';                
	
	 var newHTML = '<table>' + txt + '</table>';
	 div.innerHTML = newHTML;  
	 div.style.display = 'block';
     }
  }

window[id] = createCallback(div_id);
document.write("<div id='" + div_id + "' style='display: none'></div>");
setTimeout(requestContent, 10);
})();

Sam skrypt Javascript jednak nie wystarczy. Żeby wtyczka poprawnie działa potrzebny jest także program działający po stronie serwera. W naszym przypadku jest to skrypt PHP:

Pobierz plik

$sourcefile = 'quotes.jsn';

if (file_exists($sourcefile)) {	
		
	$contents = file_get_contents($sourcefile);
	$json = json_decode($contents, true);
	$rand = array_rand($json["quotes"], 1);
	$res = $json["quotes"][$rand];
	$data = json_encode($res);
		
	if(array_key_exists('callback', $_GET)){
		header('Content-Type: text/javascript; charset=utf8');
		header('Access-Control-Allow-Origin: http://www.foxtrade.eu/');
		header('Access-Control-Max-Age: 3628800');
		header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

		$callback = $_GET['callback'];
		echo $callback.'('.$data.')';
	}else {
		header('Content-Type: application/json; charset=utf8');
		echo $data;
	}	
} else {
	// kod wykonywany w przypadku braku pliku
}	

Plik źródłowy

Dane wyświetlane przez widget zostały zapisane w formacie JSON (JavaScript Object Notation) i umieszczone w osobnym pliku quotes.jsn. W omawianym przypadku są to wybrane aforyzmy. Rzecz jasna treść wyświetlanych informacji jest nieistotna. Ważne jest jedynie zachowanie formatu JSON. Poniżej widać przykładowy plik z danymi:

Pobierz plik

{"quotes":[
	{"text":"Kobiety lubią być dobrymi słuchaczkami, ponieważ mówić potrafią same.","author":"Karl Schönböck"},
	{"text":"Jeśli chcesz wiedzieć co ma na myśli kobieta, nie słuchaj tego co mówi - patrz na nią.","author":"Oscar Wilde"},
	{"text":"Niestety! Bywają kobiety, w których matka uśmierca żonę.","author":"Alphonse Daudet"},
	{"text":"Marzenie kobiety: mieć stopę wąziutką, a żyć na szerokiej.","author":"Julian Tuwim"},
	{"text":"Im kobieta lżejsza, tym bardziej ciąży na budżecie mężczyźnie.","author":"Marcel Achard"},
	{"text":"Kobiety trzeba kochać w każdym wieku. Zwłaszcza w dwudziestym.","author":"Maurice Chevalier"},
	{"text":"Zepsuta kobieta należy do tego rodzaju istot, których mężczyźni nigdy nie mają dosyć.","author":"Oscar Wilde"},
	{"text":"Mężczyzn możesz analizować, kobiety tylko podziwiać.","author":"Oscar Wilde"},
	{"text":"Przychodzą, aby popatrzeć i aby je widziano.","author":"Owidiusz"},
	{"text":"Powodzenie u kobiet ma ten, kto umie się bez nich obejść.","author":"Ambrose Gwinnet Bierce"},
	{"text":"Dopóki kobieta wygląda dziesięć lat młodziej niż jej córka, dopóty jest całkowicie zadowolona.","author":"Oscar Wilde"},
	{"text":"Kobieta trzy razy pomyśli, zanim zamknie usta.","author":""},
	{"text":"Bardzo mało żon siwieje z powodu śmierci męża.","author":""},
	{"text":"Do rozmowy między kobietami potrzeba przynajmniej trzech kobiet: dwóch, które mówią i jednej, o której się mówi.","author":"Alphonse Karr"},
	{"text":"Mężczyzna może być szczęśliwy z każdą kobietą, o ile tylko jej nie kocha.","author":"Oscar Wilde"},
	{"text":"Kiedy dziewczyna ma piętnaście lat, nienawidzi mężczyzn i wszystkich chętnie by wymordowała, a dwa lata później rozgląda się, czy któryś przypadkiem nie ocalał.","author":""},
	{"text":"Myśli są jak kobiety. W tłumie robią mniejsze wrażenie niż pojedynczo.","author":""},
	{"text":"Kobiety są zdumiewające: albo nie myślą o niczym, albo myślą o czymś innym.","author":"Aleksander Dumas"},
	{"text":"Dziewczyna to piec, w którym powoli piecze się baba.","author":""},
	{"text":"Skromna dziewczyna nigdy nie goni za mężczyznami, tak jak pułapka na myszy nie ściga myszy.","author":""},
	{"text":"Ogromnie lubię kobiety, zwłaszcza kiedy są ładne i uległe.","author":""}
]}

Instalacja

Pobierz paczkę, rozpakuj i umieść wszystkie pliki w tym samym katalogu na swoim serwerze www. Następnie dostosuj wtyczkę do własnych potrzeb. Edycji wymagają miedzy innymi ścieżki dostępu oraz wygląd wtyczki. Zwróć szczególną uwagę na poprawny adres URL katalogu, do którego skopiowałeś pliki (zmienna BASE_URL). Edytuj także plik quotes.jsn zawierający wyświetlane przez widget dane (jeśli tego nie zrobisz, będą wyświetlane losowe aforyzmy). Pamiętaj, że dane zawarte w pliku muszą być zapisane w formacie JSON. W przeciwnym razie wtyczka nie będzie działać.

Kod html wtyczki

Przykład działania wtyczki:


Zobacz też:

Tworzenie wykresu liniowego w HTML

Tworzenie wykresu schodkowego w HTML

Tworzenie wykresu słupkowego w HTML