Файлы статей

Библиотека xdFileStorage для работы с файловой системой в браузере

Файл xdFileStorage.js для работы с файловой системой через браузер

/*!
 * xdFileStorage JavaScript Library
 * http://xdan.ru/
 *
 * Copyright 2012, Chupurnov Valeruiy
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Date: San Juli 2 0:58:34 2012 +0500
 */
var xdFileStorage = function(quota){
	var thisfs = this;
	thisfs.fisy = 0;
	/**
	 * @name fsWork
	 * @descr Метод проверяет работает ли в данном браузере функции для работы с файлами
	 * @example var fs = new xdFileStorage(50);
	 if(fs.fsWork){
	 //код
	 }
	 */
	thisfs.fsWork =function(){
		return window.File && window.FileReader && window.FileList && window.Blob;
	}
	/**
	 * @name writeBlob
	 * @descr Метод записывает в файл filename, содержимое параметра blob 
	 и вызывает callback функцию next по завершению процесса записи
	 */
	thisfs.writeBlob = function( filename,blob,next ){
		thisfs.fisy.root.getFile(filename, {create: true}, function(fileEntry) {
			fileEntry.createWriter(function(fileWriter) {
			fileWriter.onwriteend = function(e) {
				next&&next();
				console.log('Write completed.');
			};
			fileWriter.onerror = function(e) {
				console.log('Write failed: ' + e.toString());
			};
			fileWriter.write(blob);
			}, errorHandler);
	  }, errorHandler);
	}
	function onInitFs( fsyst ){
		thisfs.fisy = fsyst;
	}
	function errorHandler(e) {
		var msg = '';
		switch (e.code) {
			case FileError.QUOTA_EXCEEDED_ERR:
			msg = 'QUOTA_EXCEEDED_ERR';
			break;
			case FileError.NOT_FOUND_ERR:
			msg = 'NOT_FOUND_ERR';
			break;
			case FileError.SECURITY_ERR:
			msg = 'SECURITY_ERR';
			break;
			case FileError.INVALID_MODIFICATION_ERR:
			msg = 'INVALID_MODIFICATION_ERR';
			break;
			case FileError.INVALID_STATE_ERR:
			msg = 'INVALID_STATE_ERR';
			break;
			default:
			msg = 'Unknown Error';
			break;
		};
		console.log('Error: ' + msg);
	}
	/**
	 * @name removeFile
	 * @descr Метод удаляет из виртуальной файловой системы браузера файл с названием filename 
	 и вызывает callback функцию next по завершению процесса удаления
	 * @example (new xdFileStorage(50)).removeFile('1.png');
	 */
	thisfs.removeFile = function ( filename,next ){
		thisfs.fisy.root.getFile( filename, {}, function( fileEntry ) {
			fileEntry.remove(function() {
				console.log('File removed.');
			}, errorHandler);
		}, errorHandler);
	}
	/**
	 * @name loadRemoteFile
	 * @descr Метод загружает удаленный файл dataurl c MIME типом MIMEType в файл с именем filename
	 и вызывает callback функцию next по завершению процесса загрузки и сохраненеия, для работы с другими доменами требуется разрешенный cross-domain ajax
	 * @example 
	 var fs = new xdFileStorage(50);
	 fs.loadRemoteFile('1.png','http://xdan.ru/views/lite/images/logo.png',function(){
		alert('Загрузка завершена');
	 })
	 */
	thisfs.loadRemoteFile = function( filename,dataurl,next,MIMEType ){
		var req = new XMLHttpRequest();
		req.responseType = "arraybuffer";
		req.open('GET', dataurl, true); // загружаем асинхронно
		req.onreadystatechange = function (data){ 
			if ( req.status == 200 && req.readyState==4 ) {
				var bb = new BlobBuilder();
				bb.append( req.response ); 
				thisfs.writeBlob(filename,bb.getBlob( MIMEType||'image/jpg' ),next);
			}
		};
		req.send(null);
	}
	/**
	 * @name saveObjectToFile
	 * @descr Метод распечатывает объект obj в файл с именем filename
	 и вызывает callback функцию next по завершению процесса сохраненеия
	 * @example var fs = new xdFileStorage(50);
	 fs.saveObjectToFile('1.txt',{1:1,2:2,3:3,'a':123},function(){
		alert('wrtie completed!');
	 })
	 Результатом будет файл с содержанием
	 1=>1
	 2=>2
	 3=>3
	 a=>123
	 or
	 fs.saveObjectToFile('1.txt',[1,2,3,4],function(){
		alert('wrtie completed!');
	 })
	 Результат
	 0=>1
	 1=>2
	 2=>3
	 3=>4
	 */
	thisfs.saveObjectToFile = function( filename,obj,next ){
		var bb = new BlobBuilder();
		for( var i in obj )
			bb.append(i+'=>'+obj[i]+'\n');
		thisfs.writeBlob(filename,bb.getBlob('text/plain'),next);
	}
	/**
	 * @name strToFile
	 * @descr Метод сохраняет строку str в файл с именем filename
	 и вызывает callback функцию next по завершению процесса сохраненеия
	 * @example var fs = new xdFileStorage(50);
	 fs.strToFile('1.txt','Привет Мир!',function(){
		alert('wrtie completed!');
	 })
	 Результатом будет файл с содержанием
	 Привет Мир!
	 */
	thisfs.strToFile = function( filename,str,next ){
		var bb = new BlobBuilder();
		bb.append(str);
		thisfs.writeBlob(filename,bb.getBlob('text/plain'),next);
	}
	window.BlobBuilder = window.BlobBuilder||window.WebKitBlobBuilder;
	window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
	window.requestFileSystem(window.PERSISTENT, (quota||5)*1024*1024 /*5MB*/, onInitFs, errorHandler); // дисковая квота под файл, по умолчанию 5MB
	return this;
};

Подключение:

<script type="text/javascript" src="xdFileStorage.js"></script>

Запись строки в текстовый файл:

var fs = new xdFileStorage();
fs.strToFile('example1.txt','В этот файл, запишется эта строчка!',function(){
 alert('Сохранение завершено!');
});

Загрузка удаленного изображения и сохранение его в файл:

var fs = new xdFileStorage(50);
 fs.loadRemoteFile('1.png','http://xdan.ru/views/lite/images/logo.png',function(){
	alert('Загрузка завершена');
 })

Загрузка нескольких удаленных изображений:

// не правильный вариант
var fs = new xdFileStorage(50);
for(var i =1; i<5; i++)
	fs.loadRemoteFile(i+'.png','http://xdan.ru/views/lite/images/logo'+i+'.png',function(){
		alert('Загрузка завершена');
	})
// работать небудет!!!(Don't work!!!)

верно будет сделать так:

var fs = new xdFileStorage(50);
function req(i){
	fs.loadRemoteFile(i+'.png','http://xdan.ru/views/lite/images/logo'+i+'.png',function(){
		if(i>1)req(i-1); else alert('Загрузка всех изображений завершена');
	})
}
req(5);// будет работать верно

распечатка массива в файл:

var fs = new xdFileStorage(50);
 fs.saveObjectToFile('1.txt',{1:1,2:2,3:3,'a':123},function(){
	alert('Запись завершена!');
})
/*
Результатом будет файл с содержанием
1=>1
2=>2
3=>3
a=>123
 */
 fs.saveObjectToFile('1.txt',[1,2,3,4],function(){
	alert('Запись завершена!');
})
/*
Результат
0=>1
1=>2
2=>3
3=>4
*/

Боле подробно про работу с файлами через JavaScript читайте в цикле статей Работа с файлами в JavaScript, Часть 1: Основы 

Приложение xdParser-v.1.1 Google Chrome Extension демонстрация client-side парсера на javaScript

В папке js два файла main.js и main2.js. Подключив первый в main.html

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/xdFileStorage.js"></script>
<script type="text/javascript" src="/js/main.js"></script>

приложение будет парсить фото Джессики Альбы из первого примера,

 

Великолепная Джессика Альба - парсер Yandex картинок Google Chrome Extension

 

при замене на 

<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/xdFileStorage.js"></script>
<script type="text/javascript" src="/js/main2.js"></script>

приложение будет парсить сайт http://www.skelbiu.lt

 

Парсер сайта www.skelbiu.lt xdParser v.1.1. приложение Google Chrome Extension

 

Подключать оба файла одновременно нельзя.

В отличии от статьи, второй парсер чуть более доработан, и сохраняет полученные телефоны в текстовый файл. Который находится там же где и фото великолепной Джессики. У меня это папка C:\Users\Leroy\AppData\Local\Google\Chrome\User Data\Default\File System\000\p\00

Установка: 

Распаковываем архив.

 

Кликаем на панели браузера Google Chrome по иконке с гаечным ключемНастройки и управление Google Chrome(Настройки и управление Google Chrome), затем Инструменты -> Расширения, ставим в самом верху галку Режим разработчика

Далее кликаем  Загрузить распакованное расширение... и указываем путь к папке с распакованным архивом.

Подробнее читайте в статье Пишем javascript парсер при помощи Google Chrome Extension

 

 

Класс tulipIP для работы с изображениями в php

Полезный класс для работы с изображениями. Из возможностей: обрезка, поворот, инвертирование, фильтры: яркость, контраст, оттенки серого, embos, edge, колоризация и др. Подробнее о работе скрипта вы можете прочитать в статье Класс для обработки, добавления эффектов и обрезки изображений на PHP

ckeditor plugin реализующий событие onselect

Плагин реализует событие onselect в редакторе ckeditor. Подробнее о его работе можно почитать в статье ckeditor событие on select

Распаковываем архив ckeditor/plugins

В ckeditor/config.js добавляем 

config.extraPlugins = 'onselect';  

теперь в любом месте Вашего плагина можно использовать его так

editor.on( 'select', function(e){alert(e.getSelection().getSelectedText() )});

 

javascript алгоритм двумерной упаковки или компактная расстановка прямоугольников

Javascript алгоритм двумерной упаковки или компактная расстановка прямоугольников. Демо

Как использовать:

Подключаем файл

<script src="xdRectPacker.js" language="javascript"></script>

к примеру на странице есть блоки, которые необходимо упаковать 

<div id="mosaic" style="width: 200px; height: 200px; position: relative">
	<div style="width: 20px; height: 61px; position: absolute; background-color: rgb(0, 0, 92)" id="div1"/>
	<div style="width: 23px; height: 28px; position: absolute; background-color: rgb(150, 217, 0);" id="div2"/>
	<div style="width: 21px; height: 90px; position: absolute; background-color: rgb(81, 196, 94); id="div3"/>
	***
	<div style="width: 49px; height: 24px; position: absolute; background-color: rgb(0, 82, 99);  id="div20"/>
</div>

далее собираем все блоки в массив blocks

var mosaic = document.getElementById('mosaic');
var tags = mosaic.getElementsByTagName('div');
var blocks = [],
    packer = new xdRectPacker( 200,false ); // создаем пакер, true для горизонтальной ориентации
for(var i in tags){
	var div = tags[i];
	if( div.style )
		blocks.push(new xdRect(0,0,parseInt(div.style.width),parseInt(div.style.height)));
}

далее расставляем все блоки

packer.fit(blocks);
for(var i in packer.pack){
	var div = tags[i];
	var block = packer.pack[i];
	if(div.style){
		div.style.left = block.x;
		div.style.top = block.y;
		div.style.width = block.w;
		div.style.height = block.h;
	}
}

Внимание: может сильно тормозить при большом количестве блоков, оптимально для использования не больше 100 блоков

Подробнее об алгоритмах упаковки можно прочитать в статье javascript алгоритм двумерной упаковки или компактная расстановка прямоугольников

jQuery Plugin xdCloudTags

jquery плагин xdCloudTags

jQuery Plugin xdCheckbox

Плагин для стилизации checkbox подробнее о его работе можно прочитать на официальной странице http://xdan.ru/project/xdCheckbox/

jquery.xdRetroClock Плагин

Плагин ретро часов. Подробности на странице проекта jquery.xdRetroClock Плагин

Посмотреть пароль под звездочками

Удобная тузла для случаев когда у вас есть программа, скажем Total Commander и в нем вбит нужный вам пароль. Она поможет глянуть его. Просто запускаем ее, и кликаем  на нужном поле

Страница 3 из 4