Page Builder: PageLayer – Drag and Drop website builder - Version 1.0.8

Version Description

(March 24, 2020) = * [Premium-Feature] We have added Scrolling Effects and Mouse Effects feature in Pagelayer. You can now set an animation to an element on mouse movement or on scroll. * [Feature] We have now added 300+ sections in Pagelayer. You can 1-click add sections to a post / page. We have also added many pages so that you can build your website with just a few clicks. * [Feature] Added "Import Theme" option in Pagelayer. A theme needs to be a pagelayer exported theme so that anyone can import the theme. * [Feature] Most text fields are now editable from the Editor window itself without the left bar text fields. This enhances the editing experience. * [Improvement] We have added a pre-loader to the Pagelayer editor. * [Improvement] The Left-bar UI has been improved. Much more UI changes are coming ! * [Improvement] The Add Section wizard, has been further improved. The speed of image loading has also improved and we will improve the sections further. * [Improvement] Added more options for popup builder. Advanced options are coming soon. * [Task] Added the option to de-select the options from multi-select property type. * [Task] The Pagelayer Editor left top bar UI is also improved. * [Task] We are re-building our docs and also making some video tutorials for our users. * [Bug-Fix] In certain cases, additional whitespace was added to the attributes. This is fixed. * [Bug-Fix] In certain cases, widgets were broken when we use double code in text. This is fixed. * [Bug-Fix] The image portfolio icon was missing. This is fixed.

Download this release

Release Info

Developer pagelayer
Plugin Icon 128x128 Page Builder: PageLayer – Drag and Drop website builder
Version 1.0.8
Comparing to
See all releases

Code changes from version 1.0.7 to 1.0.8

css/pagelayer-editor.css CHANGED
@@ -626,6 +626,19 @@ margin-bottom: 0px;
626
position: relative;
627
}
628
629
.pagelayer-dark .pagelayer-form-item{
630
border-bottom: 1px dashed #686870;
631
}
@@ -783,6 +796,10 @@ line-height: 26px;
783
width: 100%;
784
}
785
786
.pagelayer-dark .pagelayer-elpd-body input,
787
.pagelayer-dark .pagelayer-elpd-body textarea,
788
.pagelayer-dark .pagelayer-elpd-body select,
@@ -813,7 +830,7 @@ font-weight: unset;
813
font-size: 12px;
814
padding: 12px 10px;
815
min-height: unset;
816
- background-color: #3e8ef7;
817
color: #fff;
818
transition: all 0.3s;
819
border-radius: unset;
@@ -823,7 +840,7 @@ cursor:pointer;
823
}
824
825
.pagelayer-elp-button:hover{
826
- background-color: #3e8ef7bf;
827
border-color: #00A0D2;
828
}
829
@@ -832,9 +849,46 @@ padding:7px;
832
width:90%;
833
margin:5px auto;
834
height:150px;
835
- border: 1px solid #d5dadf;
836
position:relative;
837
- border: 1px solid #3e8ef7;
838
}
839
840
.pagelayer-elp-image{
@@ -850,7 +904,7 @@ cursor: pointer;
850
position: absolute;
851
top: 4px;
852
right: 4px;
853
- background-color: #3e8ef7;
854
padding: 5px 9px;
855
max-width: 28px;
856
max-height: 28px;
@@ -953,6 +1007,24 @@ display:none;
953
.picker_wrapper {
954
top: 13px !important;
955
right: -15px !important;
956
}
957
958
.pagelayer-elp-color-span{
@@ -1098,7 +1170,7 @@ padding: 5px;
1098
height: auto;
1099
box-sizing: border-box;
1100
display: none;
1101
- width: 70%;
1102
border-radius: 2px;
1103
margin: 0 0 0 auto;
1104
top: 40px;
@@ -1218,7 +1290,7 @@ padding: 7px 0 0;
1218
1219
input.pagelayer-elp-slider{
1220
-webkit-appearance: none;
1221
- width: 75%;
1222
height: 10px;
1223
border-radius: 5px;
1224
background-color: #d3d3d3 !important;
@@ -1263,15 +1335,22 @@ cursor: pointer;
1263
1264
.pagelayer-elp-slider-value{
1265
width: 23% !important;
1266
- margin-left: 2%;
1267
- margin-top: -10px;
1268
- border-radius: 4px;
1269
}
1270
1271
.pagelayer-elp-datetime-div{
1272
position: relative;
1273
}
1274
1275
.pagelayer-elp-fa-calendar{
1276
position: absolute;
1277
height: 40px;
@@ -1338,7 +1417,7 @@ position: relative;
1338
}
1339
1340
.pagelayer-elp-input-icon input{
1341
- width: 83%;
1342
}
1343
1344
.pagelayer-elp-input-icon i.pli{
@@ -1350,6 +1429,7 @@ border-left:0px;
1350
cursor: pointer;
1351
background:#FFF;
1352
line-height:26px !important;
1353
}
1354
1355
.pagelayer-dark .pagelayer-elp-input-icon i.pli{
@@ -1357,16 +1437,26 @@ background: #e0e0e0;
1357
}
1358
1359
.pagelayer-elp-padding-div i.pli{
1360
- padding:6px 11px;
1361
border: 1px solid #d1d1d1;
1362
- border-left:0px;
1363
cursor: pointer;
1364
background: #FFF;
1365
vertical-align:top;
1366
}
1367
1368
.pagelayer-elp-padding-linked{
1369
- background: #CCC !important;
1370
}
1371
1372
.pagelayer-dark .pagelayer-elp-padding-linked{
@@ -1374,22 +1464,32 @@ background: #e0e0e0 !important;
1374
}
1375
1376
.pagelayer-elp-dimension-div i.pli{
1377
- padding:6px 11px;
1378
border: 1px solid #d1d1d1;
1379
- border-left:0px;
1380
cursor: pointer;
1381
background: #FFF;
1382
vertical-align:top;
1383
}
1384
1385
.pagelayer-elp-dimension-linked{
1386
- background: #CCC !important;
1387
}
1388
1389
/* Pagelayer Multi Select Property */
1390
.pagelayer-elp-multiselect{
1391
min-height: 25px;
1392
- width:96%;
1393
}
1394
1395
.pagelayer-elp-multiselect-ul{
@@ -1403,7 +1503,7 @@ border-top:none;
1403
position:absolute;
1404
background:rgb(255, 255, 255);
1405
z-index:1;
1406
- width:100%;
1407
}
1408
1409
.pagelayer-dark .pagelayer-elp-multiselect-ul{
@@ -1415,7 +1515,7 @@ box-shadow: 0 0.5rem 1rem #00000026;
1415
1416
.pagelayer-elp-multiselect-option{
1417
font-size:13px;
1418
- padding:3px 8px;
1419
cursor:pointer;
1420
}
1421
@@ -1424,7 +1524,13 @@ color: #777;
1424
}
1425
1426
.pagelayer-elp-multiselect-option[selected="selected"]{
1427
- background: #cccccc;
1428
}
1429
1430
.pagelayer-dark .pagelayer-elp-multiselect-option[selected="selected"]{
@@ -1436,9 +1542,10 @@ color: #fff;
1436
padding: 3px 5px;
1437
border-radius: 5px;
1438
margin: 2px;
1439
- background: #cccccc;
1440
line-height: 13px;
1441
font-size: 13px;
1442
}
1443
1444
.pagelayer-dark .pagelayer-elp-multiselect-selected{
@@ -1450,6 +1557,7 @@ background: #ffffff;
1450
display: flex;
1451
flex-wrap: wrap;
1452
padding: 5px;
1453
}
1454
1455
/* Pagelayer Multi Select Property end*/
@@ -1558,8 +1666,8 @@ box-sizing: content-box;
1558
.pagelayer-elp-shadow-div,
1559
.pagelayer-elp-typo-div,
1560
.pagelayer-elp-filter-div{
1561
- padding: 10px 10px 0px;
1562
- box-shadow: 0px 0px 2px rgba(0,0,0,.2);
1563
position: relative;
1564
margin-top: 8px;
1565
border: 1px solid #ddd;
@@ -1626,18 +1734,19 @@ color:#ffffff;
1626
1627
.pagelayer-prop-edit{
1628
padding: 7px;
1629
- border: 1px solid #ccc;
1630
- width: 44px;
1631
position: absolute;
1632
top: 7px;
1633
- right: 8px;
1634
text-align: center;
1635
cursor: pointer;
1636
border-radius: 3px;
1637
}
1638
1639
.pagelayer-prop-edit i{
1640
- font-size: 20px;
1641
}
1642
1643
.pagelayer-dark .pagelayer-prop-edit i{
@@ -1649,30 +1758,30 @@ display: block;
1649
}
1650
1651
.pagelayer-elp-shadow-color{
1652
- position: relative;
1653
- height: 35px;
1654
}
1655
1656
.pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1657
- top:0;
1658
}
1659
1660
- .pagelayer-elp-typo:not(:first-child),
1661
.pagelayer-elp-prop-grp{
1662
- margin: 3px 0;
1663
- padding: 5px 0;
1664
}
1665
1666
.pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1667
padding: 5px 0;
1668
}
1669
1670
- .pagelayer-elp-prop-grp{
1671
- position: relative;
1672
}
1673
1674
.pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1675
- top: -3px;
1676
right: 0;
1677
}
1678
@@ -1744,7 +1853,7 @@ color:#bdbdbd;
1744
.pagelayer-elp-shadow-input{
1745
padding: 3px;
1746
border-radius: 4px !important;
1747
- line-height: 18px !important;
1748
}
1749
1750
.pagelayer-elp-grad-color{
@@ -1862,6 +1971,9 @@ color:#bdbdbd;
1862
1863
.pagelayer-elp-group-item-title{
1864
flex-grow: 100;
1865
}
1866
1867
.pagelayer-elp-group-item-del{
@@ -1942,8 +2054,18 @@ padding: 10px !important;
1942
/* Pagelayer Left bar */
1943
1944
.pagelayer-topbar-holder{
1945
- background-color: #3e8ef7;
1946
position:relative;
1947
}
1948
1949
.pagelayer-topbar-mover{
@@ -2517,7 +2639,9 @@ cursor:pointer;
2517
}
2518
2519
.pagelayer-section-tags-holder{
2520
- padding: 10px;
2521
}
2522
2523
.pagelayer-section-tags{
@@ -2536,41 +2660,17 @@ background: #326fa6;
2536
2537
.pagelayer-section-modal-body-holder{
2538
overflow:auto;
2539
- height: calc(100vh - 20px);
2540
}
2541
2542
.pagelayer-add-section-modal-body{
2543
- padding: 20px;
2544
margin: 0;
2545
- box-sizing: border-box;
2546
- }
2547
-
2548
- @media (min-width: 360px) {
2549
- .pagelayer-add-section-modal-body {
2550
- -webkit-column-count: 1;
2551
- column-count: 1;
2552
- }
2553
- }
2554
-
2555
- @media (min-width: 768px) {
2556
- .pagelayer-add-section-modal-body {
2557
- -webkit-column-count: 2;
2558
- column-count: 2;
2559
- }
2560
- }
2561
-
2562
- @media (min-width: 992px) {
2563
- .pagelayer-add-section-modal-body{
2564
- -webkit-column-count: 3;
2565
- column-count: 3;
2566
- }
2567
- }
2568
-
2569
- @media (min-width: 1500px) {
2570
- .pagelayer-add-section-modal-body{
2571
- -webkit-column-count: 4;
2572
- column-count: 4;
2573
- }
2574
}
2575
2576
.pagelayer-add-section-modal-footer{
@@ -2578,26 +2678,23 @@ padding: 15px;
2578
border-top: 1px solid #e5e5e5;
2579
}
2580
2581
- .pagelayer-section-item[pagelayer-sc]{
2582
- text-align: center;
2583
- display:flex;
2584
- align-items:center;
2585
- justify-content: space-around;
2586
- min-height: 150px;
2587
- border:2px dashed #e1e1e1;
2588
}
2589
2590
.pagelayer-section-item{
2591
min-height: 50px;
2592
- margin:5px 0px 15px;
2593
- -webkit-column-break-inside: avoid;
2594
- break-inside: avoid;
2595
- line-height:0;
2596
- display:inline-block;
2597
z-index: 9;
2598
transition-duration: 0.2s;
2599
background-color:#fff;
2600
- width:95%;
2601
border: 3px solid #fff;
2602
border-radius: 4px;
2603
cursor: pointer;
@@ -2607,7 +2704,6 @@ position: relative;
2607
.pagelayer-section-item:hover{
2608
z-index: 99;
2609
transform: scale(1.01);
2610
- position: relative;
2611
border: 3px solid #1A9CDB;
2612
}
2613
@@ -2615,6 +2711,11 @@ border: 3px solid #1A9CDB;
2615
width:100%;
2616
}
2617
2618
.pagelayer-section-pro-req{
2619
position: absolute;
2620
top: 15px;
@@ -2660,8 +2761,7 @@ align-items: center;
2660
justify-content: center;
2661
text-align:center;
2662
display:flex;
2663
- color:#3e8ef7;
2664
- background-color:#f7f7f7c2;
2665
}
2666
2667
.pagelayer-section-wait .fa-spin{
@@ -2779,4 +2879,240 @@ color: #000;
2779
display:none;
2780
}
2781
2782
- /* Left bar move end*/
626
position: relative;
627
}
628
629
+ [pagelayer-access-item]{
630
+ position: absolute;
631
+ z-index: -100;
632
+ top: 0px;
633
+ visibility: hidden;
634
+ }
635
+
636
+ .pagelayer-access-item-visible{
637
+ position: relative !important;
638
+ z-index: unset !important;
639
+ visibility: visible !important;
640
+ }
641
+
642
.pagelayer-dark .pagelayer-form-item{
643
border-bottom: 1px dashed #686870;
644
}
796
width: 100%;
797
}
798
799
+ .pagelayer-elp-textarea{
800
+ border-radius: 3px !important;
801
+ }
802
+
803
.pagelayer-dark .pagelayer-elpd-body input,
804
.pagelayer-dark .pagelayer-elpd-body textarea,
805
.pagelayer-dark .pagelayer-elpd-body select,
830
font-size: 12px;
831
padding: 12px 10px;
832
min-height: unset;
833
+ background-color: #00A0D2;
834
color: #fff;
835
transition: all 0.3s;
836
border-radius: unset;
840
}
841
842
.pagelayer-elp-button:hover{
843
+ background-color: #00A0D2bf;
844
border-color: #00A0D2;
845
}
846
849
width:90%;
850
margin:5px auto;
851
height:150px;
852
position:relative;
853
+ border: 1px solid #2EA5DF;
854
+ }
855
+
856
+ .pagelayer-elp-access{
857
+ cursor: pointer;
858
+ padding: 10px;
859
+ display: block;
860
+ margin: 0 auto;
861
+ position: absolute;
862
+ font-size:1.5rem;
863
+ top: 0px;
864
+ right: 12px;
865
+ color: #333;
866
+ vertical-align: middle;
867
+ }
868
+
869
+ .pagelayer-elp-access .pli-caret-right{
870
+ font-size: 18px;
871
+ line-height: 1.5;
872
+ }
873
+
874
+ .pagelayer-elp-access .pli-caret-right:hover{
875
+ color: #3e8ef7;
876
+ }
877
+
878
+ .pagelayer-elp-access .pli-caret-open:before{
879
+ content: "\f0d7" !important;
880
+ }
881
+
882
+ .pagelayer-elp-access-holder{
883
+ position: absolute;
884
+ border: 1px solid #ccc;
885
+ top: 42px;
886
+ background: #fff;
887
+ z-index: 100;
888
+ right: 8px;
889
+ width: 95%;
890
+ box-shadow: 0 0 15px -5px;
891
+ display: none;
892
}
893
894
.pagelayer-elp-image{
904
position: absolute;
905
top: 4px;
906
right: 4px;
907
+ background-color: #2EA5DF;
908
padding: 5px 9px;
909
max-width: 28px;
910
max-height: 28px;
1007
.picker_wrapper {
1008
top: 13px !important;
1009
right: -15px !important;
1010
+ font-family: Roboto !important;
1011
+ font-size: 12px;
1012
+ border-radius: 4px;
1013
+ background:#f7f7f7;
1014
+ }
1015
+
1016
+ .picker_done button{
1017
+ border: #318088 1px solid;
1018
+ color: #fff;
1019
+ background: #248a4c;
1020
+ border-radius: 2px;
1021
+ font-size: 14px;
1022
+ line-height: 1.5;
1023
+ }
1024
+
1025
+ .picker_editor input{
1026
+ font-family: Roboto !important;
1027
+ font-size: 12px;
1028
}
1029
1030
.pagelayer-elp-color-span{
1170
height: auto;
1171
box-sizing: border-box;
1172
display: none;
1173
+ width: 80%;
1174
border-radius: 2px;
1175
margin: 0 0 0 auto;
1176
top: 40px;
1290
1291
input.pagelayer-elp-slider{
1292
-webkit-appearance: none;
1293
+ width: 70%;
1294
height: 10px;
1295
border-radius: 5px;
1296
background-color: #d3d3d3 !important;
1335
1336
.pagelayer-elp-slider-value{
1337
width: 23% !important;
1338
+ margin-left: 7%;
1339
+ margin-top: -12px;
1340
+ border-radius: 3px !important;
1341
+ padding: 2px 2px 2px 6px;
1342
+ border: 0px solid #fff !important;
1343
+ border-bottom: 1px solid #ccc !important;
1344
}
1345
1346
.pagelayer-elp-datetime-div{
1347
position: relative;
1348
}
1349
1350
+ .pagelayer-elp-datetime{
1351
+ width: 99%;
1352
+ }
1353
+
1354
.pagelayer-elp-fa-calendar{
1355
position: absolute;
1356
height: 40px;
1417
}
1418
1419
.pagelayer-elp-input-icon input{
1420
+ width: 85%;
1421
}
1422
1423
.pagelayer-elp-input-icon i.pli{
1429
cursor: pointer;
1430
background:#FFF;
1431
line-height:26px !important;
1432
+ font-size: 13px;
1433
}
1434
1435
.pagelayer-dark .pagelayer-elp-input-icon i.pli{
1437
}
1438
1439
.pagelayer-elp-padding-div i.pli{
1440
+ padding:8px 11px;
1441
border: 1px solid #d1d1d1;
1442
+ border-left:0px !important;
1443
cursor: pointer;
1444
background: #FFF;
1445
vertical-align:top;
1446
+ font-size: 12px;
1447
+ border-top-right-radius: 3px;
1448
+ border-bottom-right-radius: 3px;
1449
}
1450
1451
.pagelayer-elp-padding-linked{
1452
+ background: #1a7fb0 !important;
1453
+ color: #fff !important;
1454
+ border: 1px solid #1a7fb0 !important;
1455
+ }
1456
+
1457
+ .pagelayer-elp-padding:first-child{
1458
+ border-top-left-radius: 3px;
1459
+ border-bottom-left-radius: 3px;
1460
}
1461
1462
.pagelayer-dark .pagelayer-elp-padding-linked{
1464
}
1465
1466
.pagelayer-elp-dimension-div i.pli{
1467
+ padding:8px 11px;
1468
border: 1px solid #d1d1d1;
1469
+ border-left:0px !important;
1470
cursor: pointer;
1471
background: #FFF;
1472
vertical-align:top;
1473
+ font-size: 12px;
1474
+ border-top-right-radius: 3px;
1475
+ border-bottom-right-radius: 3px;
1476
}
1477
1478
.pagelayer-elp-dimension-linked{
1479
+ background: #1a7fb0 !important;
1480
+ color: #fff !important;
1481
+ border: 1px solid #1a7fb0 !important;
1482
+ }
1483
+
1484
+ .pagelayer-elp-dimension:first-child{
1485
+ border-top-left-radius: 3px;
1486
+ border-bottom-left-radius: 3px;
1487
}
1488
1489
/* Pagelayer Multi Select Property */
1490
.pagelayer-elp-multiselect{
1491
min-height: 25px;
1492
+ width:95%;
1493
}
1494
1495
.pagelayer-elp-multiselect-ul{
1503
position:absolute;
1504
background:rgb(255, 255, 255);
1505
z-index:1;
1506
+ width:99%;
1507
}
1508
1509
.pagelayer-dark .pagelayer-elp-multiselect-ul{
1515
1516
.pagelayer-elp-multiselect-option{
1517
font-size:13px;
1518
+ padding:4px 8px;
1519
cursor:pointer;
1520
}
1521
1524
}
1525
1526
.pagelayer-elp-multiselect-option[selected="selected"]{
1527
+ background: #f2f2f2;
1528
+ }
1529
+
1530
+ .pagelayer-elp-multiselect-remove{
1531
+ color: #f2f2f2;
1532
+ padding-left: 2px;
1533
+ cursor: pointer;
1534
}
1535
1536
.pagelayer-dark .pagelayer-elp-multiselect-option[selected="selected"]{
1542
padding: 3px 5px;
1543
border-radius: 5px;
1544
margin: 2px;
1545
+ background: #44a9db;
1546
line-height: 13px;
1547
font-size: 13px;
1548
+ color: #fff;
1549
}
1550
1551
.pagelayer-dark .pagelayer-elp-multiselect-selected{
1557
display: flex;
1558
flex-wrap: wrap;
1559
padding: 5px;
1560
+ border-radius: 3px;
1561
}
1562
1563
/* Pagelayer Multi Select Property end*/
1666
.pagelayer-elp-shadow-div,
1667
.pagelayer-elp-typo-div,
1668
.pagelayer-elp-filter-div{
1669
+ padding: 0px 10px;
1670
+ box-shadow: 0px 0px 13px rgba(0,0,0,.3);
1671
position: relative;
1672
margin-top: 8px;
1673
border: 1px solid #ddd;
1734
1735
.pagelayer-prop-edit{
1736
padding: 7px;
1737
+ border: 1px solid #3e8ca4;
1738
+ width: 20px;
1739
position: absolute;
1740
top: 7px;
1741
+ right: 11px;
1742
text-align: center;
1743
cursor: pointer;
1744
border-radius: 3px;
1745
}
1746
1747
.pagelayer-prop-edit i{
1748
+ font-size: 14px;
1749
+ color: #484848;
1750
}
1751
1752
.pagelayer-dark .pagelayer-prop-edit i{
1758
}
1759
1760
.pagelayer-elp-shadow-color{
1761
+ padding: 15px 0px !important;
1762
}
1763
1764
.pagelayer-elp-shadow-color .pagelayer-elp-color-div{
1765
+ top:7px;
1766
}
1767
1768
+ .pagelayer-elp-typo,
1769
.pagelayer-elp-prop-grp{
1770
+ margin: 0px;
1771
+ padding: 10px 0;
1772
+ position: relative;
1773
+ border-bottom: 1px dashed #ccc;
1774
}
1775
1776
.pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
1777
padding: 5px 0;
1778
}
1779
1780
+ .pagelayer-elp-gradient-color{
1781
+ padding: 15px 0px !important;
1782
}
1783
1784
.pagelayer-elp-prop-grp .pagelayer-elp-color-div{
1785
right: 0;
1786
}
1787
1853
.pagelayer-elp-shadow-input{
1854
padding: 3px;
1855
border-radius: 4px !important;
1856
+ line-height: 23px !important;
1857
}
1858
1859
.pagelayer-elp-grad-color{
1971
1972
.pagelayer-elp-group-item-title{
1973
flex-grow: 100;
1974
+ white-space: nowrap;
1975
+ overflow: hidden;
1976
+ text-overflow: ellipsis;
1977
}
1978
1979
.pagelayer-elp-group-item-del{
2054
/* Pagelayer Left bar */
2055
2056
.pagelayer-topbar-holder{
2057
+ background-color: #4CB5E8;
2058
position:relative;
2059
+ animation: colorchange 30s infinite alternate;
2060
+ -webkit-animation: colorchange 30s infinite alternate;
2061
+ }
2062
+
2063
+ @keyframes colorchange{
2064
+ 0% {background: #3e0772;}
2065
+ 25% {background: #209ce2;}
2066
+ 50% {background: #00838c;}
2067
+ 75% {background: #088dce;}
2068
+ 100% {background: #3d5afe;}
2069
}
2070
2071
.pagelayer-topbar-mover{
2639
}
2640
2641
.pagelayer-section-tags-holder{
2642
+ padding: 0px 10px;
2643
+ height: calc(100vh - 150px);
2644
+ overflow: auto;
2645
}
2646
2647
.pagelayer-section-tags{
2660
2661
.pagelayer-section-modal-body-holder{
2662
overflow:auto;
2663
+ height: calc(100vh - 50px);
2664
+ width: calc(100vw - 250px);
2665
+ background: #efefef;
2666
}
2667
2668
.pagelayer-add-section-modal-body{
2669
margin: 0;
2670
+ background: #efefef;
2671
+ height: 100%;
2672
+ display: flex;
2673
+ flex-wrap: wrap;
2674
}
2675
2676
.pagelayer-add-section-modal-footer{
2678
border-top: 1px solid #e5e5e5;
2679
}
2680
2681
+ .pagelayer-section-is-visible{
2682
+ height: 50px;
2683
+ flex-basis: 100%;
2684
+ }
2685
+
2686
+ .pagelayer-section-holder{
2687
+ vertical-align: top;
2688
+ background: #efefef;
2689
+ flex: 1;
2690
}
2691
2692
.pagelayer-section-item{
2693
min-height: 50px;
2694
+ margin:15px;
2695
z-index: 9;
2696
transition-duration: 0.2s;
2697
background-color:#fff;
2698
border: 3px solid #fff;
2699
border-radius: 4px;
2700
cursor: pointer;
2704
.pagelayer-section-item:hover{
2705
z-index: 99;
2706
transform: scale(1.01);
2707
border: 3px solid #1A9CDB;
2708
}
2709
2711
width:100%;
2712
}
2713
2714
+ .pagelayer-section-item[pagelayer-section-type=page]{
2715
+ max-height: 350px;
2716
+ overflow: auto;
2717
+ }
2718
+
2719
.pagelayer-section-pro-req{
2720
position: absolute;
2721
top: 15px;
2761
justify-content: center;
2762
text-align:center;
2763
display:flex;
2764
+ background-color:#f7f7f7fa;
2765
}
2766
2767
.pagelayer-section-wait .fa-spin{
2879
display:none;
2880
}
2881
2882
+ /* Left bar move end*/
2883
+
2884
+ /* Pre-Loading animaiton classes */
2885
+ #pagelayer-loader-wrapper {
2886
+ background-color:white;
2887
+ -webkit-box-align: center;
2888
+ -ms-flex-align: center;
2889
+ align-items: center;
2890
+ display: -webkit-box;
2891
+ display: -ms-flexbox;
2892
+ display: flex;
2893
+ height: 100%;
2894
+ -webkit-box-pack: center;
2895
+ -ms-flex-pack: center;
2896
+ justify-content: center;
2897
+ position: fixed;
2898
+ left: 0;
2899
+ top: 0;
2900
+ width: 100%;
2901
+ z-index: 9000;
2902
+ }
2903
+
2904
+
2905
+ #pagelayer-loader-wrapper .pagelayer-animation-section {
2906
+ position: absolute;
2907
+ z-index: 1000;
2908
+ }
2909
+
2910
+ .pagelayer-loader {
2911
+ position:relative;
2912
+ width: 150px;
2913
+ height: 150px;
2914
+ margin: 0 auto 50px auto;
2915
+ z-index: 1001;
2916
+ }
2917
+
2918
+ .pagelayer-loader:before {
2919
+ content: "";
2920
+ position: absolute;
2921
+ top: 0;
2922
+ left: 0;
2923
+ right: 0;
2924
+ bottom: 0;
2925
+ border-radius: 50%;
2926
+ border: 3px solid transparent;
2927
+ border-top-color: #3498db;
2928
+ -webkit-animation: spin 3s linear infinite;
2929
+ animation: spin 3s linear infinite;
2930
+ }
2931
+
2932
+ .pagelayer-loader:after {
2933
+ content: "";
2934
+ position: absolute;
2935
+ top: 10px;
2936
+ left: 10px;
2937
+ right: 10px;
2938
+ bottom: 10px;
2939
+ border-radius: 50%;
2940
+ border: 3px solid transparent;
2941
+ border-top-color: #e74c3c;
2942
+ -webkit-animation: spin 2s linear infinite;
2943
+ animation: spin 2s linear infinite;
2944
+ }
2945
+
2946
+ .pagelayer-loader .pagelayer-percent-parent{
2947
+ width:100%;
2948
+ height:100%;
2949
+ margin:auto;
2950
+ display: flex;
2951
+ align-items: center;
2952
+ justify-content: center;
2953
+ text-align:center;
2954
+ }
2955
+
2956
+ .pagelayer-loader .pagelayer-percent-parent:before{
2957
+ content: "";
2958
+ position: absolute;
2959
+ top: 20px;
2960
+ left: 20px;
2961
+ right: 20px;
2962
+ bottom: 20px;
2963
+ border-radius: 50%;
2964
+ border: 3px solid transparent;
2965
+ border-top-color: #f9c922;
2966
+ -webkit-animation: spin 1.5s linear infinite;
2967
+ animation: spin 1.5s linear infinite;
2968
+ }
2969
+
2970
+ .pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
2971
+ font-size:30px;
2972
+ }
2973
+
2974
+ @-webkit-keyframes spin {
2975
+ 0%{
2976
+ -webkit-transform: rotate(0deg);
2977
+ -ms-transform: rotate(0deg);
2978
+ transform: rotate(0deg);
2979
+ }
2980
+ 100%{
2981
+ -webkit-transform: rotate(360deg);
2982
+ -ms-transform: rotate(360deg);
2983
+ transform: rotate(360deg);
2984
+ }
2985
+ }
2986
+
2987
+ @keyframes spin {
2988
+ 0% {
2989
+ -webkit-transform: rotate(0deg);
2990
+ -ms-transform: rotate(0deg);
2991
+ transform: rotate(0deg);
2992
+ }
2993
+ 100% {
2994
+ -webkit-transform: rotate(360deg);
2995
+ -ms-transform: rotate(360deg);
2996
+ transform: rotate(360deg);
2997
+ }
2998
+ }
2999
+
3000
+ #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
3001
+ font: bold 7em Poppins,sans-serif;
3002
+ text-align: center;
3003
+ -webkit-user-select: none;
3004
+ -moz-user-select: none;
3005
+ -ms-user-select: none;
3006
+ user-select: none;
3007
+ }
3008
+
3009
+ .pagelayer-txt-loading .letters-loading {
3010
+ color: rgba(0,0,0,0.2);
3011
+ position: relative;
3012
+ }
3013
+
3014
+ .pagelayer-txt-loading .letters-loading:before {
3015
+ -webkit-animation: letters-loading 4s infinite;
3016
+ animation: letters-loading 4s infinite;
3017
+ color: #000;
3018
+ content: attr(data-text-preloader);
3019
+ left: 0;
3020
+ opacity: 0;
3021
+ font-family: "Poppins",sans-serif;
3022
+ position: absolute;
3023
+ -webkit-transform: rotateY(-90deg);
3024
+ transform: rotateY(-90deg);
3025
+ }
3026
+
3027
+ .pagelayer-txt-loading .letters-loading:nth-child(2):before {
3028
+ -webkit-animation-delay: .2s;
3029
+ animation-delay: .2s
3030
+ }
3031
+ .pagelayer-txt-loading .letters-loading:nth-child(3):before {
3032
+ -webkit-animation-delay: .4s;
3033
+ animation-delay: .4s
3034
+ }
3035
+ .pagelayer-txt-loading .letters-loading:nth-child(4):before {
3036
+ -webkit-animation-delay: .6s;
3037
+ animation-delay: .6s
3038
+ }
3039
+ .pagelayer-txt-loading .letters-loading:nth-child(5):before {
3040
+ -webkit-animation-delay: .8s;
3041
+ animation-delay: .8s
3042
+ }
3043
+ .pagelayer-txt-loading .letters-loading:nth-child(6):before {
3044
+ -webkit-animation-delay: 1s;
3045
+ animation-delay: 1s
3046
+ }
3047
+ .pagelayer-txt-loading .letters-loading:nth-child(7):before {
3048
+ -webkit-animation-delay: 1.2s;
3049
+ animation-delay: 1.2s
3050
+ }
3051
+ .pagelayer-txt-loading .letters-loading:nth-child(8):before {
3052
+ -webkit-animation-delay: 1.4s;
3053
+ animation-delay: 1.4s
3054
+ }
3055
+ .pagelayer-txt-loading .letters-loading:nth-child(9):before {
3056
+ -webkit-animation-delay: 1.6s;
3057
+ animation-delay: 1.6s
3058
+ }
3059
+ .pagelayer-txt-loading .letters-loading:nth-child(10):before {
3060
+ -webkit-animation-delay: 1.8s;
3061
+ animation-delay: 1.8s
3062
+ }
3063
+ .pagelayer-txt-loading .letters-loading:nth-child(11):before {
3064
+ -webkit-animation-delay: 2s;
3065
+ animation-delay: 2s
3066
+ }
3067
+
3068
+ .pagelayer-loaded .pagelayer-animation-section .pagelayer-loader, .pagelayer-loaded .pagelayer-animation-section .pagelayer-txt-loading{
3069
+ opacity: 0;
3070
+ -webkit-transition: all 0.3s ease-out;
3071
+ transition: all 0.3s ease-out;
3072
+ }
3073
+
3074
+ @-webkit-keyframes letters-loading {
3075
+ 0%, 75%, 100% {
3076
+ opacity: 0;
3077
+ -webkit-transform: rotateY(-90deg);
3078
+ transform: rotateY(-90deg)
3079
+ }
3080
+ 25%, 50% {
3081
+ opacity: 1;
3082
+ -webkit-transform: rotateY(0deg);
3083
+ transform: rotateY(0deg)
3084
+ }
3085
+ }
3086
+ @keyframes letters-loading {
3087
+ 0%, 75%, 100% {
3088
+ opacity: 0;
3089
+ -webkit-transform: rotateY(-90deg);
3090
+ transform: rotateY(-90deg)
3091
+ }
3092
+ 25%, 50% {
3093
+ opacity: 1;
3094
+ -webkit-transform: rotateY(0deg);
3095
+ transform: rotateY(0deg)
3096
+ }
3097
+ }
3098
+
3099
+ @media screen and (max-width: 767px) {
3100
+ #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
3101
+ height: 8em;
3102
+ width: 8em
3103
+ }
3104
+ #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
3105
+ font: bold 3.5em Poppins, sans-serif
3106
+ }
3107
+ }
3108
+ @media screen and (max-width: 500px) {
3109
+ #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
3110
+ height: 7em;
3111
+ width: 7em
3112
+ }
3113
+ #pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
3114
+ font: bold 2em Poppins, sans-serif
3115
+ }
3116
+ }
3117
+
3118
+ /* Pre-Loading animaiton classes end*/
css/pagelayer-icons.css CHANGED
@@ -562,4 +562,7 @@ content: "\ea91";
562
.pli-wordpress:before,
563
i[class*="pagelayer-pl_wp_"]:before{
564
content: "\eab4";
565
}
562
.pli-wordpress:before,
563
i[class*="pagelayer-pl_wp_"]:before{
564
content: "\eab4";
565
+ }
566
+ .pli-caret-right:before{
567
+ content: "\f0da";
568
}
init.php CHANGED
@@ -5,7 +5,7 @@ if (!defined('ABSPATH')) exit;
5
6
define('PAGELAYER_BASE', plugin_basename(PAGELAYER_FILE));
7
define('PAGELAYER_PRO_BASE', 'pagelayer-pro/pagelayer-pro.php');
8
- define('PAGELAYER_VERSION', '1.0.7');
9
define('PAGELAYER_DIR', dirname(PAGELAYER_FILE));
10
define('PAGELAYER_SLUG', 'pagelayer');
11
define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
@@ -201,6 +201,9 @@ function pagelayer_admin_menu() {
201
202
}
203
204
// License Page
205
add_submenu_page('pagelayer', __('Pagelayer Editor'), __('License'), $capability, 'pagelayer_license', 'pagelayer_license_page');
206
@@ -231,6 +234,17 @@ function pagelayer_license_page(){
231
232
}
233
234
// Load the Live Body
235
add_action('template_redirect', 'pagelayer_load_live_body', 4);
236
5
6
define('PAGELAYER_BASE', plugin_basename(PAGELAYER_FILE));
7
define('PAGELAYER_PRO_BASE', 'pagelayer-pro/pagelayer-pro.php');
8
+ define('PAGELAYER_VERSION', '1.0.8');
9
define('PAGELAYER_DIR', dirname(PAGELAYER_FILE));
10
define('PAGELAYER_SLUG', 'pagelayer');
11
define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
201
202
}
203
204
+ // Import Page
205
+ add_submenu_page('pagelayer', __('Import a Theme and its Templates'), __('Import Theme'), $capability, 'pagelayer_import', 'pagelayer_import_page');
206
+
207
// License Page
208
add_submenu_page('pagelayer', __('Pagelayer Editor'), __('License'), $capability, 'pagelayer_license', 'pagelayer_license_page');
209
234
235
}
236
237
+ // Import Pagelayer Templates
238
+ function pagelayer_import_page(){
239
+
240
+ global $wp_version, $pagelayer;
241
+
242
+ include_once(PAGELAYER_DIR.'/main/import.php');
243
+
244
+ pagelayer_import();
245
+
246
+ }
247
+
248
// Load the Live Body
249
add_action('template_redirect', 'pagelayer_load_live_body', 4);
250
js/pagelayer-editor.js CHANGED
@@ -93,8 +93,31 @@ jQuery(document).ready(function(){
93
// Just the txt
94
pagelayer.pro_txt = 'This feature is a part of <a href="'+pagelayer_pro_url+'" target="_blank">Pagelayer Pro</a>. You will need purchase <a href="'+pagelayer_pro_url+'" target="_blank">Pagelayer Pro</a> to use this feature.';
95
96
});
97
98
// Set row-option top zero(0) of the first row
99
function pagelayer_set_row_option_position(){
100
if(jQuery(pagelayer_editable).offset().top < 20){
@@ -1207,7 +1230,7 @@ function pagelayer_element_setup(selector, render){
1207
break;
1208
}
1209
}
1210
-
1211
1212
wrap.addClass('pagelayer-col '+col);
1213
//jEle.removeClass('pagelayer-col '+col);
@@ -2094,7 +2117,7 @@ function pagelayer_set_atts(jEle, atts, val){
2094
2095
// Set the value
2096
}else{
2097
- jEle.attr('pagelayer-a-'+x, atts[x]);
2098
}
2099
2100
// Are you the active element
@@ -2774,6 +2797,13 @@ function pagelayer_generate_sc(selector){
2774
/*if(tag == 'pl_row' && closestEle.length > 0 && closestEle.closest(pagelayer_editable).length > 0){
2775
final_tag = 'pl_inner_row';
2776
}*/
2777
2778
// Define inner column
2779
if(tag == 'pl_col' && closestEle.length > 0 && closestEle.closest(pagelayer_editable).length > 0){
@@ -3855,38 +3885,38 @@ function pagelayer_scroll_to_viewport(jEle, timeout, parentEle){
3855
timeout = timeout || 500;
3856
parentEle = parentEle || jQuery(window);
3857
3858
- setTimeout(function () {
3859
- var parentHeight = parentEle.height(),
3860
- parentScrollTop = parentEle.scrollTop(),
3861
- elementTop = jEle.offset().top,
3862
- topToCheck = elementTop - parentScrollTop;
3863
3864
- if (topToCheck > 0 && topToCheck < parentHeight) {
3865
- return;
3866
- }
3867
-
3868
- var scrolling = elementTop - parentHeight / 2;
3869
- scrolled.stop(true).animate({
3870
- scrollTop: scrolling
3871
- }, 1000);
3872
- }, timeout);
3873
}
3874
3875
// Generates a random string of "n" characters
3876
function pagelayer_randstr(n, special){
3877
- var text = '';
3878
- var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
3879
3880
special = special || 0;
3881
if(special){
3882
possible = possible + '&#$%@';
3883
}
3884
3885
- for(var i=0; i < n; i++){
3886
- text += possible.charAt(Math.floor(Math.random() * possible.length));
3887
- }
3888
3889
- return text;
3890
};
3891
3892
function pagelayer_update_site_title(val){
@@ -3911,40 +3941,6 @@ function pagelayer_update_site_title(val){
3911
}
3912
}
3913
3914
- function pagelayer_trim(str, charlist){
3915
- // discuss at: http://locutus.io/php/trim/
3916
-
3917
- if(typeof str != 'string'){
3918
- return str;
3919
- }
3920
-
3921
- var whitespace = [' ', '\n', '\r', '\t', '\f', '\x0b', '\xa0', '\u2000', '\u2001', '\u2002', '\u2003', '\u2004', '\u2005', '\u2006', '\u2007', '\u2008', '\u2009', '\u200a', '\u200b', '\u2028', '\u2029', '\u3000' ].join('')
3922
- var l = 0
3923
- var i = 0
3924
- str += ''
3925
-
3926
- if (charlist) {
3927
- whitespace = (charlist + '').replace(/([[\]().?/*{}+$^:])/g, '$1')
3928
- }
3929
-
3930
- l = str.length
3931
- for (i = 0; i < l; i++) {
3932
- if (whitespace.indexOf(str.charAt(i)) === -1) {
3933
- str = str.substring(i)
3934
- break
3935
- }
3936
- }
3937
-
3938
- l = str.length
3939
- for (i = l - 1; i >= 0; i--) {
3940
- if (whitespace.indexOf(str.charAt(i)) === -1) {
3941
- str = str.substring(0, i + 1)
3942
- break
3943
- }
3944
- }
3945
-
3946
- return whitespace.indexOf(str.charAt(0)) === -1 ? str : ''
3947
- };
3948
3949
// Convert the regular URL of a Video to a Embed URL
3950
function pagelayer_video_url(src){
@@ -4166,7 +4162,10 @@ function pagelayer_add_section_area(){
4166
'</div>'+
4167
'<div class="pagelayer-add-section-modal-overlay" style="display:none;">'+
4168
'<div class="pagelayer-section-wait">'+
4169
- '<i class="fa fa-spinner fa-spin"></i><br/><span>Please wait a moment</span>'+
4170
'</div>'+
4171
'</div>'+
4172
'</div>'+
@@ -4205,13 +4204,37 @@ function pagelayer_add_section_area(){
4205
function pagelayer_add_sections_list_setup(type){
4206
4207
var mEle = pagelayer.$('.pagelayer-add-section-modal-container');
4208
var add_area = jQuery('.pagelayer-add-widget-area');
4209
type = type || 'section';
4210
4211
- var viewer = '<div class="pagelayer-section-is-visible" style="height:50px;"><div>';
4212
var selected_tags = {};
4213
var result_set = {};
4214
4215
// Create list of items
4216
var pagelayer_section_list = function(){
4217
@@ -4264,9 +4287,15 @@ function pagelayer_add_sections_list_setup(type){
4264
// How the result and setup scroll
4265
var show_result = function(){
4266
4267
// Blank the body
4268
- mEle.find('.pagelayer-add-section-modal-body').html(viewer);
4269
-
4270
mEle.find('.pagelayer-section-modal-body-holder').on('scroll', pagelayer_section_body_scroll);
4271
pagelayer_section_body_scroll();
4272
}
@@ -4297,10 +4326,13 @@ function pagelayer_add_sections_list_setup(type){
4297
// Loop result_set
4298
for(var id in result_set){
4299
4300
- if(i >= 10){
4301
break;
4302
}
4303
4304
i++;
4305
4306
var pro = 0;
@@ -4310,19 +4342,19 @@ function pagelayer_add_sections_list_setup(type){
4310
pro = 1;
4311
}
4312
4313
- html += '<div class="pagelayer-section-item" pagelayer-add-section-id="'+id+'">'+
4314
- '<img src="'+ pagelayer_add_section_data[type]['image_url'] + id +'/screenshot.jpg" alt="Pagelayer code screenshot">'+
4315
(pro ? '<div class="pagelayer-section-pro-req">Pro</div><div class="pagelayer-section-pro-txt">'+pagelayer.pro_txt+'</div>' : '')+
4316
'</div>';
4317
4318
delete result_set[id];
4319
4320
}
4321
4322
//console.log(result_set);
4323
4324
- jQuery(html).insertBefore(tester);
4325
-
4326
mEle.find('.pagelayer-section-item').unbind('click');
4327
mEle.find('.pagelayer-section-item').on('click', function(e){
4328
pagelayer_section_item_clickable(jQuery(this));
@@ -4349,7 +4381,7 @@ function pagelayer_add_sections_list_setup(type){
4349
for(var k in tags){
4350
if(k.search(txt) >= 0){
4351
selected_tags[k] = 1;
4352
- mEle.find('.pagelayer-section-tags[tag='+k+']').attr('on', 1);
4353
}
4354
}
4355
@@ -4530,11 +4562,11 @@ function pagelayer_editable_paste_handler(pasteEvent, pagelayer_ajax_func){
4530
4531
reader = new FileReader();
4532
/* jshint -W083 */
4533
- reader.onloadend = function (event) {
4534
4535
var src = event.target.result;
4536
4537
- if( src.indexOf('data:image') === 0 ) {
4538
4539
var block = src.split(";");
4540
var contentType = block[0].split(":")[1];
@@ -4610,4 +4642,39 @@ function pagelayer_tooltip_setup(){
4610
pagelayer_tlite.hide(jQuery(this).get(0));
4611
});
4612
4613
- }
93
// Just the txt
94
pagelayer.pro_txt = 'This feature is a part of <a href="'+pagelayer_pro_url+'" target="_blank">Pagelayer Pro</a>. You will need purchase <a href="'+pagelayer_pro_url+'" target="_blank">Pagelayer Pro</a> to use this feature.';
95
96
+ // Hide the loader
97
+ pagelayer_loader_hide();
98
+
99
});
100
101
+ // Executes when pagelayer is fully loaded
102
+ function pagelayer_loader_hide() {
103
+ var inner = pagelayer.$('.pagelayer-percent');
104
+ inner.attr('loaded', 1);
105
+ var w = parseInt(inner.text());
106
+ var t = setInterval(function() {
107
+ w = w + 1;
108
+ inner.html(w +'<sup>%</sup>');
109
+ if (w >= 100){
110
+ clearInterval(t);
111
+ w = 0;
112
+ var loaderWrapper = pagelayer.$('#pagelayer-loader-wrapper');
113
+ loaderWrapper.addClass('pagelayer-loaded');
114
+ loaderWrapper.animate({opacity:0}, function(){
115
+ loaderWrapper.remove();
116
+ });
117
+ }
118
+ }, 1);
119
+ }
120
+
121
// Set row-option top zero(0) of the first row
122
function pagelayer_set_row_option_position(){
123
if(jQuery(pagelayer_editable).offset().top < 20){
1230
break;
1231
}
1232
}
1233
+
1234
1235
wrap.addClass('pagelayer-col '+col);
1236
//jEle.removeClass('pagelayer-col '+col);
2117
2118
// Set the value
2119
}else{
2120
+ jEle.attr('pagelayer-a-'+x, pagelayer_trim(atts[x]));
2121
}
2122
2123
// Are you the active element
2797
/*if(tag == 'pl_row' && closestEle.length > 0 && closestEle.closest(pagelayer_editable).length > 0){
2798
final_tag = 'pl_inner_row';
2799
}*/
2800
+
2801
+ if(pagelayer_empty(tag)){
2802
+ var err = 'Found an error in the content as the TAG was missing. The console will have more details.';
2803
+ alert(err);
2804
+ console.log(err);
2805
+ console.log(jEle);
2806
+ }
2807
2808
// Define inner column
2809
if(tag == 'pl_col' && closestEle.length > 0 && closestEle.closest(pagelayer_editable).length > 0){
3885
timeout = timeout || 500;
3886
parentEle = parentEle || jQuery(window);
3887
3888
+ setTimeout(function(){
3889
+ var parentHeight = parentEle.height(),
3890
+ parentScrollTop = parentEle.scrollTop(),
3891
+ elementTop = jEle.offset().top,
3892
+ topToCheck = elementTop - parentScrollTop;
3893
3894
+ if (topToCheck > 0 && topToCheck < parentHeight) {
3895
+ return;
3896
+ }
3897
+
3898
+ var scrolling = elementTop - parentHeight / 2;
3899
+ scrolled.stop(true).animate({
3900
+ scrollTop: scrolling
3901
+ }, 1000);
3902
+ }, timeout);
3903
}
3904
3905
// Generates a random string of "n" characters
3906
function pagelayer_randstr(n, special){
3907
+ var text = '';
3908
+ var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
3909
3910
special = special || 0;
3911
if(special){
3912
possible = possible + '&#$%@';
3913
}
3914
3915
+ for(var i=0; i < n; i++){
3916
+ text += possible.charAt(Math.floor(Math.random() * possible.length));
3917
+ }
3918
3919
+ return text;
3920
};
3921
3922
function pagelayer_update_site_title(val){
3941
}
3942
}
3943
3944
3945
// Convert the regular URL of a Video to a Embed URL
3946
function pagelayer_video_url(src){
4162
'</div>'+
4163
'<div class="pagelayer-add-section-modal-overlay" style="display:none;">'+
4164
'<div class="pagelayer-section-wait">'+
4165
+ '<div class="pagelayer-loader">'+
4166
+ '<div class="pagelayer-percent-parent"></div>'+
4167
+ '</div><br/>'+
4168
+ '<span>Please wait a moment</span>'+
4169
'</div>'+
4170
'</div>'+
4171
'</div>'+
4204
function pagelayer_add_sections_list_setup(type){
4205
4206
var mEle = pagelayer.$('.pagelayer-add-section-modal-container');
4207
+ var body = mEle.find('.pagelayer-add-section-modal-body');
4208
var add_area = jQuery('.pagelayer-add-widget-area');
4209
type = type || 'section';
4210
4211
+ // Find the number of cols
4212
+ var body_width = jQuery(window.parent).width();
4213
+ var num_cols = 3;
4214
+ if(body_width >= 1500){
4215
+ num_cols = 4;
4216
+ }else if(body_width >= 992){
4217
+ num_cols = 3;
4218
+ }else if(body_width >= 768){
4219
+ num_cols = 2;
4220
+ }else if(body_width >= 360){
4221
+ num_cols = 1;
4222
+ }
4223
+ //console.log(num_cols+' - '+body_width);
4224
+
4225
+ var viewer = '<div class="pagelayer-section-is-visible"></div>';
4226
var selected_tags = {};
4227
var result_set = {};
4228
4229
+ // Setup the scroll
4230
+ mEle.find('.pagelayer-section-tags-holder').slimScroll({
4231
+ height: 'calc(100vh - 150px)',
4232
+ railVisible: false,
4233
+ alwaysVisible: true,
4234
+ color: '#000',
4235
+ size: '5px',
4236
+ });
4237
+
4238
// Create list of items
4239
var pagelayer_section_list = function(){
4240
4287
// How the result and setup scroll
4288
var show_result = function(){
4289
4290
+ var html = '';
4291
+ for(var i = 0; i < num_cols; i++){
4292
+ html += '<div class="pagelayer-section-holder" pagelayer-section-type="'+type+'" num="'+i+'"></div>';
4293
+ }
4294
+
4295
// Blank the body
4296
+ body.html(html+viewer);
4297
+
4298
+ mEle.find('.pagelayer-section-modal-body-holder').unbind('scroll');
4299
mEle.find('.pagelayer-section-modal-body-holder').on('scroll', pagelayer_section_body_scroll);
4300
pagelayer_section_body_scroll();
4301
}
4326
// Loop result_set
4327
for(var id in result_set){
4328
4329
+ if(i >= (num_cols * 5)){
4330
break;
4331
}
4332
4333
+ var col = i % num_cols;
4334
+ //console.log(col);
4335
+
4336
i++;
4337
4338
var pro = 0;
4342
pro = 1;
4343
}
4344
4345
+ html = '<div class="pagelayer-section-item" pagelayer-section-type="'+type+'" pagelayer-add-section-id="'+id+'">'+
4346
+ '<img src="'+ pagelayer_add_section_data[type]['image_url'] + id +'/screenshot.jpg" alt="Pagelayer code screenshot" />'+
4347
(pro ? '<div class="pagelayer-section-pro-req">Pro</div><div class="pagelayer-section-pro-txt">'+pagelayer.pro_txt+'</div>' : '')+
4348
'</div>';
4349
4350
+ body.find('.pagelayer-section-holder[num='+col+']').append(html);
4351
+
4352
delete result_set[id];
4353
4354
}
4355
4356
//console.log(result_set);
4357
4358
mEle.find('.pagelayer-section-item').unbind('click');
4359
mEle.find('.pagelayer-section-item').on('click', function(e){
4360
pagelayer_section_item_clickable(jQuery(this));
4381
for(var k in tags){
4382
if(k.search(txt) >= 0){
4383
selected_tags[k] = 1;
4384
+ mEle.find('.pagelayer-section-tags[tag="'+k+'"]').attr('on', 1);
4385
}
4386
}
4387
4562
4563
reader = new FileReader();
4564
/* jshint -W083 */
4565
+ reader.onloadend = function(event) {
4566
4567
var src = event.target.result;
4568
4569
+ if(src.indexOf('data:image') === 0 ) {
4570
4571
var block = src.split(";");
4572
var contentType = block[0].split(":")[1];
4642
pagelayer_tlite.hide(jQuery(this).get(0));
4643
});
4644
4645
+ };
4646
+
4647
+ function pagelayer_trim(str, charlist){
4648
+ // discuss at: http://locutus.io/php/trim/
4649
+
4650
+ if(typeof str != 'string'){
4651
+ return str;
4652
+ }
4653
+
4654
+ var whitespace = [' ', '\n', '\r', '\t', '\f', '\x0b', '\xa0', '\u2000', '\u2001', '\u2002', '\u2003', '\u2004', '\u2005', '\u2006', '\u2007', '\u2008', '\u2009', '\u200a', '\u200b', '\u2028', '\u2029', '\u3000' ].join('');
4655
+ var l = 0;
4656
+ var i = 0;
4657
+ str += '';
4658
+
4659
+ if (charlist) {
4660
+ whitespace = (charlist + '').replace(/([[\]().?/*{}+$^:])/g, '$1');
4661
+ }
4662
+
4663
+ l = str.length;
4664
+ for (i = 0; i < l; i++) {
4665
+ if (whitespace.indexOf(str.charAt(i)) === -1) {
4666
+ str = str.substring(i);
4667
+ break;
4668
+ }
4669
+ }
4670
+
4671
+ l = str.length;
4672
+ for (i = l - 1; i >= 0; i--) {
4673
+ if (whitespace.indexOf(str.charAt(i)) === -1) {
4674
+ str = str.substring(0, i + 1);
4675
+ break;
4676
+ }
4677
+ }
4678
+
4679
+ return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
4680
+ };
js/pen.js CHANGED
@@ -715,6 +715,18 @@
715
716
// show menu
717
Pen.prototype.menu = function() {
718
if (!this._menu) return this;
719
if (selection.isCollapsed) {
720
this._menu.style.display = 'none'; //hide menu
@@ -742,6 +754,7 @@
742
document.head.appendChild(style);
743
this._stylesheet = stylesheet = style.sheet;
744
}
745
// display block to caculate its width & height
746
menu.style.display = 'block';
747
715
716
// show menu
717
Pen.prototype.menu = function() {
718
+
719
+ var allMenus = document.getElementsByClassName('pen-menu');
720
+
721
+ // Hide all menus
722
+ for(var x in allMenus){
723
+ try{
724
+ if('style' in allMenus[x]){
725
+ allMenus[x].style.display = 'none';
726
+ }
727
+ }catch(e){}
728
+ }
729
+
730
if (!this._menu) return this;
731
if (selection.isCollapsed) {
732
this._menu.style.display = 'none'; //hide menu
754
document.head.appendChild(style);
755
this._stylesheet = stylesheet = style.sheet;
756
}
757
+
758
// display block to caculate its width & height
759
menu.style.display = 'block';
760
js/properties.js CHANGED
@@ -418,6 +418,10 @@ function pagelayer_elpd_row(holder, tab, section, props, name){
418
// Append the row
419
holder.append(row);
420
421
var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui'];
422
423
// Is there a UI Handler ?
@@ -885,16 +889,6 @@ function pagelayer_elp_label(row, prop){
885
886
};
887
888
- // Create the Label
889
- function pagelayer_elp_heading(row, prop){
890
- //row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>');
891
- }
892
-
893
- // Create the Label
894
- function pagelayer_elp_heading_ui(row, prop){
895
- row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>');
896
- }
897
-
898
// Create the Description
899
function pagelayer_elp_desc(row, label){
900
//row.append('<div class="pagelayer-elp-desc">'+label+'</div>');
@@ -980,11 +974,18 @@ function pagelayer_elp_multiselect(row, prop){
980
var show_sel = function(val){
981
var sel_html = '';
982
jQuery.each(val, function(index, value){
983
- sel_html += '<span class="pagelayer-elp-multiselect-selected">'+prop['list'][value]+'</span>';
984
});
985
return sel_html;
986
}
987
988
for (x in prop['list']){
989
options += option(x, prop['list'][x]);
990
}
@@ -995,6 +996,7 @@ function pagelayer_elp_multiselect(row, prop){
995
'</div>';
996
997
row.append(div);
998
999
row.find('.pagelayer-elp-multiselect-option').on('click', function(){
1000
@@ -1011,13 +1013,14 @@ function pagelayer_elp_multiselect(row, prop){
1011
//_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render
1012
_pagelayer_set_atts(row, selection.join(','));// Save and Render
1013
1014
- row.find('.pagelayer-elp-multiselect').html(show_sel(selection));
1015
1016
});
1017
1018
// Open the selector
1019
row.find('.pagelayer-elp-multiselect').on('click', function(){
1020
- row.find('.pagelayer-elp-multiselect-ul').slideToggle();
1021
});
1022
1023
}
@@ -1615,10 +1618,15 @@ function pagelayer_elp_slider(row, prop){
1615
1616
// Set an value in span
1617
row.find('.pagelayer-elp-slider-div input').on('input', function(){
1618
1619
- row.find('.pagelayer-elp-slider-div input').val(this.value);
1620
1621
- _pagelayer_set_atts(row, this.value);// Save and Render
1622
1623
});
1624
@@ -1710,12 +1718,15 @@ function pagelayer_elp_textarea(row, prop){
1710
};
1711
1712
// Clear all editable
1713
- function pagelayer_clear_editable(){
1714
1715
// Destroy all
1716
for(var x in pagelayer_editor){
1717
pagelayer_editor[x].pen.destroy();
1718
- pagelayer_editor[x].$.removeClass('pagelayer-pen');
1719
}
1720
1721
};
@@ -1723,22 +1734,23 @@ function pagelayer_clear_editable(){
1723
// Makes a field editable in the DOM
1724
function pagelayer_make_editable(jEle, e){
1725
1726
// Is it already setup ?
1727
if(jEle.hasClass('pagelayer-pen')){
1728
//console.log('Already Penned');
1729
return true;
1730
}
1731
1732
- var prop = jEle.attr('pagelayer-editable');
1733
-
1734
// Destroy the existing pen
1735
- if(!pagelayer_empty(pagelayer_editor[prop])){
1736
- pagelayer_editor[prop].pen.destroy();
1737
- pagelayer_editor[prop].$.removeClass('pagelayer-pen');
1738
- }
1739
-
1740
- // The parent element
1741
- var pEle = jEle.closest('.pagelayer-ele');
1742
1743
var options = {
1744
class: 'pagelayer-pen',
@@ -1748,9 +1760,9 @@ function pagelayer_make_editable(jEle, e){
1748
}
1749
1750
// Setup the editor
1751
- pagelayer_editor[prop] = {};
1752
- pagelayer_editor[prop].pen = new Pen(options);
1753
- pagelayer_editor[prop].$ = jEle;
1754
1755
// Are we the clicked object, then set the focus
1756
if(e){
@@ -1760,16 +1772,15 @@ function pagelayer_make_editable(jEle, e){
1760
}
1761
}
1762
1763
- // Reverse setup the event
1764
jEle.on('blur', function(){
1765
- //pagelayer_editor[prop].pen.destroy();
1766
});
1767
1768
// Reverse setup the event
1769
jEle.on('focus', function(){
1770
- jQuery('.pagelayer-pen-menu').hide();
1771
- pagelayer_editor[prop].pen.rebuild();
1772
- });
1773
1774
// Reverse setup the event
1775
jEle.on('input', function(){
@@ -1851,15 +1862,15 @@ function pagelayer_elp_icon(row, prop){
1851
}
1852
1853
var div = '<div class="pagelayer-elp-icon-div">'+
1854
- '<div class="pagelayer-elp-icon-preview">'+
1855
- '<i class="'+sel_icon+'"></i>'+
1856
- '<span class="pagelayer-elp-icon-name">'+
1857
- (pagelayer_empty(sel_name)?'Choose icon':sel_name)+
1858
- '</span>'+
1859
- '</div>'+
1860
- '<span class="pagelayer-elp-icon-open">▼</span>'+
1861
- '<span class="pagelayer-elp-icon-close" '+(pagelayer_empty(sel_name)? 'style="display:none"': '')+'><b>&times;&nbsp;</b></span>'+
1862
- '</div>';
1863
1864
row.append(div);
1865
@@ -1869,8 +1880,9 @@ function pagelayer_elp_icon(row, prop){
1869
if(pagelayer_loaded_icons.length > 1){
1870
html += '<select class="pagelayer-elp-icon-sets">'+sets_html+'</select>';
1871
}
1872
- html += '<span class="pagelayer-elp-icon-type" style="display:none;">'+
1873
- '<p data-tab="fas">'+pagelayer_l('Solid')+'</p>'+
1874
'<p data-tab="far">'+pagelayer_l('Regular')+'</p>'+
1875
'<p data-tab="fab">'+pagelayer_l('Brand')+'</p>'+
1876
'</span>'+
@@ -1889,12 +1901,13 @@ function pagelayer_elp_icon(row, prop){
1889
1890
row.append(html);
1891
1892
- if(cur_icon_set == 'font-awesome5'){
1893
- row.find('.pagelayer-elp-icon-type').show();
1894
- sorted_icons = icons[cur_icon_set]['fas'];
1895
- }
1896
1897
- row.find('.pagelayer-elp-icon-sets').on('change',function(){
1898
var v = cur_icon_set = jQuery(this).val();
1899
var span = '';
1900
@@ -1920,57 +1933,35 @@ function pagelayer_elp_icon(row, prop){
1920
row.find('.pagelayer-elp-search-icon').keyup();
1921
}
1922
1923
- });
1924
-
1925
- // Open the selector
1926
- row.find('.pagelayer-elp-icon-div').on('click', function(){
1927
- row.find('.pagelayer-elp-icon-selector').slideToggle();
1928
- });
1929
1930
// Handle type of icon
1931
- row.find('.pagelayer-elp-icon-type p').on('click', function(){
1932
-
1933
- if(cur_icon_set == 'font-awesome5'){
1934
-
1935
- var v = jQuery(this).data('tab');
1936
-
1937
- row.find('.pagelayer-elp-icon-type p').removeClass('active');
1938
-
1939
- jQuery(this).addClass('active');
1940
-
1941
- var span ='';
1942
- v = v.toLowerCase();
1943
-
1944
- sorted_icons = icons['font-awesome5'][v];
1945
-
1946
- for(var z in icons['font-awesome5'][v]['icons']){
1947
- span += icon_html(icons['font-awesome5'][v]['icons'][z], v);
1948
- }
1949
-
1950
- row.find('.pagelayer-elp-icon-list').empty().html(span);
1951
-
1952
- if(row.find('.pagelayer-elp-search-icon').val() != ''){
1953
- row.find('.pagelayer-elp-search-icon').keyup();
1954
- }
1955
-
1956
- }
1957
-
1958
});
1959
1960
// Handle search of icon
1961
row.find('.pagelayer-elp-search-icon').on('keyup', function(){
1962
1963
var v = this.value;
1964
- var span ='';
1965
v = v.toLowerCase();
1966
v = v.replace(/\s+/g, '-');
1967
//console.log(sorted_icons);
1968
1969
- for(var x in sorted_icons['icons']){
1970
- if(sorted_icons['icons'][x].includes(v)){
1971
- span += icon_html(sorted_icons['icons'][x], sorted_icons['pre']);
1972
}
1973
- }
1974
1975
row.find('.pagelayer-elp-icon-list').empty().html(span);
1976
@@ -2012,6 +2003,39 @@ function pagelayer_elp_icon(row, prop){
2012
2013
}
2014
2015
// The Color Property
2016
function pagelayer_elp_color(row, prop){
2017
@@ -2063,7 +2087,7 @@ function pagelayer_elp_color(row, prop){
2063
preview.addClass('pagelayer-blank-preview');
2064
handle_white('');
2065
_pagelayer_set_atts(row, ' ');// Save and Render
2066
- })
2067
2068
}
2069
@@ -2078,7 +2102,13 @@ function pagelayer_elp_spinner(row, prop){
2078
row.append(div);
2079
2080
row.find('input').on('input', function(){
2081
- _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
2082
});
2083
2084
}
@@ -2226,7 +2256,7 @@ function pagelayer_elp_group(row, prop){
2226
// The Datetime Property
2227
function pagelayer_elp_datetime(row, prop){
2228
2229
- var div = '<div class="pagelayer-elp-datetime-div pagelayer-elp-input-icon">'+
2230
'<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+
2231
'</div>';
2232
@@ -2347,6 +2377,7 @@ function pagelayer_elp_shadow(row, prop){
2347
'<label class="pagelayer-elp-label">Color</label>'+
2348
'<div class="pagelayer-elp-color-div">'+
2349
'<div class="pagelayer-elp-color-preview"></div>'+
2350
'</div>'+
2351
'</div>'+
2352
'</div>';
@@ -2357,7 +2388,8 @@ function pagelayer_elp_shadow(row, prop){
2357
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
2358
});
2359
2360
- row.find('.pagelayer-elp-color-preview').css('background', val[3]);
2361
2362
var picker = new Picker({
2363
parent : row.find('.pagelayer-elp-color-div')[0],
@@ -2366,13 +2398,39 @@ function pagelayer_elp_shadow(row, prop){
2366
doc: window.parent.document
2367
});
2368
2369
// Handle selected color
2370
picker.onChange = function(color) {
2371
- row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString);
2372
val[3] = (color.hex ? color.hex : '');
2373
_pagelayer_set_atts(row, val);
2374
};
2375
2376
row.find('input').on('input', function(){
2377
var i = 0;
2378
row.find('.pagelayer-elp-shadow-input').each(function(){
@@ -2419,11 +2477,12 @@ function pagelayer_elp_box_shadow(row, prop){
2419
'<label class="pagelayer-elp-label">Color</label>'+
2420
'<div class="pagelayer-elp-color-div">'+
2421
'<div class="pagelayer-elp-color-preview"></div>'+
2422
'</div>'+
2423
'</div>'+
2424
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-inset">'+
2425
'<label class="pagelayer-elp-label">Shadow</label>'+
2426
- '<select class="pagelayer-elp-shadow-input" name="inset" type="checkbox" class="pagelayer-elp-shadow-inset">'+
2427
'<option value="">Outset</option>'+
2428
'<option value="inset"'+(pagelayer_empty(val[5]) ? '' : ' selected' )+'>Inset</option>'+
2429
'</select>'+
@@ -2436,7 +2495,8 @@ function pagelayer_elp_box_shadow(row, prop){
2436
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
2437
});
2438
2439
- row.find('.pagelayer-elp-color-preview').css('background', val[3]);
2440
2441
var picker = new Picker({
2442
parent : row.find('.pagelayer-elp-color-div')[0],
@@ -2445,13 +2505,40 @@ function pagelayer_elp_box_shadow(row, prop){
2445
doc: window.parent.document
2446
});
2447
2448
// Handle selected color
2449
picker.onChange = function(color) {
2450
row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString);
2451
val[3] = (color.hex ? color.hex : '');
2452
_pagelayer_set_atts(row, val);
2453
};
2454
2455
row.find('.pagelayer-elp-shadow-input').on('input change', function(){
2456
//var i = 0;
2457
row.find('.pagelayer-elp-shadow-input').each(function(){
@@ -2525,8 +2612,8 @@ function pagelayer_elp_gradient(row, prop){
2525
'<label class="pagelayer-elp-label">Angle</label>'+
2526
'<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+
2527
'</div>'+
2528
- '<div class="pagelayer-elp-prop-grp">'+
2529
- '<label class="pagelayer-elp-label">color 1</label>'+
2530
'<div class="pagelayer-elp-color-div">'+
2531
'<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+
2532
'</div>'+
@@ -2535,8 +2622,8 @@ function pagelayer_elp_gradient(row, prop){
2535
'<label class="pagelayer-elp-label">Percentage 1</label>'+
2536
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+
2537
'</div>'+
2538
- '<div class="pagelayer-elp-prop-grp">'+
2539
- '<label class="pagelayer-elp-label">color 2</label>'+
2540
'<div class="pagelayer-elp-color-div">'+
2541
'<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+
2542
'</div>'+
@@ -2545,8 +2632,8 @@ function pagelayer_elp_gradient(row, prop){
2545
'<label class="pagelayer-elp-label">Percentage 2</label>'+
2546
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+
2547
'</div>'+
2548
- '<div class="pagelayer-elp-prop-grp">'+
2549
- '<label class="pagelayer-elp-label">color 3</label>'+
2550
'<div class="pagelayer-elp-color-div">'+
2551
'<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+
2552
'</div>'+
@@ -2669,7 +2756,7 @@ function pagelayer_elp_typography(row, prop){
2669
'</div>'+
2670
'<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+
2671
'<label class="pagelayer-elp-label">Font-Style</label>'+
2672
- '<select class="pagelayer-elp-typo-input">';
2673
2674
jQuery.each(select['style'],function(key, value){
2675
div += option(value, val[2]);
@@ -2678,7 +2765,7 @@ function pagelayer_elp_typography(row, prop){
2678
'</div>'+
2679
'<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+
2680
'<label class="pagelayer-elp-label">Font-Weight</label>'+
2681
- '<select class="pagelayer-elp-typo-input">';
2682
jQuery.each(select['weight'],function(key, value){
2683
div += option(value, val[3]);
2684
});
@@ -2687,7 +2774,7 @@ function pagelayer_elp_typography(row, prop){
2687
'</div>'+
2688
'<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+
2689
'<label class="pagelayer-elp-label">Font-variant</label>'+
2690
- '<select class="pagelayer-elp-typo-input">';
2691
jQuery.each(select['variant'],function(key, value){
2692
div += option(value, val[4]);
2693
});
@@ -2696,7 +2783,7 @@ function pagelayer_elp_typography(row, prop){
2696
'</div>'+
2697
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+
2698
'<label class="pagelayer-elp-label">Decoration Line</label>'+
2699
- '<select class="pagelayer-elp-typo-input">';
2700
jQuery.each(select['deco-line'],function(key, value){
2701
div += option(value, val[5]);
2702
});
@@ -2705,7 +2792,7 @@ function pagelayer_elp_typography(row, prop){
2705
'</div>'+
2706
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+
2707
'<label class="pagelayer-elp-label">Decoration Style</label>'+
2708
- '<select class="pagelayer-elp-typo-input">';
2709
jQuery.each(select['deco-style'],function(key, value){
2710
div += option(value, val[6]);
2711
});
@@ -2718,7 +2805,7 @@ function pagelayer_elp_typography(row, prop){
2718
'</div>'+
2719
'<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+
2720
'<label class="pagelayer-elp-label">Text Transform</label>'+
2721
- '<select class="pagelayer-elp-typo-input">';
2722
jQuery.each(select['transform'],function(key, value){
2723
div += option(value, val[8]);
2724
});
418
// Append the row
419
holder.append(row);
420
421
+ if('group' in prop){
422
+ row.attr('pagelayer-access-item', prop.group);
423
+ }
424
+
425
var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui'];
426
427
// Is there a UI Handler ?
889
890
};
891
892
// Create the Description
893
function pagelayer_elp_desc(row, label){
894
//row.append('<div class="pagelayer-elp-desc">'+label+'</div>');
974
var show_sel = function(val){
975
var sel_html = '';
976
jQuery.each(val, function(index, value){
977
+ sel_html += '<span class="pagelayer-elp-multiselect-selected" data-val="'+value+'">'+prop['list'][value]+' <span class="pagelayer-elp-multiselect-remove">x</span></span>';
978
});
979
return sel_html;
980
}
981
982
+ var setup_remove = function(){
983
+ row.find('.pagelayer-elp-multiselect-remove').on('click', function(){
984
+ var sVal = jQuery(this).parent().attr('data-val');
985
+ row.find('.pagelayer-elp-multiselect-option[data-val='+sVal+']').click();
986
+ });
987
+ }
988
+
989
for (x in prop['list']){
990
options += option(x, prop['list'][x]);
991
}
996
'</div>';
997
998
row.append(div);
999
+ setup_remove();
1000
1001
row.find('.pagelayer-elp-multiselect-option').on('click', function(){
1002
1013
//_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render
1014
_pagelayer_set_atts(row, selection.join(','));// Save and Render
1015
1016
+ row.find('.pagelayer-elp-multiselect').html(show_sel(selection));
1017
+ setup_remove();
1018
1019
});
1020
1021
// Open the selector
1022
row.find('.pagelayer-elp-multiselect').on('click', function(){
1023
+ row.find('.pagelayer-elp-multiselect-ul').slideToggle(100);
1024
});
1025
1026
}
1618
1619
// Set an value in span
1620
row.find('.pagelayer-elp-slider-div input').on('input', function(){
1621
+ var value = parseFloat(this.value);
1622
+ var max = parseFloat(this.max);
1623
1624
+ if(!pagelayer_empty(max) && value > max){
1625
+ value = max;
1626
+ }
1627
+ row.find('.pagelayer-elp-slider-div input').val(value);
1628
1629
+ _pagelayer_set_atts(row, value);// Save and Render
1630
1631
});
1632
1718
};
1719
1720
// Clear all editable
1721
+ function pagelayer_clear_editable(dontDestroy){
1722
1723
// Destroy all
1724
for(var x in pagelayer_editor){
1725
+ if(dontDestroy == x){
1726
+ console.log('Skipping '+dontDestroy);
1727
+ continue;
1728
+ }
1729
pagelayer_editor[x].pen.destroy();
1730
}
1731
1732
};
1734
// Makes a field editable in the DOM
1735
function pagelayer_make_editable(jEle, e){
1736
1737
+ // The parent element
1738
+ var pEle = jEle.closest('.pagelayer-ele');
1739
+ var prop = jEle.attr('pagelayer-editable');
1740
+ var eId = pagelayer_id(pEle)+'|'+jEle.attr('pagelayer-editable');// Editing ID
1741
+
1742
// Is it already setup ?
1743
if(jEle.hasClass('pagelayer-pen')){
1744
//console.log('Already Penned');
1745
+ //pagelayer_focus_editable(jEle, e, eId);
1746
return true;
1747
}
1748
1749
// Destroy the existing pen
1750
+ /*if(!pagelayer_empty(pagelayer_editor[eId])){
1751
+ pagelayer_editor[eId].pen.destroy();
1752
+ pagelayer_editor[eId].$.removeClass('pagelayer-pen');
1753
+ }*/
1754
1755
var options = {
1756
class: 'pagelayer-pen',
1760
}
1761
1762
// Setup the editor
1763
+ pagelayer_editor[eId] = {};
1764
+ pagelayer_editor[eId].pen = new Pen(options);
1765
+ pagelayer_editor[eId].$ = jEle;
1766
1767
// Are we the clicked object, then set the focus
1768
if(e){
1772
}
1773
}
1774
1775
+ /*// Reverse setup the event
1776
jEle.on('blur', function(){
1777
+ //pagelayer_editor[eId].pen.destroy();
1778
});
1779
1780
// Reverse setup the event
1781
jEle.on('focus', function(){
1782
+ //pagelayer_clear_editable(eId);
1783
+ });*/
1784
1785
// Reverse setup the event
1786
jEle.on('input', function(){
1862
}
1863
1864
var div = '<div class="pagelayer-elp-icon-div">'+
1865
+ '<div class="pagelayer-elp-icon-preview">'+
1866
+ '<i class="'+sel_icon+'"></i>'+
1867
+ '<span class="pagelayer-elp-icon-name">'+
1868
+ (pagelayer_empty(sel_name)?'Choose icon':sel_name)+
1869
+ '</span>'+
1870
+ '</div>'+
1871
+ '<span class="pagelayer-elp-icon-open">▼</span>'+
1872
+ '<span class="pagelayer-elp-icon-close" '+(pagelayer_empty(sel_name)? 'style="display:none"': '')+'><b>&times;&nbsp;</b></span>'+
1873
+ '</div>';
1874
1875
row.append(div);
1876
1880
if(pagelayer_loaded_icons.length > 1){
1881
html += '<select class="pagelayer-elp-icon-sets">'+sets_html+'</select>';
1882
}
1883
+
1884
+ html += '<span class="pagelayer-elp-icon-type">'+
1885
+ '<p data-tab="fas" class="active">'+pagelayer_l('Solid')+'</p>'+
1886
'<p data-tab="far">'+pagelayer_l('Regular')+'</p>'+
1887
'<p data-tab="fab">'+pagelayer_l('Brand')+'</p>'+
1888
'</span>'+
1901
1902
row.append(html);
1903
1904
+ // Open the selector
1905
+ row.find('.pagelayer-elp-icon-div').on('click', function(){
1906
+ row.find('.pagelayer-elp-icon-selector').slideToggle();
1907
+ });
1908
1909
+ /*// When the set changes
1910
+ row.find('.pagelayer-elp-icon-sets').on('change', function(){
1911
var v = cur_icon_set = jQuery(this).val();
1912
var span = '';
1913
1933
row.find('.pagelayer-elp-search-icon').keyup();
1934
}
1935
1936
+ });*/
1937
1938
// Handle type of icon
1939
+ row.find('.pagelayer-elp-icon-type p').on('click', function(){
1940
+ jQuery(this).toggleClass('active');
1941
+ row.find('.pagelayer-elp-search-icon').keyup();
1942
});
1943
1944
// Handle search of icon
1945
row.find('.pagelayer-elp-search-icon').on('keyup', function(){
1946
1947
var v = this.value;
1948
+ var span = '';
1949
v = v.toLowerCase();
1950
v = v.replace(/\s+/g, '-');
1951
//console.log(sorted_icons);
1952
1953
+ row.find('.pagelayer-elp-icon-type p.active').each(function(){
1954
+ var tab = jQuery(this).data('tab');
1955
+ tab = tab.toLowerCase();
1956
+
1957
+ var cat = icons['font-awesome5'][tab]['icons'];
1958
+
1959
+ for(var x in cat){
1960
+ if(cat[x].includes(v) || v.length < 1){
1961
+ span += icon_html(cat[x], tab);
1962
+ }
1963
}
1964
+ });
1965
1966
row.find('.pagelayer-elp-icon-list').empty().html(span);
1967
2003
2004
}
2005
2006
+ // The Access Property
2007
+ function pagelayer_elp_access(row, prop){
2008
+
2009
+ var div = '<div class="pagelayer-elp-access-div">'+
2010
+ '<span class="pagelayer-elp-access"><i class="pli pli-caret-right" /></span>'+
2011
+ '<div class="pagelayer-elp-access-holder"></div>'+
2012
+ '</div>';
2013
+
2014
+ row.append(div);
2015
+
2016
+ var holder = row.find('.pagelayer-elp-access-holder');
2017
+
2018
+ row.find('.pagelayer-elp-access').on('click', function(){
2019
+
2020
+ // Setup first
2021
+ if(holder.children().length < 1){
2022
+ var p = row.parent().find('[pagelayer-access-item='+prop.show_group+']').detach();
2023
+ p.appendTo(holder);
2024
+ p.addClass('pagelayer-access-item-visible');
2025
+ }
2026
+
2027
+ // Show and hide
2028
+ if(holder.is(':visible')){
2029
+ holder.hide();
2030
+ row.find('.pli-caret-right').removeClass('pli-caret-open');
2031
+ }else{
2032
+ holder.show();
2033
+ row.find('.pli-caret-right').addClass('pli-caret-open');
2034
+ }
2035
+ });
2036
+
2037
+ };
2038
+
2039
// The Color Property
2040
function pagelayer_elp_color(row, prop){
2041
2087
preview.addClass('pagelayer-blank-preview');
2088
handle_white('');
2089
_pagelayer_set_atts(row, ' ');// Save and Render
2090
+ });
2091
2092
}
2093
2102
row.append(div);
2103
2104
row.find('input').on('input', function(){
2105
+ var value = parseFloat(this.value);
2106
+ var max = parseFloat(this.max);
2107
+
2108
+ if(!pagelayer_empty(max) && value > max){
2109
+ value = max;
2110
+ }
2111
+ _pagelayer_set_atts(row, value);// Save and Render
2112
});
2113
2114
}
2256
// The Datetime Property
2257
function pagelayer_elp_datetime(row, prop){
2258
2259
+ var div = '<div class="pagelayer-elp-datetime-div">'+
2260
'<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+
2261
'</div>';
2262
2377
'<label class="pagelayer-elp-label">Color</label>'+
2378
'<div class="pagelayer-elp-color-div">'+
2379
'<div class="pagelayer-elp-color-preview"></div>'+
2380
+ '<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" /></span>'+
2381
'</div>'+
2382
'</div>'+
2383
'</div>';
2388
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
2389
});
2390
2391
+ var preview = row.find('.pagelayer-elp-color-preview');
2392
+ preview.css('background', val[3]);
2393
2394
var picker = new Picker({
2395
parent : row.find('.pagelayer-elp-color-div')[0],
2398
doc: window.parent.document
2399
});
2400
2401
+ // If no val, then set blank
2402
+ if(pagelayer_empty(val[3])){
2403
+ preview.addClass('pagelayer-blank-preview');
2404
+ }
2405
+
2406
+ var handle_white = function(col){
2407
+ if(col.charAt(1) == 'f'){
2408
+ preview.addClass('pagelayer-white-border');
2409
+ }else{
2410
+ preview.removeClass('pagelayer-white-border');
2411
+ }
2412
+ }
2413
+
2414
+ handle_white(val[3]);
2415
+
2416
// Handle selected color
2417
picker.onChange = function(color) {
2418
+ preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
2419
+ handle_white(color.hex);
2420
val[3] = (color.hex ? color.hex : '');
2421
_pagelayer_set_atts(row, val);
2422
};
2423
2424
+ // Remove Color
2425
+ row.find('.pagelayer-elp-remove-color').on('click', function(event){
2426
+ event.stopPropagation();
2427
+ picker.setColor(prop.default, true);
2428
+ preview.addClass('pagelayer-blank-preview');
2429
+ handle_white('');
2430
+ val[3] = '';
2431
+ _pagelayer_set_atts(row, val);
2432
+ });
2433
+
2434
row.find('input').on('input', function(){
2435
var i = 0;
2436
row.find('.pagelayer-elp-shadow-input').each(function(){
2477
'<label class="pagelayer-elp-label">Color</label>'+
2478
'<div class="pagelayer-elp-color-div">'+
2479
'<div class="pagelayer-elp-color-preview"></div>'+
2480
+ '<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" /></span>'+
2481
'</div>'+
2482
'</div>'+
2483
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-inset">'+
2484
'<label class="pagelayer-elp-label">Shadow</label>'+
2485
+ '<select class="pagelayer-elp-shadow-input pagelayer-elp-select" name="inset" type="checkbox" class="pagelayer-elp-shadow-inset">'+
2486
'<option value="">Outset</option>'+
2487
'<option value="inset"'+(pagelayer_empty(val[5]) ? '' : ' selected' )+'>Inset</option>'+
2488
'</select>'+
2495
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
2496
});
2497
2498
+ var preview = row.find('.pagelayer-elp-color-preview');
2499
+ preview.css('background', val[3]);
2500
2501
var picker = new Picker({
2502
parent : row.find('.pagelayer-elp-color-div')[0],
2505
doc: window.parent.document
2506
});
2507
2508
+ // If no val, then set blank
2509
+ if(pagelayer_empty(val[3])){
2510
+ preview.addClass('pagelayer-blank-preview');
2511
+ }
2512
+
2513
+ var handle_white = function(col){
2514
+ if(col.charAt(1) == 'f'){
2515
+ preview.addClass('pagelayer-white-border');
2516
+ }else{
2517
+ preview.removeClass('pagelayer-white-border');
2518
+ }
2519
+ }
2520
+
2521
+ handle_white(val[3]);
2522
+
2523
// Handle selected color
2524
picker.onChange = function(color) {
2525
row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString);
2526
+ handle_white(color.hex);
2527
val[3] = (color.hex ? color.hex : '');
2528
_pagelayer_set_atts(row, val);
2529
};
2530
2531
+ // Remove Color
2532
+ row.find('.pagelayer-elp-remove-color').on('click', function(event){
2533
+ event.stopPropagation();
2534
+ picker.setColor(prop.default, true);
2535
+ preview.addClass('pagelayer-blank-preview');
2536
+ handle_white('');
2537
+ val[3] = '';
2538
+ _pagelayer_set_atts(row, val);
2539
+ });
2540
+
2541
+ // Onchange set props
2542
row.find('.pagelayer-elp-shadow-input').on('input change', function(){
2543
//var i = 0;
2544
row.find('.pagelayer-elp-shadow-input').each(function(){
2612
'<label class="pagelayer-elp-label">Angle</label>'+
2613
'<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+
2614
'</div>'+
2615
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+
2616
+ '<label class="pagelayer-elp-label">Color 1</label>'+
2617
'<div class="pagelayer-elp-color-div">'+
2618
'<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+
2619
'</div>'+
2622
'<label class="pagelayer-elp-label">Percentage 1</label>'+
2623
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+
2624
'</div>'+
2625
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+
2626
+ '<label class="pagelayer-elp-label">Color 2</label>'+
2627
'<div class="pagelayer-elp-color-div">'+
2628
'<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+
2629
'</div>'+
2632
'<label class="pagelayer-elp-label">Percentage 2</label>'+
2633
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+
2634
'</div>'+
2635
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+
2636
+ '<label class="pagelayer-elp-label">Color 3</label>'+
2637
'<div class="pagelayer-elp-color-div">'+
2638
'<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+
2639
'</div>'+
2756
'</div>'+
2757
'<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+
2758
'<label class="pagelayer-elp-label">Font-Style</label>'+
2759
+ '<select class="pagelayer-elp-typo-input pagelayer-elp-select">';
2760
2761
jQuery.each(select['style'],function(key, value){
2762
div += option(value, val[2]);
2765
'</div>'+
2766
'<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+
2767
'<label class="pagelayer-elp-label">Font-Weight</label>'+
2768
+ '<select class="pagelayer-elp-typo-input pagelayer-elp-select">';
2769
jQuery.each(select['weight'],function(key, value){
2770
div += option(value, val[3]);
2771
});
2774
'</div>'+
2775
'<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+
2776
'<label class="pagelayer-elp-label">Font-variant</label>'+
2777
+ '<select class="pagelayer-elp-typo-input pagelayer-elp-select">';
2778
jQuery.each(select['variant'],function(key, value){
2779
div += option(value, val[4]);
2780
});
2783
'</div>'+
2784
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+
2785
'<label class="pagelayer-elp-label">Decoration Line</label>'+
2786
+ '<select class="pagelayer-elp-typo-input pagelayer-elp-select">';
2787
jQuery.each(select['deco-line'],function(key, value){
2788
div += option(value, val[5]);
2789
});
2792
'</div>'+
2793
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+
2794
'<label class="pagelayer-elp-label">Decoration Style</label>'+
2795
+ '<select class="pagelayer-elp-typo-input pagelayer-elp-select">';
2796
jQuery.each(select['deco-style'],function(key, value){
2797
div += option(value, val[6]);
2798
});
2805
'</div>'+
2806
'<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+
2807
'<label class="pagelayer-elp-label">Text Transform</label>'+
2808
+ '<select class="pagelayer-elp-typo-input pagelayer-elp-select">';
2809
jQuery.each(select['transform'],function(key, value){
2810
div += option(value, val[8]);
2811
});
languages/en.json CHANGED
@@ -1633,6 +1633,7 @@
1633
"object_pos" : "Object Position",
1634
"popup_styles" : "Popup Styles",
1635
"close_by_overlay" : "Closed By Overlay",
1636
"action_triggers" : "Action Triggers",
1637
"advance_options" : "Advance Options",
1638
"popup_multi_time" : "Popup Show Multiple Time",
@@ -1675,5 +1676,7 @@
1675
"pointer_height" : "Pointer Height",
1676
"title_color" : "Title Color",
1677
"img_portfolio" : "Image Portfolio",
1678
- "overlay_cont_pos" : "Overlay Content Position"
1679
}
1633
"object_pos" : "Object Position",
1634
"popup_styles" : "Popup Styles",
1635
"close_by_overlay" : "Closed By Overlay",
1636
+ "close_by_selector" : "Closed By Selector",
1637
"action_triggers" : "Action Triggers",
1638
"advance_options" : "Advance Options",
1639
"popup_multi_time" : "Popup Show Multiple Time",
1676
"pointer_height" : "Pointer Height",
1677
"title_color" : "Title Color",
1678
"img_portfolio" : "Image Portfolio",
1679
+ "overlay_cont_pos" : "Overlay Content Position",
1680
+ "tooltip" : "Tooltip",
1681
+ "enable_overlay" : "Enable Overlay"
1682
}
lib/pquery/gan_node_html.php CHANGED
@@ -395,7 +395,7 @@ class DomNode implements IQuery {
395
* @return string
396
*/
397
function getOuterText() {
398
- return html_entity_decode($this->toString(), ENT_QUOTES);
399
}
400
401
/**
@@ -437,7 +437,7 @@ class DomNode implements IQuery {
437
* @return string
438
*/
439
function getInnerText() {
440
- return html_entity_decode($this->toString(true, true, 1), ENT_QUOTES);
441
}
442
443
/**
@@ -464,7 +464,7 @@ class DomNode implements IQuery {
464
* @return string
465
*/
466
function getPlainText() {
467
- return preg_replace('`\s+`', ' ', html_entity_decode($this->toString(true, true, true), ENT_QUOTES));
468
}
469
470
/**
@@ -477,7 +477,7 @@ class DomNode implements IQuery {
477
if ($enc !== false) {
478
$txt = mb_convert_encoding($txt, 'UTF-8', $enc);
479
}
480
- return preg_replace('`\s+`', ' ', html_entity_decode($txt, ENT_QUOTES, 'UTF-8'));
481
}
482
483
/**
@@ -487,7 +487,7 @@ class DomNode implements IQuery {
487
function setPlainText($text) {
488
$this->clear();
489
if (trim($text)) {
490
- $this->addText(htmlentities($text, ENT_QUOTES));
491
}
492
}
493
395
* @return string
396
*/
397
function getOuterText() {
398
+ return html_entity_decode($this->toString(), ENT_HTML5);
399
}
400
401
/**
437
* @return string
438
*/
439
function getInnerText() {
440
+ return html_entity_decode($this->toString(true, true, 1), ENT_HTML5);
441
}
442
443
/**
464
* @return string
465
*/
466
function getPlainText() {
467
+ return preg_replace('`\s+`', ' ', html_entity_decode($this->toString(true, true, true), ENT_HTML5));
468
}
469
470
/**
477
if ($enc !== false) {
478
$txt = mb_convert_encoding($txt, 'UTF-8', $enc);
479
}
480
+ return preg_replace('`\s+`', ' ', html_entity_decode($txt, ENT_HTML5, 'UTF-8'));
481
}
482
483
/**
487
function setPlainText($text) {
488
$this->clear();
489
if (trim($text)) {
490
+ $this->addText(htmlentities($text, ENT_HTML5));
491
}
492
}
493
main/functions.php CHANGED
@@ -535,6 +535,7 @@ function pagelayer_add_shortcode($tag, $params = array()){
535
'border_styles' => __pl('border_styles'),
536
'position_styles' => __pl('position_styles'),
537
'animation_styles' => __pl('animation_styles'),
538
'responsive_styles' => __pl('responsive_styles'),
539
'custom_styles' => __pl('custom_styles'),
540
];
@@ -1835,4 +1836,124 @@ function pagelayer_upload_media($filename, $blob){
1835
1836
return $attach_id;
1837
1838
}
535
'border_styles' => __pl('border_styles'),
536
'position_styles' => __pl('position_styles'),
537
'animation_styles' => __pl('animation_styles'),
538
+ 'motion_effects' => __pl('Motion Effects'),
539
'responsive_styles' => __pl('responsive_styles'),
540
'custom_styles' => __pl('custom_styles'),
541
];
1836
1837
return $attach_id;
1838
1839
+ }
1840
+
1841
+ // Show the notice of importing the active themes content
1842
+ function pagelayer_theme_import_notices($return = false){
1843
+
1844
+ $theme = wp_get_theme();
1845
+
1846
+ $imported = get_option('pagelayer_theme_'.get_template().'_imported');
1847
+ $show = 0;
1848
+
1849
+ // We need to import the content
1850
+ if(empty($imported) && is_admin() && current_user_can('switch_themes')){
1851
+ $show = 1;
1852
+ }
1853
+
1854
+ $dismissed = get_option('pagelayer_theme_'.get_template().'_dismissed');
1855
+
1856
+ // Is this dismissed
1857
+ if($dismissed){
1858
+ $show = 0;
1859
+ }
1860
+
1861
+ //$show = 1;
1862
+
1863