smoke.js 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265
  1. /**
  2. * Smoke is the most complete jQuery Plugin and designed for use with Bootstrap 3. *
  3. * @package Smoke
  4. * @version 2.0
  5. * @link https://github.com/alfredobarron/smoke The Smoke GitHub project
  6. * @author Alfredo Barron <alfredobarronc@gmail.com>
  7. * @copyright 2015 Alfredo Barron
  8. * @license https://www.gnu.org/licenses/lgpl.html GNU Lesser General Public License
  9. * @note This program is free software: you can redistribute it and/or modify
  10. * it under the terms of the GNU Lesser General Public License as published by
  11. * the Free Software Foundation, either version 3 of the License, or
  12. * (at your option) any later version.
  13. * This program is distributed in the hope that it will be useful,
  14. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. * GNU Lesser General Public License for more details.
  17. */
  18. (function($) {
  19. /*
  20. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  21. | Validate all inputs
  22. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  23. */
  24. $.fn.smkValidate = function(options) {
  25. var settings = $.extend({
  26. lang: 'en'
  27. }, $.fn.smkValidate.Languaje, options);
  28. var languaje = {
  29. en: {
  30. // Mensaje de error para los input vacíos
  31. textEmpty : 'Required field',
  32. // Mensaje de error para el input email
  33. textEmail : 'Enter a valid email',
  34. // Mensaje de error para el input alphanumeric
  35. textAlphanumeric : 'Only numbers and/or letters allowed',
  36. // Mensaje de error para el input number
  37. textNumber : 'Only numbers are allowed',
  38. // Mensaje de error para el input number range
  39. textNumberRange : 'The numerical range must be greater than <b> {@} </b> and less than <b> {@} </b>',
  40. // Mensaje de error para el input decimal
  41. textDecimal : 'Only decimal numbers are allowed',
  42. // Mensaje de error para el input currency
  43. textCurrency : 'Please enter a valid monetary amount',
  44. // Mensaje de error para el input select
  45. textSelect : 'It is necessary that you select an option',
  46. // Mensaje de error para el input checkbox y radio
  47. textCheckbox : 'It is necessary that you select an option',
  48. // Mensaje de error para longitud de caracteres
  49. textLength : 'The number of characters is equal to <b> {@} </b>',
  50. // Mensaje de error para rango de caracteres
  51. textRange : 'The number of characters must be greater than <b> {@} </b> and less than <b> {@} </b>',
  52. // Mensaje de error para strongPass Default
  53. textSPassDefault : 'Minimum 4 characters',
  54. // Mensaje de error para strongPass Weak
  55. textSPassWeak : 'Minimum 6 characters',
  56. // Mensaje de error para strongPass Madium
  57. textSPassMedium : 'Minimum 6 characters and a number',
  58. // Mensaje de error para strongPass Strong
  59. textSPassStrong : 'Minimum 6 characters a number and a capital'
  60. }
  61. };
  62. if(settings.lang != 'en'){
  63. languaje = $.fn.smkValidate.Languaje;
  64. }
  65. // Se inicializan las variables globales
  66. var self = '';
  67. var father = '';
  68. var result = false;
  69. // Se recorren todos los inputs del formulario
  70. $(':input', this).each(function(k,v) {
  71. if($(v).attr('type') != 'button'){
  72. // Se obtiene el objeto input
  73. self = $(v);
  74. // Se obtiene el elemento padre
  75. father = $(v).parents('.form-group');
  76. // Se obtiene el name
  77. var name = $(v).attr('name');
  78. // Se obtiene el value
  79. var value = $(v).val();
  80. // Se obtiene el type
  81. var type = $(v).attr('type');
  82. // Se obtiene el type smk
  83. var smkType = $(v).attr('smk-type');
  84. // Se obtiene el tag
  85. var tag = v.tagName.toLowerCase();
  86. // Se obtiene el requerido
  87. var required = $(v).attr('required');
  88. // Se obtiene el mensaje de error
  89. //var smkText = $(v).attr('smk-text');
  90. // Se obtiene el nivel de la fuerza de la contraseña 1, 2, 3
  91. var smkStrongPass = $(v).attr('smk-strongPass');
  92. // Se obtiene el valor de longitud menor aceptada
  93. var minlength = $(v).attr('minlength');
  94. // Se obtiene el valor de longitud mayor aceptada
  95. var maxlength = $(v).attr('maxlength');
  96. // Se obtiene el valor de longitud menor aceptada
  97. var smkMin = $(v).attr('smk-min');
  98. // Se obtiene el valor de longitud mayor aceptada
  99. var smkMax = $(v).attr('smk-max');
  100. // Se remueve el mensaje de error
  101. $.smkRemoveError(self);
  102. // Se validan los INPUTS que son requeridos
  103. if (required === 'required' && (type === 'text' || tag === 'textarea' || type === 'password' || type === 'email')) {
  104. // Se valida que el value del input no este vació
  105. if (value === '') {
  106. // Se agrega el mensaje de error
  107. result = $.smkAddError(self, languaje[settings.lang].textEmpty);
  108. return false;
  109. } else {
  110. result = true;
  111. }
  112. }
  113. // Se valida el input EMAIL
  114. if (required === 'required' && type === 'email') {
  115. //Se crea la expresión regular para el input mail
  116. var emailRegex = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
  117. // Se valida que el value del input cumpla con la expresión regular
  118. if (!emailRegex.test(value)) {
  119. // Se agrega el mensaje de error
  120. result = $.smkAddError(self, languaje[settings.lang].textEmail);
  121. return false;
  122. } else {
  123. result = true;
  124. }
  125. }
  126. // Se valida el input PASSWORD
  127. if (required === 'required' && type === 'password') {
  128. var strongPassRegex = '';
  129. var textPass = '';
  130. // Se obtiene el nivel de fuerza de la contraseña
  131. switch (smkStrongPass) {
  132. case ('weak'):// Debe contener al menos 4 caracteres
  133. strongPassRegex = /^(?=.*[a-z0-9])\w{6,}$/;
  134. textPass = languaje[settings.lang].textSPassWeak;
  135. break;
  136. case ('medium'):// Debe contener al menos 6 caracteres y un numero
  137. strongPassRegex = /^(?=.*\d)(?=.*[a-z])\w{6,}$/;
  138. textPass = languaje[settings.lang].textSPassMedium;
  139. break;
  140. case ('strong'):// Debe contener al menos 6 caracteres, un numero y una mayúscula
  141. strongPassRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}$/;
  142. textPass = languaje[settings.lang].textSPassStrong;
  143. break;
  144. default:// Debe contener al menos 4 caracteres
  145. strongPassRegex = /^(?=.*[a-z0-9])\w{4,}$/;
  146. textPass = languaje[settings.lang].textSPassDefault;
  147. }
  148. // Se valida que el value del input cumpla con la expresión regular
  149. if (!strongPassRegex.test(value)) {
  150. // Se agrega el mensaje de error
  151. result = $.smkAddError(self, textPass);
  152. return false;
  153. } else {
  154. result = true;
  155. }
  156. }
  157. // Se valida el input SELECT
  158. if (required === 'required' && tag === 'select') {
  159. // Se valida que el value del select no este vació
  160. if (value === '') {
  161. // Se agrega el mensaje de error
  162. result = $.smkAddError(self, languaje[settings.lang].textSelect);
  163. return false;
  164. } else {
  165. result = true;
  166. }
  167. }
  168. // Se validan los input RADIO y/o CHECKBOX
  169. if (required === 'required' && (type === 'radio' || type === 'checkbox')) {
  170. var check = $("input[name=" + name + "]:checked").val();
  171. //var check = self.is(':checked');
  172. // Se valida que el value del input este ckecked
  173. if (check === undefined) {
  174. //if (check === false) {
  175. // Se agrega el mensaje de error
  176. result = $.smkAddError(self, languaje[settings.lang].textCheckbox);
  177. return false;
  178. } else {
  179. result = true;
  180. }
  181. }
  182. // Se valida el input ALPHANUMERIC
  183. if (smkType === 'alphanumeric') {
  184. // Se crea la expresión regular para el input alphanumeric
  185. var alphanumericRegex = /^[a-z0-9]+$/i;
  186. // Se valida que el value del input cumpla con la expresión regular
  187. if (!alphanumericRegex.test(value)) {
  188. // Se agrega el mensaje de error
  189. result = $.smkAddError(self, languaje[settings.lang].textAlphanumeric);
  190. return false;
  191. } else {
  192. result = true;
  193. }
  194. }
  195. // Se valida el input NUMBER
  196. if (smkType === 'number') {
  197. // Se crea la expresión regular para el input number
  198. var numberRegex = /^\d+$/;
  199. // Se valida que el value del input cumpla con la expresión regular
  200. if (!numberRegex.test(value)) {
  201. // Se agrega el mensaje de error
  202. result = $.smkAddError(self, languaje[settings.lang].textNumber);
  203. return false;
  204. } else {
  205. result = true;
  206. }
  207. }
  208. // Se valida el input DECIMAL
  209. if (smkType === 'decimal') {
  210. // Se crea la expresión regular para el input decimal
  211. var decimalRegex = /^\d+(?:\.\d{1,4})?$/;
  212. // Se valida que el value del input cumpla con la expresión regular
  213. if (!decimalRegex.test(value)) {
  214. // Se agrega el mensaje de error
  215. result = $.smkAddError(self, languaje[settings.lang].textDecimal);
  216. return false;
  217. } else {
  218. result = true;
  219. }
  220. }
  221. // Se valida el input CURRENCY
  222. if (smkType === 'currency') {
  223. // Se crea la expresión regular para el input currency con $ al inicio
  224. //var currencyRegex = /^\$?(?:\d+|\d{1,3}(?:,\d{3})*)(?:\.\d{1,2}){0,1}$/;
  225. // Se crea la expresión regular para el input currency
  226. var currencyRegex = /^(?:\d+|\d{1,3}(?:,\d{3})*)(?:\.\d{1,4}){0,1}$/;
  227. // Se valida que el value del input cumpla con la expresión regular
  228. if (!currencyRegex.test(value)) {
  229. // Se agrega el mensaje de error
  230. result = $.smkAddError(self, languaje[settings.lang].textCurrency);
  231. return false;
  232. } else {
  233. result = true;
  234. }
  235. }
  236. // Se valida el input longitud o rango de caracteres MINLENGTH o MAXLENGTH
  237. if ((typeof(minlength) !== 'undefined' || typeof(maxlength) !== 'undefined')) {
  238. // Si contiene ambos y son iguales
  239. if (minlength === maxlength) {
  240. if ((value.length != minlength) && (value.length != maxlength)) {
  241. // Se personaliza el mensaje de error
  242. var textLength = $.smokeCustomizeText(languaje[settings.lang].textLength, maxlength);
  243. // Se agrega el mensaje de error
  244. result = $.smkAddError(self, textLength);
  245. return false;
  246. } else {
  247. result = true;
  248. }
  249. // Si contiene ambos y son diferentes
  250. } else if (minlength !== maxlength) {
  251. if ((value.length < minlength) || (value.length > maxlength)) {
  252. var arrayTextRange = [];
  253. arrayTextRange[0] = parseInt(minlength-1);
  254. arrayTextRange[1] = parseInt(maxlength)+1;
  255. // Se personaliza el mensaje de error
  256. var textRange = $.smokeCustomizeText(languaje[settings.lang].textRange, arrayTextRange);
  257. // Se agrega el mensaje de error
  258. result = $.smkAddError(self, textRange);
  259. return false;
  260. } else {
  261. result = true;
  262. }
  263. }
  264. }
  265. // Se valida el input numero rango
  266. if ((typeof(smkMin) !== 'undefined' || typeof(smkMax) !== 'undefined')) {
  267. if((value < smkMin) || (value > smkMax)){
  268. var arrayTextNumberRange = [];
  269. arrayTextNumberRange[0] = parseInt(smkMin-1);
  270. arrayTextNumberRange[1] = parseInt(smkMax)+1;
  271. var textNumberRange = $.smokeCustomizeText(languaje[settings.lang].textNumberRange, arrayTextNumberRange);
  272. // Se agrega el mensaje de error
  273. result = $.smkAddError(self, textNumberRange);
  274. return false;
  275. } else {
  276. result = true;
  277. }
  278. }
  279. /*
  280. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  281. | FALTAN INPUTS POR VALIDAR
  282. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  283. */
  284. }
  285. });
  286. // Si se teclea algo en el input se remueven los mensajes de error
  287. $(self).keyup(function() {
  288. // Se valida que el value del input no este vació
  289. if (self.val() !== '') {
  290. // Se remueve el mensaje de error
  291. $.smkRemoveError(self);
  292. }
  293. });
  294. // Si cambia el input select se remueven los mensajes de error
  295. $(self).change(function() {
  296. // Se valida que el value del input no este vació
  297. if (self.val() !== '') {
  298. // Se remueve el mensaje de error
  299. $.smkRemoveError(self);
  300. }
  301. });
  302. //Se retorna el resultado
  303. return result;
  304. };
  305. /*
  306. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  307. | Usage
  308. | if($('#form').smkValidate({lang:'es'})){}
  309. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  310. */
  311. /*
  312. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  313. | Validate Equal passwords
  314. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  315. */
  316. $.smkEqualPass = function(password, repassword, lang) {
  317. // Se crea el mensaje de error para el input repassword
  318. var languaje = {
  319. en: {
  320. textEqualPass: 'Passwords do not match'
  321. }
  322. };
  323. // Si esta lang es undefined
  324. if(lang === undefined){
  325. lang = 'en';
  326. }
  327. // Si lang es diferente de en
  328. if(lang != 'en'){
  329. languaje = $.smkEqualPass.Languaje;
  330. }
  331. if($(password).val() !== undefined){
  332. password = $(password).val();
  333. }else{
  334. password = password;
  335. }
  336. // Si los password son diferentes se retorna false
  337. if (password !== $(repassword).val()) {
  338. // Se agrega el mensaje de error
  339. return $.smkAddError($(repassword), languaje[lang].textEqualPass);
  340. // Si los passwords son iguales se retorna true
  341. } else {
  342. return true;
  343. }
  344. // Si se teclea algo en el input se remueven los mensajes de error
  345. $(repassword).keyup(function() {
  346. if ($(this).val() !== '') {
  347. // Se remueve el mensaje de error
  348. $.smkRemoveError( $(repassword) );
  349. }
  350. });
  351. };
  352. /*
  353. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  354. | Usage
  355. | if($.smkEqualPass('#password', '#repassword', 'es')){}
  356. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  357. */
  358. /*
  359. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  360. | Clear form
  361. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  362. */
  363. $.fn.smkClear = function(options) {
  364. // Variables default
  365. var settings = $.extend({
  366. noClear: ''
  367. }, options);
  368. // Se eliminan los espacios en blanco de la variable settings.noClear
  369. var noClearSinEspacios = settings.noClear.replace(/\s/g, '');
  370. // Se quiebra la variable noClearSinEspacios para obtener sus valores y se agregan en el array noClear
  371. var noClear = noClearSinEspacios.split(',');
  372. // Se recorren todos los inputs del form
  373. return $(':input', this).each(function() {
  374. //Se obtiene el type y el tag del input
  375. var type = this.type;
  376. var tag = this.tagName.toLowerCase();
  377. //Si el tag trae el valor 'input' se sustituye por el valor type
  378. if (tag == 'input') {
  379. tag = type;
  380. }
  381. //Si el type o el tag del input no existen en el array noClean se limpia
  382. if ($.inArray(type, noClear) < 0 && $.inArray(tag, noClear) < 0) {
  383. //Se compara el type y se limpia
  384. switch (type) {
  385. case 'text':
  386. case 'password':
  387. case 'email':
  388. case 'number':
  389. case 'hidden':
  390. this.value = '';
  391. break;
  392. case 'checkbox':
  393. case 'radio':
  394. this.checked = false;
  395. break;
  396. }
  397. //Se compara el tag y se limpia
  398. switch (tag) {
  399. case 'textarea':
  400. this.value = '';
  401. break;
  402. case 'select':
  403. this.selectedIndex = -1;
  404. if($(this).hasClass('select2')){
  405. $(this).select2('val', '');
  406. }
  407. break;
  408. }
  409. /*
  410. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  411. | FALTAN INPUTS POR LIMPIAR
  412. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  413. */ }
  414. });
  415. //$(this)[0].reset();
  416. };
  417. /*
  418. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  419. | Usage
  420. | $('#form').smkClear({noClear: 'email,radio,...'});
  421. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  422. */
  423. /*
  424. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  425. | Se crea el método que agrega el mensaje de error
  426. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  427. */
  428. $.smkAddError = function (obj, text)
  429. {
  430. // Se obtiene el elemento form-group
  431. var formGroup = $(obj).parents('.form-group');
  432. // Se obtiene el elemento padre
  433. var parent = $(obj).parent();
  434. // Se obtiene el type
  435. var type = $(obj).attr('type');
  436. // Se obtiene el tag
  437. var tag = $(obj).prop('tagName').toLowerCase();
  438. // Se obtiene el mensaje de error
  439. var smkText = $(obj).attr('smk-text');
  440. // Si el input no contiene mensaje de error se asigna uno
  441. if (smkText === '' || smkText === undefined) {
  442. smkText = text;
  443. }
  444. // Si type es indefinido se asigna el nombre del tag
  445. if(type === undefined){
  446. type = tag;
  447. }
  448. // Se crea el template del mensaje de error
  449. var icon = '<span class="glyphicon glyphicon-remove-sign form-control-feedback smk-error-icon"></span>';
  450. var msj = '<span class="smk-error-text">' + smkText + '</span>';
  451. if(type == 'select'){
  452. // Se agrega la clase de error
  453. formGroup.addClass('has-feedback has-error smk-' + type);
  454. // Se agrega el icono y el mensaje de error
  455. parent.append(icon + msj);
  456. }else if(type == 'checkbox' || type == 'radio'){
  457. // Se agrega la clase de error
  458. formGroup.addClass('has-feedback has-error smk-' + type);
  459. // Se agrega el icono y el mensaje de error
  460. parent.parent().parent().append(msj);
  461. }else{
  462. // Se agrega la clase de error
  463. formGroup.addClass('has-feedback has-error');
  464. // Se agrega el icono y el mensaje de error
  465. parent.append(icon + msj);
  466. }
  467. // Se posiciona el focus en el input
  468. obj.focus();
  469. // Se retorna false
  470. return false;
  471. };
  472. /*
  473. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  474. | Se crea el método que remueve el mensaje de error
  475. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  476. */
  477. $.smkRemoveError = function(obj)
  478. {
  479. // Se obtiene el elemento padre
  480. var parent = $(obj).parents('.form-group');
  481. // Se remueven el icono y el mensaje de error
  482. parent.find('.smk-error-text, .smk-error-icon').remove();
  483. // Se remueve la clase de error
  484. parent.removeClass('has-error has-feedback');
  485. // Se retorna false
  486. return false;
  487. };
  488. /*
  489. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  490. | Se crea el método que personaliza los mensaje de error
  491. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  492. */
  493. $.smokeCustomizeText = function(text, arrayText){
  494. var customText = '';
  495. if(typeof(arrayText) == 'string'){
  496. customText = text.replace('{@}', arrayText);
  497. }else{
  498. var split = text.split('{@}');
  499. $.each(arrayText, function(index, val) {
  500. customText += split[index] + val;
  501. });
  502. customText += split[split.length - 1];
  503. }
  504. return customText;
  505. };
  506. /*
  507. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  508. | Alerts
  509. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  510. */
  511. var smkAlertInizialize = 0;
  512. // Se crea la funcion smkAlert
  513. $.smkAlert = function(options) {
  514. // Variables default
  515. var settings = $.extend({
  516. text: 'Hola Mundo',
  517. type: 'warning',
  518. icon: 'glyphicon-exclamation-sign',
  519. time: 5,
  520. permanent: false
  521. }, options);
  522. smkAlertInizialize++;
  523. // Se compara el tipo de alerta y se asigna la clase
  524. switch (settings.type) {
  525. case 'warning':
  526. settings.type = 'alert-warning';
  527. settings.icon = 'glyphicon-exclamation-sign';
  528. break;
  529. case 'success':
  530. settings.type = 'alert-success';
  531. settings.icon = 'glyphicon-ok-sign';
  532. break;
  533. case 'danger':
  534. settings.type = 'alert-danger';
  535. settings.icon = 'glyphicon-remove-sign';
  536. break;
  537. case 'info':
  538. settings.type = 'alert-info';
  539. settings.icon = 'glyphicon-info-sign';
  540. break;
  541. }
  542. // Se agrega el contenedor de las alertas en el body
  543. if(smkAlertInizialize == 1){
  544. $('body').append('<div class="smk-alert-content"></div>');
  545. }
  546. // Se crea la alerta en el contenedor
  547. var obj = $('<div class="alert alert-dismissable ' + settings.type + ' smk-alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span class="glyphicon ' + settings.icon + '"></span><p>' + settings.text + '</p></div>');
  548. $('.smk-alert-content').prepend(obj);
  549. // Se aplica la animación de entrada a la alerta
  550. obj.animate({
  551. opacity: '1',
  552. marginTop:'20px',
  553. }, 300);
  554. // Si el mensaje no es permanente
  555. if(settings.permanent === false){
  556. var timer = 0;
  557. // Si se posiciona el cursor en la alerta se restablece el TimeOut
  558. $(obj).mouseenter(function(){
  559. clearTimeout(timer);
  560. // Si sale el cursor de la alerta se ejecuta el método smkAlertHide
  561. }).mouseleave(function(){
  562. smkAlertHide();
  563. });
  564. smkAlertHide();
  565. }
  566. // Se crea el método que elimina la alerta del contenedor
  567. function smkAlertHide(){
  568. timer = setTimeout(function() {
  569. obj.animate({
  570. opacity: '0',
  571. marginLeft: '100px',
  572. marginRight: '-100px'
  573. }, 300, function() {
  574. obj.remove();
  575. });
  576. }, (settings.time * 1000) );
  577. }
  578. };
  579. /*
  580. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  581. | Usage
  582. | $.smkAlert({ text: 'Hello world', type: 'success', time: 5 });
  583. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  584. */
  585. /*
  586. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  587. | Confirmation
  588. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  589. */
  590. $.smkConfirm = function(options, callback) {
  591. // Variables default
  592. var settings = $.extend({
  593. text: '¿Estas seguro?',
  594. accept: 'Aceptar',
  595. cancel: 'Cancelar'
  596. }, options);
  597. // Se agrega el panel de confirmacion en el body
  598. $('body').append('<div class="smk-confirm-back"><div class="panel panel-default smk-confirm"><div class="panel-body"><br>' + settings.text + '<br><br></div><div class="panel-footer text-right"><a class="btn btn-default btn-sm smk-cancel" href="#" >' + settings.cancel + '</a> <a class="btn btn-primary btn-sm smk-accept" href="#">' + settings.accept + '</a></div></div></div>');
  599. // Se aplica la animacion de entrada del panel de confirmacion
  600. $('.smk-confirm').animate({
  601. top: "-5px",
  602. opacity: '1'
  603. }, 400);
  604. // Si se presiona el boton .smk-cancel se retorna false
  605. $('.smk-cancel').click(function(e) {
  606. e.preventDefault();
  607. smkConfirmHide();
  608. //return false;
  609. callback(false);
  610. });
  611. // Si se presiona el boton .smk-accept se retorna true
  612. $('.smk-accept').click(function(e) {
  613. e.preventDefault();
  614. smkConfirmHide();
  615. //return true;
  616. callback(true);
  617. });
  618. // Se remueve el panel de confirmacion del body
  619. function smkConfirmHide(){
  620. $('.smk-confirm-back').fadeOut(200, function() {
  621. $('.smk-confirm-back').remove();
  622. });
  623. $('.smk-confirm').animate({
  624. top: "-500px",
  625. opacity: '0'
  626. }, 400, function() {
  627. $('.smk-confirm').remove();
  628. });
  629. }
  630. };
  631. /*
  632. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  633. | Usage
  634. | $.smkConfirm({text: 'are you sure?', accept: 'Accept', cancel: 'Cancel'}, function(e){if(e){
  635. | // Code here
  636. | }});
  637. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  638. */
  639. /*
  640. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  641. | Float
  642. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  643. */
  644. $.smkFloat = function(number) {
  645. if(typeof number === 'string'){
  646. number = number.replace(',', '');
  647. }
  648. return parseFloat(number);
  649. };
  650. /*
  651. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  652. | Usage
  653. | var float = $.smkFloat('1,0000.00');
  654. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  655. */
  656. /*
  657. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  658. | Currency
  659. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  660. */
  661. $.smkCurrency = function(number, prefix) {
  662. var num = number.replace(',', '');
  663. if(num !== ''&& !isNaN(num)){
  664. num = Math.round(parseFloat(num) * Math.pow(10, 2)) / Math.pow(10, 2);
  665. prefix = prefix || '';
  666. num += '';
  667. var splitStr = num.split('.');
  668. var splitLeft = splitStr[0];
  669. var splitRight = splitStr.length > 1 ? '.' + splitStr[1] : '.00';
  670. splitRight = splitRight + '00';
  671. splitRight = splitRight.substr(0, 3);
  672. var regx = /(\d+)(\d{3})/;
  673. while (regx.test(splitLeft)) {
  674. splitLeft = splitLeft.replace(regx, '$1' + ',' + '$2');
  675. }
  676. return prefix + splitLeft + splitRight;
  677. }else{
  678. return 0;
  679. }
  680. };
  681. /*
  682. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  683. | Usage
  684. | var currency = $.smkCurrency(10000, '$');
  685. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  686. */
  687. /*
  688. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  689. | GetURL
  690. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  691. */
  692. $.smkGetURL = function(folder) {
  693. //Se obtiene el protocolo http o https
  694. var protocol = $(location).attr('protocol');
  695. //Se obtiene el nombre del servidor o dominio
  696. var hostname = $(location).attr('hostname');
  697. //Se obtiene la o las subcarpetas
  698. var pathname = $(location).attr('pathname');
  699. //Se explota el pathname para obtener todos sus elementos separados por /
  700. pathname = pathname.split('/');
  701. //Se obtiene el ultimo elemento
  702. var last = pathname.pop();
  703. //Si el ultimo elemento no esta vacio
  704. if (last !== '') {
  705. //Se explota el ultimo elemento
  706. file = last.split('.');
  707. //Si el ultimo elemento no es un archivo
  708. if (file.length < 2) {
  709. //Se agrega el ultimo elemento
  710. pathname.push(last);
  711. }
  712. }
  713. //Se dejan unicamente el numero de folders que se obtienen de la variable folders
  714. pathname = pathname.slice(0, folder + 1);
  715. //Se unen los elementos de el pathname separados por /
  716. pathname = pathname.join('/');
  717. //Se unen los elementos que forman la url
  718. var url = protocol + '//' + hostname + pathname;
  719. //Se retorna la url
  720. return url;
  721. };
  722. /*
  723. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  724. | Usage
  725. | var url = $.smkGetURL(1);
  726. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  727. */
  728. /*
  729. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  730. | DatePicker
  731. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  732. */
  733. $.smkDatePicker = function(date) {
  734. if(date !== ''){
  735. // Se obtiene el dia
  736. var day = (date.getDate() < 10 ? '0' : '') + date.getDate();
  737. // Se obtiene el mes
  738. var month = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
  739. // Se obtiene el año
  740. var year = date.getFullYear();
  741. // Se construye la fecha con el formato para BD yyyy-mm-dd
  742. result = year + '-' + month + '-' + day;
  743. }else{
  744. result = '';
  745. }
  746. // Se retorna la fecha formateada
  747. return result;
  748. };
  749. /*
  750. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  751. | Usage
  752. | var date = $.smkDatePicker( $('.datepicker').datepicker('getDate') );
  753. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  754. */
  755. /*
  756. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  757. | Date
  758. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  759. */
  760. $.smkDate = function(options) {
  761. var today = $.smkDatePicker( new Date() );
  762. var settings = $.extend({
  763. date: today,
  764. format: 'yyyy-mm-dd',
  765. lang: 'en',
  766. }, $.smkDate.Languaje, options);
  767. var languaje = {
  768. en: {
  769. shortMonthNames : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  770. monthNames : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
  771. }
  772. };
  773. //Se obtienen los separadores
  774. var validDate = /\d+|[a-zA-z]/g;
  775. var separator = settings.date.replace(validDate, '\0').split('\0');
  776. // Se obtiene las partes de la fecha
  777. var splitDate = settings.date.match(validDate);
  778. if(settings.lang == 'es'){
  779. languaje = $.smkDate.Languaje;
  780. // Se formatea la fecha (yyyy,mm,dd) para poder instanciar el método new Date()
  781. if(splitDate[0].length == 4){
  782. // Formato yyyy-mm-dd => yyyy,mm,dd
  783. settings.date = new Date(splitDate[0],(splitDate[1]-1),splitDate[2]);
  784. }else{
  785. // Formato dd-mm-yyyy => yyyy,mm,dd
  786. settings.date = new Date(splitDate[2],(splitDate[1]-1),splitDate[0]);
  787. }
  788. }else{
  789. // Se formatea la fecha (yyyy,mm,dd) para poder instanciar el método new Date()
  790. if(splitDate[0].length == 4){
  791. // Formato yyyy-dd-mm => yyyy,mm,dd
  792. settings.date = new Date(splitDate[0],(splitDate[2]-1),splitDate[1]);
  793. }else{
  794. // Formato mm-dd-yyyy => yyyy,mm,dd
  795. settings.date = new Date(splitDate[2],(splitDate[0]-1),splitDate[1]);
  796. }
  797. }
  798. var result = '';
  799. if(settings.date != 'Invalid Date'){
  800. // Se crea el array que contiene el día, mes y año
  801. var arrayDate = {
  802. // Se obtiene el dia
  803. 'd' : settings.date.getDate(),
  804. 'dd' : (settings.date.getDate() < 10 ? '0' : '') + settings.date.getDate(),
  805. // Se obtiene el mes
  806. 'm' : settings.date.getMonth() + 1, //January is 0!
  807. 'mm' : ((settings.date.getMonth() + 1) < 10 ? '0' : '') + (settings.date.getMonth() + 1),
  808. 'M' : languaje[settings.lang].shortMonthNames[settings.date.getMonth()],
  809. 'MM' : languaje[settings.lang].monthNames[settings.date.getMonth()],
  810. // Se obtiene el año
  811. 'yyyy' : settings.date.getFullYear(),
  812. // Se obtiene el año 2 digitos
  813. 'yy' : settings.date.getFullYear().toString().substring(2),
  814. // Se obtiene la hora
  815. 'hh' : settings.date.getHours(),
  816. // Se obtienen los minutos
  817. 'mi' : settings.date.getMinutes(),
  818. // Se obtienen los segundos
  819. 'ss' : settings.date.getSeconds()
  820. };
  821. // Se obtienen los separadores
  822. var validFormat = /dd?|DD?|mm?|MM?|yy(?:yy)?/g;
  823. var separators = settings.format.replace(validFormat, '\0').split('\0');
  824. // Se obtienen las partes del formato
  825. var splitFormat = settings.format.match(validFormat);
  826. // Se construye la fecha con el formato y los separadores indicados
  827. $.each(splitFormat, function(key, val) {
  828. result += separators[key] + arrayDate[val];
  829. });
  830. }else{
  831. result = '';
  832. console.log('Invalid Date');
  833. }
  834. // Se retorna la fecha formateada
  835. return result;
  836. };
  837. /*
  838. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  839. | Usage
  840. | var date = $.smkDate({date:new Date(), format:'yyyy-mm-dd', lang: 'es' });
  841. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  842. */
  843. /*
  844. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  845. | DateDiff
  846. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  847. */
  848. $.smkDateDiff = function(options) {
  849. //Variables default
  850. var settings = $.extend({
  851. fromDate: new Date(),
  852. toDate: new Date(),
  853. interval: 'days'
  854. }, options);
  855. var second = 1000,
  856. minute = second * 60,
  857. hour = minute * 60,
  858. day = hour * 24,
  859. week = day * 7;
  860. var fromDate = new Date(settings.fromDate);
  861. var toDate = new Date(settings.toDate);
  862. var timediff = toDate - fromDate;
  863. if (isNaN(timediff)) return NaN;
  864. switch (settings.interval) {
  865. case "years":
  866. return toDate.getFullYear() - fromDate.getFullYear();
  867. case "months":
  868. return ((toDate.getFullYear() * 12 + toDate.getMonth()) - (fromDate.getFullYear() * 12 + fromDate.getMonth()));
  869. case "weeks":
  870. return Math.floor(timediff / week);
  871. case "days":
  872. return Math.floor(timediff / day);
  873. case "hours":
  874. return Math.floor(timediff / hour);
  875. case "minutes":
  876. return Math.floor(timediff / minute);
  877. case "seconds":
  878. return Math.floor(timediff / second);
  879. default:
  880. return undefined;
  881. }
  882. };
  883. /*
  884. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  885. | Usage
  886. | var dif = $.smkDateDiff({fromDate:'01/01/2013 12:00:00', toDate:'12/31/2014 12:30:00', interval:'days'});
  887. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  888. */
  889. /*
  890. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  891. | Scrolling
  892. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  893. */
  894. $.smkScrolling = function(options) {
  895. //Variables default
  896. var settings = $.extend({
  897. speed: 1000
  898. }, options);
  899. $('a[href*=#]:not([href=#])').click(function() {
  900. if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
  901. var target = $(this.hash);
  902. target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  903. if (target.length) {
  904. $('html,body').animate({
  905. scrollTop: target.offset().top
  906. }, settings.speed);
  907. return false;
  908. }
  909. }
  910. });
  911. };
  912. /*
  913. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  914. | Usage
  915. | $.smkScrolling({speed:1000});
  916. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  917. */
  918. /*
  919. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  920. | ProgressBar
  921. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  922. */
  923. $.smkProgressBar = function(options) {
  924. //Variables default
  925. var settings = $.extend({
  926. element: 'body',
  927. status: 'start'
  928. }, options);
  929. // Se crea el template de la progressbar
  930. var progressbar = '<div class="smk-progressbar">';
  931. progressbar +='<div class="progress">';
  932. progressbar +='<div class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">';
  933. progressbar +='<span class="sr-only">0% Complete</span>';
  934. progressbar +='</div></div></div>';
  935. // Se carga la progressbar al dom
  936. $(settings.element).prepend($(progressbar).fadeIn('fast'));
  937. if(settings.element == 'body'){
  938. $('.smk-progressbar').css('position', 'fixed');
  939. }else{
  940. $(settings.element).css('position', 'relative');
  941. $('.smk-progressbar').css('position', 'absolute');
  942. }
  943. if(settings.status == 'start'){
  944. // Se comienza a simular el progreso de la carga de la pagina
  945. $(settings.element +' .smk-progressbar .progress .progress-bar').width((50 + Math.random() * 30) + '%');
  946. }else if(settings.status == 'end'){
  947. // Se completa el progreso de carga
  948. $(settings.element +' .smk-progressbar .progress .progress-bar').width('110%').delay(200, function(){
  949. // Se remueve la progressbar del dom
  950. $(settings.element +' .smk-progressbar').fadeOut('slow', function() { $(this).remove(); });
  951. });
  952. }
  953. };
  954. /*
  955. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  956. | Usage
  957. | $.smkProgressBar({element:'body', status:'start'});
  958. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  959. */
  960. /*
  961. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  962. | Fullscreen
  963. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  964. */
  965. $.fn.smkFullscreen = function() {
  966. // Se crea el boton fullscreen
  967. var btnFullscreen = '<a class="btn smk-fullscreen" href="#" data-toggle="tooltip" data-placement="bottom" title="Fullscreen"><span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span></a>';
  968. // Se agrega el boton fullscreen en el elemento
  969. $(this).append(btnFullscreen);
  970. // Evento del boton fullscreen
  971. $('.smk-fullscreen').click(function(event) {
  972. event.preventDefault();
  973. toggleFullScreen();
  974. });
  975. // Se crea el metodo que dispara el fullscreen
  976. function toggleFullScreen() {
  977. if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
  978. if (document.documentElement.requestFullscreen) {
  979. document.documentElement.requestFullscreen();
  980. } else if (document.documentElement.msRequestFullscreen) {
  981. document.documentElement.msRequestFullscreen();
  982. } else if (document.documentElement.mozRequestFullScreen) {
  983. document.documentElement.mozRequestFullScreen();
  984. } else if (document.documentElement.webkitRequestFullscreen) {
  985. document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  986. }
  987. } else {
  988. if (document.exitFullscreen) {
  989. document.exitFullscreen();
  990. } else if (document.msExitFullscreen) {
  991. document.msExitFullscreen();
  992. } else if (document.mozCancelFullScreen) {
  993. document.mozCancelFullScreen();
  994. } else if (document.webkitExitFullscreen) {
  995. document.webkitExitFullscreen();
  996. }
  997. }
  998. }
  999. // Se crea el metodo que cambia el icono del boton
  1000. var changeFullscreen = function(){
  1001. $('.smk-fullscreen').children('.glyphicon').toggleClass('glyphicon-fullscreen').toggleClass('glyphicon-resize-small');
  1002. };
  1003. // Se escuchan los cambios del fullscreen
  1004. document.addEventListener("fullscreenchange", changeFullscreen, false);
  1005. document.addEventListener("msfullscreenchange", changeFullscreen, false);
  1006. document.addEventListener("mozfullscreenchange", changeFullscreen, false);
  1007. document.addEventListener("webkitfullscreenchange", changeFullscreen, false);
  1008. };
  1009. /*
  1010. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1011. | Usage
  1012. | $('div').smkFullscreen();
  1013. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1014. */
  1015. /*
  1016. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1017. | Panel
  1018. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1019. */
  1020. $.fn.smkPanel = function(options) {
  1021. // Variables default
  1022. var settings = $.extend({
  1023. hide: ''
  1024. }, options);
  1025. var thisPanel = $(this);
  1026. // Se eliminan los espacios en blanco de la variable settings.hide
  1027. var hideSinEspacios = settings.hide.replace(/\s/g, '');
  1028. // Se quiebra la variable hideSinEspacios para obtener sus valores y se agregan en el array arrayHide
  1029. var arrayHide = hideSinEspacios.split(',');
  1030. // Se obtiene el .panel-title de cada panel
  1031. var panelHeading = $(this).children('.panel-heading').children('.panel-title');
  1032. var smkBtnGroupPanel = '';
  1033. if(panelHeading.length > 0){
  1034. smkBtnGroupPanel = 'smk-btn-group-panel-title';
  1035. }else{
  1036. smkBtnGroupPanel = 'smk-btn-group-panel';
  1037. }
  1038. // Se crea el btn-group
  1039. var btnGroup = '<div class="btn-group btn-group-sm pull-right ' + smkBtnGroupPanel + '" role="group">';
  1040. // Se valida que no exista en el array el boton min para poder agregarlo dentro de btnGroup
  1041. if($.inArray('min', arrayHide) == -1){
  1042. btnGroup += '<a class="btn smk-min" href="#"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a>';
  1043. }
  1044. // Se valida que no exista en el array el boton remove para poder agregarlo dentro de btnGroup
  1045. if($.inArray('remove', arrayHide) == -1){
  1046. btnGroup += '<a class="btn smk-remove" href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>';
  1047. }
  1048. // Se valida que no exista en el array el boton full para poder agregarlo dentro de btnGroup
  1049. if($.inArray('full', arrayHide) == -1){
  1050. btnGroup += '<a class="btn smk-full" href="#"><span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span></a>';
  1051. }
  1052. btnGroup += '</div>';
  1053. // Se inserta dentro de .panel-heading
  1054. $(this).children('.panel-heading').append( btnGroup );
  1055. // Evento del boton Min
  1056. thisPanel.find('.smk-min').click(function(event) {
  1057. event.preventDefault();
  1058. var body = $(this).parents('.panel-heading').siblings('.panel-body');
  1059. var footer = $(this).parents('.panel-heading').siblings('.panel-footer');
  1060. var icon = $(this).children('.glyphicon');
  1061. $(footer).slideToggle('fast');
  1062. $(body).slideToggle('fast', function(){
  1063. icon.toggleClass('glyphicon-minus').toggleClass('glyphicon-plus');
  1064. });
  1065. });
  1066. // Evento del boton Remove
  1067. thisPanel.find('.smk-remove').click(function(event) {
  1068. event.preventDefault();
  1069. var panel = $(this).parents('.panel');
  1070. panel.fadeOut(400, function(){
  1071. //this.remove();
  1072. });
  1073. });
  1074. // Evento del boton Full
  1075. thisPanel.find('.smk-full').click(function(event) {
  1076. event.preventDefault();
  1077. var panel = $(this).parents('.panel');
  1078. var body = $(this).parents('.panel-heading').siblings('.panel-body');
  1079. var icon = $(this).children('.glyphicon');
  1080. var iconPlus = $(this).siblings('.btn').children('.glyphicon-plus');
  1081. if(panel.hasClass('panel-full')){
  1082. panel.removeClass('panel-full');
  1083. $(this).siblings('.btn').show();
  1084. if(iconPlus.length == 1){
  1085. body.hide();
  1086. }
  1087. $('body').css({'overflow':'auto'});
  1088. // $('.container-fluid').css({'display':'block'});
  1089. // $('#content').css({'position':'fixed'});
  1090. }else{
  1091. panel.addClass('panel-full');
  1092. $(this).siblings('.btn').hide();
  1093. if(iconPlus.length == 1){
  1094. body.show();
  1095. }
  1096. $('body').css({'overflow':'hidden'});
  1097. // $('.container-fluid').css({'display':'initial'});
  1098. // $('#content').css({'position':'initial'});
  1099. }
  1100. icon.toggleClass('glyphicon-resize-full').toggleClass('glyphicon-resize-small');
  1101. });
  1102. };
  1103. /*
  1104. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1105. | Usage
  1106. | $('.panel').smkPanel({hide: 'min,remove,full', class: 'name-class'});
  1107. |- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  1108. */
  1109. })(jQuery);