Skip to content

Instantly share code, notes, and snippets.

@riix

riix/cheez.markdown

Created April 13, 2018 06:23
Show Gist options
  • Save riix/fb26c66df3cbb8dccf1073f979e13873 to your computer and use it in GitHub Desktop.
Save riix/fb26c66df3cbb8dccf1073f979e13873 to your computer and use it in GitHub Desktop.
Download ZIP
cheez
Raw
cheez.markdown
Raw
index.html
<div id="demo">
<div class="js-cheez container">
<div class="wrap">
Cheez
</div>
</div>
</div>
Raw
script.js
(function($) {
'use strict';
var MODULE = {
name: 'cheez',
title: 'cheez',
desc: 'svg 객체 생성으로 container에 사선 표현',
version: '1.0'
};
var _defaults = { // options
height: 100,
zindex: 1, // or null
item: {
method: 'prepend',
opacity: 1,
left: null,
right: null,
fill: null
},
onComplete: function(){
// console.log('init cheeze');
}
};
MODULE.defaults = _defaults; // set default
window.module = (typeof window.module !== 'undefined') ? window.module : []; // global 변수에 저장
window.module.push(MODULE);
var $window = $window || $(window),
$document = $document || $(document),
$html = $html || $('html'),
$body = $body || $('body');
$.fn.cheez = function(_items, _options){
this.each(function(){
if (_items === undefined) return false;
var base = { // base
$el: $(this)
};
var _prepends = [], // prepend group 객체
_appends = []; // append group 객체
var _opts = $.extend({}, _defaults, _options); // settings
var _supportSVG = true, // support svg
_itemIdx = 0, // item index
_itemLength = _items.length, // item length
_zindex = _opts.zindex; // zindex
// support svg
// _supportSVG = (typeof Modernizr == 'object' && (Modernizr.svg === false || Modernizr.svg === undefined)) ? false : true;
var _css = [{ // css
'position': 'relative'
},{
'position': 'absolute',
'left': 0,
'right': 0
},{
'position':'relative',
'height': '100px'
},{
'position': 'absolute',
'top': 0,
'left': 0,
'right': 0,
'bottom': 0
}];
var i = 0;
while(i < _itemLength){
var $this = _items[i];
if ($this.method == 'prepend'){
_prepends.push($this);
} else {
_appends.push($this);
}
i++;
}
var _extend = function(a, b) { // Helper vars and functions.
for ( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
};
/** From https://davidwalsh.name/javascript-debounce-function.
* var myEfficientFn = debounce(function() {
* // All the taxing stuff you do
* }, 250);
* window.addEventListener('resize', myEfficientFn);
*/
var _debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var _callFunc = function(_func, _bool, _param) { // callback
if (_bool !== undefined && _bool === false) return false;
_func = (typeof _func == 'string') ? window[_func] : _func;
_param = (_param === null) ? '' : _param;
if (_func && typeof _func == 'function') {
_func.call(null, base, _param);
} else {
console.log('no exist function');
}
};
var _getWrapHtml = function(_html){
var _result = '<div class="cheez-container ' + 'is-support-svg-' + _supportSVG + '">';
if (_supportSVG === true) {
_result += '<div class="cheez-wrap">';
_result += '<div class="cheez-inner" style="height: 10vh;">';
_result += '<svg xmlns="http://www.w3.org/2000/svg" class="cheez-svg"';
_result += 'width="100%"';
_result += 'height="100%"';
_result += 'viewBox="0 0 100 100"';
_result += 'preserveAspectRatio="none">';
_result += _html;
_result += '</svg></div></div>';
}
_result += '</div>';
return _result;
};
var _style = function(_el) { // style
if (_supportSVG === true) {
_css[2].height = _opts.height;
if (_zindex !== null){
_css[1].zIndex = _zindex;
_css[3].zIndex = _zindex + 1;
}
_el.css(_css[0])
.children().css(_css[1])
.children().css(_css[2])
.children().css(_css[3]);
} else {
_el.css({
'height': _opts.height
});
}
};
var _getPoints = function(method, left, right){ // polygon points 구하기
var _result = '';
if (method =='prepend') { // uppper
if (left !== null) {
_result = '0,' + (100 - left) +' 100,100 0,100'; // 왼쪽 상단이 올라간 형태
}
if (right !== null) {
_result = '100,' + (100 - right) +' 100,100 0,100'; // 오른쪽 상단이 올라간 형태
}
} else { // downer
if (left !== null) {
_result = '0,0 100,0 0,' + left; // 왼쪽 하단이 내려간 형태
}
if (right !== null) {
_result = '0,0 100,0 100,'+ right; // 오른쪽 하단이 내려간 형태
}
}
return _result;
};
var build = function(items, _method){
var $wrap = null,
_polyHtml = '';
$.each(items, function(i){
if (_supportSVG !== true) return false;
var _this = items[i],
_points, // polygon points
_fill;
_itemIdx += 1; // item index
_this = $.extend({}, _opts.item, _this);
_points = _getPoints(_method, _this.left, _this.right); // polygon points 구하기
_fill = base.$el.css('backgroundColor');
_fill = (_fill == 'transparent' || _fill == 'rgba(0, 0, 0, 0)') ? '#fff' : _fill;
_fill = (_this.fill !== null) ? _this.fill : _fill;
_polyHtml += '<polygon class="cheez-polygon cheez-polygon-' + _itemIdx +'" points="'+ _points +'" style="'; // polygon html 구하기
_polyHtml += 'fill: '+ _fill +';';
_polyHtml += 'opacity: '+ _this.opacity +';';
_polyHtml += '" />';
if (_itemIdx >= _itemLength) { // callback
base.$el.toggleClass('is-cheez-complete', true);
_callFunc(_opts.onComplete);
}
});
$wrap = $(_getWrapHtml(_polyHtml)); // get wrapper
$wrap.toggleClass('is-cheez-' + _method, true); // add classname
if (_method =='prepend') { // uppper
_css[1].bottom = 0;
_style($wrap);
$wrap.prependTo(base.$el);
} else { // downer
_css[1].top = 0;
_style($wrap);
$wrap.appendTo(base.$el);
}
};
var init = function(){
if (_prepends.length) {
build(_prepends, 'prepend');
}
if (_appends.length) {
build(_appends, 'append');
}
};
init();
});
};
})(window.jQuery);
$(function(){
var _cheezDefaults = [{
method: 'prepend', // 왼쪽 상단이 올라간 형태
opacity: 1,
left: 80
}, {
method: 'prepend', // 오른쪽 상단이 올라간 형태
opacity: 0.5,
right: 80
}, {
method: 'append', // 왼쪽 하단이 내려온 형태
opacity: 0.5,
left: 80
}, {
method: 'append', // 오른쪽 하단이 내려온 형태
opacity: 1,
right: 80
}];
$('.js-cheez').cheez(_cheezDefaults, {
height: 80
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.less
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
html {
background: #000;
font-family: 'Open Sans', sans-serif;
}
#demo {
padding: 200px 0;
text-align: center;
}
.container {
margin: 0 auto;
background: #fff;
.wrap {
padding: 30px;
min-height: 50vh;
text-align: left;
}
}
.cheez-container {
line-height: 0;
&.is-cheez-prepend { // 상단
margin-bottom: 1px;
.csstransforms & {
margin-bottom: 0;
transform: translate(0, 1px);
}
}
&.is-cheez-append { // 하단
margin-top: -2px;
.csstransforms & {
margin-top: 0;
transform: translate(0, -2px);
}
}
}
.cheez-inner {
.cssvhunit & {
height: 10vh;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment