Go Back   MarcomCentral (PTI) and FusionPro User Communities > Software-Related Talk > The JavaScript Library

Notices

Reply
 
Thread Tools Search this Thread Display Modes
  #1  
Old April 19th, 2018, 11:04 AM
David Miller David Miller is offline
Senior Contributor
 
Join Date: Oct 2008
Location: Wallingford, CT
Posts: 263
Default Variable Width Headings that Group Headshots by Teams

Wondering if anyone has a solution or suggestion how to accomplish this. The attached PDF shows what we need far better than what I can put into words. Flip though all 4 pages and you'll see what I mean.

We are trying to group people into teams. There are 4 teams that always appear in the same order.
  1. Onsite Team (Light Blue)
  2. Service Leadership (Dark Blue)
  3. Support Team (Light Green)
  4. Regional Team (Dark Green)
The headshots always appear from the top left to bottom right. 6 across then a maximum of 4 rows down. 24 headshots maximum.

If less than 24 headshots are used. White space begins in the bottom right working it's way backwards.

The headshots have drop shadows or outer glows that use transparency. We will prepare them with the shadows.

For what it is worth, this will be a Versioned Product in MarcomCentral.
Attached Files
File Type: pdf Whos_Who_Ellis_Poster.pdf (630.4 KB, 23 views)
__________________
David Miller
FusionPro VDP Creator 10.0.26
Adobe Acrobat Pro 2019.008.20074
Suitcase Fusion 20.0.0 (7653)
macOS High Sierra 10.13.6

Last edited by David Miller; April 19th, 2018 at 01:31 PM..
Reply With Quote
  #2  
Old April 20th, 2018, 08:33 AM
Fellsway Fellsway is offline
Junior Community Member
 
Join Date: Apr 2012
Location: Dallas
Posts: 35
Default Re: Variable Width Headings that Group Headshots by Teams

That is quite a project. I'm looking forward to someones solution on how to tackle that.
Reply With Quote
  #3  
Old April 20th, 2018, 01:24 PM
step's Avatar
step step is offline
Senior Contributor
 
Join Date: Jan 2010
Location: Charlotte, NC
Posts: 955
Default Re: Variable Width Headings that Group Headshots by Teams

I think you could use a table to achieve that layout. Each team member would be made up of two rows: the first row would be their team name and the second row would be there headshot/name/etc. Then you'd just horizontally straddle the first row for team members on the same team.

The tricky part, in my mind, is the fact that the team names don't just butt up to each other. So considering that, I would add two additional columns on each team member's table – one on the left and one on the right. These columns won't have any content but will allow us to manipulate the gap between each team member. The benefit over simply increasing the margins on our cells is that we can still allow the team name headers to straddle the dummy columns.

Anyway, I'm sure there's probably a better/more efficient way to do this but I thought I'd give it shot:
Code:
var columns = 6;
var rows = 4;
var teams = {
  'onsite team': { color: [72, 15, 0, 0] },
  'service leadership': { color: [94, 68, 1, 0] },
  'support team': { color: [64, 6, 100, 0] },
  'regional team': { color: [86, 30, 55, 9] }
}

// Assumes Field names:  Name1, Team1, Headshot1, Title1, etc
for (var i = 1; i <= columns * rows; i++) {
  var teamname = Field('Team' + i);
  if (!(team = teams[teamname])) continue;
  if (!team.members) {
    team.members = [];
    // Create the color for this team.
    FusionProColor.apply(null, [teamname].concat(team.color));
  }
  team.members.push({
    team: ToUpper(teamname),
    name: Field('Name' + i),
    headshot: CreateResource(Field('Headshot' + i) + '.pdf', 'graphic', true),
    title: Field('Title' + i)
  });
}

var data = [];
for (var team in teams) {
  if (members = teams[team].members)
    data = data.concat(members);
}

// Return nothing if no data was found.
if (!data.length) return '';

// Table configuration.
var colWidth = 1.5 * 7200;               // 1.5" Column
var spaceBetweenColumns = 0.125 * 7200;  // 1/8" Space between columns
var table = new FPTable();
// Add the columns to the table definition.
for (var col = 0; col < columns * 3; col++) {
  var width = col % 3 == 1 ? colWidth : spaceBetweenColumns / 2;
  table.AddColumn(width);
}

while (data.length) {
  var people = data.splice(0, columns);
  var team = false;
  var teamRow = table.AddRow();
  var picRow = table.AddRow();

  // Global styles.
  [teamRow, picRow].map(function (row) {
    var cell = row.Cells[0];
    cell.HAlign = 'Center';
    cell.VAlign = 'Middle';
    cell.Margins = { 'Top': spaceBetweenColumns / 10, 'Bottom': spaceBetweenColumns / 10, 'Left': 10, 'Right': 10 };
    row.CopyCells.apply(row, row.Cells.map(function (s, p) { return p; }));
    row.minHeight = 1800;
  });

  for (var i = 1; i <= teamRow.Cells.length && people.length; i += 3) {
    var person = people.shift();
    var teamCell = teamRow.Cells[i];
    var picCell = picRow.Cells[i];
    if (team && person.team == team.Content) {
      team.HStraddle += 3;
    } else {
      teamCell.ShadeColor = person.team;
      teamCell.ShadePct = 100;
      teamCell.HStraddle = 1;
      teamCell.Content = person.team;
      team = teamCell;
    }
    var headshot = person.headshot.exists ?
      person.headshot.content.replace('/>', 'width="' + colWidth - picCell.Margins.Left - picCell.Margins.Right + '"/>') : '';
    picCell.Content = [headshot, person.name, person.title].filter(String).join('<br>');
  }
}
return table.MakeTags();
__________________
Ste Pennell
FusionPro VDP Creator 9.3.15
Adobe Acrobat X 10.1.1
Mac OS X 10.12

LinkedIn
Reply With Quote
  #4  
Old April 20th, 2018, 02:18 PM
David Miller David Miller is offline
Senior Contributor
 
Join Date: Oct 2008
Location: Wallingford, CT
Posts: 263
Default Re: Variable Width Headings that Group Headshots by Teams

Thank you Ste. Much appreciated. Will give it a try.
__________________
David Miller
FusionPro VDP Creator 10.0.26
Adobe Acrobat Pro 2019.008.20074
Suitcase Fusion 20.0.0 (7653)
macOS High Sierra 10.13.6
Reply With Quote
  #5  
Old April 29th, 2018, 08:59 PM
David Miller David Miller is offline
Senior Contributor
 
Join Date: Oct 2008
Location: Wallingford, CT
Posts: 263
Default Re: Variable Width Headings that Group Headshots by Teams

I don't seem to be able to get the table to show up. Any ideas what I might be missing?

Had to omit the last few headshots because of the forum's file size limitations.
Attached Files
File Type: zip 2018_Whos_Who_Elis_Poster_v01.zip (40.13 MB, 10 views)
__________________
David Miller
FusionPro VDP Creator 10.0.26
Adobe Acrobat Pro 2019.008.20074
Suitcase Fusion 20.0.0 (7653)
macOS High Sierra 10.13.6
Reply With Quote
  #6  
Old April 30th, 2018, 07:28 AM
Fellsway Fellsway is offline
Junior Community Member
 
Join Date: Apr 2012
Location: Dallas
Posts: 35
Default Re: Variable Width Headings that Group Headshots by Teams

David, I was messing around with what Ste provided and maybe my attachment can help.
Attached Files
File Type: zip Collect.zip (2.02 MB, 7 views)

Last edited by Fellsway; April 30th, 2018 at 08:17 AM..
Reply With Quote
  #7  
Old April 30th, 2018, 01:37 PM
David Miller David Miller is offline
Senior Contributor
 
Join Date: Oct 2008
Location: Wallingford, CT
Posts: 263
Default Re: Variable Width Headings that Group Headshots by Teams

Thank you Ste and Fellsway.

It seems that lines 4-8 are case sensitive. I changed them to title case to match the Field Names and a result was returned.

Code:
var teams = {
  'Onsite Team': { color: [72, 15, 0, 0] },
  'Service Leadership': { color: [94, 68, 1, 0] },
  'Support Team': { color: [64, 6, 100, 0] },
  'Regional Team': { color: [86, 30, 55, 9] }
}
__________________
David Miller
FusionPro VDP Creator 10.0.26
Adobe Acrobat Pro 2019.008.20074
Suitcase Fusion 20.0.0 (7653)
macOS High Sierra 10.13.6
Reply With Quote
  #8  
Old April 30th, 2018, 01:53 PM
step's Avatar
step step is offline
Senior Contributor
 
Join Date: Jan 2010
Location: Charlotte, NC
Posts: 955
Default Re: Variable Width Headings that Group Headshots by Teams

Quote:
Originally Posted by David Miller View Post
I don't seem to be able to get the table to show up. Any ideas what I might be missing?
The team names in the 'teams' object need to match (case-sensitive) the team names in your data. So, in this case, you could modify the object definition to be:
Code:
var teams = {
  'Onsite Team': { color: [72, 15, 0, 0] },
  'Service Leadership': { color: [94, 68, 1, 0] },
  'Support Team': { color: [64, 6, 100, 0] },
  'Regional Team': { color: [86, 30, 55, 9] }
}
There are two other changes to note:
Code:
team.members.push({
  team: ToUpper(teamname),
  name: Field('Name' + i),
  headshot: CreateResource(Field('Headshot' + i), 'graphic', true),
  titleone: Field('TitleOne' + i),
  titletwo: Field('TitleTwo' + i)
});
Code:
person.headshot.content.replace('/>', 'width="' + (colWidth - picCell.Margins.Left - picCell.Margins.Right) + '"/>') : '';
__________________
Ste Pennell
FusionPro VDP Creator 9.3.15
Adobe Acrobat X 10.1.1
Mac OS X 10.12

LinkedIn
Reply With Quote
  #9  
Old April 30th, 2018, 02:48 PM
David Miller David Miller is offline
Senior Contributor
 
Join Date: Oct 2008
Location: Wallingford, CT
Posts: 263
Default Re: Variable Width Headings that Group Headshots by Teams

Thanks. The only difficulty now it changing the fonts and colors of the Team Headings independently of the Name and Titles.
__________________
David Miller
FusionPro VDP Creator 10.0.26
Adobe Acrobat Pro 2019.008.20074
Suitcase Fusion 20.0.0 (7653)
macOS High Sierra 10.13.6
Reply With Quote
  #10  
Old April 30th, 2018, 03:21 PM
step's Avatar
step step is offline
Senior Contributor
 
Join Date: Jan 2010
Location: Charlotte, NC
Posts: 955
Default Re: Variable Width Headings that Group Headshots by Teams

Use span tags?
Code:
team.members.push({
  team: '<span font="Arial" color="white">' + ToUpper(teamname) + '</span>',
  name: Field('Name' + i),
  headshot: CreateResource(Field('Headshot' + i), 'graphic', true),
  titleone: Field('TitleOne' + i),
  titletwo: Field('TitleTwo' + i)
});
__________________
Ste Pennell
FusionPro VDP Creator 9.3.15
Adobe Acrobat X 10.1.1
Mac OS X 10.12

LinkedIn
Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 01:45 AM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
(c) 2011, PTI Marketing Technologies™, Inc.