Initial commit: Carousel API (ok)

https://github.com/ramonszo/zuck.js

C:\Users\Administrator\Desktop\git-blaze\zuck.js\zuck.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

<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

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

Previous=== START STUDY zuck.js ===NextModal base

Last updated 2 years ago

Was this helpful?

<html> <head> <title>x</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />  <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>  <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>

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