From 3c6ebfa5a9055c71502324aa4c4b93c3d5857cc1 Mon Sep 17 00:00:00 2001 From: Fabrixxm Date: Wed, 3 Feb 2016 14:03:00 +0100 Subject: [PATCH] Vier - mobile friendly ACL window and form fields --- js/acl.js | 207 +++++++++++++++++--------------- js/main.js | 2 +- view/templates/acl_selector.tpl | 3 +- view/templates/jot-header.tpl | 21 ++-- view/theme/vier/mobile.css | 74 ++++++++++++ 5 files changed, 197 insertions(+), 110 deletions(-) diff --git a/js/acl.js b/js/acl.js index 487ffafc7..8e4e06c83 100644 --- a/js/acl.js +++ b/js/acl.js @@ -1,49 +1,56 @@ -function ACL(backend_url, preset, automention){ - that = this; +function ACL(backend_url, preset, automention, is_mobile){ - that.url = backend_url; - that.automention = automention; + this.url = backend_url; + this.automention = automention; + this.is_mobile = is_mobile; - that.kp_timer = null; + + this.kp_timer = null; if (preset==undefined) preset = []; - that.allow_cid = (preset[0] || []); - that.allow_gid = (preset[1] || []); - that.deny_cid = (preset[2] || []); - that.deny_gid = (preset[3] || []); - that.group_uids = []; - that.nw = 4; //items per row. should be calulated from #acl-list.width - - that.list_content = $("#acl-list-content"); - that.item_tpl = unescape($(".acl-list-item[rel=acl-template]").html()); - that.showall = $("#acl-showall"); + this.allow_cid = (preset[0] || []); + this.allow_gid = (preset[1] || []); + this.deny_cid = (preset[2] || []); + this.deny_gid = (preset[3] || []); + this.group_uids = []; - if (preset.length==0) that.showall.addClass("selected"); + if (this.is_mobile) { + this.nw = 1; + } else { + this.nw = 4; + } + + + this.list_content = $("#acl-list-content"); + this.item_tpl = unescape($(".acl-list-item[rel=acl-template]").html()); + this.showall = $("#acl-showall"); + + if (preset.length==0) this.showall.addClass("selected"); /*events*/ - that.showall.click(that.on_showall); - $(document).on("click", ".acl-button-show", that.on_button_show); - $(document).on("click", ".acl-button-hide", that.on_button_hide); - $("#acl-search").keypress(that.on_search); - $("#acl-wrapper").parents("form").submit(that.on_submit); + this.showall.click(this.on_showall); + $(document).on("click", ".acl-button-show", this.on_button_show.bind(this)); + $(document).on("click", ".acl-button-hide", this.on_button_hide.bind(this)); + $("#acl-search").keypress(this.on_search.bind(this)); + $("#acl-wrapper").parents("form").submit(this.on_submit.bind(this)); /* add/remove mentions */ - that.element = $("#profile-jot-text"); - that.htmlelm = that.element.get()[0]; + this.element = $("#profile-jot-text"); + this.htmlelm = this.element.get()[0]; /* startup! */ - that.get(0,100); + this.get(0,100); } ACL.prototype.remove_mention = function(id) { - if (!that.automention) return; - var nick = that.data[id].nick; + if (!this.automention) return; + var nick = this.data[id].nick; var searchText = "@"+nick+"+"+id+" "; if (tinyMCE.activeEditor===null) { - start = that.element.val().indexOf(searchText); + start = this.element.val().indexOf(searchText); if ( start<0) return; end = start+searchText.length; - that.element.setSelection(start,end).replaceSelectedText('').collapseSelection(false); + this.element.setSelection(start,end).replaceSelectedText('').collapseSelection(false); } else { start = tinyMCE.activeEditor.getContent({format : 'raw'}).search( searchText ); if ( start<0 ) return; @@ -54,12 +61,12 @@ ACL.prototype.remove_mention = function(id) { } ACL.prototype.add_mention = function(id) { - if (!that.automention) return; - var nick = that.data[id].nick; + if (!this.automention) return; + var nick = this.data[id].nick; var searchText = "@"+nick+"+"+id+" "; if (tinyMCE.activeEditor===null) { - if ( that.element.val().indexOf( searchText) >= 0 ) return; - that.element.val( searchText + that.element.val() ); + if ( this.element.val().indexOf( searchText) >= 0 ) return; + this.element.val( searchText + this.element.val() ); } else { if ( tinyMCE.activeEditor.getContent({format : 'raw'}).search(searchText) >= 0 ) return; tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'dummy', {}, searchText); @@ -68,46 +75,46 @@ ACL.prototype.add_mention = function(id) { ACL.prototype.on_submit = function(){ aclfileds = $("#acl-fields").html(""); - $(that.allow_gid).each(function(i,v){ + $(this.allow_gid).each(function(i,v){ aclfileds.append(""); }); - $(that.allow_cid).each(function(i,v){ + $(this.allow_cid).each(function(i,v){ aclfileds.append(""); }); - $(that.deny_gid).each(function(i,v){ + $(this.deny_gid).each(function(i,v){ aclfileds.append(""); }); - $(that.deny_cid).each(function(i,v){ + $(this.deny_cid).each(function(i,v){ aclfileds.append(""); }); } ACL.prototype.search = function(){ var srcstr = $("#acl-search").val(); - that.list_content.html(""); - that.get(0,100, srcstr); + this.list_content.html(""); + this.get(0,100, srcstr); } ACL.prototype.on_search = function(event){ - if (that.kp_timer) clearTimeout(that.kp_timer); - that.kp_timer = setTimeout( that.search, 1000); + if (this.kp_timer) clearTimeout(this.kp_timer); + this.kp_timer = setTimeout( this.search.bind(this), 1000); } ACL.prototype.on_showall = function(event){ event.preventDefault() event.stopPropagation(); - if (that.showall.hasClass("selected")){ + if (this.showall.hasClass("selected")){ return false; } - that.showall.addClass("selected"); + this.showall.addClass("selected"); - that.allow_cid = []; - that.allow_gid = []; - that.deny_cid = []; - that.deny_gid = []; + this.allow_cid = []; + this.allow_gid = []; + this.deny_cid = []; + this.deny_gid = []; - that.update_view(); + this.update_view(); return false; } @@ -117,11 +124,11 @@ ACL.prototype.on_button_show = function(event){ event.stopImmediatePropagation() event.stopPropagation(); - /*that.showall.removeClass("selected"); + /*this.showall.removeClass("selected"); $(this).siblings(".acl-button-hide").removeClass("selected"); $(this).toggleClass("selected");*/ - that.set_allow($(this).parent().attr('id')); + this.set_allow($(this).parent().attr('id')); return false; } @@ -130,11 +137,11 @@ ACL.prototype.on_button_hide = function(event){ event.stopImmediatePropagation() event.stopPropagation(); - /*that.showall.removeClass("selected"); + /*this.showall.removeClass("selected"); $(this).siblings(".acl-button-show").removeClass("selected"); $(this).toggleClass("selected");*/ - that.set_deny($(this).parent().attr('id')); + this.set_deny($(this).parent().attr('id')); return false; } @@ -145,25 +152,25 @@ ACL.prototype.set_allow = function(itemid){ switch(type){ case "g": - if (that.allow_gid.indexOf(id)<0){ - that.allow_gid.push(id) + if (this.allow_gid.indexOf(id)<0){ + this.allow_gid.push(id) }else { - that.allow_gid.remove(id); + this.allow_gid.remove(id); } - if (that.deny_gid.indexOf(id)>=0) that.deny_gid.remove(id); + if (this.deny_gid.indexOf(id)>=0) this.deny_gid.remove(id); break; case "c": - if (that.allow_cid.indexOf(id)<0){ - that.allow_cid.push(id) - if (that.data[id].forum=="1") that.add_mention(id); + if (this.allow_cid.indexOf(id)<0){ + this.allow_cid.push(id) + if (this.data[id].forum=="1") this.add_mention(id); } else { - that.allow_cid.remove(id); - if (that.data[id].forum=="1") that.remove_mention(id); + this.allow_cid.remove(id); + if (this.data[id].forum=="1") this.remove_mention(id); } - if (that.deny_cid.indexOf(id)>=0) that.deny_cid.remove(id); + if (this.deny_cid.indexOf(id)>=0) this.deny_cid.remove(id); break; } - that.update_view(); + this.update_view(); } ACL.prototype.set_deny = function(itemid){ @@ -172,34 +179,34 @@ ACL.prototype.set_deny = function(itemid){ switch(type){ case "g": - if (that.deny_gid.indexOf(id)<0){ - that.deny_gid.push(id) + if (this.deny_gid.indexOf(id)<0){ + this.deny_gid.push(id) } else { - that.deny_gid.remove(id); + this.deny_gid.remove(id); } - if (that.allow_gid.indexOf(id)>=0) that.allow_gid.remove(id); + if (this.allow_gid.indexOf(id)>=0) this.allow_gid.remove(id); break; case "c": - if (that.data[id].forum=="1") that.remove_mention(id); - if (that.deny_cid.indexOf(id)<0){ - that.deny_cid.push(id) + if (this.data[id].forum=="1") this.remove_mention(id); + if (this.deny_cid.indexOf(id)<0){ + this.deny_cid.push(id) } else { - that.deny_cid.remove(id); + this.deny_cid.remove(id); } - if (that.allow_cid.indexOf(id)>=0) that.allow_cid.remove(id); + if (this.allow_cid.indexOf(id)>=0) this.allow_cid.remove(id); break; } - that.update_view(); + this.update_view(); } ACL.prototype.is_show_all = function() { - return (that.allow_gid.length==0 && that.allow_cid.length==0 && - that.deny_gid.length==0 && that.deny_cid.length==0); + return (this.allow_gid.length==0 && this.allow_cid.length==0 && + this.deny_gid.length==0 && this.deny_cid.length==0); } ACL.prototype.update_view = function(){ if (this.is_show_all()){ - that.showall.addClass("selected"); + this.showall.addClass("selected"); /* jot acl */ $('#jot-perms-icon').removeClass('lock').addClass('unlock'); $('#jot-public').show(); @@ -209,7 +216,7 @@ ACL.prototype.update_view = function(){ } } else { - that.showall.removeClass("selected"); + this.showall.removeClass("selected"); /* jot acl */ $('#jot-perms-icon').removeClass('unlock').addClass('lock'); $('#jot-public').hide(); @@ -220,29 +227,29 @@ ACL.prototype.update_view = function(){ $(this).removeClass("groupshow grouphide"); }); - $("#acl-list-content .acl-list-item").each(function(){ - itemid = $(this).attr('id'); + $("#acl-list-content .acl-list-item").each(function(index, element){ + itemid = $(element).attr('id'); type = itemid[0]; id = parseInt(itemid.substr(1)); - btshow = $(this).children(".acl-button-show").removeClass("selected"); - bthide = $(this).children(".acl-button-hide").removeClass("selected"); + btshow = $(element).children(".acl-button-show").removeClass("selected"); + bthide = $(element).children(".acl-button-hide").removeClass("selected"); switch(type){ case "g": var uclass = ""; - if (that.allow_gid.indexOf(id)>=0){ + if (this.allow_gid.indexOf(id)>=0){ btshow.addClass("selected"); bthide.removeClass("selected"); uclass="groupshow"; } - if (that.deny_gid.indexOf(id)>=0){ + if (this.deny_gid.indexOf(id)>=0){ btshow.removeClass("selected"); bthide.addClass("selected"); uclass="grouphide"; } - $(that.group_uids[id]).each(function(i,v) { + $(this.group_uids[id]).each(function(i,v) { if(uclass == "grouphide") $("#c"+v).removeClass("groupshow"); if(uclass != "") { @@ -257,17 +264,17 @@ ACL.prototype.update_view = function(){ break; case "c": - if (that.allow_cid.indexOf(id)>=0){ + if (this.allow_cid.indexOf(id)>=0){ btshow.addClass("selected"); bthide.removeClass("selected"); } - if (that.deny_cid.indexOf(id)>=0){ + if (this.deny_cid.indexOf(id)>=0){ btshow.removeClass("selected"); bthide.addClass("selected"); } } - }); + }.bind(this)); } @@ -281,30 +288,30 @@ ACL.prototype.get = function(start,count, search){ $.ajax({ type:'POST', - url: that.url, + url: this.url, data: postdata, dataType: 'json', - success:that.populate + success:this.populate.bind(this) }); } ACL.prototype.populate = function(data){ - var height = Math.ceil(data.tot / that.nw) * 42; - that.list_content.height(height); - that.data = {}; - $(data.items).each(function(){ - html = "
"+that.item_tpl+"
"; - html = html.format(this.photo, this.name, this.type, this.id, (this.forum=='1'?'forum':''), this.network, this.link); - if (this.uids!=undefined) that.group_uids[this.id] = this.uids; + var height = Math.ceil(data.tot / this.nw) * 42; + this.list_content.height(height); + this.data = {}; + $(data.items).each(function(index, item){ + html = "
"+this.item_tpl+"
"; + html = html.format(item.photo, item.name, item.type, item.id, (item.forum=='1'?'forum':''), item.network, item.link); + if (item.uids!=undefined) this.group_uids[item.id] = item.uids; //console.log(html); - that.list_content.append(html); - that.data[this.id] = this; - }); - $(".acl-list-item img[data-src]", that.list_content).each(function(i, el){ + this.list_content.append(html); + this.data[item.id] = item; + }.bind(this)); + $(".acl-list-item img[data-src]", this.list_content).each(function(i, el){ // Add src attribute for images with a data-src attribute $(el).attr('src', $(el).data("src")); }); - that.update_view(); + this.update_view(); } diff --git a/js/main.js b/js/main.js index bba5e9296..5a1affe3c 100644 --- a/js/main.js +++ b/js/main.js @@ -9,7 +9,7 @@ if (h==ch) { return; } - console.log("_resizeIframe", obj, desth, ch); + //console.log("_resizeIframe", obj, desth, ch); if (desth!=ch) { setTimeout(_resizeIframe, 500, obj, ch); } else { diff --git a/view/templates/acl_selector.tpl b/view/templates/acl_selector.tpl index bf9470b64..bb7613506 100644 --- a/view/templates/acl_selector.tpl +++ b/view/templates/acl_selector.tpl @@ -29,7 +29,8 @@ $(document).ready(function() { acl = new ACL( baseurl+"/acl", [ {{$allowcid}},{{$allowgid}},{{$denycid}},{{$denygid}} ], - {{$features.aclautomention}} + {{$features.aclautomention}}, + {{$APP->is_mobile}} ); } }); diff --git a/view/templates/jot-header.tpl b/view/templates/jot-header.tpl index 647f261c4..b06f6032c 100644 --- a/view/templates/jot-header.tpl +++ b/view/templates/jot-header.tpl @@ -8,16 +8,24 @@ var plaintext = '{{$editselect}}'; function initEditor(cb){ if (editor==false){ + var colorbox_options = { + {{if $APP->is_mobile}} + 'width' : '100%', + 'height' : '100%', + {{/if}} + 'inline' : true, + 'transition' : 'elastic' + } + + + $("#profile-jot-text-loading").show(); if(plaintext == 'none') { $("#profile-jot-text-loading").hide(); $("#profile-jot-text").css({ 'height': 200, 'color': '#000' }); $("#profile-jot-text").contact_autocomplete(baseurl+"/acl"); editor = true; - $("a#jot-perms-icon").colorbox({ - 'inline' : true, - 'transition' : 'elastic' - }); + $("a#jot-perms-icon").colorbox(colorbox_options); $(".jothidden").show(); if (typeof cb!="undefined") cb(); return; @@ -107,10 +115,7 @@ function initEditor(cb){ }); editor = true; // setup acl popup - $("a#jot-perms-icon").colorbox({ - 'inline' : true, - 'transition' : 'elastic' - }); + $("a#jot-perms-icon").colorbox(colorbox_options); } else { if (typeof cb!="undefined") cb(); } diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css index f6ec2b8cc..128fb469c 100644 --- a/view/theme/vier/mobile.css +++ b/view/theme/vier/mobile.css @@ -161,3 +161,77 @@ aside.show { } .tabs.show::after { display: none; } .tabs.show .tab { display: block; } + +/* ACL window */ +#profile-jot-acl-wrapper, #profile-jot-acl-wrapper * { box-sizing: border-box; } +#acl-wrapper { width: 100%; float: none; } +#acl-search { width: 100%; float: none; padding-right: 0px; margin-bottom: 1em; } +#acl-showall { width: 100%; height: 48px; margin-bottom: 1em; } +.acl-list-item { width: auto; float: none; height: auto; overflow: hidden; position: relative;} +.acl-list-item img { width: 48px; height: 48px; } +.acl-list-item p { height: auto; font-size: inherit; } +.acl-list-item a { + float: none; + position: absolute; + top: 5px; + right: 5px; + height: 48px; + padding: 10px 2px 2px 2px; + font-size: 12px; + width: 20%; + text-align: center; + background-position: center 5px; +} +.acl-list-item a.acl-button-hide { right: 25%; } +/* flexbox for ACL window */ +#cboxLoadedContent, +#cboxLoadedContent > div, +#acl-wrapper { + display: -ms-Flexbox !important; + -ms-box-orient: vertival; + + display: -webkit-flex !important; + display: -moz-flex !important; + display: -ms-flex !important; + display: flex !important; + + -webkit-flex-flow: column; + -moz-flex-flow: column; + -ms-flex-flow: column; + flex-flow: column; + + -webkit-flex: 1 100%; + -moz-flex: 1 100%; + -ms-flex: 1 100%; + flex: 1 100%; +} +#acl-list { + -webkit-flex: 1 1 auto; + -moz-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +/** input elements **/ +input, +textarea, +select { + font-size: 18px; + border: 1px solid #888; + padding: 0.2em; +} +input:focus, +textarea:focus, +select:focus { + box-shadow: 1px 1px 10px rgba(46, 151, 255, 0.62); +} + +.field, .field > * { box-sizing: border-box; } +.field label { width: 100%; float: none; display: block; } +.field input, .field textarea, .field select { max-width: 100%; width: 100%; } +.field.yesno .onoff, +.field.checkbox input { width: auto; float: right; } +.field.yesno label, +.field.checkbox label { width: 70%; float: left; } +.field .field_help { margin: 0; } +