Merge pull request #11 from codex-team/fast-position-feature

Fast position feature
codex-team · Dec 13, 2016 · 35ab149 · 35ab149
2 parents f3a6470 + a93a2a2
commit 35ab149
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -4,13 +4,13 @@ CodeX.Special сделает информацию на вашем сайте б
 
 ## Инструкция
 
-Сохраните и подключите скрипт
+Сохраните файлы модуля и подключите js-скрипт.
 
 ```html
-<script src="/public/extensions/codex.special/codex-special.v.1.0.js"></script>
+<script src="/public/extensions/codex.special/codex-special.v.1.0.2.min.js"></script>
 ```
 
-Для того, чтобы запустить модуль, достаточно вызвать метод init
+Для того, чтобы запустить модуль, достаточно вызвать метод `init()`. Файл стилей будут подгружен автоматически.
 
 ```js
 <script type="text/javascript">
@@ -24,11 +24,23 @@ CodeX.Special сделает информацию на вашем сайте б
 
 <img width="515" alt="screen shot 2016-10-20 at 02 38 43" src="https://cloud.githubusercontent.com/assets/15259299/19541365/5f59894e-966e-11e6-937b-216984380db3.png">
 
-## Дополнительные параметры запуска
+## Дополнительные параметры
 
 ### Положение панели на странице
 
-По умолчанию скрипт создает панель инструментов в верхней части экрана. Вы можете задать собственное положение этой панели. Для этого передайте при инициализации в параметре `blockId` идентификатор обертки, в которую нужно вставить панель 
+По умолчанию скрипт создает панель, которая привязана к верхней правой границе экрана.
+
+Угол, в котором будет располагаться панель управления модулем, можно указать в параметре `position`.
+
+Возможные значения: `top-left`, `bottom-right`, `bottom-left`, `top-right` (устанавливается по-умолчанию).
+```js
+codexSpecial.init({
+    position : 'bottom-right',
+});
+```
+
+
+Вы можете определить положение панели, указав в параметре `blockId` идентификатор обертки.
 
 Например, чтобы встроить панель в блок с идентификатором `#panelHolder`:
 ```js
@@ -37,7 +49,7 @@ codexSpecial.init({
 });
 ```
 
-<img width="578" alt="screen shot 2016-10-20 at 03 15 52" src="https://cloud.githubusercontent.com/assets/15259299/19542000/908185b2-9673-11e6-8347-4714af3c8d17.png">
+<img width="581" alt="screen shot 2016-12-13 at 18 51 13" src="https://cloud.githubusercontent.com/assets/15259299/21147396/e1ed1548-c165-11e6-8707-341676ee11c6.png">
 
 ### Мультиязычность
 

diff --git a/codex-special.v.1.0.1.min.js b/codex-special.v.1.0.1.min.js
diff --git a/codex-special.v.1.0.1.css → codex-special.v.1.0.2.css b/codex-special.v.1.0.1.css → codex-special.v.1.0.2.css
@@ -4,7 +4,7 @@
 * @author Codex Team — ifmo.su
 *   Vitaly Guryn    https://github.com/talyguryn
 *   Savchenko Petr  https://github.com/neSpecc
-* @version 1.0
+* @version 1.0.2
 */
 
 
@@ -39,25 +39,44 @@ html body .codex-special__toolbar{
 
 .codex-special__toolbar_excluded {
     position: fixed;
-    top: 0;
-    right: 3%;
     width: 300px;
     border: 1px solid #F2F4F8;
-    border-top: 0;
-    border-radius: 0 0 3px 3px;
 }
+    .codex-special__toolbar_top {
+        top: 0;
+        bottom: auto;
+        border-radius: 0 0 3px 3px;
+        border-top: 0;
+    }
 
-    .codex-special__toolbar_text {
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 24px;
-        cursor: pointer;
-        border-radius: 5px;
+    .codex-special__toolbar_bottom {
+        top: auto;
+        bottom: 0;
+        border-radius: 3px 3px 0 0;
+        border-bottom: 0;
+    }
+
+    .codex-special__toolbar_left {
+        left: 3%;
+        right: auto;
+    }
+
+    .codex-special__toolbar_right {
+        right: 3%;
+        left: auto;
+    }
+
+.codex-special__toolbar_text {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 24px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+    .codex-special__toolbar_text:hover
+    {
+        color: #3d82c1;
     }
-        .codex-special__toolbar_text:hover
-        {
-            color: #3d82c1;
-        }
 
     .codex-special__toolbar_icon {
         display: inline-block;
@@ -72,28 +91,29 @@ html body .codex-special__toolbar{
             font-family: 'codex-special';
         }
 
-    .codex-special__circle {
-        display: inline-block;
-        width: 7px;
-        height: 7px;
-        border: 7px solid;
-        vertical-align: middle;
-        box-sizing: content-box;
-        border-radius: 50%;
-        cursor: pointer;
-        float: right;
+.codex-special__circle {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border: 7px solid;
+    vertical-align: middle;
+    box-sizing: content-box;
+    border-radius: 50%;
+    cursor: pointer;
+    float: right;
+}
+    .codex-special__circle:not(:first-of-type) {
+        margin-right: 5px;
     }
-        .codex-special__circle:hover {
-            width: 11px;
-            height: 11px;
-            border-width: 5px;
-        }
-        .codex-special__circle:not(:first-of-type) {
-            margin-right: 5px;
-        }
-
-    .codex-special__circle_disabled {
+
+    .codex-special__circle:hover {
+        width: 11px;
+        height: 11px;
+        border-width: 5px;
     }
+
+    .codex-special__circle_disabled {}
+
     .codex-special__circle_enabled {
         border-radius: 10%;
     }

diff --git a/codex-special.v.1.0.1.js → codex-special.v.1.0.2.js b/codex-special.v.1.0.1.js → codex-special.v.1.0.2.js
@@ -4,7 +4,7 @@
 * @author Codex Team — ifmo.su
 *   Vitaly Guryn    https://github.com/talyguryn
 *   Savchenko Petr  https://github.com/neSpecc
-* @version 1.0
+* @version 1.0.2
 */
 var codexSpecial = (function() {
 
@@ -44,7 +44,7 @@ var codexSpecial = (function() {
     /**
     * Required stylesheets URL
     */
-    var CSS_FILE_PATH = 'codex-special.v.1.0.1.css';
+    var CSS_FILE_PATH = 'codex-special.v.1.0.2.min.css';
 
     /**
     * Path to codex-special
@@ -77,7 +77,8 @@ var codexSpecial = (function() {
     var initialSettings = {
 
         blockId : null,
-        lang : 'ru'
+        lang : 'ru',
+        position : 'top-right'
 
     };
 
@@ -247,6 +248,21 @@ var codexSpecial = (function() {
 
         nodes.toolbar.classList.add('codex-special__toolbar_excluded');
 
+        if (initialSettings.position) {
+
+            switch (initialSettings.position) {
+                // 'top-right' is default
+                case 'top-left':
+                    nodes.toolbar.classList.add('codex-special__toolbar_top', 'codex-special__toolbar_left'); break;
+                case 'bottom-right':
+                    nodes.toolbar.classList.add('codex-special__toolbar_bottom', 'codex-special__toolbar_right'); break;
+                case 'bottom-left':
+                    nodes.toolbar.classList.add('codex-special__toolbar_bottom', 'codex-special__toolbar_left'); break;
+                default:
+                    nodes.toolbar.classList.add('codex-special__toolbar_top', 'codex-special__toolbar_right'); break;
+            }
+        }
+
         document.body.appendChild(nodes.toolbar);
 
     }