bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
bellord
2021-10-30 17:20:26 +03:00
parent 1a29c16bcd
commit cd65398fb0
18 changed files with 855 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/UserActionManager.php
-41
View File
@@ -1,41 +0,0 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script>
kit.ready(['UserActionManager'], function () {
var m1 = new kit.UserActionManager();
m1.setAction('popover');
});
</script>
<style>
.hide {
display: none;
}
</style>
<div class="kit-wrapper">
<div id="object1" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">1</div>
<div id="object2" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">2</div>
<div id="object3" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">3</div>
</div>
<?
?>
tests/align.php
+125
View File
@@ -0,0 +1,125 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<style>
.hide {
display: none;
}
.main-body {
display: flex;
width: 250px;
height: 250px;
justify-content: center;
align-items: center;
float: left;
}
.main-list {
width: 100px;
height: 100px;
background-color: #ffc400;
position: relative;
}
.main-item {
width: 50px;
height: 50px;
color: whitesmoke;
font-size: 10px;
line-height: 1.2em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
<div class="kit-wrapper">
<div class="main-body">
<div id="object-main" class="main-list">
<div id="object1" class="main-item" style="background-color: green;">'left', 'top', 'left', 'top'</div>
<div id="object2" class="main-item" style="background-color: #0a51ae;">'right', 'top', 'right', 'top'</div>
<div id="object3" class="main-item" style="background-color: #c23a3a;">'right', 'bottom', 'right', 'bottom'</div>
<div id="object4" class="main-item" style="background-color: rebeccapurple;">'left', 'bottom', 'left', 'bottom'</div>
</div>
</div>
<div class="main-body">
<div id="object-main2" class="main-list">
<div id="object5" class="main-item" style="background-color: green;">'left', 'top', 'right', 'top'</div>
<div id="object6" class="main-item" style="background-color: #0a51ae;">'right', 'top', 'right', 'bottom'</div>
<div id="object7" class="main-item" style="background-color: #c23a3a;">'right', 'bottom', 'left', 'bottom'</div>
<div id="object8" class="main-item" style="background-color: rebeccapurple;">'left', 'bottom', 'left', 'top'</div>
</div>
</div>
<div class="main-body">
<div id="object-main3" class="main-list">
<div id="object9" class="main-item" style="background-color: green;">'left', 'top', 'center', 'center'</div>
<div id="object10" class="main-item" style="background-color: #0a51ae;">'right', 'top', 'center', 'center'</div>
<div id="object11" class="main-item" style="background-color: #c23a3a;">'right', 'bottom', 'center', 'center'</div>
<div id="object12" class="main-item" style="background-color: rebeccapurple;">'left', 'bottom', 'center', 'center'</div>
</div>
</div>
<div class="main-body">
<div id="object-main4" class="main-list">
<div id="object13" class="main-item" style="background-color: green;">'center', 'center', 'left', 'top'</div>
<div id="object14" class="main-item" style="background-color: #0a51ae;">'center', 'center', 'right', 'top'</div>
<div id="object15" class="main-item" style="background-color: #c23a3a;">'center', 'center', 'right', 'bottom'</div>
<div id="object16" class="main-item" style="background-color: rebeccapurple;">'center', 'center', 'left', 'bottom'</div>
</div>
</div>
</div>
<script>
kit.ready(['align'], function () {
var align1 = new kit.align.Class('#object1', '#object-main');
align1.set('left', 'top', 'left', 'top');
var align2 = new kit.align.Class('#object2', '#object-main');
align2.set('right', 'top', 'right', 'top');
var align3 = new kit.align.Class('#object3', '#object-main');
align3.set('right', 'bottom', 'right', 'bottom');
var align4 = new kit.align.Class('#object4', '#object-main');
align4.set('left', 'bottom', 'left', 'bottom');
var align5 = new kit.align.Class('#object5', '#object-main2');
align5.set('left', 'top', 'right', 'top');
var align6 = new kit.align.Class('#object6', '#object-main2');
align6.set('right', 'top', 'right', 'bottom');
var align7 = new kit.align.Class('#object7', '#object-main2');
align7.set('right', 'bottom', 'left', 'bottom');
var align8 = new kit.align.Class('#object8', '#object-main2');
align8.set('left', 'bottom', 'left', 'top');
var align9 = new kit.align.Class('#object9', '#object-main3');
align9.set('left', 'top', 'center', 'center');
var align10 = new kit.align.Class('#object10', '#object-main3');
align10.set('right', 'top', 'center', 'center');
var align11 = new kit.align.Class('#object11', '#object-main3');
align11.set('right', 'bottom', 'center', 'center');
var align12 = new kit.align.Class('#object12', '#object-main3');
align12.set('left', 'bottom', 'center', 'center');
var align13 = new kit.align.Class('#object13', '#object-main4');
align13.offset = [5, 5];
align13.set('center', 'center', 'left', 'top');
var align14 = new kit.align.Class('#object14', '#object-main4');
align14.offset = [5, 5];
align14.set('center', 'center', 'right', 'top');
var align15 = new kit.align.Class('#object15', '#object-main4');
align15.offset = [5, 5];
align15.set('center', 'center', 'right', 'bottom');
var align16 = new kit.align.Class('#object16', '#object-main4');
align16.offset = [5, 5];
align16.set('center', 'center', 'left', 'bottom');
});
</script>
tests/index.php
+3 -2
View File
@@ -1,12 +1,13 @@
<div style="display: flex; flex-direction: column; align-items: center;">
<a href="cheatsheet.php"><b>cheatsheet</b></a>
<a href="menu.php">Menu</a>
<a href="align.php">align</a>
<a href="templates.svg.php">templates.svg</a>
<a href="flex-kit.php">flex-kit</a>
<a href="cheatsheet.php">cheatsheet</a>
<a href="card/block.php">card/block</a>
<a href="kit.Collection.php">kit.Collection</a>
<a href="UserActionManager.php">UserActionManager</a>
<a href="userAction.php">userAction</a>
<a href="templater.php">templater</a>
</div>
tests/userAction.php
+77
View File
@@ -0,0 +1,77 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script>
kit.ready(['userAction', 'animations'], function () {
var m1 = new kit.userAction.Popover('#object1', '#object2');
m1.run();
var m2 = new kit.userAction.Popover('#object2', '#object3');
m2.run();
var m3 = new kit.userAction.Hint('#object4', '#object5');
m3.run();
m3.viewer.animShowClass = kit.animations.scaleIn;
var m4 = new kit.userAction.Hint('#object5', '#object6');
m4.run();
var m5 = new kit.userAction.Hint('#object7', '#object8');
m5.viewer.animShowClass = kit.animations.scaleIn;
m5.viewer.animHideClass = kit.animations.scaleOut;
m5.run();
var m6 = new kit.userAction.Hint('#object8', '#object9');
m6.run();
m6.viewer.animShowClass = kit.animations.scaleIn;
m6.viewer.animHideClass = kit.animations.scaleOut;
});
</script>
<style>
.hide {
display: none;
}
</style>
<div class="kit-wrapper">
<div style="padding: 40px;">
<div id="object1" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">1</div>
<div id="object2" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">
2
<div id="object3" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">3</div>
</div>
</div>
<div style="padding: 40px;">
<div id="object4" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">4</div>
<div id="object5" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">5</div>
<div id="object6" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">6</div>
</div>
<div style="padding: 40px;" id="box3">
<div id="object7" style="width: 300px; height: 50px; background-color: #eaeaea; border: 1px solid;">
<div>7</div>
<div id="object8" style="width: 300px; height: 50px; background-color: #3860ff; border: 1px solid; display: none" class="hide">
<div>8</div>
<div id="object9" style="width: 300px; height: 50px; background-color: #ff1d34; border: 1px solid; display: none" class="hide">9</div>
</div>
</div>
</div>
</div>
<?
?>