Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update for Symphony 4.x #30

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

Update for Symphony 4.x #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a5e1c3e
Temp save - New JS functional
May 1, 2017
c04038e
Update for Symphony 4.x
May 1, 2017
481ea32
Remove superfluous css overrides.
May 1, 2017
40bb9dd
Update for Symphony 4.x
Dec 20, 2017
4ceadf4
Make compatible with Field-group
Dec 20, 2017
dccd605
Code refactoring for Database
Jun 5, 2018
e88aebb
Remove unnecessary tab methods
Jun 7, 2018
b33f9b2
replace deprecated fetch by select()
Jun 18, 2018
399b508
Replace deprecated method fetch() by select()
Jun 19, 2018
33ee2cb
Fix last tag-group min-height and scroll offset.
Jul 18, 2018
aa0f66f
Fix prepareTableValue incomplete queries.
Jul 18, 2018
f8ee825
Performance update.
Jul 24, 2018
869f3df
Performance update.
Jul 25, 2018
4fb7dcf
Fix column problem when all fields in main-content.
Sep 6, 2018
f8fe4ce
Fix tabs layout if too many terms for width.
Sep 25, 2018
683b367
Remove call to undefined method saveLocalTab.
Sep 25, 2018
5721917
Remote SQL collate and charset definitions.
Dec 18, 2018
d95abf0
Apply patch by @nitriques for mysql 5.7 compatibility.
Jan 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 168 additions & 31 deletions assets/publish_tabs.publish.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,179 @@
.tab-group {
/*-------------------------------------------------------------------------
Columns Override
-------------------------------------------------------------------------*/

body.publish-tabs .column {
margin: 0;
max-width: 100%!important;
}

/*-------------------------------------------------------------------------
Tabs
-------------------------------------------------------------------------*/

#context > .tabs {
order: 2;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
position: absolute;
top: -99999em;
left: -99999em;
width: 100%;
left: 0;
right: 0;
top: 100%;
margin: 1px 0 0;
padding: 0 3rem;
border-bottom: 1px solid #d3dce2;
background: #fff;
height: 6rem;
z-index: 10;
white-space: nowrap;
list-style-type: none;
}

#context > .tabs li {
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
color: #3B3D40;
font-size: 1.2rem;
text-transform: uppercase;
line-height: 6rem;
margin-right: 3rem;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
height: 6rem;
cursor: pointer;
}

#context > .tabs li:last-child {
margin-right: 0;
}

#context > .tabs li:hover,
#context > .tabs li.selected,
#context > .tabs li.active {
color: #2f77eb!important;
border-bottom-color: #2f77eb;
z-index: 10;
}

.tab-group-selected {
position: static;
#context > .tabs li.invalid {
color: #ee494e!important;
}

ul.tabs li.invalid .icon {
background: #f4f4f4;
color: rgba(255, 255, 255, 0.7);
-webkit-box-shadow: none;
box-shadow: none;
display: inline-block;
vertical-align: top;
text-align: center;
width: 16px;
height: 16px;
line-height: 16px;
margin: 0 0 0 5px;
border-radius: 8px;
font-weight: lighter;
#context > .tabs li.invalid:hover,
#context > .tabs li.invalid.selected,
#context > .tabs li.invalid.selected:hover {
color: #ee494e!important;
border-bottom-color: #ee494e;
z-index: 10;
}

ul.tabs li.invalid.selected .icon {
background: #dd4422;
color: #f4f4f4;
@media (min-width: 1280px){
#context > .tabs {
left: auto;
width: 45rem;
}

#context > .tabs:before {
content: '';
position: absolute;
left: 0;
top: 0;
background: #d3dce2;
width: 1px;
height: 100vh;
}

#context > .tabs li:first-child {
display: none;
}
}

ul.tabs li.invalid:hover,
ul.tabs li.invalid .icon {
text-shadow: none;
color: #dd4422;
/*-------------------------------------------------------------------------
Tab Groups
-------------------------------------------------------------------------*/

.tab-group {
box-sizing: border-box;
background: #fff;
}

ul.tabs li.invalid:hover .icon {
background: #dd4422;
color: rgba(255, 255, 255, 0.7);
}
.tab-group > h2 {
color: #2f77eb;
font-size: 2.4rem;
font-weight: 300;
padding: 1rem 0 3rem;
}

.tab-group:first-child > h2 {
padding-top: 7rem;
}

.tab-group:nth-child(n + 2) {
box-sizing: border-box;
position: relative;
left: 0;
top: 0;
padding-bottom: 3rem;
}

.tab-group:last-child {
min-height: calc(100vh - 21.9rem);
}

@media (max-width: 1279px){
.tab-group:first-child {
position: relative;
left: 0;
top: 0;
padding-bottom: 3rem;
height: auto;
}

.tab-group:nth-child(n + 2) {
padding-top: 3rem;
border-top: 1px solid #d3dce2;
}
}

@media (min-width: 1280px){
.tab-group:first-child {
overflow: auto;
position: fixed;
left: 25.1rem;
right: 45rem;
top: 6rem;
padding: 3rem 3rem 10rem;
width: auto;
height: calc(100vh - 6rem);
}

.tab-group:first-child > * {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
max-width: 90rem;
}

.tab-group:nth-child(2) {
padding-top: 3rem;
}

.tab-group:nth-child(n + 2) {
clear: both;
float: right;
margin-right: -3rem;
padding-left: 3rem;
padding-right: 3rem;
width: 45rem;
}

.tab-group:nth-child(n + 3) {
padding-top: 3rem;
border-top: 1px solid #d3dce2;
}
}
132 changes: 80 additions & 52 deletions assets/publish_tabs.publish.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ Symphony.Language.add({

tab_controls: null,
new_entry: false,
sectionHandle: 'not-found',

init: function() {
var self = this;
Expand All @@ -31,9 +30,6 @@ Symphony.Language.add({

var body = $('body');

// isolate the section handle: this is use as a key for local storage
this.sectionHandle = /section-handle-[^\s]+/g.exec(body.attr('class'))[0];

body.addClass('publish-tabs');

// are we creating a new entry or editing an existing one?
Expand Down Expand Up @@ -74,11 +70,7 @@ Symphony.Language.add({
var id = t.attr('data-id');
if (t.hasClass('selected')) return;
if (!!id) {
self.showTab(id);
// if it's a real user click
if (!!e.originalEvent) {
self.saveLocalTab('publish-tab', id);
}
self.showTab(t);
}
});

Expand All @@ -92,63 +84,99 @@ Symphony.Language.add({
// append tags controls
context.append(this.tab_controls);

// selected the right tab
if (has_invalid_tabs) {
this.tab_controls.find('li.invalid:first').click();
} else {
var initial_tab = self.getURLParameter('publish-tab');
var local_tab = self.getLocalTab('publish-tab');
// Init - Variables
var o = {
tabGroup: '.tab-group',
secTabGroup: '.secondary.column .tab-group',
priTabGroup: '.primary.column .tab-group',
columns: '.two.columns',
secColumn: '.secondary.column',
priColumn: '.primary.column',
contextTabs: '#context .tabs li'
};

// Init - Repartition of the divided tabs in the Primary Column
if($(o.secTabGroup).length){
$(o.secTabGroup).parents(o.columns).attr('class', '');

$(o.secTabGroup).each(function(){
var t = $(this);
var classes = t.attr('class').split(' ');

if($(o.priTabGroup+'.'+classes[1]).length) {
$('> .field, > .field-group', t).each(function(){
$(this).appendTo(o.priTabGroup+'.'+classes[1]);
});
} else {
var tID = classes[1].replace('tab-group-', '');
var prev = $(o.contextTabs+'[data-id="'+tID+'"]').prev();

if(prev.length) {
$(o.priTabGroup).eq(prev.index()).after(t);
} else {
t.prependTo(o.priColumn);
}
}
});

var selector = !!initial_tab ? '.' + initial_tab : (!!local_tab ? local_tab : 'li:first');
this.tab_controls.find(selector).click();
$(o.secTabGroup).remove();
}
},

showTab: function(tab) {
var w = $('#contents').width();

// de-select current tab and select the new tab
this.tab_controls.find('li.selected').removeClass('selected');
this.tab_controls.find('li.tab-' + tab).addClass('selected');
// Init - Add a title to each Tab
$(o.contextTabs).each(function(){
var t = $(this);
var tID = t.attr('data-id');
var title = t.text();
$(o.priTabGroup+'.tab-group-'+tID).prepend('<h2>'+title+'</h2>');
});

// Init Scroll Events
self.updateTab();
$(window).on('scroll', function(){
self.updateTab();
}).on('resize', function(){
self.updateTab();
});
},

// hide current tab group and select new group
$('.tab-group-selected').removeClass('tab-group-selected');
$('.tab-group-' + tab).addClass('tab-group-selected');
showTab: function(t) {
$('html, body').stop().animate({scrollTop: ($('.tab-group').eq(t.index()).offset().top - 119)}, 750);

var invalid_field = $('.tab-group-' + tab + ' .invalid');
// focus first invalid element
if (invalid_field.length) {
invalid_field.eq(0).find('*[name*="fields["]').focus();
}
// focus first field in tab when creating a new entry
else if (this.new_entry) {
$('.tab-group-' + tab + ' .field:first *[name*="fields["]').focus();
}
return false;
},

getURLParameter: function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
},
updateTab: function() {
var o = {
tabGroup: '.tab-group',
contextTabs: '#context .tabs li'
};
var win = $(window);
var pageEnd = $(document).height() - win.height();
var curScroll = win.scrollTop();

if(curScroll == 0){
$(o.contextTabs).removeClass('selected');
if(win.width() < 1280) $(o.contextTabs + ':first-child').addClass('selected');
else $(o.contextTabs + ':nth-child(2)').addClass('selected');
} else if(curScroll == pageEnd){
$(o.contextTabs).removeClass('selected');
$(o.contextTabs + ':last-child').addClass('selected');
} else {
$(o.tabGroup).each(function(){
var t = $(this);

generateLocalKey: function (name) {
if (!name) {
throw new Exception('A name must be given');
if(curScroll + (win.height() / 2) > t.offset().top) {
$(o.contextTabs).removeClass('selected');
$(o.contextTabs).eq(t.index()).addClass('selected');
}
});
}
return 'symphony.' + name + '.' + this.sectionHandle;
},

getLocalTab: function (name) {
return localStorage[this.generateLocalKey(name)];
},

saveLocalTab: function (name, tab) {
localStorage[this.generateLocalKey(name)] = '.tab-' + tab;
}
};

$(function() {
PublishTabs.init();
$('.drawer.vertical-left, .drawer.vertical-right').trigger('update.drawer');
});

})(jQuery);
})(jQuery);
Loading