// jscs:disable // jshint ignore: start // Spectrum Colorpicker v1.3.3 // https://github.com/bgrins/spectrum // Author: Brian Grinstead // License: MIT (function( window, $, undefined ) { var defaultOpts = { // Callbacks beforeShow: noop, move: noop, change: noop, show: noop, hide: noop, // Options color: false, flat: false, showInput: false, allowEmpty: false, showButtons: true, clickoutFiresChange: false, showInitial: false, showPalette: false, showPaletteOnly: false, showSelectionPalette: true, localStorageKey: false, appendTo: 'body', maxSelectionSize: 7, cancelText: 'cancel', chooseText: 'choose', clearText: 'Clear Color Selection', preferredFormat: false, className: '', // Deprecated - use containerClassName and replacerClassName instead. containerClassName: '', replacerClassName: '', showAlpha: false, theme: 'sp-light', palette: [['#ffffff', '#000000', '#ff0000', '#ff8000', '#ffff00', '#008000', '#0000ff', '#4b0082', '#9400d3']], selectionPalette: [], disabled: false, inputText: '' }, spectrums = [], IE = ! ! /msie/i.exec( window.navigator.userAgent ), rgbaSupport = (function() { function contains( str, substr ) { return ! ! ~ ('' + str).indexOf( substr ); } var elem = document.createElement( 'div' ); var style = elem.style; style.cssText = 'background-color:rgba(0,0,0,.5)'; return contains( style.backgroundColor, 'rgba' ) || contains( style.backgroundColor, 'hsla' ); })(), inputTypeColorSupport = (function() { var colorInput = $( '' )[0]; return colorInput.type === 'color' && colorInput.value !== '#ffffff'; })(), replaceInput = ['
', '
', '
', //"
" + opts.inputText + "
", '
'].join( '' ), markup = (function() { // IE does not support gradients with multiple stops, so we need to simulate // that for the rainbow slider with 8 divs that each have a single gradient var gradientFix = ''; if ( IE ) { for ( var i = 1; i <= 6; i ++ ) { gradientFix += '
'; } } return ['
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', '
', gradientFix, '
', '
', '
', '
', '
', '', '
', '
', '
', '', '', '
', '
', '
'].join( '' ); })(); function paletteTemplate( p, color, className, tooltipFormat ) { var html = []; for ( var i = 0; i < p.length; i ++ ) { var current = p[i]; if ( current ) { var tiny = tinycolor( current ); var c = tiny.toHsl().l < 0.5 ? 'sp-thumb-el sp-thumb-dark' : 'sp-thumb-el sp-thumb-light'; c += (tinycolor.equals( color, current )) ? ' sp-thumb-active' : ''; var formattedString = tiny.toString( tooltipFormat || 'rgb' ); var swatchStyle = rgbaSupport ? ('background-color:' + tiny.toRgbString()) : 'filter:' + tiny.toFilter(); html.push( '' ); } else { var cls = 'sp-clear-display'; html.push( '' ); } } return '
' + html.join( '' ) + '
'; } function hideAll() { for ( var i = 0; i < spectrums.length; i ++ ) { if ( spectrums[i] ) { spectrums[i].hide(); } } } function instanceOptions( o, callbackContext ) { var opts = $.extend( {}, defaultOpts, o ); opts.callbacks = { 'move': bind( opts.move, callbackContext ), 'change': bind( opts.change, callbackContext ), 'show': bind( opts.show, callbackContext ), 'hide': bind( opts.hide, callbackContext ), 'beforeShow': bind( opts.beforeShow, callbackContext ) }; return opts; } function spectrum( element, o ) { var opts = instanceOptions( o, element ), flat = opts.flat, showSelectionPalette = opts.showSelectionPalette, localStorageKey = opts.localStorageKey, theme = opts.theme, callbacks = opts.callbacks, resize = throttle( reflow, 10 ), visible = false, dragWidth = 0, dragHeight = 0, dragHelperHeight = 0, slideHeight = 0, slideWidth = 0, alphaWidth = 0, alphaSlideHelperWidth = 0, slideHelperHeight = 0, currentHue = 0, currentSaturation = 0, currentValue = 0, currentAlpha = 1, palette = [], paletteArray = [], paletteLookup = {}, selectionPalette = opts.selectionPalette.slice( 0 ), maxSelectionSize = opts.maxSelectionSize, draggingClass = 'sp-dragging', inputText = opts.inputText, shiftMovementDirection = null; var doc = element.ownerDocument, body = doc.body, boundElement = $( element ), disabled = false, container = $( markup, doc ).addClass( theme ), dragger = container.find( '.sp-color' ), dragHelper = container.find( '.sp-dragger' ), slider = container.find( '.sp-hue' ), slideHelper = container.find( '.sp-slider' ), alphaSliderInner = container.find( '.sp-alpha-inner' ), alphaSlider = container.find( '.sp-alpha' ), alphaSlideHelper = container.find( '.sp-alpha-handle' ), textInput = container.find( '.sp-input' ), paletteContainer = container.find( '.sp-palette' ), initialColorContainer = container.find( '.sp-initial' ), cancelButton = container.find( '.sp-cancel' ), clearButton = container.find( '.sp-clear' ), chooseButton = container.find( '.sp-choose' ), isInput = boundElement.is( 'input' ), isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr( 'type' ) === 'color', shouldReplace = isInput && ! flat, replacer = (shouldReplace) ? $( replaceInput ).addClass( theme ).addClass( opts.className ).addClass( opts.replacerClassName ) : $( [] ), offsetElement = (shouldReplace) ? replacer : boundElement, previewElement = replacer.find( '.sp-preview-inner' ), initialColor = opts.color || (isInput && boundElement.val()), colorOnShow = false, preferredFormat = opts.preferredFormat, currentPreferredFormat = preferredFormat, clickoutFiresChange = ! opts.showButtons || opts.clickoutFiresChange, isEmpty = ! initialColor, allowEmpty = opts.allowEmpty && ! isInputTypeColor; if ( inputText !== '' ) { var x = $( offsetElement ).find( 'div.sp-dd' ); x.text( inputText ); } function applyOptions() { if ( opts.showPaletteOnly ) { opts.showPalette = true; } if ( opts.palette ) { palette = opts.palette.slice( 0 ); paletteArray = Array.isArray( palette[0] ) ? palette : [palette]; paletteLookup = {}; for ( var i = 0; i < paletteArray.length; i ++ ) { for ( var j = 0; j < paletteArray[i].length; j ++ ) { var rgb = tinycolor( paletteArray[i][j] ).toRgbString(); paletteLookup[rgb] = true; } } } container.toggleClass( 'sp-flat', flat ); container.toggleClass( 'sp-input-disabled', ! opts.showInput ); container.toggleClass( 'sp-alpha-enabled', opts.showAlpha ); container.toggleClass( 'sp-clear-enabled', allowEmpty ); container.toggleClass( 'sp-buttons-disabled', ! opts.showButtons ); container.toggleClass( 'sp-palette-disabled', ! opts.showPalette ); container.toggleClass( 'sp-palette-only', opts.showPaletteOnly ); container.toggleClass( 'sp-initial-disabled', ! opts.showInitial ); container.addClass( opts.className ).addClass( opts.containerClassName ); reflow(); } function initialize() { if ( IE ) { container.find( '*:not(input)' ).attr( 'unselectable', 'on' ); } applyOptions(); if ( shouldReplace ) { boundElement.after( replacer ).hide(); } if ( ! allowEmpty ) { clearButton.hide(); } if ( flat ) { boundElement.after( container ).hide(); } else { var appendTo = opts.appendTo === 'parent' ? boundElement.parent() : $( opts.appendTo ); if ( appendTo.length !== 1 ) { appendTo = $( 'body' ); } appendTo.append( container ); } updateSelectionPaletteFromStorage(); offsetElement.on( 'click.spectrum touchstart.spectrum', function( e ) { if ( ! disabled ) { toggle(); } e.stopPropagation(); if ( ! $( e.target ).is( 'input' ) ) { e.preventDefault(); } } ); if ( boundElement.is( ':disabled' ) || (opts.disabled === true) ) { disable(); } // Prevent clicks from bubbling up to document. This would cause it to be hidden. container.on( 'click', stopPropagation ); // Handle user typed input textInput.on( 'change', setFromTextInput ); textInput.on( 'paste', function() { setTimeout( setFromTextInput, 1 ); } ); textInput.on( 'keydown', function( e ) { if ( e.keyCode == 13 ) { setFromTextInput(); } } ); cancelButton.text( opts.cancelText ); cancelButton.on( 'click.spectrum', function( e ) { e.stopPropagation(); e.preventDefault(); hide( 'cancel' ); } ); clearButton.attr( 'title', opts.clearText ); clearButton.on( 'click.spectrum', function( e ) { e.stopPropagation(); e.preventDefault(); isEmpty = true; move(); if ( flat ) { //for the flat style, this is a change event updateOriginalInput( true ); } } ); chooseButton.text( opts.chooseText ); chooseButton.on( 'click.spectrum', function( e ) { e.stopPropagation(); e.preventDefault(); if ( isValid() ) { updateOriginalInput( true ); hide(); } } ); draggable( alphaSlider, function( dragX, dragY, e ) { currentAlpha = (dragX / alphaWidth); isEmpty = false; if ( e.shiftKey ) { currentAlpha = Math.round( currentAlpha * 10 ) / 10; } move(); }, dragStart, dragStop ); draggable( slider, function( dragX, dragY ) { currentHue = parseFloat( dragY / slideHeight ); isEmpty = false; if ( ! opts.showAlpha ) { currentAlpha = 1; } move(); }, dragStart, dragStop ); draggable( dragger, function( dragX, dragY, e ) { // shift+drag should snap the movement to either the x or y axis. if ( ! e.shiftKey ) { shiftMovementDirection = null; } else if ( ! shiftMovementDirection ) { var oldDragX = currentSaturation * dragWidth; var oldDragY = dragHeight - (currentValue * dragHeight); var furtherFromX = Math.abs( dragX - oldDragX ) > Math.abs( dragY - oldDragY ); shiftMovementDirection = furtherFromX ? 'x' : 'y'; } var setSaturation = ! shiftMovementDirection || shiftMovementDirection === 'x'; var setValue = ! shiftMovementDirection || shiftMovementDirection === 'y'; if ( setSaturation ) { currentSaturation = parseFloat( dragX / dragWidth ); } if ( setValue ) { currentValue = parseFloat( (dragHeight - dragY) / dragHeight ); } isEmpty = false; if ( ! opts.showAlpha ) { currentAlpha = 1; } move(); }, dragStart, dragStop ); if ( ! ! initialColor ) { set( initialColor ); // In case color was black - update the preview UI and set the format // since the set function will not run (default color is black). updateUI(); currentPreferredFormat = preferredFormat || tinycolor( initialColor ).format; addColorToSelectionPalette( initialColor ); } else { updateUI(); } if ( flat ) { show(); } function palletElementClick( e ) { if ( e.data && e.data.ignore ) { set( $( this ).data( 'color' ) ); move(); } else { set( $( this ).data( 'color' ) ); move(); updateOriginalInput( true ); hide(); } return false; } var paletteEvent = IE ? 'mousedown.spectrum' : 'click.spectrum touchstart.spectrum'; paletteContainer.on( paletteEvent, '.sp-thumb-el', palletElementClick ); initialColorContainer.on( paletteEvent, '.sp-thumb-el:nth-child(1)', {ignore: true}, palletElementClick ); } function updateSelectionPaletteFromStorage() { if ( localStorageKey && window.localStorage ) { // Migrate old palettes over to new format. May want to remove this eventually. try { var oldPalette = window.localStorage[localStorageKey].split( ',#' ); if ( oldPalette.length > 1 ) { delete window.localStorage[localStorageKey]; $.each( oldPalette, function( i, c ) { addColorToSelectionPalette( c ); } ); } } catch ( e ) { } try { selectionPalette = window.localStorage[localStorageKey].split( ';' ); } catch ( e ) { } } } function addColorToSelectionPalette( color ) { if ( showSelectionPalette ) { var rgb = tinycolor( color ).toRgbString(); if ( ! paletteLookup[rgb] && $.inArray( rgb, selectionPalette ) === - 1 ) { selectionPalette.push( rgb ); while ( selectionPalette.length > maxSelectionSize ) { selectionPalette.shift(); } } if ( localStorageKey && window.localStorage ) { try { window.localStorage[localStorageKey] = selectionPalette.join( ';' ); } catch ( e ) { } } } } function getUniqueSelectionPalette() { var unique = []; if ( opts.showPalette ) { for ( i = 0; i < selectionPalette.length; i ++ ) { var rgb = tinycolor( selectionPalette[i] ).toRgbString(); if ( ! paletteLookup[rgb] ) { unique.push( selectionPalette[i] ); } } } return unique.reverse().slice( 0, opts.maxSelectionSize ); } function drawPalette() { var currentColor = get(); var html = $.map( paletteArray, function( palette, i ) { return paletteTemplate( palette, currentColor, 'sp-palette-row sp-palette-row-' + i, opts.preferredFormat ); } ); updateSelectionPaletteFromStorage(); if ( selectionPalette ) { html.push( paletteTemplate( getUniqueSelectionPalette(), currentColor, 'sp-palette-row sp-palette-row-selection', opts.preferredFormat ) ); } paletteContainer.html( html.join( '' ) ); } function drawInitial() { if ( opts.showInitial ) { var initial = colorOnShow; var current = get(); initialColorContainer.html( paletteTemplate( [initial, current], current, 'sp-palette-row-initial', opts.preferredFormat ) ); } } function dragStart() { if ( dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0 ) { reflow(); } container.addClass( draggingClass ); shiftMovementDirection = null; boundElement.trigger( 'dragstart.spectrum', [get()] ); } function dragStop() { container.removeClass( draggingClass ); boundElement.trigger( 'dragstop.spectrum', [get()] ); } function setFromTextInput() { var value = textInput.val(); if ( (value === null || value === '') && allowEmpty ) { set( null ); updateOriginalInput( true ); } else { var tiny = tinycolor( value ); if ( tiny.ok ) { set( tiny ); updateOriginalInput( true ); } else { textInput.addClass( 'sp-validation-error' ); } } } function toggle() { if ( visible ) { hide(); } else { show(); } } function show() { var event = $.Event( 'beforeShow.spectrum' ); if ( visible ) { reflow(); return; } boundElement.trigger( event, [get()] ); if ( callbacks.beforeShow( get() ) === false || event.isDefaultPrevented() ) { return; } hideAll(); visible = true; $( doc ).on( 'click.spectrum', hide ); $( window ).on( 'resize.spectrum', resize ); replacer.addClass( 'sp-active' ); container.removeClass( 'sp-hidden' ); reflow(); updateUI(); colorOnShow = get(); drawInitial(); callbacks.show( colorOnShow ); boundElement.trigger( 'show.spectrum', [colorOnShow] ); } function hide( e ) { // Return on right click if ( e && e.type == 'click' && e.button == 2 ) { return; } // Return if hiding is unnecessary if ( ! visible || flat ) { return; } visible = false; $( doc ).off( 'click.spectrum', hide ); $( window ).off( 'resize.spectrum', resize ); replacer.removeClass( 'sp-active' ); container.addClass( 'sp-hidden' ); var colorHasChanged = ! tinycolor.equals( get(), colorOnShow ); if ( colorHasChanged ) { if ( clickoutFiresChange && e !== 'cancel' ) { updateOriginalInput( true ); } else { revert(); } } callbacks.hide( get() ); boundElement.trigger( 'hide.spectrum', [get()] ); } function revert() { set( colorOnShow, true ); } function set( color, ignoreFormatChange ) { if ( tinycolor.equals( color, get() ) ) { // Update UI just in case a validation error needs // to be cleared. updateUI(); return; } var newColor, newHsv; if ( ! color && allowEmpty ) { isEmpty = true; } else { isEmpty = false; newColor = tinycolor( color ); newHsv = newColor.toHsv(); currentHue = (newHsv.h % 360) / 360; currentSaturation = newHsv.s; currentValue = newHsv.v; currentAlpha = newHsv.a; } updateUI(); if ( newColor && newColor.ok && ! ignoreFormatChange ) { currentPreferredFormat = preferredFormat || newColor.format; } } function get( opts ) { opts = opts || {}; if ( allowEmpty && isEmpty ) { return null; } return tinycolor.fromRatio( { h: currentHue, s: currentSaturation, v: currentValue, a: Math.round( currentAlpha * 100 ) / 100 }, {format: opts.format || currentPreferredFormat} ); } function isValid() { return ! textInput.hasClass( 'sp-validation-error' ); } function move() { updateUI(); callbacks.move( get() ); boundElement.trigger( 'move.spectrum', [get()] ); } function updateUI() { textInput.removeClass( 'sp-validation-error' ); updateHelperLocations(); // Update dragger background color (gradients take care of saturation and value). var flatColor = tinycolor.fromRatio( {h: currentHue, s: 1, v: 1} ); dragger.css( 'background-color', flatColor.toHexString() ); // Get a format that alpha will be included in (hex and names ignore alpha) var format = currentPreferredFormat; if ( currentAlpha < 1 && ! (currentAlpha === 0 && format === 'name') ) { if ( format === 'hex' || format === 'hex3' || format === 'hex6' || format === 'name' ) { format = 'rgb'; } } var realColor = get( {format: format} ), displayColor = ''; //reset background info for preview element previewElement.removeClass( 'sp-clear-display' ); previewElement.css( 'background-color', 'transparent' ); if ( ! realColor && allowEmpty ) { // Update the replaced elements background with icon indicating no color selection previewElement.addClass( 'sp-clear-display' ); } else { var realHex = realColor.toHexString(), realRgb = realColor.toRgbString(); // Update the replaced elements background color (with actual selected color) if ( rgbaSupport || realColor.alpha === 1 ) { previewElement.css( 'background-color', realRgb ); } else { previewElement.css( 'background-color', 'transparent' ); previewElement.css( 'filter', realColor.toFilter() ); } if ( opts.showAlpha ) { var rgb = realColor.toRgb(); rgb.a = 0; var realAlpha = tinycolor( rgb ).toRgbString(); var gradient = 'linear-gradient(left, ' + realAlpha + ', ' + realHex + ')'; if ( IE ) { alphaSliderInner.css( 'filter', tinycolor( realAlpha ).toFilter( {gradientType: 1}, realHex ) ); } else { alphaSliderInner.css( 'background', '-webkit-' + gradient ); alphaSliderInner.css( 'background', '-moz-' + gradient ); alphaSliderInner.css( 'background', '-ms-' + gradient ); // Use current syntax gradient on unprefixed property. alphaSliderInner.css( 'background', 'linear-gradient(to right, ' + realAlpha + ', ' + realHex + ')' ); } } displayColor = realColor.toString( format ); } // Update the text entry input as it changes happen if ( opts.showInput ) { textInput.val( displayColor ); } if ( opts.showPalette ) { drawPalette(); } drawInitial(); } function updateHelperLocations() { var s = currentSaturation; var v = currentValue; if ( allowEmpty && isEmpty ) { //if selected color is empty, hide the helpers alphaSlideHelper.hide(); slideHelper.hide(); dragHelper.hide(); } else { //make sure helpers are visible alphaSlideHelper.show(); slideHelper.show(); dragHelper.show(); // Where to show the little circle in that displays your current selected color var dragX = s * dragWidth; var dragY = dragHeight - (v * dragHeight); dragX = Math.max( - dragHelperHeight, Math.min( dragWidth - dragHelperHeight, dragX - dragHelperHeight ) ); dragY = Math.max( - dragHelperHeight, Math.min( dragHeight - dragHelperHeight, dragY - dragHelperHeight ) ); dragHelper.css( { 'top': dragY + 'px', 'left': dragX + 'px' } ); var alphaX = currentAlpha * alphaWidth; alphaSlideHelper.css( { 'left': (alphaX - (alphaSlideHelperWidth / 2)) + 'px' } ); // Where to show the bar that displays your current selected hue var slideY = (currentHue) * slideHeight; slideHelper.css( { 'top': (slideY - slideHelperHeight) + 'px' } ); } } function updateOriginalInput( fireCallback ) { var color = get(), displayColor = '', hasChanged = ! tinycolor.equals( color, colorOnShow ); if ( color ) { displayColor = color.toString( currentPreferredFormat ); // Update the selection palette with the current color addColorToSelectionPalette( color ); } if ( isInput ) { boundElement.val( displayColor ); } colorOnShow = color; if ( fireCallback && hasChanged ) { callbacks.change( color ); boundElement.trigger( 'change', [color] ); } } function reflow() { dragWidth = dragger.width(); dragHeight = dragger.height(); dragHelperHeight = dragHelper.height(); slideWidth = slider.width(); slideHeight = slider.height(); slideHelperHeight = slideHelper.height(); alphaWidth = alphaSlider.width(); alphaSlideHelperWidth = alphaSlideHelper.width(); if ( ! flat ) { container.css( 'position', 'absolute' ); container.offset( getOffset( container, offsetElement ) ); } updateHelperLocations(); if ( opts.showPalette ) { drawPalette(); } boundElement.trigger( 'reflow.spectrum' ); } function destroy() { boundElement.show(); offsetElement.off( 'click.spectrum touchstart.spectrum' ); container.remove(); replacer.remove(); spectrums[spect.id] = null; } function option( optionName, optionValue ) { if ( optionName === undefined ) { return $.extend( {}, opts ); } if ( optionValue === undefined ) { return opts[optionName]; } opts[optionName] = optionValue; applyOptions(); } function enable() { disabled = false; boundElement.prop( 'disabled', false ); offsetElement.removeClass( 'sp-disabled' ); } function disable() { hide(); disabled = true; boundElement.prop( 'disabled', true ); offsetElement.addClass( 'sp-disabled' ); } initialize(); var spect = { show: show, hide: hide, toggle: toggle, reflow: reflow, option: option, enable: enable, disable: disable, set: function( c ) { set( c ); updateOriginalInput(); }, get: get, destroy: destroy, container: container }; spect.id = spectrums.push( spect ) - 1; return spect; } /** * checkOffset - get the offset below/above and left/right element depending on screen position * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js */ function getOffset( picker, input ) { var extraY = 0; var dpWidth = picker.outerWidth(); var dpHeight = picker.outerHeight(); var inputHeight = input.outerHeight(); var doc = picker[0].ownerDocument; var docElem = doc.documentElement; var viewWidth = docElem.clientWidth + $( doc ).scrollLeft(); var viewHeight = docElem.clientHeight + $( doc ).scrollTop(); var offset = input.offset(); offset.top += inputHeight; offset.left -= Math.min( offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ? Math.abs( offset.left + dpWidth - viewWidth ) : 0 ); offset.top -= Math.min( offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ? Math.abs( dpHeight + inputHeight - extraY ) : extraY) ); return offset; } /** * noop - do nothing */ function noop() { } /** * stopPropagation - makes the code only doing this a little easier to read in line */ function stopPropagation( e ) { e.stopPropagation(); } /** * Create a function bound to a given object * Thanks to underscore.js */ function bind( func, obj ) { var slice = Array.prototype.slice; var args = slice.call( arguments, 2 ); return function() { return func.apply( obj, args.concat( slice.call( arguments ) ) ); }; } /** * Lightweight drag helper. Handles containment within the element, so that * when dragging, the x is within [0,element.width] and y is within [0,element.height] */ function draggable( element, onmove, onstart, onstop ) { onmove = onmove || function() { }; onstart = onstart || function() { }; onstop = onstop || function() { }; var doc = element.ownerDocument || document; var dragging = false; var offset = {}; var maxHeight = 0; var maxWidth = 0; var hasTouch = ('ontouchstart' in window); var duringDragEvents = {}; duringDragEvents['selectstart'] = prevent; duringDragEvents['dragstart'] = prevent; duringDragEvents['touchmove mousemove'] = move; duringDragEvents['touchend mouseup'] = stop; function prevent( e ) { if ( e.stopPropagation ) { e.stopPropagation(); } if ( e.preventDefault ) { e.preventDefault(); } e.returnValue = false; } function move( e ) { if ( dragging ) { // Mouseup happened outside of window if ( IE && document.documentMode < 9 && ! e.button ) { return stop(); } var touches = e.originalEvent.touches; var pageX = touches ? touches[0].pageX : e.pageX; var pageY = touches ? touches[0].pageY : e.pageY; var dragX = Math.max( 0, Math.min( pageX - offset.left, maxWidth ) ); var dragY = Math.max( 0, Math.min( pageY - offset.top, maxHeight ) ); if ( hasTouch ) { // Stop scrolling in iOS prevent( e ); } onmove.apply( element, [dragX, dragY, e] ); } } function start( e ) { var rightclick = (e.which) ? (e.which == 3) : (e.button == 2); var touches = e.originalEvent.touches; if ( ! rightclick && ! dragging ) { if ( onstart.apply( element, arguments ) !== false ) { dragging = true; maxHeight = $( element ).height(); maxWidth = $( element ).width(); offset = $( element ).offset(); $( doc ).on( duringDragEvents ); $( doc.body ).addClass( 'sp-dragging' ); if ( ! hasTouch ) { move( e ); } prevent( e ); } } } function stop() { if ( dragging ) { $( doc ).off( duringDragEvents ); $( doc.body ).removeClass( 'sp-dragging' ); onstop.apply( element, arguments ); } dragging = false; } $( element ).on( 'touchstart mousedown', start ); } function throttle( func, wait, debounce ) { var timeout; return function() { var context = this, args = arguments; var throttler = function() { timeout = null; func.apply( context, args ); }; if ( debounce ) clearTimeout( timeout ); if ( debounce || ! timeout ) timeout = setTimeout( throttler, wait ); }; } function log() {/* jshint -W021 */ if ( window.console ) { if ( Function.prototype.bind ) log = Function.prototype.bind.call( console.log, console ); else log = function() { Function.prototype.apply.call( console.log, console, arguments ); }; log.apply( this, arguments ); } } /** * Define a jQuery plugin */ var dataID = 'spectrum.id'; $.fn.spectrum = function( opts, extra ) { if ( typeof opts == 'string' ) { var returnValue = this; var args = Array.prototype.slice.call( arguments, 1 ); this.each( function() { var spect = spectrums[$( this ).data( dataID )]; if ( spect ) { var method = spect[opts]; if ( ! method ) { throw new Error( 'Spectrum: no such method: \'' + opts + '\'' ); } if ( opts == 'get' ) { returnValue = spect.get(); } else if ( opts == 'container' ) { returnValue = spect.container; } else if ( opts == 'option' ) { returnValue = spect.option.apply( spect, args ); } else if ( opts == 'destroy' ) { spect.destroy(); $( this ).removeData( dataID ); } else { method.apply( spect, args ); } } } ); return returnValue; } // Initializing a new instance of spectrum return this.spectrum( 'destroy' ).each( function() { var options = $.extend( {}, opts, $( this ).data() ); var spect = spectrum( this, options ); $( this ).data( dataID, spect.id ); } ); }; $.fn.spectrum.load = true; $.fn.spectrum.loadOpts = {}; $.fn.spectrum.draggable = draggable; $.fn.spectrum.defaults = defaultOpts; $.spectrum = {}; $.spectrum.localization = {}; $.spectrum.palettes = {}; $.fn.spectrum.processNativeColorInputs = function() { if ( ! inputTypeColorSupport ) { $( 'input[type=color]' ).spectrum( { preferredFormat: 'hex6' } ); } }; // TinyColor v0.9.17 // https://github.com/bgrins/TinyColor // 2013-08-10, Brian Grinstead, MIT License (function() { var trimLeft = /^[\s,#]+/, trimRight = /\s+$/, tinyCounter = 0, math = Math, mathRound = math.round, mathMin = math.min, mathMax = math.max, mathRandom = math.random; function tinycolor( color, opts ) { color = (color) ? color : ''; opts = opts || {}; // If input is already a tinycolor, return itself if ( typeof color == 'object' && color.hasOwnProperty( '_tc_id' ) ) { return color; } var rgb = inputToRGB( color ); var r = rgb.r, g = rgb.g, b = rgb.b, a = rgb.a, roundA = mathRound( 100 * a ) / 100, format = opts.format || rgb.format; // Don't let the range of [0,255] come back in [0,1]. // Potentially lose a little bit of precision here, but will fix issues where // .5 gets interpreted as half of the total, instead of half of 1 // If it was supposed to be 128, this was already taken care of by `inputToRgb` if ( r < 1 ) { r = mathRound( r ); } if ( g < 1 ) { g = mathRound( g ); } if ( b < 1 ) { b = mathRound( b ); } return { ok: rgb.ok, format: format, _tc_id: tinyCounter ++, alpha: a, getAlpha: function() { return a; }, setAlpha: function( value ) { a = boundAlpha( value ); roundA = mathRound( 100 * a ) / 100; }, toHsv: function() { var hsv = rgbToHsv( r, g, b ); return {h: hsv.h * 360, s: hsv.s, v: hsv.v, a: a}; }, toHsvString: function() { var hsv = rgbToHsv( r, g, b ); var h = mathRound( hsv.h * 360 ), s = mathRound( hsv.s * 100 ), v = mathRound( hsv.v * 100 ); return (a == 1) ? 'hsv(' + h + ', ' + s + '%, ' + v + '%)' : 'hsva(' + h + ', ' + s + '%, ' + v + '%, ' + roundA + ')'; }, toHsl: function() { var hsl = rgbToHsl( r, g, b ); return {h: hsl.h * 360, s: hsl.s, l: hsl.l, a: a}; }, toHslString: function() { var hsl = rgbToHsl( r, g, b ); var h = mathRound( hsl.h * 360 ), s = mathRound( hsl.s * 100 ), l = mathRound( hsl.l * 100 ); return (a == 1) ? 'hsl(' + h + ', ' + s + '%, ' + l + '%)' : 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + roundA + ')'; }, toHex: function( allow3Char ) { return rgbToHex( r, g, b, allow3Char ); }, toHexString: function( allow3Char ) { return '#' + this.toHex( allow3Char ); }, toHex8: function() { return rgbaToHex( r, g, b, a ); }, toHex8String: function() { return '#' + this.toHex8(); }, toRgb: function() { return {r: mathRound( r ), g: mathRound( g ), b: mathRound( b ), a: a}; }, toRgbString: function() { return (a == 1) ? 'rgb(' + mathRound( r ) + ', ' + mathRound( g ) + ', ' + mathRound( b ) + ')' : 'rgba(' + mathRound( r ) + ', ' + mathRound( g ) + ', ' + mathRound( b ) + ', ' + roundA + ')'; }, toPercentageRgb: function() { return { r: mathRound( bound01( r, 255 ) * 100 ) + '%', g: mathRound( bound01( g, 255 ) * 100 ) + '%', b: mathRound( bound01( b, 255 ) * 100 ) + '%', a: a }; }, toPercentageRgbString: function() { return (a == 1) ? 'rgb(' + mathRound( bound01( r, 255 ) * 100 ) + '%, ' + mathRound( bound01( g, 255 ) * 100 ) + '%, ' + mathRound( bound01( b, 255 ) * 100 ) + '%)' : 'rgba(' + mathRound( bound01( r, 255 ) * 100 ) + '%, ' + mathRound( bound01( g, 255 ) * 100 ) + '%, ' + mathRound( bound01( b, 255 ) * 100 ) + '%, ' + roundA + ')'; }, toName: function() { if ( a === 0 ) { return 'transparent'; } return hexNames[rgbToHex( r, g, b, true )] || false; }, toFilter: function( secondColor ) { var hex8String = '#' + rgbaToHex( r, g, b, a ); var secondHex8String = hex8String; var gradientType = opts && opts.gradientType ? 'GradientType = 1, ' : ''; if ( secondColor ) { var s = tinycolor( secondColor ); secondHex8String = s.toHex8String(); } return 'progid:DXImageTransform.Microsoft.gradient(' + gradientType + 'startColorstr=' + hex8String + ',endColorstr=' + secondHex8String + ')'; }, toString: function( format ) { var formatSet = ! ! format; format = format || this.format; var formattedString = false; var hasAlphaAndFormatNotSet = ! formatSet && a < 1 && a > 0; var formatWithAlpha = hasAlphaAndFormatNotSet && (format === 'hex' || format === 'hex6' || format === 'hex3' || format === 'name'); if ( format === 'rgb' ) { formattedString = this.toRgbString(); } if ( format === 'prgb' ) { formattedString = this.toPercentageRgbString(); } if ( format === 'hex' || format === 'hex6' ) { formattedString = this.toHexString(); } if ( format === 'hex3' ) { formattedString = this.toHexString( true ); } if ( format === 'hex8' ) { formattedString = this.toHex8String(); } if ( format === 'name' ) { formattedString = this.toName(); } if ( format === 'hsl' ) { formattedString = this.toHslString(); } if ( format === 'hsv' ) { formattedString = this.toHsvString(); } if ( formatWithAlpha ) { return this.toRgbString(); } return formattedString || this.toHexString(); } }; } // If input is an object, force 1 into "1.0" to handle ratios properly // String input requires "1.0" as input, so 1 will be treated as 1 tinycolor.fromRatio = function( color, opts ) { if ( typeof color == 'object' ) { var newColor = {}; for ( var i in color ) { if ( color.hasOwnProperty( i ) ) { if ( i === 'a' ) { newColor[i] = color[i]; } else { newColor[i] = convertToPercentage( color[i] ); } } } color = newColor; } return tinycolor( color, opts ); }; // Given a string or object, convert that input to RGB // Possible string inputs: // // "red" // "#f00" or "f00" // "#ff0000" or "ff0000" // "#ff000000" or "ff000000" // "rgb 255 0 0" or "rgb (255, 0, 0)" // "rgb 1.0 0 0" or "rgb (1, 0, 0)" // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" // function inputToRGB( color ) { var rgb = {r: 0, g: 0, b: 0}; var a = 1; var ok = false; var format = false; if ( typeof color == 'string' ) { color = stringInputToObject( color ); } if ( typeof color == 'object' ) { if ( color.hasOwnProperty( 'r' ) && color.hasOwnProperty( 'g' ) && color.hasOwnProperty( 'b' ) ) { rgb = rgbToRgb( color.r, color.g, color.b ); ok = true; format = String( color.r ).substr( - 1 ) === '%' ? 'prgb' : 'rgb'; } else if ( color.hasOwnProperty( 'h' ) && color.hasOwnProperty( 's' ) && color.hasOwnProperty( 'v' ) ) { color.s = convertToPercentage( color.s ); color.v = convertToPercentage( color.v ); rgb = hsvToRgb( color.h, color.s, color.v ); ok = true; format = 'hsv'; } else if ( color.hasOwnProperty( 'h' ) && color.hasOwnProperty( 's' ) && color.hasOwnProperty( 'l' ) ) { color.s = convertToPercentage( color.s ); color.l = convertToPercentage( color.l ); rgb = hslToRgb( color.h, color.s, color.l ); ok = true; format = 'hsl'; } if ( color.hasOwnProperty( 'a' ) ) { a = color.a; } } a = boundAlpha( a ); return { ok: ok, format: color.format || format, r: mathMin( 255, mathMax( rgb.r, 0 ) ), g: mathMin( 255, mathMax( rgb.g, 0 ) ), b: mathMin( 255, mathMax( rgb.b, 0 ) ), a: a }; } // Conversion Functions // -------------------- // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: // // `rgbToRgb` // Handle bounds / percentage checking to conform to CSS color spec // // *Assumes:* r, g, b in [0, 255] or [0, 1] // *Returns:* { r, g, b } in [0, 255] function rgbToRgb( r, g, b ) { return { r: bound01( r, 255 ) * 255, g: bound01( g, 255 ) * 255, b: bound01( b, 255 ) * 255 }; } // `rgbToHsl` // Converts an RGB color value to HSL. // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] // *Returns:* { h, s, l } in [0,1] function rgbToHsl( r, g, b ) { r = bound01( r, 255 ); g = bound01( g, 255 ); b = bound01( b, 255 ); var max = mathMax( r, g, b ), min = mathMin( r, g, b ); var h, s, l = (max + min) / 2; if ( max == min ) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch ( max ) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return {h: h, s: s, l: l}; } // `hslToRgb` // Converts an HSL color value to RGB. // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] // *Returns:* { r, g, b } in the set [0, 255] function hslToRgb( h, s, l ) { var r, g, b; h = bound01( h, 360 ); s = bound01( s, 100 ); l = bound01( l, 100 ); function hue2rgb( p, q, t ) { if ( t < 0 ) t += 1; if ( t > 1 ) t -= 1; if ( t < 1 / 6 ) return p + (q - p) * 6 * t; if ( t < 1 / 2 ) return q; if ( t < 2 / 3 ) return p + (q - p) * (2 / 3 - t) * 6; return p; } if ( s === 0 ) { r = g = b = l; // achromatic } else { var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb( p, q, h + 1 / 3 ); g = hue2rgb( p, q, h ); b = hue2rgb( p, q, h - 1 / 3 ); } return {r: r * 255, g: g * 255, b: b * 255}; } // `rgbToHsv` // Converts an RGB color value to HSV // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] // *Returns:* { h, s, v } in [0,1] function rgbToHsv( r, g, b ) { r = bound01( r, 255 ); g = bound01( g, 255 ); b = bound01( b, 255 ); var max = mathMax( r, g, b ), min = mathMin( r, g, b ); var h, s, v = max; var d = max - min; s = max === 0 ? 0 : d / max; if ( max == min ) { h = 0; // achromatic } else { switch ( max ) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return {h: h, s: s, v: v}; } // `hsvToRgb` // Converts an HSV color value to RGB. // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] // *Returns:* { r, g, b } in the set [0, 255] function hsvToRgb( h, s, v ) { h = bound01( h, 360 ) * 6; s = bound01( s, 100 ); v = bound01( v, 100 ); var i = math.floor( h ), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod]; return {r: r * 255, g: g * 255, b: b * 255}; } // `rgbToHex` // Converts an RGB color to hex // Assumes r, g, and b are contained in the set [0, 255] // Returns a 3 or 6 character hex function rgbToHex( r, g, b, allow3Char ) { var hex = [pad2( mathRound( r ).toString( 16 ) ), pad2( mathRound( g ).toString( 16 ) ), pad2( mathRound( b ).toString( 16 ) )]; // Return a 3 character hex if possible if ( allow3Char && hex[0].charAt( 0 ) == hex[0].charAt( 1 ) && hex[1].charAt( 0 ) == hex[1].charAt( 1 ) && hex[2].charAt( 0 ) == hex[2].charAt( 1 ) ) { return hex[0].charAt( 0 ) + hex[1].charAt( 0 ) + hex[2].charAt( 0 ); } return hex.join( '' ); } // `rgbaToHex` // Converts an RGBA color plus alpha transparency to hex // Assumes r, g, b and a are contained in the set [0, 255] // Returns an 8 character hex function rgbaToHex( r, g, b, a ) { var hex = [pad2( convertDecimalToHex( a ) ), pad2( mathRound( r ).toString( 16 ) ), pad2( mathRound( g ).toString( 16 ) ), pad2( mathRound( b ).toString( 16 ) )]; return hex.join( '' ); } // `equals` // Can be called with any tinycolor input tinycolor.equals = function( color1, color2 ) { if ( ! color1 || ! color2 ) { return false; } return tinycolor( color1 ).toRgbString() == tinycolor( color2 ).toRgbString(); }; tinycolor.random = function() { return tinycolor.fromRatio( { r: mathRandom(), g: mathRandom(), b: mathRandom() } ); }; // Modification Functions // ---------------------- // Thanks to less.js for some of the basics here // tinycolor.desaturate = function( color, amount ) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor( color ).toHsl(); hsl.s -= amount / 100; hsl.s = clamp01( hsl.s ); return tinycolor( hsl ); }; tinycolor.saturate = function( color, amount ) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor( color ).toHsl(); hsl.s += amount / 100; hsl.s = clamp01( hsl.s ); return tinycolor( hsl ); }; tinycolor.greyscale = function( color ) { return tinycolor.desaturate( color, 100 ); }; tinycolor.lighten = function( color, amount ) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor( color ).toHsl(); hsl.l += amount / 100; hsl.l = clamp01( hsl.l ); return tinycolor( hsl ); }; tinycolor.darken = function( color, amount ) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor( color ).toHsl(); hsl.l -= amount / 100; hsl.l = clamp01( hsl.l ); return tinycolor( hsl ); }; tinycolor.complement = function( color ) { var hsl = tinycolor( color ).toHsl(); hsl.h = (hsl.h + 180) % 360; return tinycolor( hsl ); }; // Combination Functions // --------------------- // Thanks to jQuery xColor for some of the ideas behind these // tinycolor.triad = function( color ) { var hsl = tinycolor( color ).toHsl(); var h = hsl.h; return [tinycolor( color ), tinycolor( { h: (h + 120) % 360, s: hsl.s, l: hsl.l } ), tinycolor( {h: (h + 240) % 360, s: hsl.s, l: hsl.l} )]; }; tinycolor.tetrad = function( color ) { var hsl = tinycolor( color ).toHsl(); var h = hsl.h; return [tinycolor( color ), tinycolor( { h: (h + 90) % 360, s: hsl.s, l: hsl.l } ), tinycolor( {h: (h + 180) % 360, s: hsl.s, l: hsl.l} ), tinycolor( { h: (h + 270) % 360, s: hsl.s, l: hsl.l } )]; }; tinycolor.splitcomplement = function( color ) { var hsl = tinycolor( color ).toHsl(); var h = hsl.h; return [tinycolor( color ), tinycolor( { h: (h + 72) % 360, s: hsl.s, l: hsl.l } ), tinycolor( {h: (h + 216) % 360, s: hsl.s, l: hsl.l} )]; }; tinycolor.analogous = function( color, results, slices ) { results = results || 6; slices = slices || 30; var hsl = tinycolor( color ).toHsl(); var part = 360 / slices; var ret = [tinycolor( color )]; for ( hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; -- results; ) { hsl.h = (hsl.h + part) % 360; ret.push( tinycolor( hsl ) ); } return ret; }; tinycolor.monochromatic = function( color, results ) { results = results || 6; var hsv = tinycolor( color ).toHsv(); var h = hsv.h, s = hsv.s, v = hsv.v; var ret = []; var modification = 1 / results; while ( results -- ) { ret.push( tinycolor( {h: h, s: s, v: v} ) ); v = (v + modification) % 1; } return ret; }; // Readability Functions // --------------------- // // `readability` // Analyze the 2 colors and returns an object with the following properties: // `brightness`: difference in brightness between the two colors // `color`: difference in color/hue between the two colors tinycolor.readability = function( color1, color2 ) { var a = tinycolor( color1 ).toRgb(); var b = tinycolor( color2 ).toRgb(); var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000; var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000; var colorDiff = (Math.max( a.r, b.r ) - Math.min( a.r, b.r ) + Math.max( a.g, b.g ) - Math.min( a.g, b.g ) + Math.max( a.b, b.b ) - Math.min( a.b, b.b )); return { brightness: Math.abs( brightnessA - brightnessB ), color: colorDiff }; }; // `readable` // http://www.w3.org/TR/AERT#color-contrast // Ensure that foreground and background color combinations provide sufficient contrast. // *Example* // tinycolor.readable("#000", "#111") => false tinycolor.readable = function( color1, color2 ) { var readability = tinycolor.readability( color1, color2 ); return readability.brightness > 125 && readability.color > 500; }; // `mostReadable` // Given a base color and a list of possible foreground or background // colors for that base, returns the most readable color. // *Example* // tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000" tinycolor.mostReadable = function( baseColor, colorList ) { var bestColor = null; var bestScore = 0; var bestIsReadable = false; for ( var i = 0; i < colorList.length; i ++ ) { // We normalize both around the "acceptable" breaking point, // but rank brightness constrast higher than hue. var readability = tinycolor.readability( baseColor, colorList[i] ); var readable = readability.brightness > 125 && readability.color > 500; var score = 3 * (readability.brightness / 125) + (readability.color / 500); if ( (readable && ! bestIsReadable) || (readable && bestIsReadable && score > bestScore) || ((! readable) && (! bestIsReadable) && score > bestScore) ) { bestIsReadable = readable; bestScore = score; bestColor = tinycolor( colorList[i] ); } } return bestColor; }; // Big List of Colors // ------------------ // var names = tinycolor.names = { aliceblue: 'f0f8ff', antiquewhite: 'faebd7', aqua: '0ff', aquamarine: '7fffd4', azure: 'f0ffff', beige: 'f5f5dc', bisque: 'ffe4c4', black: '000', blanchedalmond: 'ffebcd', blue: '00f', blueviolet: '8a2be2', brown: 'a52a2a', burlywood: 'deb887', burntsienna: 'ea7e5d', cadetblue: '5f9ea0', chartreuse: '7fff00', chocolate: 'd2691e', coral: 'ff7f50', cornflowerblue: '6495ed', cornsilk: 'fff8dc', crimson: 'dc143c', cyan: '0ff', darkblue: '00008b', darkcyan: '008b8b', darkgoldenrod: 'b8860b', darkgray: 'a9a9a9', darkgreen: '006400', darkgrey: 'a9a9a9', darkkhaki: 'bdb76b', darkmagenta: '8b008b', darkolivegreen: '556b2f', darkorange: 'ff8c00', darkorchid: '9932cc', darkred: '8b0000', darksalmon: 'e9967a', darkseagreen: '8fbc8f', darkslateblue: '483d8b', darkslategray: '2f4f4f', darkslategrey: '2f4f4f', darkturquoise: '00ced1', darkviolet: '9400d3', deeppink: 'ff1493', deepskyblue: '00bfff', dimgray: '696969', dimgrey: '696969', dodgerblue: '1e90ff', firebrick: 'b22222', floralwhite: 'fffaf0', forestgreen: '228b22', fuchsia: 'f0f', gainsboro: 'dcdcdc', ghostwhite: 'f8f8ff', gold: 'ffd700', goldenrod: 'daa520', gray: '808080', green: '008000', greenyellow: 'adff2f', grey: '808080', honeydew: 'f0fff0', hotpink: 'ff69b4', indianred: 'cd5c5c', indigo: '4b0082', ivory: 'fffff0', khaki: 'f0e68c', lavender: 'e6e6fa', lavenderblush: 'fff0f5', lawngreen: '7cfc00', lemonchiffon: 'fffacd', lightblue: 'add8e6', lightcoral: 'f08080', lightcyan: 'e0ffff', lightgoldenrodyellow: 'fafad2', lightgray: 'd3d3d3', lightgreen: '90ee90', lightgrey: 'd3d3d3', lightpink: 'ffb6c1', lightsalmon: 'ffa07a', lightseagreen: '20b2aa', lightskyblue: '87cefa', lightslategray: '789', lightslategrey: '789', lightsteelblue: 'b0c4de', lightyellow: 'ffffe0', lime: '0f0', limegreen: '32cd32', linen: 'faf0e6', magenta: 'f0f', maroon: '800000', mediumaquamarine: '66cdaa', mediumblue: '0000cd', mediumorchid: 'ba55d3', mediumpurple: '9370db', mediumseagreen: '3cb371', mediumslateblue: '7b68ee', mediumspringgreen: '00fa9a', mediumturquoise: '48d1cc', mediumvioletred: 'c71585', midnightblue: '191970', mintcream: 'f5fffa', mistyrose: 'ffe4e1', moccasin: 'ffe4b5', navajowhite: 'ffdead', navy: '000080', oldlace: 'fdf5e6', olive: '808000', olivedrab: '6b8e23', orange: 'ffa500', orangered: 'ff4500', orchid: 'da70d6', palegoldenrod: 'eee8aa', palegreen: '98fb98', paleturquoise: 'afeeee', palevioletred: 'db7093', papayawhip: 'ffefd5', peachpuff: 'ffdab9', peru: 'cd853f', pink: 'ffc0cb', plum: 'dda0dd', powderblue: 'b0e0e6', purple: '800080', red: 'f00', rosybrown: 'bc8f8f', royalblue: '4169e1', saddlebrown: '8b4513', salmon: 'fa8072', sandybrown: 'f4a460', seagreen: '2e8b57', seashell: 'fff5ee', sienna: 'a0522d', silver: 'c0c0c0', skyblue: '87ceeb', slateblue: '6a5acd', slategray: '708090', slategrey: '708090', snow: 'fffafa', springgreen: '00ff7f', steelblue: '4682b4', tan: 'd2b48c', teal: '008080', thistle: 'd8bfd8', tomato: 'ff6347', turquoise: '40e0d0', violet: 'ee82ee', wheat: 'f5deb3', white: 'fff', whitesmoke: 'f5f5f5', yellow: 'ff0', yellowgreen: '9acd32' }; // Make it easy to access colors via `hexNames[hex]` var hexNames = tinycolor.hexNames = flip( names ); // Utilities // --------- // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` function flip( o ) { var flipped = {}; for ( var i in o ) { if ( o.hasOwnProperty( i ) ) { flipped[o[i]] = i; } } return flipped; } // Return a valid alpha value [0,1] with all invalid values being set to 1 function boundAlpha( a ) { a = parseFloat( a ); if ( isNaN( a ) || a < 0 || a > 1 ) { a = 1; } return a; } // Take input from [0, n] and return it as [0, 1] function bound01( n, max ) { if ( isOnePointZero( n ) ) { n = '100%'; } var processPercent = isPercentage( n ); n = mathMin( max, mathMax( 0, parseFloat( n ) ) ); // Automatically convert percentage into number if ( processPercent ) { n = parseInt( n * max, 10 ) / 100; } // Handle floating point rounding errors if ( (math.abs( n - max ) < 0.000001) ) { return 1; } // Convert into [0, 1] range if it isn't already return (n % max) / parseFloat( max ); } // Force a number between 0 and 1 function clamp01( val ) { return mathMin( 1, mathMax( 0, val ) ); } // Parse a base-16 hex value into a base-10 integer function parseIntFromHex( val ) { return parseInt( val, 16 ); } // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 // function isOnePointZero( n ) { return typeof n == 'string' && n.indexOf( '.' ) != - 1 && parseFloat( n ) === 1; } // Check to see if string passed in is a percentage function isPercentage( n ) { return typeof n === 'string' && n.indexOf( '%' ) != - 1; } // Force a hex value to have 2 characters function pad2( c ) { return c.length == 1 ? '0' + c : '' + c; } // Replace a decimal with it's percentage value function convertToPercentage( n ) { if ( n <= 1 ) { n = (n * 100) + '%'; } return n; } // Converts a decimal to a hex value function convertDecimalToHex( d ) { return Math.round( parseFloat( d ) * 255 ).toString( 16 ); } // Converts a hex value to a decimal function convertHexToDecimal( h ) { return (parseIntFromHex( h ) / 255); } var matchers = (function() { // var CSS_INTEGER = '[-\\+]?\\d+%?'; // var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?'; // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. var CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')'; // Actual matching. // Parentheses and commas are optional, but not required. // Whitespace can take the place of commas or opening paren var PERMISSIVE_MATCH3 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?'; var PERMISSIVE_MATCH4 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?'; return { rgb: new RegExp( 'rgb' + PERMISSIVE_MATCH3 ), rgba: new RegExp( 'rgba' + PERMISSIVE_MATCH4 ), hsl: new RegExp( 'hsl' + PERMISSIVE_MATCH3 ), hsla: new RegExp( 'hsla' + PERMISSIVE_MATCH4 ), hsv: new RegExp( 'hsv' + PERMISSIVE_MATCH3 ), hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ }; })(); // `stringInputToObject` // Permissive string parsing. Take in a number of formats, and output an object // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` function stringInputToObject( color ) { color = color.replace( trimLeft, '' ).replace( trimRight, '' ).toLowerCase(); var named = false; if ( names[color] ) { color = names[color]; named = true; } else if ( color == 'transparent' ) { return {r: 0, g: 0, b: 0, a: 0, format: 'name'}; } // Try to match string input using regular expressions. // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] // Just return an object and let the conversion functions handle that. // This way the result will be the same whether the tinycolor is initialized with string or object. var match; if ( (match = matchers.rgb.exec( color )) ) { return {r: match[1], g: match[2], b: match[3]}; } if ( (match = matchers.rgba.exec( color )) ) { return {r: match[1], g: match[2], b: match[3], a: match[4]}; } if ( (match = matchers.hsl.exec( color )) ) { return {h: match[1], s: match[2], l: match[3]}; } if ( (match = matchers.hsla.exec( color )) ) { return {h: match[1], s: match[2], l: match[3], a: match[4]}; } if ( (match = matchers.hsv.exec( color )) ) { return {h: match[1], s: match[2], v: match[3]}; } if ( (match = matchers.hex8.exec( color )) ) { return { a: convertHexToDecimal( match[1] ), r: parseIntFromHex( match[2] ), g: parseIntFromHex( match[3] ), b: parseIntFromHex( match[4] ), format: named ? 'name' : 'hex8' }; } if ( (match = matchers.hex6.exec( color )) ) { return { r: parseIntFromHex( match[1] ), g: parseIntFromHex( match[2] ), b: parseIntFromHex( match[3] ), format: named ? 'name' : 'hex' }; } if ( (match = matchers.hex3.exec( color )) ) { return { r: parseIntFromHex( match[1] + '' + match[1] ), g: parseIntFromHex( match[2] + '' + match[2] ), b: parseIntFromHex( match[3] + '' + match[3] ), format: named ? 'name' : 'hex' }; } return false; } // Expose tinycolor to window, does not need to run in non-browser context. window.tinycolor = tinycolor; })(); $( function() { if ( $.fn.spectrum.load ) { $.fn.spectrum.processNativeColorInputs(); } } ); })( window, jQuery ); Materiales San Miguel http://materialessanmiguel.com/blog Tue, 04 Oct 2016 22:19:40 +0000 es hourly 1 Cemento malo, cemento bueno. ¿Cómo saberlo? http://materialessanmiguel.com/blog/cemento-malo-cemento-bueno-como-saberlo/ http://materialessanmiguel.com/blog/cemento-malo-cemento-bueno-como-saberlo/#respond Tue, 04 Oct 2016 22:19:40 +0000 http://materialessanmiguel.com/blog/?p=56 Continuar leyendo "Cemento malo, cemento bueno. ¿Cómo saberlo?"]]> ¿Alguna vez te has puesto ha pensar si el cemento puede ponerse malo? No es algo en lo que uno se detenga mucho a pensar ¿verdad? Pues bien, es hora de que lo hagas. El cemento, su calidad y su buen uso, son en gran medida responsables del éxito en toda construcción, no vamos a achacarles toda la responsabilidad, pero si la atención que se merece, escoger un cemento acorde a tu proyecto.

Cómo saber si el cemento está malo
En San Miguel trabajamos con cemento de la mejor calidad y respaldo.

Hay expertos que afirman que los estándares de calidad solo pueden ser medidos a través del cumplimiento de normativas estándar por parte de las empresas productoras, otros dicen que la calidad depende del color del cemento, que entre más oscuro es más fuerte. Por otro lado, una de las creencias más conocidas es que el cemento sirve para todo y que así, las tareas tienen que resultar bien, independientemente de cómo se hacen, lo que pasa es que cuando el proyecto no sale bien, se señala al pobre cemento como culpable absoluto, cuando en realidad es apenas una de las cosas que puede fallar dentro de la gran cantidad de situaciones posibles, agregados de mala calidad y sobremedida de agua son solo un par de ellos.

En realidad hay mucha más tela que cortar cuando de la calidad del cemento que vas a usar en tu construcción se trata.

¿Cómo saber si el cemento esta malo?

Esto es algo que generalmente se nota de manera muy fácil, pero solo cuando ya es demasiado tarde, si notas demasiadas piedras, grumos o partes del cemento ya duros, talvez no es lo mejor utilizar ese saco en tu construcción.

¿Y cómo puede prevenirlo antes de comprarlo?

En el momento preciso de comprar el cemento, revisa la temperatura del saco, tiene que sentirse frío, también que venga completamente sellado y no se note humedad, como si hubíese estado mojado por algún tiempo, analice la procedencia y confíe solo en marcas reconocidas que cumplan con normas de calidad recomendadas.

TIPS

Si lo que querés es probar si el cemento que vas a utilizar te va a servir, hace la siguiente prueba; toma un poco de cemento y mezclalo con agua para hacer una masa plástica; como hacer unas bolitas con la mano y espera unas horas para verificar que se hayan endurecido y que sean estables al aire libre y también cuando son sumergidas en el agua, es una prueba bastante sencilla para juzgar si el cemento va a funcionar.

Controla que el cemento no sea alterado con más agua de la que necesita, porque esto empezaría a deteriorar su resistencia y durabilidad, y por último comprobá que no tenga más de 30 días de estar almacenado.

¿Tenés más tips que querás compartir? no dudes en hacerlo dejándonos tu comentario.

]]>
http://materialessanmiguel.com/blog/cemento-malo-cemento-bueno-como-saberlo/feed/ 0
4 Ideas sencillas para hacer tu propio farol patrio http://materialessanmiguel.com/blog/4-ideas-sencillas-para-hacer-tu-propio-farol-patrio/ http://materialessanmiguel.com/blog/4-ideas-sencillas-para-hacer-tu-propio-farol-patrio/#respond Wed, 07 Sep 2016 18:29:39 +0000 http://materialessanmiguel.com/blog/?p=52 Continuar leyendo "4 Ideas sencillas para hacer tu propio farol patrio"]]> Cuando llega esta época del año, es común ver mamás y papás corriendo para hacer los tradicionales faroles que llevarán sus hijos el 14 de setiembre a la noche de los faroles, no es secreto que a muchos no se nos dá muy bien esto de las manualidades, por lo que hemos venido al rescate!

Te dejamos una recopilación de algunas páginas donde encontrar ideas muy buenas y económicas para hacer de tu farol, un éxito.

Materiales San Miguel
Un lindo farol patrio puede hacerse con un sin fin de materiales económicos y al alcance de todos.
  1. Farol con papel encerado y chispas de crayones. La Nación (@nacion) September 13, 2014

pic.twitter.com/w7QGly3o4g

  1. Farol hecho con cucháras de plástico. Perfecto si lo pintás con colores azul y rojo también.

https://youtu.be/QTFE2fMyFOk

  1. Farol hecho de cartones de huevos

 https://youtu.be/hNh3uQarncY

  1. Farol para cuando no tenés tiempo de hacer un farol

https://youtu.be/6Oq7oHZAu4E

Si lo tuyo no es las manualidades ni la arquitectura, esta pequeñita guía estamos seguros que te salvará de cualquier predicamento de última hora. Lo importante es no dejar de celebrar un año más de independencia de nuestro querida Costa Rica.

]]>
http://materialessanmiguel.com/blog/4-ideas-sencillas-para-hacer-tu-propio-farol-patrio/feed/ 0
Luces Led vs Bombillo tradicional http://materialessanmiguel.com/blog/luces-led-vs-tradicionales/ http://materialessanmiguel.com/blog/luces-led-vs-tradicionales/#respond Thu, 25 Aug 2016 01:23:03 +0000 http://materialessanmiguel.com/blog/?p=41 Continuar leyendo "Luces Led vs Bombillo tradicional"]]>
 La iluminación LED, así como Nike vs Adidas o Samsung vs Apple, tiene en la luz tradicional a su más acérrimo rival, de ahí que es hora de conocer que tan ciertos son algunas afirmaciones que se dan alrededor de esta tecnología. Como ocurre en la mayoría de los casos, la respuesta a la pregunta “¿cuál es mejor?” no es única y más bien depende del uso que le vayamos a dar, las horas a utilizar o el lugar donde las pondremos.
Luz Led vos Tradicional (Materiales San Miguel)
Escoger un adecuado sistema de luz en casa es esencial

Revisemos algunos puntos a favor y en contra de nuestros combatientes de hoy:

Luminosidad

No hay duda de que una lámpara LED puede ofrecer la misma cantidad de luz que una lámpara fluorescente o una de vapor de sodio si se elige la lámpara adecuada a la luminaria en la que se instala,  y se hace correctamente, en este apartado debemos dar un empate técnico, ya que ambas tecnologías brindan una excelente luminosidad.

Precio

La tecnología LED requiere una inversión inicial mayor que otro tipo de lámparas, y en eso estamos de acuerdo todos quienes hemos visitado lugares especializados en luminarias, sin embargo ésta inversión se empieza a recuperar desde la primera factura, por lo que a muy corto plazo resultan mucho más baratas. Eso sí, resulta indispensable adquirir las lámparas a fabricantes, importadores o distribuidores oficiales y reconocidos, que nos den todas las garantías del producto que acabamos de adquirir, si pensás en la inversión inicial este round va para la luz tradicional, pero si nos vamos hasta el último asalto, las LED ganan por decisión unánime.

Instalación

Es un trabajo grande y costoso esto de instalar en tu casa cualquier tipo de luz, por lo que no debe tomarse a la ligera, muchas veces hay lugares en la casa que funcionan mucho mejor con luz tradicional, y lugares donde el LED no tiene cabida, por lo que si tu idea es llenarte de luz ella, pensalo nuevamente, puede que este asalto lo gane la luz tradicional.

Contaminación lumínica

Empezaremos por contarte que es contaminación lumínica, a esto nos referimos cuando el resplandor que se produce a causa de una emisión de luz proyectada sobre gases y partículas suspendidas en el aire es sumamente excesiva.  Sabiendo esto, es probable que la luz LED tenga algunas desventajas, ya que su tipo de luz se difunde más fácilmente por la atmósfera, aunque esto es evitable con una correcta instalación, sin embargo este asalto va para la luz tradicional.

Contaminación lumínica provocada por luz LED

Salud

Las lámparas LED no emiten radiación infrarroja ni ultravioleta y no contienen mercurio, por lo que tienen menos potencial para ser perjudiciales en todos los sentidos para la salud.

Se dice que la luz blanca que generan las lámparas LED inhibe la secreción de la hormona melatonina en el ser humano, que sólo se produce a oscuras, y que resulta indispensable para regular los biorritmos del cuerpo humano, sin embargo esto también se aplica a la luz tradicional, ya que cualquier tipo de luz que sea artificial puede perjudicar en mayor o menor medida tu organismo, lo que depende mucho del tiempo expuesto.

¿Cómo evitar estos problemas? Diseñando una instalación lumínica que se ajuste a nuestro “reloj biológico”. En este sentido las soluciones de iluminación LED son las más versátiles y las que se pueden adaptarse más fácilmente a las diferentes necesidades lumínicas según la hora del día y el trabajo que se realice. Punto para Led.

Resultado Final

La iluminación LED es una tecnología extremadamente  eficiente, sostenible y versátil, siempre y cuando su compra e instalación se realicen correctamente, para ello debemos acudir siempre a tiendas o lugares especializados, que nos asesoren y realicen un estudio previo de nuestras necesidades de iluminación.

También puede interesarte:

Porcelanato vrs Cerámica ¿cuál es mejor para mi?

]]>
http://materialessanmiguel.com/blog/luces-led-vs-tradicionales/feed/ 0
4 formás rápidas de destaquear la cañería de la pila. http://materialessanmiguel.com/blog/4-formas-rapidas-de-destaquear-la-caneria-de-la-pila/ http://materialessanmiguel.com/blog/4-formas-rapidas-de-destaquear-la-caneria-de-la-pila/#respond Tue, 16 Aug 2016 17:28:39 +0000 http://materialessanmiguel.com/blog/?p=38 Continuar leyendo "4 formás rápidas de destaquear la cañería de la pila."]]> Un fin de semana de mucha actividad social en casa puede dejar muuuuchos platos que lavar, y también desechos que pueden eventualmente obstruir las cañerías, pero aún si no se debe a la fiesta del sábado o a la cena del domingo, hay muchas razones que pueden provocar este inconveniente, por eso te traemos 4 soluciones rápidas y sencillas para acabar con la obstrucción de un drenaje o cañería.

Materiales San Miguel / Cuidado y Cañerías

  • Bicarbonato de sodio y vinagre: Esta es una receta muy popular, mezclá 1/3 de taza de bicarbonato de sodio con 1/3 de taza de vinagre en una taza de medir, vas a notar una efervescencia inmediata, por lo que no debés perder tiempo en echar el líquido en el desagüe, vas a poder eliminar la suciedad, el pelo y todo lo que se haya acumulado en la tubería, dejálo reposar por más de una hora y luego finaliza con agua caliente.
  • Agua hirviendo (en estado de ebullición): Echále agua hirviendo al desagüe en dos o tres etapas, para que el agua caliente trabaje unos segundos en cada ocasión.
  • Hidróxido de Sodio: Usa guantes de goma para esta solución.  Vertí 3/4 galón de agua fría en un cubo para el trapeador y agregá 3 tazas de Hidróxido de Sodio, revolvé bien con una cuchara de madera vieja, la mezcla comenzará a calentarse, luego vertílo en el desagüe y dejado reposar durante 20 o 30 minutos, luego enjuagá con agua hirviendo.
  • Sal y bicarbonato de sodio: Este método es muy similar al primero. Mezclar media taza de sal de mesa con 1/2 taza de bicarbonato de sodio y listo, dejado actuar de 10 a 20 minutos, y luego limpiá con agua hirviendo. La sal, el bicarbonato de sodio y agua hirviendo producirán una reacción química que debe disolver algunos de los bloqueos más repugnantes de cualquier cañería.

En esencia, con estos cuatro métodos se puede encontrar una fácil solución al bloqueo de los drenajes, pero si ninguna de ellas da resultado es el momento de llamar al especialista en el destape de cañerías y drenajes, que garantizará un buen trabajo y una tubería limpia y eficiente.

(referencia tomada del blog del constructor)

]]>
http://materialessanmiguel.com/blog/4-formas-rapidas-de-destaquear-la-caneria-de-la-pila/feed/ 0
Como salvar nuestros techos de los aguaceros..¡guía práctica! http://materialessanmiguel.com/blog/como-salvar-nuestros-techos-de-los-aguaceros-guia-practica/ http://materialessanmiguel.com/blog/como-salvar-nuestros-techos-de-los-aguaceros-guia-practica/#respond Fri, 05 Aug 2016 06:26:50 +0000 http://materialessanmiguel.com/blog/?p=32 Continuar leyendo "Como salvar nuestros techos de los aguaceros..¡guía práctica!"]]> Llueve con ganas, pero vos estás tranquil@ en casa viendo televisión y completamente relajad@, ¿que buena que es la vida bajo techo verdad? de repente sentís una gota de agua en la nariz y la única explicación posible esta inclinando tu cabeza hacia arriba…sí, acaba de nacer una gotera! Si sos de los que el invierno agarró desprevenidos, no te preocupés, aún tenés algunas horas al día para ir corrigiendo los problemas de tu techo y prepararlo bien para lo que viene, aprende de estos tips que te traemos hoy.

Si ves canoas taqueadas, filtraciones en las paredes, goteras o pintura desprendida, tu casa te está hablando, hace un análisis concienzudo del problema, para atacarlo cuanto antes. No pensés que solo la lluvia afecta tu casa, nada más alejado de la realidad, tanto el sol, como la ceniza y el granizo afectan la parte frontal y superior de tu hogar, aún sin notarlo.

Cuido y reparación de techos / Materiales San Miguel
Hasta las filtraciones más graves tienen fáciles soluciones / Materiales San Miguel

¿POR DÓNDE EMPIEZO?

Empezá por lo más sencillo, si lo que tenés es una filtración limpia la pared y preparala para el trabajo, eso significa eliminar la suciedad que bloquee la pasta y por consiguiente la pintura, si tus paredes son de madera, frótalas con lana de acero y séllalas luego, pero si son de metal, cepíllalas, si tratas con una pared porosa, un rodillo con bastante pelo servirá perfectamente.

TECHO SEGURO

Reforza los techos para tapar las odiadas goteras y revisa que, en los techos de tejas, estén todas bien encajadas, si hay algunas desencajadas, ni modo, hay que reemplazarlas sí o sí. Recordá revisar los drenajes, limpiar las canoas tapadas y los canaletes por donde baje el agua, y muy importante, sellar las partes de la casa por donde pudiera entrar líquido.

IMPERMEABILIZANTE ALIADO 

Los impermeabilizantes forman una barrera que no deja el paso del agua a nuestras superficie, logrando así aislar la humedad del medio ambiente, ¿ahora suena bien usarlo cierto?

OTRAS RECOMENDACIONES

Consigue ayuda de expertos, no dejes las cosas al azar, trata de no pintar ni reparar bajo los rayos directos del sol, las altas temperaturas perjudican la adherencia, y además, no queremos que pases quemado y con insolación el resto del día, por otro lado el frío excesivo retrasa el secado y el viento constante ensucia la superficie, así que escogé el momento preciso para realizar las labores, tomando en cuenta estos factores.

No lo dudes más, vos y tu techo aún pueden salir victoriosos de los aguaceros.

Consultános o cotiza algunos de los materiales que podrías necesitar haciendo click aquí o dejanos tu comentario.

 

]]>
http://materialessanmiguel.com/blog/como-salvar-nuestros-techos-de-los-aguaceros-guia-practica/feed/ 0
Porcelanato vrs Cerámica ¿cuál es mejor para mi? http://materialessanmiguel.com/blog/porcelanato-vrs-ceramica-cual-es-mejor-para-mi/ http://materialessanmiguel.com/blog/porcelanato-vrs-ceramica-cual-es-mejor-para-mi/#comments Fri, 29 Jul 2016 06:23:30 +0000 http://materialessanmiguel.com/blog/?p=28 Continuar leyendo "Porcelanato vrs Cerámica ¿cuál es mejor para mi?"]]> Seguramente sos de los que piensa ¿pero no son lo mismo? o de los que al ver los precios te das cuenta que el porcelanato es más caro y entonces asumes que es mejor, pues bien, ni lo uno ni lo otro, hoy lanzamos al ring a dos de los materiales más populares para pisos, baños, cocinas etc etc etc y queremos que dés por ganador al que más conviene para tu proyecto.

Pisos-porcelanato

¿Tu proyecto es en exteriores?

Un patio o una terraza lucen geniales en ambos materiales, pero cuidado!, la cerámica absorbe mucho más el agua, por lo que va a retener líquido y podría darte grandes dolores de cabeza, si lo tuyo es en exterior, el primer round lo gana el porcelanato!.

Proyecto «hacelo vos mismo»

La cerámica es muy maleable, lo que la hace perfecta para trabajarla personalmente, el porcelanato en cambio requiere un disco de diamante y manos expertas para cortarlo, segundo round que los jueces dan a la cerámica!.

Pero…. ¿cuánto duran?

Aunque ambos están hechos de arcilla, la arcilla que se usa para el porcelanato es más refinada y purificada, se prepara a temperatura más alta y a mayor presión, lo que resulta en un material más duro y por consiguiente, de mayor durabilidad. Por tanto si deseas que te dure mil años, debés darle el tercer asalto al Porcelanato.

y…¿el precio?

No te vamos a dar muchas largas con esto, te basta con visitarnos y para darte cuenta que el Porcelanato siempre es más costoso que la Cerámica, hasta ahora parece un empate, el siguiente punto lo define todo.

El diseño

Mientras el porcelanato viene en diferentes tamaños, de pequeños a súper grandes, la cerámica aparece en tamaños más pequeños, aunque con decenas de colores.

Vaya! parece que llegamos al final del artículo con un empate técnico entre ambos materiales, en realidad ambos son muy buenos, y dependerá mucho de tu proyecto, presupuesto y gusto personal, para determinar cual escoger, visitános para conocer más sobre ambos!

Dejános tu comentario y decínos cuál es tu favorito!

 

 

]]>
http://materialessanmiguel.com/blog/porcelanato-vrs-ceramica-cual-es-mejor-para-mi/feed/ 1
¡6 proyectos fáciles para aprovechar tu fin de semana! http://materialessanmiguel.com/blog/6proyectosparatufindesemana/ http://materialessanmiguel.com/blog/6proyectosparatufindesemana/#respond Fri, 22 Jul 2016 22:40:34 +0000 http://materialessanmiguel.com/blog/?p=19 Continuar leyendo "¡6 proyectos fáciles para aprovechar tu fin de semana!"]]> Un fin de semana es tiempo para descansar y estar con la familia, y sí, también es tiempo para realizar esos proyectos pendientes o proyectos nuevos que querés para tu casa.

Nos encontramos con unos trabajos para tu hogar fáciles y rápidos de hacer, así le darás vida a tu espacio. Muchos se pueden hacer con lo que tengas en tu casa, pero si necesitas alguno que otro material, podes darte la vuelta por nuestra página web y cotizarlo. Felices proyectos!

Si tienes una terraza, que tal una fogata hecha con ladrillos y pintura!

proyectos-para-jardin-1

¿Y si pintas algunas piezas y haces un juego para los niños?

proyectos-para-jardin-11

También podes delimitar tu patio con unas atractivas luces de neón.

proyectos-para-jardin-4

O darte un delicioso masaje de pies de forma casera.

proyectos-para-jardin-8

¡Aprovecha y dale color a tu terraza externa!

proyectos-para-jardin-3

¡Y si tienes piscina esto te va a encantar!

proyectos-para-jardin-9

¿Tienes más ideas?, compártelas con nosotros.

]]>
http://materialessanmiguel.com/blog/6proyectosparatufindesemana/feed/ 0
7 Permisos indispensables para construir en Costa Rica http://materialessanmiguel.com/blog/7-permisos-indispensables-para-construir-en-costa-rica/ http://materialessanmiguel.com/blog/7-permisos-indispensables-para-construir-en-costa-rica/#comments Thu, 14 Jul 2016 17:07:03 +0000 http://materialessanmiguel.com/blog/?p=13 Continuar leyendo "7 Permisos indispensables para construir en Costa Rica"]]> Dicen que es un calvario, o que lo mejor es no pensar en construir por la gran cantidad de permisos que hay que sacar, pero en realidad hoy queremos mostrarte como con orden, el proceso de obtención de todos los permisos para tu construcción no tiene porque ser el apocalípsis constructivo.

construccion_en_condominio pic_cfia2

Te presentamos los principales permisos que debes considerar para iniciar tu obra:

Viabilidad Ambiental del proyecto

El primer paso en la cadena de trámites es determinar si el proyecto requiere o no de una Viabilidad Ambiental emitida por la Secretaría Técnica Nacional Ambiental, aunque esto no es necesario en edificaciones destinadas a vivienda que no superen los 500mts cuadrados de construcción o bien que los movimientos de tierra no superen los 200mts cúbicos.

Solicitud de Certificado de Uso de Suelo

Si tu construcción no requiere la viabilidad ambiental entonces puedes pasar al primer requisito, solicitar ante la Municipalidad respectiva un Certificado de Uso de Suelo de la propiedad en la que se va a realizar la construcción, lo cual te permite conocer si la zona donde construirás es afín al tipo de construcción que quieres realizar, por ejemplo, si se trata de una residencia, el certificado debe especificar que la zona tiene aptitud residencial.

Carta de Disponibilidad de Agua Potable y Alcantarillado Sanitario

Se trata de una carta de disponibilidad del servicio público de Agua potable y alcantarillado sanitario en la propiedad donde construirás.

Contratación de los profesionales para planos y diseños

Contrata profesionales de confianza que se encarguen de elaborar los planos de diseño, de construcción y eléctricos, tomando todas las previsiones del caso y requerimientos que tenga la construcción para evitar cualquier contratiempo a futuro. Estos profesionales serán los responsables de presentar los planos ante el Colegio Federado de Ingenieros y Arquitectos de Costa Rica (CFIA) para su aprobación y debido visado.

Presentación de Planos ante el CFIA

Los responsables de estos planos deberán ser un Ingeniero Civil y un Ingeniero Eléctrico, respectivamente, los planos son presentados ante el CFIA mediante un sistema digital llamado Administrador de Proyectos de Construcción (APC), una vez presentados, el CFIA se encarga de coordinar el proceso de validación y visado que se debe seguir ante las diferentes instituciones públicas que tienen ingerencia en el proceso de aprobación las cuales generalmente son las siguientes:

  1. Municipalidad del cantón.
  2. MOPT: en caso de propiedades ubicadas frente a Ruta Nacional.
  3. INVU: Propiedad cuyos linderos limitan con ríos o quebradas.
  4. CNFL/ICE: Propiedades afectadas por servidumbres eléctricas.
  5. INCOFER: Propiedades afectadas por servidumbres de línea de ferrocarril.
  6. AyA: Propiedades afectadas por servidumbre de aguas

Aprobación de los planos por parte del CFIA

Luego de que los planos hayan sido recibidos y validados por las diferentes instituciones públicas, el CFIA tasará el valor de la obra y cobrará un canon del 0.0265% del valor de la obra tasada, tendrás un plazo de 5 días hábiles para cancelar dicho monto, caso contrario, el CFIA rechazará el proyecto y lo eliminará del sistema APC.

Solicitud de Permiso de Construcción ante la Municipalidad

Como último paso para poder dar la orden de inicio a la construcción, se necesita contar con el Permiso de Construcción emitido por la Municipalidad respectiva, los requisitos varían de una o otra,  pero toma en cuenta  los siguientes requisitos generales adicionales que la Municipalidad te solicitará:

  1. Póliza de Riesgos del Trabajo de Instituto Nacional de Seguros para los trabajadores que se encargarán de construir la obra.
  2. Comprobante de Pago del Impuesto del 1% sobre el valor total de la Construcción.
  3. En caso de ser patrono, certificación de la Caja Costarricense del Seguro Social de estar al día con sus obligaciones patronales.

Una vez que la Municipalidad constate el cumplimiento de esos requisitos, podrá aprobar el Permiso de Construcción y se podrá dar la orden de inicio a las obras.

Ahí lo tienes, una guía básica de los permisos que debés tramitar para iniciar tu construcción!

También puede interesarte:

5 cosas que debes dominar antes de construir tu casa soñada

Lo que debes saber antes de comprar un lote

 

]]>
http://materialessanmiguel.com/blog/7-permisos-indispensables-para-construir-en-costa-rica/feed/ 1
13 cosas que debes saber antes de comprar un lote http://materialessanmiguel.com/blog/13-cosas-que-debes-saber-antes-de-comprar-un-lote/ http://materialessanmiguel.com/blog/13-cosas-que-debes-saber-antes-de-comprar-un-lote/#comments Tue, 05 Jul 2016 01:53:57 +0000 http://materialessanmiguel.com/blog/?p=9 Continuar leyendo "13 cosas que debes saber antes de comprar un lote"]]>  

Estás planeando comprar un lote, ya has hablado con amigos y conocidos sobre tu sueño de tener un terreno propio, y realizar ahí tu construcción, hay un lugar en donde te encantaría comprar, y querés comprar ya! Paciencia, te dejamos 13 cosas que debes saber antes de tomar la última decisión…

¿Para que querés el terreno?

Una vez pensado para qué es el terreno, hay que saber si el proyecto que tenés en mente se puede realizar en él: esto quiere decir que lo ideal es ajustar la compra de un terreno a la idea preexistente. Es importante, por entonces, tener 2 o 3 opciones de terreno a comprar, pues resulta común que la opción deseada en ocasiones no pueda concretarse.

Asesoría Profesional: 

Aunque te guste hacer las cosas por tu cuenta, analiza la posibilidad de contar con un asesor inmobiliario, para garantizar que tu dinero se invierte sabiamente. En la compra de un terreno existen una serie de aspectos técnicos, legales y financieros, que muchas veces hacen necesaria  la asistencia de profesionales especializados.

Características de la zona:

Examina cuidadosamente el área en la cual estás interesad@ para asegurarse de que las casas que se encuentran próximas tengan un valor comparable con la que deseas construir.

Valor comercial de la zona

Verificá el costo del terreno contra otros similares en la misma zona, trata de determinar el valor del metro cuadrado y si es congruente con el precio y los metros que te ofrecen vender.

Comportamiento de la zona

Antes de empezar a negociar, visitá con tiempo nuevamente el terreno, al menos en tres horarios distintos: a la mañana, a la tarde y a la noche y observa detenidamente el movimiento, el nivel de ruidos y la actividad de la zona.

Vecinos

Sumamente importante es que te pongas en contacto, si lo hubiese, con el delegado, representante legal o presidente de la unión vecinal a fin de evaluar –si los hubiese- no sólo los particulares códigos de edificación o convivencia del sitio, sino también el nivel de compromiso y participación que los habitantes de la zona tienen respecto de iniciativas encaminadas a mejorar la salud, higiene, convivencia, tranquilidad, bienestar y seguridad de la zona. evitarla. Lo ideal, en este sentido, es hallar una zona en que la ecuación seguridad/libertad sea balanceada.

Vías de acceso y transporte:

Las vías de acceso son importantes a fin de conocer los tiempos necesarios para llegar a nuestro lugar de trabajo. Verifica el estado de los accesos y evalúa la disponibilidad de los diversos transportes públicos.

Tolerancia climática de la zona: Visitá de ser posible la zona en las condiciones más desfavorables, ya sea tanto por la noche como después de una gran lluvia.

Infraestructura y servicios disponibles:

El agua, las alcantarillas, la electricidad, el teléfono, TV , INTERNET, alumbrado público, calles, recolección de residuos, el pavimento, son fundamentales al momento de tomar la decisión de la compra de un terreno y de no poseerlos el costo de ejecución de los mismos, si está dentro de los planes de las empresas prestadoras del servicio y los gastos en que incurrirías por llevarlos hasta la propiedad. Revisa también la cercanía de escuelas, centros de salud, de recreación y la seguridad que haya en el sitio.

Orientación del terreno:

Revisá la Orientación respecto al Sol. Los terrenos orientados al Sur son los menos recomendables, estos suelen ser los más húmedos, sobre todo si allí se debe construir una propiedad de dos plantas, los de orientación al Norte suelen ser más invasivos, las ubicaciones con vistas al Este resultan los más aptos. Si el terreno es en clima caliente deberá buscar que la orientación de la mayoría de las habitaciones queden ubicadas hacia el norte y que la dirección de los vientos dominantes sirva para refrescar su casa; si el terreno es en clima frío deberá buscar una orientación desde el este hasta el sur, buscando que la dirección de los vientos dominantes no enfríen su casa.

Ubicación del terreno:

Si el lote se encuentra dentro de un fraccionamiento, debemos decidir si se ubicará al inicio, la mitad o final de este, en esquina o terreno intermedio, ya que de acuerdo a esto será el precio del terreno. Casi siempre la mejor ubicación de tu terreno será en esquina, ya que con ello el arquitecto contara con dos frentes para proyectar las ventilaciones y orientaciones de sus habitaciones.

 

Información legal:

Antes de comprar el terreno, consulta con un profesional matriculado. Es importante asegurarse que el inmueble esté libre de gravámenes: impuestos, hipotecas, embargos y otras deudas o afectaciones y que la persona que vende el terreno es efectivamente la dueña o dueño o esté autorizado para hacerlo, debés certificar el vendedor tenga escritura que lo acredite como propietario del terreno y que esté inscrita en el Registro Público de la Propiedad, o al menos en trámite de inscripción.

Conocer reglamentos y códigos de edificación:

Hay que analizar los reglamentos de la urbanización de la zona con detenimiento. En general los municipios, comunas, etc., poseen normativas específicas en cuanto a los que se denominan usos de la tierra, densidades de edificación, alturas de las edificaciones, retiros, etc., que pueden condicionar seriamente el proyecto de obra, o bien la calidad de vida que tengamos en un futuro. Es conveniente que previa la decisión de la adquisición conozcamos esta normativa.

También podés leer

5 cosas que debes dominar antes de construir tu casa soñada

¿Cuáles permisos necesitó para iniciar la construcción de mi casa?

]]>
http://materialessanmiguel.com/blog/13-cosas-que-debes-saber-antes-de-comprar-un-lote/feed/ 1
5 cosas que debes dominar antes de construir tu casa soñada http://materialessanmiguel.com/blog/5cosasquedebesdominarantesdeconstruirtucasa/ http://materialessanmiguel.com/blog/5cosasquedebesdominarantesdeconstruirtucasa/#comments Thu, 23 Jun 2016 03:33:52 +0000 http://materialessanmiguel.com/blog/?p=1 Continuar leyendo "5 cosas que debes dominar antes de construir tu casa soñada"]]> Ya está todo listo, contrataste un buen equipo de trabajo, arquitecto, ingeniero, maestro de obra y peones, todos preparados para iniciar la construcción de tu nueva casa, vos te reúnes con ellos para ver detalles y de pronto parece que te están hablando en otro idioma, te hablan de la losa y vos te imaginás que están hablando del baño, o te dan detalles de la cimentación y no tenés idea de que están hablando. Por eso te traemos 4 cosas muy importantes que debés conocer si eres completamente nuevo en esto de la construcción y querés saber de qué hablan los demás; ¡La estructura de tu casa!

La Losa: También llamado piso, soporta pesos de muebles, personas y hasta su propio peso, y se encarga de transmitir ese peso hacia las vigas, también transmite los efectos de un sismo colaborando en la distribución de la energía y minimizando los efectos que pudieran provocarse, la losa también es la encargada de mantener unidas las vigas, las columnas y los muros.

Las Vigas: Un elemento horizontal que transmite las cargas hacia el muro

Columna: Se encarga de enviar las cargas hacia los pisos inferiores y la cimentación

Muros: Estos transmiten las cargas de la losa y las vigas también hacia los pisos inferiores y cimentación.

Cimentación: La base de cualquier estructura, se encarga de enviar las cargas hacia el suelo o terreno de construcción

Mirá este dibujo y conocé donde va cada cosa.

Screen Shot 2016-06-16 at 7.48.31 AM

Pues ahí lo tenés, a partir de ahora sabrás lo necesario para entrar en la conversación inicial de la construcción de tu casa con el ingeniero, no dudes en preguntarle si tenés dudas, ¡feliz construcción te desea Materiales San Miguel!

* fuente. Manual del maestro constructor

Si querés saber más no dudes en contactarnos.

También puedes leer:

¿Cuáles permisos necesito para iniciar la construcción de mi casa?

Lo que debes saber antes de comprar un lote

]]>
http://materialessanmiguel.com/blog/5cosasquedebesdominarantesdeconstruirtucasa/feed/ 2