WebCenter Portal REST (RIDC)

README.md

Back in 2013 I wrote some HTML/JS/CSS to create a client-side carousel for WebCenter Portal 11g.

This won't work out of the box on 12c, because of the migration from folders_g to Framework Folders.

The content comes from a WebCenter Content backend in the same domain.

The content is put into an auto-advancing carousel.

The carousel has an index that on hover changes the feature, and a parallax hover-scroller, which is awesome but probably not tablet-friendly.

component.html

is the value of an HTML component on the target page. Uses the collection id to pull the items and use metadata to generate a carousel.

carousel.js

pulls data using cs.js and generates HTML (that matches carousel.css) for a dynamic carousel.

carousel.css

uses media query for responsive and styles the following structure:

.carousel
  a

.carousel-feature
  figure
    :before
    img
    figcaption
  figure.feature

cs.js

is the interface for the RIDC (idcplg) server for WebCenter Content. It works roughly with this syntax:

// function call for service and parameter
cs(type, id)
// returns something that could be confused for a Promise/A but instead a ‘wish’
.then(function(response){
  // result is very SOAPy, so there is an onion to peel
  var items = 
    // Designed to handle the returns from many services, but only one implemented here
    cs[type](response)
    // convert to HTML
      .map(function(item){
      // etc. (see file)

Your content metadata will need the following:

• dID
• dDocTitle
• xSupplementalMarkings
• xComments
• dWebURL

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 }

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);
                  });
              });
          
      });
};

component.html

<script data="COLLECTION_DISPLAY/999999999999024157"></script>

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;
  }

Woot! Good to see your code again sir!