# Initial commit: Carousel API (ok)

C:\Users\Administrator\Desktop\git-blaze\zuck.js\zuck.css

```css
/* base */
.stories {
  white-space: nowrap;
  overflow: auto;
}
.stories .story {
  display: inline-block;
  width: 20vw;
  margin: 0 12px;
  max-width: 90px;
}
.stories .story:first-child {
  margin-left: 0;
}
.stories .story:last-child {
  margin-right: 0;
}
.stories .story > a {
  display: block;
}
.stories .story > a > span > img {
  width: 100%;
}
.stories .story > .items {
  display: none;
}
/* modal */
#zuck-modal {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
#zuck-modal-content,
#zuck-modal-content .stories-slides,
#zuck-modal-content .stories-slides > * {
  background: #000;
  width: 100vw;
  height: 100vh;
  position: absolute;
}
#zuck-modal-content .slide-item > * {
  height: 100%;
  margin: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

```

\\

C:\Users\Administrator\Desktop\git-blaze\zuck.js\index.html

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2FQBrQQb2E49bykeIWh1O2%2Fimage.png?alt=media&#x26;token=6f470ee7-53e4-4e2b-8902-bbe1315b9bd7" alt=""><figcaption></figcaption></figure>

```html
<html>
<head>
  <title>x</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <!-- styles just for demo -->
  <style>
    body {
      font-size: 14px;
      font-family: sans-serif;
      padding: 0;
      margin: 0;
    }
    #stories {
      padding: 12px;
    }
    h1 {
      font-family: monospace;
      padding: 12px;
      border-bottom: 1px solid #ddd;
      font-size: 24px;
      height: 56px;
      line-height: 56px;
      margin-bottom: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  </style>
  <!-- script styles -->
  <link rel="stylesheet" href="zuck.css">
</head>
<body>
  <h1>~/evan/app_boilerplate</h1>
  <div id="stories"></div>
  <script src="zuck.js"></script>
  <script>
    var itemsExample = [
      {
        id: "ramon-1",
        type: "photo",
        length: 5,
        src: "images/1.jpg",
        preview: "images/1.jpg",
        link: false,
        seem: false
      },
      {
        id: "ramon-2",
        type: "photo",
        length: 5,
        src: "images/2.jpg",
        preview: "images/2.jpg",
        link: "https://twitter.com/ramon82",
        seem: false
      },
      {
        id: "ramon-3",
        type: "photo",
        length: 41,
        src: "images/3.jpg",
        preview: "images/3.jpg",
        link: "https://twitter.com/ramon82",
        seem: false
      }
    ];
    var stories = new Zuck('stories', {
      stories: [
        {
          id: "gorillaz",
          photo: "images/1.jpg",
          name: "Gorillaz",
          link: "",
          lastUpdated: "2017-04-09 05:08:30",
          items: itemsExample
        },
        {
          id: "ladygaga",
          photo: "images/2.jpg",
          name: "Lady Gaga",
          link: "",
          lastUpdated: "2017-04-09 05:08:30",
          items: itemsExample
        },
        {
          id: "starboy",
          photo: "images/3.jpg",
          name: "Abel",
          link: "",
          lastUpdated: "2017-04-09 05:08:30",
          items: itemsExample
        },
        {
          id: "qotsa",
          photo: "images/4.jpg",
          name: "QOTSA",
          link: "",
          lastUpdated: "2017-04-09 05:08:30",
          items: itemsExample
        },
        {
          id: "ramon",
          photo: "images/5.jpg",
          name: "Ramon",
          link: "https://ramon.codes",
          lastUpdated: "2017-04-09 05:08:30",
          items: itemsExample
        }
      ]
    });
  </script>
</body>
</html>
```

C:\Users\Administrator\Desktop\git-blaze\zuck.js\zuck.js

```javascript
window['ZuckitaDaGalera'] = window['Zuck'] = function (element, options) {
  var d = document;
  var q = function (query) {
    return d.querySelectorAll(query)[0];
  };
  var g = function (array, what) {
    if (array) {
      return array[what] || '';
    } else {
      return '';
    }
  };
  var each = function (arr, func) {
    if (arr) {
      var total = arr.length;
      for (var i = 0; i < total; i++) {
        func(i, arr[i]);
      }
    }
  };
  var prepend = function (parent, child) {
    if (parent.firstChild) {
      parent.insertBefore(child, parent.firstChild);
    } else {
      parent.appendChild(child);
    }
  };
  this.data = {};
  options = options;
  optionsDefault = {
    skin: 'simple',
    avatars: true,
    saveRead: function (storyId, storyItemId, status) {
    },
    stories: [],
    expiresIn: 24
  };
  if (typeof element == 'string') {
    element = d.getElementById(element);
  }
  var id = element.id;
  var option = function (name, prop) {
    if (prop) {
      if (options[name]) {
        return options[name][prop] || optionsDefault[name][prop]
      } else {
        return optionsDefault[name][prop];
      }
    } else {
      return options[name] || optionsDefault[name]
    }
  };
  if (!'ZuckModal' in window) {
    window['ZuckModal'] = function () {
    };
  }
  var addEvents = function (story) {
  };
  var addItemEvents = function (story) {
  };
  var add = function (data) {
    var storyId = g(data, 'id');
    var story = q('#' + id + ' [data-id="' + storyId + '"]');
    var html = '';
    var items = g(data, 'items');
    if (!story) {
      story = d.createElement('div');
      story.setAttribute('data-id', storyId);
      story.className = 'story';
      html = '<a href="' + g(data, 'link') + '">' +
        '<span><img src="' + g(data, 'photo') + '"></span>' +
        '<strong>' + g(data, 'name') + '</strong>' +
        '</a>' +
        '<ul class="items"></ul>';
      story.innerHTML = html;
      addEvents(story);
      prepend(element, story);
      each(items, function (i, item) {
        addItem(storyId, item);
      });
    }
  };
  var addItem = function (storyId, data) {
    var story = q('#' + id + ' > [data-id="' + storyId + '"]');
    var li = document.createElement('li');
    li.className = g(data, 'seem') ? 'seem' : '';
    li.setAttribute('data-id', g(data, 'id'));
    li.innerHTML = '<a href="' + g(data, 'src') + '" data-link="' + g(data, 'link') + '">' +
      '<img src="' + g(data, 'preview') + '">' +
      '</a>';
    story.querySelectorAll('.items')[0].appendChild(li);
    addItemEvents(story);
  };
  var removeItem = function (storyId, itemId) {
    var item = q('#' + id + ' > [data-id="' + storyId + '"] [data-id="' + itemId + '"]');
    element.parentNode.removeChild(item);
  };
  var init = function () {
    console.log('init', option('stories'));
    if (q('#' + id + ' .story')) {
      each(element.querySelectorAll('.story'), function (i, story) {
        addEvents(story, true);
      });
    }
    each(option('stories'), function (i, item) {
      add(item);
    });
    element.className = (option('skin')) ? 'stories skin-' + option('skin') : 'stories';
  };
  this.add = add;
  this.addItem = addItem;
  this.removeItem = addItem;
  init();
  return this;
};
```
