react-dynamic-content/dist/react-dynamic-content.min.js

React Dynamic Content ===

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("lodash"),require("jquery"),require("jquery.waitforimages"),require("react"),require("react-addons-css-transition-group"),require("react-addons-update"),require("react-dom"),require("rx")):"function"==typeof define&&define.amd?define("DynamicContent",["lodash","jquery","jquery.waitforimages","react","react-addons-css-transition-group","react-addons-update","react-dom","rx"],t):"object"==typeof exports?exports.DynamicContent=t(require("lodash"),require("jquery"),require("jquery.waitforimages"),require("react"),require("react-addons-css-transition-group"),require("react-addons-update"),require("react-dom"),require("rx")):e.DynamicContent=t(e.lodash,e.jquery,e["jquery.waitforimages"],e.react,e["react-addons-css-transition-group"],e["react-addons-update"],e["react-dom"],e.rx)}(this,function(e,t,n,r,i,o,a,s){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function i(e){return e&&e.__esModule?e:{default:e}}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(5),d=i(f),c=n(8),p=n(1),h=i(p),m=n(2),g=r(m),v=n(7),y=i(v),b=n(9),E=i(b),O=n(3),D=i(O),x=n(6),w=i(x);n(4);var N=E.default.Observable.merge(E.default.Observable.fromEvent(document,"mouseup"),E.default.Observable.fromEvent(document,"touchend")),P=E.default.Observable.merge(E.default.Observable.fromEvent(document,"mousemove"),E.default.Observable.fromEvent(document,"touchmove").map(function(e){return h.default.extend(e,e.touches[0])})),I={PENDING:"PENDING",LOADING:"LOADING",FAILED:"FAILED",NOT_POSITIONED:"NOT_POSITIONED",FINISHED:"FINISHED"},k=15,S={cascading:g.repositionCascadingLayout,images:g.repositionImagesLayout},L=["layout","numOfColumns","columnWidth","maxHeight","verticalCellSpacing","horizontalCellSpacing"],C=["maxHeight","numOfColumns","columnWidth","verticalCellSpacing","horizontalCellSpacing"],T=function(){function e(t){var n=this;u(this,e),this.elm=t,this.ref=h.default.uniqueId(),this.state=I.PENDING,this._renderedElm=new Promise(function(e,t){n._resolveRenderedElm=e})}return l(e,[{key:"assignRenderedElm",value:function(e){this._resolveRenderedElm(e),this.renderedElmResult=e}},{key:"getRenderedElm",value:function(){return this._renderedElm}},{key:"isPresent",value:function(){return this.state===I.FINISHED||this.state===I.NOT_POSITIONED}},{key:"isVisible",value:function(){return this.state===I.FINISHED}}]),e}(),q=function(e){function t(e){return u(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))}return s(t,e),l(t,[{key:"componentWillMount",value:function(){var e=this;this.props.elmData.getRenderedElm().then(function(t){t.classList.toggle("displayNone",!0);var n=!1;(0,D.default)(t).waitForImages({each:function(e,t,r){r||(n=!0)},finished:function(){return n?e.props.onError():e.props.onLoad()},waitForAll:!0}),t.addEventListener("mouseup",e.props.onEventDesktop),t.addEventListener("mousemove",e.props.onEventDesktop),t.addEventListener("mousedown",e.props.onEventDesktop),t.addEventListener("touchstart",e.props.onEventMobile),t.addEventListener("touchmove",e.props.onEventMobile),t.addEventListener("touchend",e.props.onEventMobile)})}},{key:"shouldComponentUpdate",value:function(e,t){return!this.renderedOnce&&(this.renderedOnce=!0,!0)}},{key:"componentWillReceiveProps",value:function(e){this.props.elmData.getRenderedElm().then(function(t){var n=e.className.trim().split(/\s+/g);["dragging","visible"].forEach(function(e){return t.classList.toggle(e,n.indexOf(e)>=0)})})}},{key:"render",value:function(){return this.props.elmData.elm}}]),t}(f.Component),W=function(e){function t(e){u(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return M.call(n),n.state={data:[]},n}return s(t,e),l(t,[{key:"componentWillMount",value:function(){var e=this,t=this.elmLoaded$.scan(function(e,t){return e.concat(t)},[]).map(function(t){return e.getFirstLoadedElements(t)}).filter(function(e){return e.length}).shareReplay(1);t.buffer(t.debounce(150)).map(function(e){return h.default.uniq(h.default.flatten(e))}).map(function(t){return e.setElementsStateAfterLoaded(e.state.data,t,I.NOT_POSITIONED,I.FAILED)}).map(function(t){return e.queueNext(t)}).subscribe(function(t){return e.setState({data:t})});var n=this.elmEvent$.do(function(e){var t=e.e;return t.preventDefault()}).map(function(t){var n=t.e,r=t.ref,i=h.default.findIndex(e.state.data,function(e){return e.ref===r});return{data:{e:h.default.extend({},n),ref:r},res:(e.props.confirmElementDrag||function(e){return"mousedown"===e.type||"touchstart"===e.type})(n,i)}}).shareReplay(1);n.startWith({res:!1}).flatMap(function(e){var t=e.data,r=e.res;return(g.isPromise(r)?E.default.Observable.fromPromise(r.then(function(e){return{data:t,res:e}}).catch(function(){return!1})):E.default.Observable.from([{data:t,res:r}])).takeUntil(n.flatMap(function(e){var t=(e.data,e.res);return g.isPromise(t)?E.default.Observable.fromPromise(t.catch(function(){return!1})):E.default.Observable.from([t])}).filter(function(e){return!e}))}).pairwise().filter(function(e){return!e[0].res&&e[1].res}).map(function(e){return e[1]}).do(function(t){var n=t.data;return e.onElementDown(n)}).flatMap(function(t){var n=t.data;return P.do(function(t){return e.onElementMove(t,n)}).takeUntil(N.withLatestFrom(P.startWith(n.e),function(e,t){return t}).do(function(t){return e.onElementDrop(t)}))}).subscribe(function(){});var r=this.props.elements.map(function(e){return new T(e)});this.setState({data:this.queueNext(r)})}},{key:"onElementDown",value:function(e){var t=h.default.findIndex(this.state.data,function(t){return t.ref===e.ref}),n=g.getWindowOffset(this.findDOMNode(e.ref));e.initOffset=n,this.setState({data:(0,y.default)(this.state.data,o({},t,{isDragging:{$set:!0}}))})}},{key:"onElementMove",value:function(e,t){var n=this.findDOMNode(t.ref),r=g.getWindowOffset(n),i=r.left-t.initOffset.left-(e.clientX-t.e.clientX),o=r.top-t.initOffset.top-(e.clientY-t.e.clientY);n.style.left=n.offsetLeft-i+"px",n.style.top=n.offsetTop-o+"px"}},{key:"onElementDrop",value:function(e){if(h.default.findIndex(this.state.data,function(e){return e.isDragging})!==-1){var t=h.default.findIndex(this.state.data,function(e){return e.isDragging}),n=this.state.data[t],r=this.state.data,i=null;if(h.default.each(this.state.data,function(t){if(!t.isDragging&&t.isVisible()){var n=g.getWindowOffset(t.renderedElmResult);t.renderedElmResult.offsetHeight+n.top>e.clientY&&n.top<e.clientY&&t.renderedElmResult.offsetWidth+n.left>e.clientX&&n.left<e.clientX&&(i=t.ref)}}),i){r=(0,y.default)(r,{$splice:[[t,1]]});var a=h.default.findIndex(r,function(e){return e.ref===i});r=(0,y.default)(r,{$splice:[[a,0,n]]})}var s=h.default.findIndex(r,function(e){return e.isDragging});r=(0,y.default)(r,o({},s,{isDragging:{$set:!1}})),n.renderedElmResult.classList.toggle("dragging",!1),this.setState({data:r}),i&&this.props.onChange&&this.props.onChange(r.map(function(e){return e.elm}))}}},{key:"getFirstLoadedElements",value:function(e){var t=this,n=[];return h.default.takeWhile(this.state.data,function(r,i){if(r.state!==I.LOADING)return!0;var o=h.default.find(e,function(e){return e.ref===t.state.data[i].ref});return o&&n.push(o),o}),n}},{key:"queueNext",value:function(e){var t=h.default.filter(e,function(e){return e.state==I.LOADING}).length,n=k-t,r={};return h.default.takeWhile(e,function(e,t){return e.state===I.PENDING&&(n--,r[t]={state:{$set:I.LOADING}}),n}),(0,y.default)(e,r)}},{key:"setElementsStateAfterLoaded",value:function(e,t,n,r){var i={};return h.default.each(t,function(t){var o=h.default.findIndex(e,function(e){return e.ref===t.ref});o>=0&&t.success&&n?i[o]={state:{$set:n}}:o>=0&&r&&(i[o]={state:{$set:r}})}),(0,y.default)(e,i)}},{key:"reposition",value:function(){var e=(0,c.findDOMNode)(this.refs.wrapper),t={},n=h.default.extend({parentWidth:e.clientWidth},h.default.pick(this.props,C));this.state.data.forEach(function(e,n){e.isPresent()&&!e.isDragging&&(t[n]=e.renderedElmResult,e.state===I.NOT_POSITIONED&&(t[n].classList.toggle("displayNone",!1),t[n].classList.toggle("positionAbsolute",!0)))}),"custom"!==this.props.layout?S[this.props.layout](t,n):this.props.customLayoutMethod(t,n),this.makeNotPositionedFinished()}},{key:"makeNotPositionedFinished",value:function(){var e={};this.state.data.forEach(function(t,n){t.isPresent()&&!t.isDragging&&t.state===I.NOT_POSITIONED&&(e[n]={state:{$set:I.FINISHED}})}),h.default.keys(e).length>0&&this.setState({data:(0,y.default)(this.state.data,e)})}},{key:"findDOMNode",value:function(e){var t=h.default.find(this.state.data,function(t){return t.ref===e});return t&&t.renderedElmResult}},{key:"render",value:function(){var e=this;return console.debug("render"),d.default.createElement(w.default,{transitionAppear:!0,transitionEnterTimeout:0,transitionLeaveTimeout:0,transitionName:"fadeInOut",ref:"wrapper",className:"CustomContentWrapper"},this.state.data.filter(function(e){return e.state!==I.PENDING}).map(function(t,n){return d.default.createElement(q,{elmData:t,key:t.ref,onLoad:function(){return e.elmLoaded$.onNext({ref:t.ref,success:!0})},onError:function(){return e.elmLoaded$.onNext({ref:t.ref,success:!1})},onEventDesktop:function(n){return e.elmEventDesktop(n,t)},onEventMobile:function(n){return e.elmEventMobile(n,t)},className:(t.isDragging&&"dragging")+" "+(t.isVisible()&&"visible")})}))}},{key:"componentWillReceiveProps",value:function(e){var t=this;if(!h.default.isEqual(this.props.elements,e.elements)){var n=e.elements.map(function(e){var n=h.default.find(t.state.data,function(t){return t.elm===e});return n?n:new T(e)});this.setState({data:this.queueNext(n)})}}},{key:"componentDidUpdate",value:function(e,t){var n=this;this.shouldReposition(e,t)&&(this.props.layout!==e.layout&&this.state.data.filter(function(e){return e.isVisible()}).forEach(function(e){var t=e.ref,r=n.findDOMNode(t);r.style.height=n.initialCss[t].height,r.style.width=n.initialCss[t].width,r.style.position=n.initialCss[t].position}),this.repositionThrottled()),this.assignRenderedElms()}},{key:"assignRenderedElms",value:function(){var e=this,t=(0,c.findDOMNode)(this.refs.wrapper).children;this.state.data.filter(function(e){return e.state!==I.PENDING}).forEach(function(n,r){n.renderedElmResult||(n.assignRenderedElm(t[r]),e.initialCss[n.ref]={height:t[r].style.height,width:t[r].style.width,position:t[r].style.position})})}},{key:"elmEventDesktop",value:function(e,t){this.props.allowDraggingDesktop?this.elmEvent$.onNext({e:e,ref:t.ref}):null}},{key:"elmEventMobile",value:function(e,t){this.props.allowDraggingMobile?this.elmEvent$.onNext({e:h.default.extend(e,e.touches[0]),ref:t.ref}):null}},{key:"shouldReposition",value:function(e,t){var n=this,r=!1;return h.default.each(t.data,function(e,i){r=r||n.state.data[i]&&(n.state.data[i].ref!==t.data[i].ref||n.state.data[i].state!==t.data[i].state&&!(t.data[i].state===I.NOT_POSITIONED&&n.state.data[i].state===I.FINISHED)||n.state.data[i].isDragging!==t.data[i].isDragging)||!n.state.data[i]}),r=r||t.data.length!==this.state.data.length||!h.default.isEqual(h.default.pick(e,L),h.default.pick(this.props,L)),console.debug("shouldReposition : ",r),r}},{key:"componentDidMount",value:function(){this.assignRenderedElms(),"undefined"!=typeof window&&window.addEventListener("resize",this.repositionDebounced.bind(this),!1)}},{key:"componentWillUnmount",value:function(){"undefined"!=typeof window&&window.removeEventListener("resize",this.repositionDebounced.bind(this))}}]),t}(f.Component);W.propTypes={elements:d.default.PropTypes.array,layout:d.default.PropTypes.string,customLayoutMethod:d.default.PropTypes.func,numOfColumns:d.default.PropTypes.number,columnWidth:d.default.PropTypes.number,maxHeight:d.default.PropTypes.number,verticalCellSpacing:d.default.PropTypes.number,horizontalCellSpacing:d.default.PropTypes.number,onChange:d.default.PropTypes.func,confirmElementDrag:d.default.PropTypes.func,allowDraggingMobile:d.default.PropTypes.bool,allowDraggingDesktop:d.default.PropTypes.bool,custom:function(e){return"cascading"===e.layout&&void 0===e.numOfColumns&&void 0===e.columnWidth?new Error('either numOfColumns or columnWidth required with "cacading" layout'):"images"===e.layout&&void 0===e.maxHeight?new Error('maxHeight required with "images" layout'):e.elements.reduce(function(e,t){return d.default.isValidElement(t)?e:new Error('"elements" prop arr must have only react elements')},void 0)}};var M=function(){this.elmLoaded$=new E.default.Subject,this.elmEvent$=new E.default.Subject,this.initialCss={},this.repositionThrottled=h.default.throttle(this.reposition,100),this.repositionDebounced=h.default.debounce(this.reposition,100)};t.default=W,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){var t=window.getComputedStyle(e,null),n={width:Number(t.getPropertyValue("width").replace("px","")),height:Number(t.getPropertyValue("height").replace("px","")),margin:{}};return d.default.each(["left","right","top","bottom"],function(e){n[e]=Number(t.getPropertyValue("padding-"+e).replace("px",""))+Number(t.getPropertyValue("border-"+e+"-width").replace("px","")),n.margin[e]=Number(t.getPropertyValue("margin-"+e).replace("px",""))}),n.boxSizing=t.getPropertyValue("box-sizing"),n}function o(e,t){for(var n=t.verticalCellSpacing||0,r=t.horizontalCellSpacing||0,o=void 0!==t.columnWidth?t.columnWidth:(t.parentWidth-(t.numOfColumns-1)*r)/t.numOfColumns-.3,a=0,s=[],u={},l=void 0!==t.numOfColumns?t.numOfColumns:Math.floor((t.parentWidth+r)/(t.columnWidth+r)),f=0;f<l;f++)s.push(0);d.default.each(e,function(e,t){var f=0,c=999999;u[t]=i(e),e.style.position="absolute",e.style.width=o-("border-box"!==u[t].boxSizing?u[t].left+u[t].right:0)-(u[t].margin.left+u[t].margin.right)+"px",d.default.each(s,function(e,t){e<c&&(f=t,c=e)}),e.style.left=f*(o+r)+"px",e.style.top=s[f]+"px",s[f]+=e.offsetHeight+n+u[t].margin.top+u[t].margin.left,a=(f+1)%l})}function a(e,t){var n=t.verticalCellSpacing||0,r=t.horizontalCellSpacing||0;e=d.default.values(e);var o=[],a=[],s=[];d.default.each(e,function(e){var t=null;0===e.clientWidth&&(t=e.style.width,e.style.width="300px",0===e.clientHeight&&(e.style.width=t,e.style.height="300px",0===e.clientWidth&&console.error("element is not responsive when resized!"))),o.push(0!==e.clientHeight?e.clientWidth/e.clientHeight:0);var n=i(e);a.push(n.left+n.margin.left),a.push(n.right+n.margin.right),s.push(n.top+n.margin.top),s.push(n.bottom+n.margin.bottom)});for(var u,l=0,f=0,c=0;l<e.length;){var p=l,h=0,m=0,g=0;do{var v=r*(p-l);h+=o[p],m+=a[2*p]+a[2*p+1],g+=(s[2*p]+s[2*p+1])*o[p],u=(t.parentWidth-m-v+g)/h,p++}while(p<e.length&&u>t.maxHeight);u>t.maxHeight&&(u=t.maxHeight),u=Math.floor(u);for(var y=l;y<p;y++){var b,E,O=e[y],D=i(e[y]),x=D.margin.top+D.margin.bottom,w=D.margin.left+D.margin.right;"content-box"===D.boxSizing?(x+=D.top+D.bottom,w+=D.left+D.right,b=u-x,E=b*o[y]):(b=u-x,E=(b-(D.top+D.bottom))*o[y]+D.left+D.right);var N=O.style.width;O.style.width=E+"px";var P=0!==O.clientHeight?O.clientWidth/O.clientHeight:0;Math.abs(o[y]-P)>.05&&(O.style.width=N,O.style.height=b+"px",P=0!==O.clientHeight?O.clientWidth/O.clientHeight:0,Math.abs(o[y]-P)>.05&&(O.style.width=E+"px")),O.style.position="absolute",O.style.top=f+"px",O.style.left=c+"px",c+=O.offsetWidth+r+D.margin.left+D.margin.right}f+=u+n,c=0,l=p}}function s(e){var t=0,n=0,r=0,i=0;if(e.offsetParent){do t+=e.offsetTop,n+=e.offsetLeft,r+=e.offsetParent?e.offsetParent.scrollTop:0,i+=e.offsetParent?e.offsetParent.scrollLeft:0;while(e=e.offsetParent);return{top:t-r,left:n-i}}}function u(e){return!!e&&("object"===("undefined"==typeof e?"undefined":l(e))||"function"==typeof e)&&"function"==typeof e.then}Object.defineProperty(t,"__esModule",{value:!0});var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.repositionCascadingLayout=o,t.repositionImagesLayout=a,t.getWindowOffset=s,t.isPromise=u;var f=n(1),d=r(f)},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=i},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t){e.exports=s}])});