Jodit — лучший WYSIWYG редактор

👁 0 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Отличный редактор WYSIWYG, написанный на чистом TypeScript без использования дополнительных библиотек. Это редактор файлов и редактор изображений. Позволяет также работать и в динамическом режиме, если вам нужно показать редактор в попап — диалоге. Пример с jsFiddle

Чат на PHP, Ajax, HTML, CSS

👁 296 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Разделим код проекта на несколько частей: база данных, серверная и клиентская.

Клиентская часть

Клиентский интерфейс взимодействия

<!DOCTYPE HTML>
    <html>
    <head>
        <title>PhpAjaxChat</title>
        <!-- У нас всё работает в UTF-8 -->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <!-- Загружаем стили для чата -->
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />

        <!-- Подключаем jQuery -->
        <script src="jquery.js"></script>
        <!-- Подключаем скрипт чата -->
        <script src="script.js"></script>
    </head>
    <body>
        <div style="padding: 100px;">
            <h1>Php Ajax Chat</h1>
            <!-- Вот в этих 2-х div-ах будут идти наши сообщения из чата -->
            <div class="chat r4">
                <div id="chat_area"><!-- Сюда мы будем добавлять новые сообщения --></div>
            </div>
            <form id="pac_form" action=""><!-- Наша форма с именем, сообщением и кнопкой для отправки -->
                <table style="width: 100%;">
                    <tr>
                        <td>Имя:</td>
                        <td>Сообщение:</td>
                        <td></td>
                    </tr>
                    <tr>
                        <!-- Поле ввода имени -->
                        <td><input type="text" id="pac_name" class="r4" value="Гость"></td>
    
                        <!-- Поле ввода сообщения -->
                        <td style="width: 80%;"><input type="text" id="pac_text" class="r4" value=""></td>
    
                        <!-- Кнопка "Отправить" -->
                        <td><input type="submit" value="Отправить"></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>

Скрипт работы на стороне клиента на JQuery/JavaScript

$(document).ready(function () {
                $("#pac_form").submit(Send); // вешаем на форму с именем и сообщением событие которое срабатывает когда нажата кнопка "Отправить" или "Enter"
                $("#pac_text").focus(); // по поле ввода сообщения ставим фокус
                setInterval("Load();", 2000); // создаём таймер который будет вызывать загрузку сообщений каждые 2 секунды (2000 миллисекунд)
            });

            // Функция для отправки сообщения
            function Send() {
                // Выполняем запрос к серверу с помощью jquery ajax: $.post(адрес, {параметры запроса}, функция которая вызывается по завершению запроса)
                $.post("ajax.php",
                        {
                            act: "send",  // указываем скрипту, что мы отправляем новое сообщение и его нужно записать
                            name: $("#pac_name").val(), // имя пользователя
                            text: $("#pac_text").val() //  сам текст сообщения
                        },
                        Load ); // по завершению отправки вызываем функцию загрузки новых сообщений Load()

                $("#pac_text").val(""); // очистим поле ввода сообщения
                $("#pac_text").focus(); // и поставим на него фокус

                return false; // очень важно из Send() вернуть false. Если этого не сделать то произойдёт отправка нашей формы, те страница перезагрузится
            }

            var last_message_id = 0; // номер последнего сообщения, что получил пользователь
            var load_in_process = false; // можем ли мы выполнять сейчас загрузку сообщений. Сначала стоит false, что значит - да, можем

            // Функция для загрузки сообщений
            function Load() {
                // Проверяем можем ли мы загружать сообщения. Это сделано для того, чтобы мы не начали загрузку заново, если старая загрузка ещё не закончилась.
                if(!load_in_process)
                {
                    load_in_process = true; // загрузка началась
                    // отсылаем запрос серверу, который вернёт нам javascript
                    $.post("ajax.php",
                            {
                                act: "load", // указываем на то что это загрузка сообщений
                                last: last_message_id, // передаём номер последнего сообщения который получил пользователь в прошлую загрузку
                                rand: (new Date()).getTime()
                            },
                            function (result) { // в эту функцию в качестве параметра передаётся javascript код, который мы должны выполнить
                                $(".chat").scrollTop($(".chat").get(0).scrollHeight); // прокручиваем сообщения вниз
                                load_in_process = false; // говорим что загрузка закончилась, можем теперь начать новую загрузку
                            });
                }
            }

Стили интерфейса

* {
    margin: 0;
    padding: 0;
    }

    body {
    font: normal normal normal 16px "Trebuchet MS", Arial, Times;
    color: #000000;
    }

    /* Важное свойство */
    .chat {
    height: 500px;
    overflow: auto; /* Это позволяет отображать полосу прокрутки */
    position: relative; /* Это позволяет съезжать тексту в слое, не растягивая страницу */
    text-align: left;
    border: solid #818181 1px;
    }

    .chat div {
    position: absolute; /* Страница остаётся того же размера */
    }

    .chat span {
    display: block;
    }

    input[type=text],textarea {
    width: 100%;
    font: normal normal normal 16px "Trebuchet MS", Arial, Times;
    border: solid #818181 1px;
    }

    /* Для CSS 3 */
    .r4 {
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }

База данных

В этой таблице у нас будут храниться сообщения чата:

  • id – номер сообщения, он должен быть помечен как AUTO_INCREMENT для того что бы для каждого сообщения создавался уникальный индекс
  • name – имя пользователя отправившего сообщение
  • text – само сообщение
CREATE TABLE `messages` (
    `id` int(5) NOT NULL AUTO_INCREMENT,
    `name` char(255) character SET utf8 NOT NULL,
    `text` text character SET utf8,
    PRIMARY KEY  (`id`)
    );

 

Серверная часть

<?php
// настройки для подключения к MySQl
$config = array('hostname' => 'localhost', 'username' => 'root', 'password' => '', 'dbname' => 'pacdb');

// подключаемся к MySQL, если не вышло то выходим
if (!mysql_connect($config['hostname'], $config['username'], $config['password'])) {
    exit();
}
// Выбираем базу данных, если не вышло то выходим
if (!mysql_select_db($config['dbname'])) {
    exit();
}
mysql_query("SET NAMES 'utf8'"); // говорим MySQl'у то что мы будем работать с UTF-8

Header("Cache-Control: no-cache, must-revalidate"); // говорим браузеру что-бы он не кешировал эту страницу
Header("Pragma: no-cache");

Header("Content-Type: text/javascript; charset=utf-8"); // говорим браузеру что это javascript в кодировке UTF-8

// проверяем есть ли переменная act (send или load), которая указываем нам что делать
if (isset($_POST['act'])) {
    // $_POST['act'] - существует
    switch ($_POST['act']) {
        case "send" : // если она равняется send, вызываем функцию Send()
            Send();
            break;
        case "load" : // если она равняется load, вызываем функцию Load()
            Load();
            break;
        default : // если ни тому и не другому  - выходим
            exit();
    }
}

// Функция выполняем сохранение сообщения в базе данных
function Send()
{
    // тут мы получили две переменные переданные нашим java-скриптом при помощи ajax
    // это:  $_POST['name'] - имя пользователя
    // и $_POST['text'] - сообщение

    $name = substr($_POST['name'], 0, 200); // обрезаем до 200 символов
    $name = htmlspecialchars($name); // заменяем опасные теги (<h1>,<br>, и прочие) на безопасные
    $name = mysql_real_escape_string($name); // функция экранирует все спец-символы в unescaped_string , вследствие чего, её можно безопасно использовать в mysql_query()

    $text = substr($_POST['text'], 0, 200); // обрезаем до 200 символов
    $text = htmlspecialchars($text); // заменяем опасные теги (<h1>,<br>, и прочие) на безопасные
    $text = mysql_real_escape_string($text); // функция экранирует все спец-символы в unescaped_string , вследствие чего, её можно безопасно использовать в mysql_query()

    // добавляем новую запись в таблицу messages
    mysql_query("INSERT INTO messages (name,text) VALUES ('" . $name . "', '" . $text . "')");
    }



    // функция выполняем загрузку сообщений из базы данных и отправку их пользователю через ajax виде java-скрипта
    function Load()
    {
    // тут мы получили переменную переданную нашим java-скриптом при помощи ajax
    // это:  $_POST['last'] - номер последнего сообщения которое загрузилось у пользователя

    $last_message_id = intval($_POST['last']); // возвращает целое значение переменной

    // выполняем запрос к базе данных для получения 10 сообщений последних сообщений с номером большим чем $last_message_id
    $query = mysql_query("SELECT * FROM messages WHERE ( id > $last_message_id ) ORDER BY id DESC LIMIT 10");

    // проверяем есть ли какие-нибудь новые сообщения
    if (mysql_num_rows($query) > 0) {
    // начинаем формировать javascript который мы передадим клиенту
    $js = 'var chat = $("#chat_area");'; // получаем "указатель" на div, в который мы добавим новые сообщения

    // следующий конструкцией мы получаем массив сообщений из нашего запроса
    $messages = array();
    while ($row = mysql_fetch_array($query)) {
    $messages[] = $row;
    }

    // записываем номер последнего сообщения
    // [0] - это вернёт нам первый элемент в массиве $messages, но так как мы выполнили запрос с параметром "DESC" (в обратном порядке),
    // то это получается номер последнего сообщения в базе данных
    $last_message_id = $messages[0]['id'];

    // переворачиваем массив (теперь он в правильном порядке)
    $messages = array_reverse($messages);

    // идём по всем элементам массива $messages
    foreach ($messages as $value) {
    // продолжаем формировать скрипт для отправки пользователю
    $js .= 'chat.append("<span>' . $value['name'] . '» ' . $value['text'] . '</span>");'; // добавить сообщние (<span>Имя » текст сообщения</span>) в наш div
    }

    $js .= "last_message_id = $last_message_id;"; // запишем номер последнего полученного сообщения, что бы в следующий раз начать загрузку с этого сообщения

    // отправляем полученный код пользователю, где он будет выполнен при помощи функции eval()
    echo $js;
    }
}

?>

Автоматическая прокрутка скролла элемента вниз

👁 99 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Допустим, есть такая задача, при котором в элементе есть некоторый список элементов, которые добавляется по мере необходимости и при этом. при каждом добавлении необходимо, чтобы список автоматически прокручивался вниз. Банальной задачей может быть механизм обмена сообщениями

Код HTML:

<ul id="list">
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 4</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
</ul>

Код CSS:

#list {
  height: 100pt;
  overflow-y: scroll;
}

Код JavaScript:

var elem = document.getElementById('list');
elem.scrollTop = elem.scrollHeight;

Ниже пример в песочнице

Заставка видео в виде фона

👁 96 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Для решения данной задачи есть свободный плагин Vide по ссылке на гитхаб. В данном примере показан способ задать заставку в виде фона средствами html, jQuery и css

Второй вариант использования — более продвинутый. Здесь мы рандомно и программно показываем список видеоклипов по отдельности

Динамическое перемещение навигации вверх при скроллинге

👁 75 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

В данном посте представлен пример использования метода для динамического перемещения навигации страницы или любого элемента в верхнюю при скроллинге страницы. Это бывает необходимо, когда при перелистывании страницы нужно, чтобы меню всегда оставалось на видном месте. В прочем, ниже представлен один из вариантов решения данной задачи

 

Некоторые снипеты PHP для работы со STEAM API

👁 596 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

В данном посте представлены некоторые куски кода для элементарной работы со STEAM API на языке PHP. В частности рассматриваются вопросы импорта и экспорта вещей из STEAM и обратно, а также процесс обмена.

Авторизация у себя на сайте через STEAM профиль

Данная процедура дает возможность авторизироваться пользователям на сайте через данные, зарегистрированные на STEAM. Для этого нам , в первую очередь нужно заполучить ApiKey и далее через PHP код отправить запрос на получение. Сгенерировать ApiKey это можно через страницу разработчиков STEAM. Выглядит все это так

Надо будет указать адрес сайта, где требуется авторизация и увас должны быть купленные суммы на опредленную сумму, чтобы STEAM понимал вашу серьезность с ними честно работать, иначе он вам не даст генерировать ключ.

При создании авторизации необходимо позаботиться о 2-х вещах:

  • нужна кнопка со ссылкой передачи по GET- запросу ключа данных для авторизации;
  • нужна страница, которая получит данные после возврата со STEAM для последующей обработки у нас на сайте.

Давайте сначала передадим данные пользователя через GET по ссылке по нажатию на кнопку авторизации через STEAM

   //Общие данные для авторизации
    $steam=array(
        'key'=>'AAA862C800301CC07DA5D3D6095E8DAA',
        'redirect'=>'http://test.websofter.ru/mygamelogin/'
    );
    // Создание ссылки для аутентификации
    $steamHref="https://steamcommunity.com/openid/login?openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.mode=checkid_setup&openid.return_to=".urldecode($steam["redirect"])."%3Fstate=steam&openid.realm=".urldecode($steam["redirect"])."&openid.ns.sreg=http%3A%2F%2Fopenid.net%2Fextensions%2Fsreg%2F1.1&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select"; 
    
    echo "<a href=".$steamHref.">";
        echo "Войти через STEAM";
    echo "</a>";

Теперь необходимо позаботиться о возвращенных данных авторизируемого пользователя. Мы будем перенаправлены на страницу, которая содержится в параметре массива $steam[«redirect»] и после редиректа все данные будут приняты через GET — ответ

    $userInfo = null;
    // Проверка, что данные не пусты
    if(isset($_GET["state"]) && $_GET["state"]=="steam") 
    { 
        // Вытаскиваем id юзера
        preg_match("/^http:\/\/steamcommunity\.com\/openid\/id\/(7[0-9]{15,25}+)$/", $_GET["openid_identity"], $key);
        $key=$key[1];
	$userInfo = json_decode(file_get_contents("http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=".$steam["key"]."&steamids=".$key)); // Получаем информацию о пользователе
	$userInfo=$userInfo->response->players[0]; // Переводим полученные данные в класс
    }
    //Выводим полученный массив с данными юзера, который хотел авторизироваться
    echo "<br/>id:".$userInfo->steamid."<br/>";
    print_r($userInfo);

 

Вывод вещей из инвентаря STEAM по ID игры

Допустим, есть задача вывести список вещей определенной игры из его инвентаря.  При просмотре ID игры добавляется в STEAM через http://steamcommunity.com/id/102177895/inventory/json/#gameid. Этот ID можно использовать для вывода данных в виде JSON — строки и обработав вывести весь инвентарь у себя на странице. Код ниже демонстрирует вывод вещей из CS:GO

$get_content = file_get_contents("http://steamcommunity.com/id/102177895/inventory/json/578080/2");
$data_image = (array) json_decode($get_content) -> rgInventory;
$count_content = count($data_image);
$data_content = (array) json_decode($get_content, TRUE);
echo "Total items: $count_content <br><br>";
for ($i=0; $i<$count_content; $i++) {
    $element_name = array_shift($data_content[rgInventory]);
    $name_item = "$element_name[classid]_$element_name[instanceid]";
    echo "<img src='http://steamcommunity-a.akamaihd.net/economy/image/";
    print_r($data_content['rgDescriptions'][$name_item]['icon_url']);
    echo "' style='width:90px; height:90px; float:left; margin: 5px; outline: 1px solid black;'>";
}

 

 

Клиентская часть организации игры «Рулетка»

👁 106 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Это краткое описание того, как разработать интерфейс игры «Рулетка» или Programming Roulette Game Principle. В посте представлена принципиальная схема и код рабочей программы.

Схема работы

Для лучшего понимания хорошо бы рассмотреть схему того, что мы хотим проектировать

Опишем все параметры, которые участвуют в процессе:

  • ni — исходный порядковый номер выигранной карты;
  • m — число карт в видимой части галереи;
  • gW — длина галереи;
  • W — длина галереи, вычисленная исходя из помещающихся колод в видимой части;
  • xW — длина колоды карт до выигранной карты;
  • dW — разница между длиной до выигранной и длиной галереи;
  • alignLeft — искомый параметр для перемещения, чтобы выигранная карта встала по центру.

Рулетка у нас будет иметь один входной параметр и один выходной параметр, т.е., выходной зависит от входного:

  • ni — номер выигранной карты в списке;
  • alignLeft — это то, насколько надо передвинуть весь список, чтобы выигранная карта оказалась в центре рулетки.

Примечание. ni — обычно генерируется на сервере и передается всем пользователям через сокет-сообщение. Генерацию получают случайными числами из всего списка. К примеру, есть массив всех карт и мы вычисляем общее количество карт в массиве и генерируем случайное число от 0 до количества карт. Серверную часть мы не рассматриваем, поэтому ограничимся этим кратким описанием.

alignLeft — это величина css — параметра align-left первой карты. По сути дела мы определяем с серверной части номер выигранной карты из всего списка и в клиентской части при помощи JS мы визуально показываем, что именно карта и выиграна, хотя, в необходимости такой бы не было, можно было бы просто номер выигранной карты показать, но тогда смысл назвать весь этот процесс игры «Рулеткой» потерялся бы.

Исходный код рулетки

Код HTML

<!DOCTYPE html>
<title>Roulette</title>
<body>
  <div id="container">
    <div class="cardList">
      <div class="card">1</div>
      <div class="card">14</div>
      <div class="card">2</div>
      <div class="card">13</div>
      <div class="card">3</div>
      <div class="card">12</div>
      <div class="card">4</div>
      <div class="card">0</div>
      <div class="card">11</div>
      <div class="card">5</div>
      <div class="card">10</div>
      <div class="card">6</div>
      <div class="card">9</div>
      <div class="card">7</div>
      <div class="card">8</div>
      <div class="card">1</div>
      <div class="card">14</div>
      <div class="card">2</div>
      <div class="card">13</div>
      <div class="card">3</div>
      <div class="card">12</div>
      <div class="card">4</div>
      <div class="card">0</div>
      <div class="card">11</div>
      <div class="card">5</div>
      <div class="card winner">10</div>
      <div class="card">6</div>
      <div class="card">9</div>
      <div class="card">7</div>
      <div class="card">8</div>
    </div>
    <div class="bts">
      <span>Balance:</span>
      <span>*</span>
      <button id="spin" class="cooldown">Spin</button>
    </div>
    <span id="timer"></span>
  </div>
</body>

Код JavaScript

var cardList = $('.cardList');
var cards = $('.card');
var cardWidth = $(cards).width();
var cardListWidth = $(cardList).width();
var winnerCard = ".winner"; //Класс, выигранной карты
var winner = null;
var speed = 3000;
var winnerNumber = null;
/**Вычислим номер с эти классом или можно без класса сразу указать номер*/
$.each(cards, function(i, value) {
  var isWinner = $(this).hasClass("winner");
  if (isWinner) {
    winner = $(this);
    winnerNumber = (i + 1);
  }
});
console.log("winNumber:" + winnerNumber + " winner" + winner.html());
//ni - порядковый номер выигранной карты
//m - число карт в видимой части галереи
//gW - длина галереи
//xW - длина колоды карт до выигранной карты
//dW - разница между длиной до выигранной и длиной галереи
var ni = winnerNumber;
//
var m = cardListWidth / cardWidth; //Math.floor(cardListWidth/cardWidth);
var gW = m * cardWidth; //
var sW = gW / 2;
var sw = cardWidth / 2
var xW = ni * cardWidth;
var dW = xW - gW + sW + sw; //
//
var leftAlign = dW;

$('#spin').click(function() {
  cards.first().css('margin-left', 0);
  cards.first().animate({
    "margin-left": -leftAlign + "px"
  }, speed);
  return false;
});

Код CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.card:nth-child(odd) {
  background: red;
}

.card:nth-child(even) {
  background: blue;
}

.cardList {
  height: 100px;
  width: 100%;
  position: relative;
  margin: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  text-align: center;
  height: 100px;
  width: 100px;
  line-height: 100px;
  font-family: monospace;
  font-size: 2em;
  color: #fff;
  margin: 0 auto;
}

#container {
  text-align: center;
  background: #f7f7f7;
}

.cardcontainer {}

.cardList::before,
.cardList::after {
  content: '';
  display: block;
  z-index: 100;
  width: 0px;
  height: 0px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.cardList::before {
  position: absolute;
  top: 0px;
  left: 50%;
  border-top: 12px solid #c3c3c3;
}

.cardList::after {
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-bottom: 12px solid #c3c3c3;
}

.cardList {
  margin: 0 auto;
}

button {
  margin: 10px;
  padding: 8px;
  font-family: monospace;
}

В коде мы указываем для выигришной карты класс winner и дальше в списке мы ищем порядковый номер карты с этим классом, но можно было бы указать сразу номер — тут как программу составить. В результате работы данного кода, при нажатии на кнопку рулетка переместится так, что карта, помеченная, как побежденная будет в центре между стрелками, что покажет пользователю, что она выиграла. Результат показан ниже на картинке

 

Полностью код можно скачать из репозитория проекта на GitHub.