brito · July 16, 2016 00:10 · jasonmoo · Jul 15, 2016
diff --git a/README.md b/README.md
diff --git a/carousel.css b/carousel.css
 .carousel { box-shadow:0 0 3px rgba(0,0,0,.3); position:relative; width:calc(100% - 12px);
    display:block; margin:2px auto 10px; overflow:hidden; white-space:nowrap;
    border:5px solid white }
    
 .carousel > a { display:inline-block;
    position:relative; width:250px; height:95px; overflow:hidden;
    background:#f2efec; border:1px solid rgba(0,0,0,.3) }
    .carousel > a+a { margin-left:5px }
    .carousel a img { position:absolute; top:0; left:0; right:0 }
    .carousel > a:after { content:attr(title); position:absolute; top:0; left:0; right:0;
        text-align:center;
        line-height:95px; color:#fff; text-shadow:0 0 7px black;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .carousel > a:hover:after,
    .carousel > a.feature:after { background:rgba(3,8,61,.6); color:white }
    
 .carousel-feature { margin-top:5px; max-height:300px }
 .carousel-feature figure { margin:0; position:relative; overflow:hidden;
    height:0; padding-top:30%;
    box-shadow:0 0 2px black inset; display:inline-block }
    .carousel-feature figure.feature { width:100% }
    .carousel-feature figure:before { content:attr(title); width:25em;
        position:absolute; top:0; left:0; padding:.381em .618em;
        color:white; text-shadow:2px 2px 1px black; font-size:1.6em; line-height:1 }
    .carousel-feature img { position:absolute; top:0; left:0; min-width:100% }
    .carousel-feature figcaption { white-space:pre-line; max-width:25em;
        position:absolute; top:0; bottom:0; right:0; padding:3em 1.6em 1em;
        background:rgba(3,8,61,.6); background:linear-gradient(-120deg,rgba(3,8,61,.4) 10%,transparent);
        color:white;
        text-shadow:0 0 10px black; font-size:large }
        
 @media (max-width:700px){ .carousel-feature { max-height:0 } }
    
 .carousel, .carousel *, .carousel *:after,
 .carousel-feature, .carousel-feature * { transition:all 1s; -webkit-transition:all 1s }
 [class^=carousel] a:active { background:currentcolor }
diff --git a/carousel.js b/carousel.js
 /** 
 * Carousel #2
 * Pulls content from content server (/cs/idcplg), displays in a carousel.
 * 
 * Targets an element with a data attribute:
 * <script data="COLLECTION_DISPLAY/999999999999025064"></script>
 * 
 * circa 2013
 */
 $(function(){
  // get arguments to query
  var target = $('script[data^=COLLECTION_DISPLAY]');
  if (!target.length) return;
  
  var data = target.attr('data').split('/'),
      type = data[0],
      id = data[1];

  // query content server
  cs(type, id)
  .then(function(response){
    var items = 
    // interpret soapy result
      cs[type](response)
      // convert to HTML
        .map(function(item){ //console.warn(item);
      // interpolate values into template
          return ('<a '+
            'id="dID_{{ dID }}"' +
            'title="{{ dDocTitle }}" '+
            'href="{{ xSupplementalMarkings }}" '+
            'data-xcomments="{{ xComments }}" '+
            'data-dweburl="{{ dWebURL }}">'+
            '<img src="/cs/idcplg?IdcService=GET_FILE&Rendition=Preview&'+
              'dID={{ dID }}"></a>')
            
            .replace(/\{\{ *([a-zA-Z0-9_\$]+) *\}\}/g, function(token, property){
              return item[property];
            });
        }).join(''),
        
      list = document.createElement('nav');
        list.className = 'carousel';
        list.id = [type, id].join('__');
        list.innerHTML = items;
      // insert after [data] target
      target.after(list);
      
      // <rabble about scrollbars>
      $(list).closest('div').css({ overflow: 'hidden' });
      
      // attach carousel
      $(list).carousel();
      
    return list;
  });
 });

 /**
 * $.fn.carousel.js
 * 
 * Carousel feature and autoscroll
 * 
 * circa 2013
 */
 $.fn.carousel = function(){
  return this.each(function(i, carousel){
    carousel = $(carousel)
    
      // CAROUSEL EVENTS
      .on({ 'select': function(e, target){
        var j = target.prevAll().length;
        
        target.add('.carousel-feature figure:eq('+j+')')
          .addClass('feature')
          .siblings().removeClass('feature');
      } });
    
    if ('intrinsic space')
      carousel.closest('table').css('table-layout', 'fixed'); 
    
    if ('add feature'){
      var feature = $('<aside>', { 'class': 'carousel-feature' })
        .insertAfter(carousel);
      $('> a', carousel)
        .each(function(j){
          var target = $(this),
            id = target[0].id.replace(/^dID_/,''),
            title = target[0].title,
            href = target[0].href,
            url = target.data('dweburl'),
            content = target.data('xcomments');
          
          $('<figure>', { title: title })
            .append($('<img>', { src: url, alt: content }))
            .append($('<figcaption>', { text: content }))
            .appendTo('.carousel-feature');
        })
        // hover to select
        .on('mouseover', function(){
          var item = $(this);
          setTimeout(function(){
            if (item.is(':hover'))
              carousel.trigger('select', [item]);
          }, 1e3 /* 1s delay after hover */);
        });
    }
    
    if ('auto cycle features')
      setInterval(function(){
        if (carousel.is(':hover')) return;
        
        carousel.trigger('select', [ $('> a', carousel)
            // random
            .eq(new Date % carousel.children().length) ]);
        
      }, 3e4 /* 30s */);
    
    if ('auto select first')
      $('.carousel').trigger('select', [$('a:first', carousel)]);
    
    
    if ('parallax hover scroll')
      carousel.scrollex();
  });
 };

 /**
 * $.fn.scrollex
 * 
 * Parallax mousemove horizontal scrolling
 * 
 * circa 2013
 */
 $.fn.scrollex = function(){
  return this
      .each(function(){
          var viewport = $(this);
          viewport
              .off('.scrollex')
              .on('mousemove.scrollex', function(e){
                  requestAnimationFrame(function(t){
                    var x = e.clientX,
                        left = viewport.offset().left,
                        scrollWidth = viewport[0].scrollWidth,
                        width = viewport.outerWidth(),
                        displacement = (x - left)/width,
                        tolerance = scrollWidth - width,
                        goal = displacement * tolerance,
                        current = viewport.scrollLeft();
                    
                    viewport.scrollLeft(Math.sin(Math.PI/2 * displacement) * tolerance);
                  });
              });
          
      });
 };
diff --git a/component.html b/component.html
 <script data="COLLECTION_DISPLAY/999999999999024157"></script>
diff --git a/cs.js b/cs.js
 /**  
 * /cs Query Content Server
 * @return wish (skeletal Promise.then)
 * circa 2013
 */
  function cs(type, id){
    var params = { IdcService: type, IsJson: true };
    
    switch(type){
        // file: cs/COLLECTION_DISPLAY
        case 'COLLECTION_DISPLAY':
            params.hasCollectionID = true;
            params.dCollectionID = id;
            
          cs['COLLECTION_DISPLAY'] = function(response){
            var contents = response.ResultSets.CONTENTS
              || console.warn(response.LocalData.StatusMessage),
              fields = contents.fields,
              rows = contents.rows.map(function(row){
                var item = {};
                row.forEach(function(value, i){ item[fields[i].name] = value });
                return item;
              });
            return rows;
          };  
        break;
    }
    
    // params to url
    var p = [];
    for (var name in params) p.push(name+'='+params[name]);
    var url = '/cs/idcplg?' + p.join('&'); 
    
    // make request
    var xhr = new XMLHttpRequest;
    xhr.onload = 
    xhr.onerror = function(){
        fulfill(JSON.parse(xhr.response)); };
    xhr.open('GET', url);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send();
    
    // fulfill wish
    var fairy;
    function fulfill(response){ return fairy(response) }
    var wish = { then: function(fn){ fairy = fn }};
    return wish;
  }
	.carousel { box-shadow:0 0 3px rgba(0,0,0,.3); position:relative; width:calc(100% - 12px);
	display:block; margin:2px auto 10px; overflow:hidden; white-space:nowrap;
	border:5px solid white }

	.carousel > a { display:inline-block;
	position:relative; width:250px; height:95px; overflow:hidden;
	background:#f2efec; border:1px solid rgba(0,0,0,.3) }
	.carousel > a+a { margin-left:5px }
	.carousel a img { position:absolute; top:0; left:0; right:0 }
	.carousel > a:after { content:attr(title); position:absolute; top:0; left:0; right:0;
	text-align:center;
	line-height:95px; color:#fff; text-shadow:0 0 7px black;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
	.carousel > a:hover:after,
	.carousel > a.feature:after { background:rgba(3,8,61,.6); color:white }

	.carousel-feature { margin-top:5px; max-height:300px }
	.carousel-feature figure { margin:0; position:relative; overflow:hidden;
	height:0; padding-top:30%;
	box-shadow:0 0 2px black inset; display:inline-block }
	.carousel-feature figure.feature { width:100% }
	.carousel-feature figure:before { content:attr(title); width:25em;
	position:absolute; top:0; left:0; padding:.381em .618em;
	color:white; text-shadow:2px 2px 1px black; font-size:1.6em; line-height:1 }
	.carousel-feature img { position:absolute; top:0; left:0; min-width:100% }
	.carousel-feature figcaption { white-space:pre-line; max-width:25em;
	position:absolute; top:0; bottom:0; right:0; padding:3em 1.6em 1em;
	background:rgba(3,8,61,.6); background:linear-gradient(-120deg,rgba(3,8,61,.4) 10%,transparent);
	color:white;
	text-shadow:0 0 10px black; font-size:large }

	@media (max-width:700px){ .carousel-feature { max-height:0 } }

	.carousel, .carousel , .carousel :after,
	.carousel-feature, .carousel-feature * { transition:all 1s; -webkit-transition:all 1s }
	[class^=carousel] a:active { background:currentcolor }
	/**
	* Carousel #2
	* Pulls content from content server (/cs/idcplg), displays in a carousel.
	*
	* Targets an element with a data attribute:
	* <script data="COLLECTION_DISPLAY/999999999999025064"></script>
	*
	* circa 2013
	*/
	$(function(){
	// get arguments to query
	var target = $('script[data^=COLLECTION_DISPLAY]');
	if (!target.length) return;

	var data = target.attr('data').split('/'),
	type = data[0],
	id = data[1];

	// query content server
	cs(type, id)
	.then(function(response){
	var items =
	// interpret soapy result
	cs[type](response)
	// convert to HTML
	.map(function(item){ //console.warn(item);
	// interpolate values into template
	return ('<a '+
	'id="dID_{{ dID }}"' +
	'title="{{ dDocTitle }}" '+
	'href="{{ xSupplementalMarkings }}" '+
	'data-xcomments="{{ xComments }}" '+
	'data-dweburl="{{ dWebURL }}">'+
	'<img src="/cs/idcplg?IdcService=GET_FILE&Rendition=Preview&'+
	'dID={{ dID }}"></a>')

	.replace(/\{\{ ([a-zA-Z0-9_\$]+) \}\}/g, function(token, property){
	return item[property];
	});
	}).join(''),

	list = document.createElement('nav');
	list.className = 'carousel';
	list.id = [type, id].join('__');
	list.innerHTML = items;
	// insert after [data] target
	target.after(list);

	// <rabble about scrollbars>
	$(list).closest('div').css({ overflow: 'hidden' });

	// attach carousel
	$(list).carousel();

	return list;
	});
	});

	/**
	* $.fn.carousel.js
	*
	* Carousel feature and autoscroll
	*
	* circa 2013
	*/
	$.fn.carousel = function(){
	return this.each(function(i, carousel){
	carousel = $(carousel)

	// CAROUSEL EVENTS
	.on({ 'select': function(e, target){
	var j = target.prevAll().length;

	target.add('.carousel-feature figure:eq('+j+')')
	.addClass('feature')
	.siblings().removeClass('feature');
	} });

	if ('intrinsic space')
	carousel.closest('table').css('table-layout', 'fixed');

	if ('add feature'){
	var feature = $('<aside>', { 'class': 'carousel-feature' })
	.insertAfter(carousel);
	$('> a', carousel)
	.each(function(j){
	var target = $(this),
	id = target[0].id.replace(/^dID_/,''),
	title = target[0].title,
	href = target[0].href,
	url = target.data('dweburl'),
	content = target.data('xcomments');

	$('<figure>', { title: title })
	.append($('<img>', { src: url, alt: content }))
	.append($('<figcaption>', { text: content }))
	.appendTo('.carousel-feature');
	})
	// hover to select
	.on('mouseover', function(){
	var item = $(this);
	setTimeout(function(){
	if (item.is(':hover'))
	carousel.trigger('select', [item]);
	}, 1e3 /* 1s delay after hover */);
	});
	}

	if ('auto cycle features')
	setInterval(function(){
	if (carousel.is(':hover')) return;

	carousel.trigger('select', [ $('> a', carousel)
	// random
	.eq(new Date % carousel.children().length) ]);

	}, 3e4 /* 30s */);

	if ('auto select first')
	$('.carousel').trigger('select', [$('a:first', carousel)]);


	if ('parallax hover scroll')
	carousel.scrollex();
	});
	};

	/**
	* $.fn.scrollex
	*
	* Parallax mousemove horizontal scrolling
	*
	* circa 2013
	*/
	$.fn.scrollex = function(){
	return this
	.each(function(){
	var viewport = $(this);
	viewport
	.off('.scrollex')
	.on('mousemove.scrollex', function(e){
	requestAnimationFrame(function(t){
	var x = e.clientX,
	left = viewport.offset().left,
	scrollWidth = viewport[0].scrollWidth,
	width = viewport.outerWidth(),
	displacement = (x - left)/width,
	tolerance = scrollWidth - width,
	goal = displacement * tolerance,
	current = viewport.scrollLeft();

	viewport.scrollLeft(Math.sin(Math.PI/2 * displacement) * tolerance);
	});
	});

	});
	};
	/**
	* /cs Query Content Server
	* @return wish (skeletal Promise.then)
	* circa 2013
	*/
	function cs(type, id){
	var params = { IdcService: type, IsJson: true };

	switch(type){
	// file: cs/COLLECTION_DISPLAY
	case 'COLLECTION_DISPLAY':
	params.hasCollectionID = true;
	params.dCollectionID = id;

	cs['COLLECTION_DISPLAY'] = function(response){
	var contents = response.ResultSets.CONTENTS
	\|\| console.warn(response.LocalData.StatusMessage),
	fields = contents.fields,
	rows = contents.rows.map(function(row){
	var item = {};
	row.forEach(function(value, i){ item[fields[i].name] = value });
	return item;
	});
	return rows;
	};
	break;
	}

	// params to url
	var p = [];
	for (var name in params) p.push(name+'='+params[name]);
	var url = '/cs/idcplg?' + p.join('&');

	// make request
	var xhr = new XMLHttpRequest;
	xhr.onload =
	xhr.onerror = function(){
	fulfill(JSON.parse(xhr.response)); };
	xhr.open('GET', url);
	xhr.setRequestHeader('Accept', 'application/json');
	xhr.send();

	// fulfill wish
	var fairy;
	function fulfill(response){ return fairy(response) }
	var wish = { then: function(fn){ fairy = fn }};
	return wish;
	}