Отдельные настройки для каждого пользователя, изменяемые им через javascript (jQuery)

Если необходимо внутри javascript-кода использовать свою собственную переменную, значение которой должно быть уникально для каждого пользователя, а так же изменять эту переменную из того же javascript-кода, то эта статья то, что вам надо :)

Use Case

Модуль отображения фоток на красивом бекграунде (аналог lightbox и ему подобных). При этом пользователь должен иметь возможность выбора цвета и прозрачности бекграунда (затемнения)
Причем пользователь должен не просто залазить в свой профайл чтобы изменить свой цвет, а должны быть небольшие удобные иконки предустановленных наоров цвета, при нажатии на которые javascript'ом сохраняется для текущего пользователя определенный цвет бекграунда и прозрачность.

Как это я реализовал:

Сначала включил модуль Profile

Затем добавил файл gallery_vkontakte.install

function gallery_vkontakte_install() {
  db_query("INSERT INTO {profile_fields} (title, name, explanation, category, type, weight, required, register, visibility, autocomplete, options, page) VALUES ('%s', '%s', '%s', '%s', '%s', %d, %d, %d, %d, %d, '%s', '%s')", 'Цвет затемнения', 'profile_gallery_vkontakte_layout_color_fid ', 'Цвет заднего фона, который появляется при всплывании окна с фотографией', 'Gallery vkontakte', 'textfield' , 0, 0, 0, 2, 0, '', '');  
  variable_set('gallery_vkontakte_layout_color_fid',db_last_insert_id('profile_fields', 'fid'));
  db_query("INSERT INTO {profile_fields} (title, name, explanation, category, type, weight, required, register, visibility, autocomplete, options, page) VALUES ('%s', '%s', '%s', '%s', '%s', %d, %d, %d, %d, %d, '%s', '%s')", 'Прозрачность затемнения', 'profile_gallery_vkontakte_layout_opacity_fid', 'Прозрачность заднего фона, который появляется при всплывании окна с фотографией', 'Gallery vkontakte', 'textfield' , 0, 0, 0, 2, 0, '', '');  
  variable_set('gallery_vkontakte_layout_opacity_fid',db_last_insert_id('profile_fields', 'fid'));
  drupal_set_message(sprintf("Some profile fields was added: %d and %d", variable_get('gallery_vkontakte_layout_color_fid', 0), variable_get('gallery_vkontakte_layout_opacity_fid', 0)));
}
 
/**
 * Implementaton of hook_uninstall
 */
function gallery_vkontakte_uninstall() {
  db_query("DELETE FROM {profile_fields} WHERE fid = %d", variable_get('gallery_vkontakte_layout_color_fid', 0));  
  db_query("DELETE FROM {profile_fields} WHERE fid = %d", variable_get('gallery_vkontakte_layout_opacity_fid', 0));
  drupal_set_message(sprintf("Some profile fields was deleted: %d and %d", variable_get('gallery_vkontakte_layout_color_fid', 0), variable_get('gallery_vkontakte_layout_opacity_fid', 0)));
  variable_del('gallery_vkontakte_layout_color_fid	');
  variable_del('gallery_vkontakte_layout_opacity_fid');
}

Этот код делает следущее: добавляет два пользовательских поля Цвет затемнения и Прозрачность затемнения , используя таблицы модуля Profile.

Теперь, при включении нашего самописного модуля gallery_vkontakte в профиль каждого пользователя добавятся эти два поля, а так же у нас теперь есть две статичные переменные - fid каждого из этих полей.

Дальше, используем хук инит для подключения javascript-настроек в каждую страницу:

function gallery_vkontakte_init() {
      $my_settings = array(
        'gallery_vkontakte_overlay_color' => gallery_vkontakte_load_users_variable(variable_get('gallery_vkontakte_layout_color_fid', 0), '000'),
        'gallery_vkontakte_overlay_opacity' => gallery_vkontakte_load_users_variable(variable_get('gallery_vkontakte_layout_opacity_fid', 0), '0.4'),
        'gallery_vkontakte_overlay_color_fid' => variable_get('gallery_vkontakte_layout_color_fid', 0),
        'gallery_vkontakte_overlay_opacity_fid' => variable_get('gallery_vkontakte_layout_opacity_fid', 0),
      );
  drupal_add_js(array('gallery_vkontakte' => $my_settings), 'setting');
  drupal_add_js(drupal_get_path('module','gallery_vkontakte') . '/gallery_vkontakte.js');
}

Теперь мы можем использовать эти переменные в любом месте js-кода. Смотрим то, что я написал внутри файла gallery_vkontakte.js:

if (Drupal.jsEnabled) {
  $(document).ready(function () {
		//Получаем значения для текущего пользователя
		GalleryPaging.overlayOpacity = Drupal.settings.gallery_vkontakte.gallery_vkontakte_overlay_opacity;
		GalleryPaging.overlayColor = Drupal.settings.gallery_vkontakte.gallery_vkontakte_overlay_color;
		GalleryPaging.update_layout_color_opacity(); //Эта функция просто обновляет бекграунд и прозрачность , используя новые значения переменных.
  });
}

Все, с созданием пользовательских полей и их использованием в js-файле разобрались. Теперь вторая часть - нам надо их изменять опять же из javascript-кода.

Добавляем в наш модуль хук _menu, в котором определяем callback адрес:

function gallery_vkontakte_menu()
{
  $items = array();
 
  $items['gallery_vkontakte/change_users_variable'] = array(
    'title' => 'Changing setting , related on users choice',
    'page callback' => 'gallery_vkontakte_save_users_variable',
    'page arguments' => array(2,3),
    'access arguments' => array('user_is_logged_in'),
	'type' => MENU_CALLBACK,
   );
 
  return $items; 
} 

И обработчик этого:

function gallery_vkontakte_save_users_variable($variable_fid, $variable_value)
{
	global $user;
	$db_res = db_query("SELECT * FROM {profile_fields} WHERE fid = %d", $variable_fid);
	if (db_affected_rows($db_res)>0)
	{
		db_query("DELETE FROM {profile_values} WHERE fid = %d AND uid = %d", $variable_fid, $user->uid);
		db_query("INSERT INTO {profile_values} (fid, uid, value) VALUES (%d, %d, '%s')", $variable_fid, $user->uid, $variable_value);
		return $variable_fid . ' with vaule ' . $variable_value . ' succesfully saved';
	}
	else return "ERROR - There is no variable with this name";
}

Внутри этого обработчика мы видим, что он просто сохраняет значение одного поля (id которого передали в аргументах) для текущего пользователя.

Т.е. если вызвать http://localhost/gallery_vkontakte/change_users_variable/10/f00 (при условии что ид поля = 10, что скорее всего у вас не так), то поле изменит свое значение на f00

Дальше совсем просто: в нужном месте javascript-кода вызываете метод $.get :

$.get(Drupal.settings.basePath + 'gallery_vkontakte/change_users_variable/' + Drupal.settings.gallery_vkontakte.gallery_vkontakte_overlay_opacity_fid + '/0.8');

Этот код просто вызывает определенный нами callback, и выполняет javascript дальше, не задерживаясь. Этот код можно прописать , например, в обработчки клика на какую-нибудь ссылку или иконку.

Собственно, все. Так же любой пользователь может зайти в свой профиль, например http://localhost/user/1/edit/Gallery%20vkontakte и изменить настройки для себя на какие-нибудь индивидуальные значения.

Удачи!

Drupal 6

Комментарии

Добавить комментарий