Separacion de js a archivos por pagina

bootstrap/web/config.php

@@ -23,6 +23,11 @@ return [
       'assets',
       'styles'
     ])),
+    'scripts' => DI\string(implode('/', [
+      '{urls.base}',
+      'assets',
+      'scripts'
+    ])),
     'images' => DI\string(implode('/', [
       '{urls.base}',
       'assets',

common/Controller/Web/Admin/Eventos.php

@@ -114,7 +114,7 @@ class Eventos {
     $e = $eventos[$evento];
     $status = $loader->delete($e, $post['media']);
     $output = [
-      'informacion' => $file,
+      'informacion' => $post,
       'evento' => $e,
       'estado' => !$status
     ];

public/assets/scripts/admin/eventos.js

@@ -0,0 +1,157 @@
+class Elem {
+  constructor(tag, attrs, close = true) {
+    this.tag = '<' + tag
+    if (close) {
+      this.tag += '></' + tag + '>'
+    } else {
+      this.tag += '/>'
+    }
+    this.attrs = attrs
+    this.children = []
+  }
+  addChild(child) {
+    if (typeof child != 'object' || typeof child.tag == 'undefined') {
+      return this
+    }
+    this.children.push(child)
+    return this
+  }
+  html(text) {
+    this.text = text
+    return this
+  }
+  build() {
+    let obj = $(this.tag)
+    $.each(this.attrs, (key, el) => {
+      obj.attr(key, el)
+    })
+    $.each(this.children, (i, el) => {
+      obj.append(el.build())
+    })
+    if (typeof this.text !== 'undefined') {
+      obj.html(this.text)
+    }
+    return obj
+  }
+}
+var imagenes = {
+  imagenes: [],
+  url: '',
+  evento: '',
+  setup: () => {
+    $('#agregar_imagen').css('cursor', 'pointer').click(() => {
+      imagenes.add()
+    })
+    $('.trash.icon').css('cursor', 'pointer').click(function() {
+      let i = $(this).attr('data-media')
+      imagenes.deleteImage(i)
+    })
+  },
+  buildForm: () => {
+    let form = new Elem('form', {class: 'ui form', id: 'add_image'}).addChild(
+      new Elem('div', {class: 'ui grid'}).addChild(
+        new Elem('div', {class: 'row'}).addChild(
+          new Elem('div', {class: 'sixteen wide column'}).addChild(
+            new Elem('div', {class: 'ui fluid input'}).addChild(
+              new Elem('input', {type: 'file', name: 'imagen[]', multiple: 'multiple'}, false)
+            )
+          )
+        )
+      ).addChild(
+        new Elem('div', {class: 'row'}).addChild(
+          new Elem('div', {class: 'two wide column'}).addChild(
+            new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
+          )
+        ).addChild(
+          new Elem('div', {class: 'fourteen wide column'}).addChild(
+            new Elem('div', {id: 'resultado', class: 'ui fluid basic segment'})
+          )
+        )
+      )
+    )
+    return form.build()
+  },
+  add: () => {
+    var imgs = $('#imagenes')
+    var div = imgs.next('.modal')
+    if (div.length > 0) {
+      div.remove()
+    }
+    div = $('<div></div>').attr('class', 'ui modal').append(
+      $('<i></i>').attr('class', 'inside close icon')
+    )
+    if (imagenes.imagenes.length >= 12) {
+      div.append(
+        $('<div></div>').attr('class', 'header').html('Media')
+      ).append(
+        $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de media.')
+      )
+      imgs.after(div)
+      div.modal('show')
+      return
+    }
+
+    div.append(
+      $('<div></div>').attr('class', 'header').html('Media')
+    ).append(
+      $('<div></div>').attr('class', 'content').append(imagenes.buildForm())
+    )
+    imgs.after(div)
+    div.modal('show')
+    div.find('form .button').click((e) => {
+      div.find('form').submit()
+    })
+    div.find('form').submit((e) => {
+      e.preventDefault()
+      imagenes.addImage()
+      return false
+    })
+  },
+  addImage: () => {
+    let form = $('#add_image')
+    $('#resultado').html('')
+    $('#resultado').append(
+      $('<div></div>').attr('class', 'ui active loader')
+    )
+    let data = new FormData(form[0])
+    let url = imagenes.url + '/evento/' + imagenes.evento + '/add'
+    let fallo = () => {
+      $('#resultado').html('')
+      $('#resultado').append(
+        $('<div></div>').attr('class', 'ui negative message')
+          .append($('<i></i>').attr('class', 'inline close icon'))
+          .append('<p>No se pudo agregar.</p>')
+      )
+      $('#resultado .message .close').on('click', function() {
+        $(this).closest('.message')
+            .transition('fade');
+      });
+    }
+    $.ajax({
+      url: url,
+      data: data,
+      processData: false,
+      contentType: false,
+      type: 'POST',
+      success: (output) => {
+        if (output.estado) {
+          window.location.reload()
+          return
+        }
+        fallo()
+      },
+      error: () => {
+        fallo()
+      }
+    })
+  },
+  deleteImage: (i) => {
+    let media = imagenes.imagenes[i]
+    let url = imagenes.url + '/evento/' + imagenes.evento + '/image/delete'
+    $.post(url, {media: media}, (output) => {
+      if (output.estado) {
+        window.location.reload()
+      }
+    })
+  }
+}

public/assets/scripts/home.js

@@ -0,0 +1,115 @@
+let clientes = {
+  clientes: [],
+  current: 0,
+  rows: 2,
+  cols: 6,
+  decreaseClientes: () => {
+    $('#img_clientes').find('.row').find('.column:last-child').remove()
+    clientes.current -= clientes.rows
+    if (clientes.current < - clientes.cols * clientes.rows) {
+      clientes.current = clientes.clientes.length - (clientes.cols - 1) * clientes.rows
+    }
+    n = clientes.current
+    if (n < 0) {
+      n = clientes.clientes.length + n
+    }
+    $('#img_clientes').find('.row:first-child').prepend(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n])
+    )
+    $('#img_clientes').find('.row:last-child').prepend(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n + 1])
+    )
+  },
+  increaseClientes: () => {
+    $('#img_clientes').find('.row').find('.column:first-child').remove()
+    clientes.current += 2
+    if (clientes.current > clientes.clientes.length - clientes.cols * clientes.rows) {
+      clientes.current = - (clientes.cols - 1) * clientes.rows
+    }
+    $('#img_clientes').find('.row:first-child').append(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + (clientes.cols - 1) * clientes.rows])
+    )
+    $('#img_clientes').find('.row:last-child').append(
+      $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + clientes.cols * clientes.rows - 1])
+    )
+  },
+  setup: () => {
+    $('.ci .icon').css('cursor', 'pointer').click(function() {
+      if ($(this).attr('class').indexOf('left') != -1) {
+        clientes.decreaseClientes()
+        return
+      }
+      clientes.increaseClientes()
+    })
+  }
+}
+let eventos = {
+  eventos: [],
+  current_tab: 'none',
+  base_url: '',
+  changeEventos: (filter) => {
+    let grid = $('#eventos_cards')
+    grid.html('')
+    $.each(eventos.eventos, function(i, el) {
+      if (filter != 'none' && el.servicio != filter) {
+        return
+      }
+      console.debug(el.image)
+      grid.append(
+        $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
+          $('<div></div>').attr('class', 'ui basic segment').append(
+            $('<a></a>').attr('href', eventos.base_url + '/evento/' + i).append(
+              $('<div></div>').attr('class', 'ui image').append(el.image)
+            ).append(
+              $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
+                $('<br />')
+              ).append(el.empresa)
+            )
+          )
+        )
+      )
+    })
+  },
+  changeTab: (filter) => {
+    $('.servicio.active').removeClass('active')
+    $(".servicio[data-filter='" + filter + "']").addClass('active')
+    eventos.current_tab = filter
+  },
+  setup: () => {
+    $('.servicio').click(function(e) {
+      e.preventDefault()
+      let filter = $(this).attr('data-filter')
+      if (filter == eventos.current_tab) {
+        return
+      }
+      eventos.changeTab(filter)
+      eventos.changeEventos(filter)
+    })
+  }
+}
+let testimonios = {
+  testimonios: [],
+  current_testimonio: 0,
+  cambiar: (id) => {
+    if (id == testimonios.current_testimonio) {
+      return
+    }
+    $('#testimonio').html('').append(
+      $('<p></p>').html(testimonios.testimonios[id].contenido)
+    ).append(
+      $('<div></div>').attr('class', 'ui header').html(testimonios.testimonios[id].emisor)
+    )
+    $('#marcador').find(".icon[data-id='" + testimonios.current_testimonio + "']").addClass('outline')
+    $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
+    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
+    $('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
+    testimonios.current_testimonio = id
+  },
+  setup: () => {
+    $('#marcador').find('.icon').click(function() {
+      let id = $(this).attr('data-id')
+      testimonios.cambiar(id)
+    })
+    $('#marcador').find('.icon.outline').css('cursor', 'pointer')
+  }
+}

resources/views/admin/eventos/add.blade.php

@@ -68,10 +68,6 @@
   </div>
 @endsection
 
-@push('scripts')
-  <script type="text/javascript">
-    $(document).ready(() => {
+@push('readyjs')
   $('#servicio').dropdown()
-    })
-  </script>
 @endpush

resources/views/admin/eventos/show.blade.php

@@ -97,171 +97,19 @@
 @endsection
 
 @push('scripts')
-  <script type="text/javascript">
-    class Elem {
-      constructor(tag, attrs, close = true) {
-        this.tag = '<' + tag
-        if (close) {
-          this.tag += '></' + tag + '>'
-        } else {
-          this.tag += '/>'
-        }
-        this.attrs = attrs
-        this.children = []
-      }
-      addChild(child) {
-        if (typeof child != 'object' || typeof child.tag == 'undefined') {
-          return this
-        }
-        this.children.push(child)
-        return this
-      }
-      html(text) {
-        this.text = text
-        return this
-      }
-      build() {
-        let obj = $(this.tag)
-        $.each(this.attrs, (key, el) => {
-          obj.attr(key, el)
-        })
-        $.each(this.children, (i, el) => {
-          obj.append(el.build())
-        })
-        if (typeof this.text !== 'undefined') {
-          obj.html(this.text)
-        }
-        return obj
-      }
-    }
-    var imagenes = {
-      imagenes: [
+  <script type="text/javascript" src="{{$urls->scripts}}/admin/eventos.js"></script>
+@endpush
+
+@push('readyjs')
+  imagenes.imagenes = [
     @if ($imagenes)
       @foreach (array_values($imagenes) as $imagen)
         '{{$imagen->media->n}}',
       @endforeach
     @endif
-      ],
-      setup: () => {
-        $('#agregar_imagen').css('cursor', 'pointer').click(() => {
-          imagenes.add()
-        })
-        $('.trash.icon').css('cursor', 'pointer').click(function() {
-          let i = $(this).attr('data-media')
-          imagenes.deleteImage(i)
-        })
-      },
-      buildForm: () => {
-        let form = new Elem('form', {class: 'ui form', id: 'add_image'}).addChild(
-          new Elem('div', {class: 'ui grid'}).addChild(
-            new Elem('div', {class: 'row'}).addChild(
-              new Elem('div', {class: 'sixteen wide column'}).addChild(
-                new Elem('div', {class: 'ui fluid input'}).addChild(
-                  new Elem('input', {type: 'file', name: 'imagen[]', multiple: 'multiple'}, false)
-                )
-              )
-            )
-          ).addChild(
-            new Elem('div', {class: 'row'}).addChild(
-              new Elem('div', {class: 'two wide column'}).addChild(
-                new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
-              )
-            ).addChild(
-              new Elem('div', {class: 'fourteen wide column'}).addChild(
-                new Elem('div', {id: 'resultado', class: 'ui fluid basic segment'})
-              )
-            )
-          )
-        )
-        return form.build()
-      },
-      add: () => {
-        var imgs = $('#imagenes')
-        var div = imgs.next('.modal')
-        if (div.length > 0) {
-          div.remove()
-        }
-        div = $('<div></div>').attr('class', 'ui modal').append(
-          $('<i></i>').attr('class', 'inside close icon')
-        )
-        if (imagenes.imagenes.length >= 12) {
-          div.append(
-            $('<div></div>').attr('class', 'header').html('Media')
-          ).append(
-            $('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de media.')
-          )
-          imgs.after(div)
-          div.modal('show')
-          return
-        }
-
-        div.append(
-          $('<div></div>').attr('class', 'header').html('Media')
-        ).append(
-          $('<div></div>').attr('class', 'content').append(imagenes.buildForm())
-        )
-        imgs.after(div)
-        div.modal('show')
-        div.find('form .button').click((e) => {
-          div.find('form').submit()
-        })
-        div.find('form').submit((e) => {
-          e.preventDefault()
-          imagenes.addImage()
-          return false
-        })
-      },
-      addImage: () => {
-        let form = $('#add_image')
-        $('#resultado').html('')
-        $('#resultado').append(
-          $('<div></div>').attr('class', 'ui active loader')
-        )
-        let data = new FormData(form[0])
-        let url = '{{$urls->admin}}/evento/{{$evento->id}}/add'
-        let fallo = () => {
-          $('#resultado').html('')
-          $('#resultado').append(
-            $('<div></div>').attr('class', 'ui negative message')
-              .append($('<i></i>').attr('class', 'inline close icon'))
-              .append('<p>No se pudo agregar.</p>')
-          )
-          $('#resultado .message .close').on('click', function() {
-            $(this).closest('.message')
-                .transition('fade');
-          });
-        }
-        $.ajax({
-          url: url,
-          data: data,
-          processData: false,
-          contentType: false,
-          type: 'POST',
-          success: (output) => {
-            if (output.estado) {
-              window.location.reload()
-              return
-            }
-            fallo()
-          },
-          error: () => {
-            fallo()
-          }
-        })
-      },
-      deleteImage: (i) => {
-        let media = imagenes.imagenes[i]
-        let url = '{{$urls->admin}}/evento/{{$evento->id}}/image/delete'
-        $.post(url, {media: media}, (output) => {
-          if (output.estado) {
-            window.location.reload()
-          }
-        })
-      }
-    }
-    $(document).ready(() => {
+  ]
+  imagenes.url = '{{$urls->admin}}'
+  imagenes.evento = '{{$evento->id}}'
   $('#servicio').dropdown()
   imagenes.setup()
-    })
-  </script>
 @endpush

resources/views/admin/layout/scripts.blade.php

@@ -5,3 +5,9 @@
 @endif
 
 @stack('scripts')
+
+<script type="text/javascript">
+  $(document).ready(() => {
+    @stack('readyjs')
+  })
+</script>

resources/views/evento.blade.php

@@ -53,19 +53,15 @@
   <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/evento.css" />
 @endpush
 
-@push('scripts')
-  <script type="text/javascript">
-    var media = [
+@push('readyjs')
+  let media = [
     @foreach ($imagenes as $media)
       '{!!$media->media->html!!}',
     @endforeach
   ]
-    $(document).ready(function() {
   $('.imagen').css('cursor', 'pointer').click(function() {
     var id = $(this).attr('data-id')
     var src = media[id]
     $('#seleccionada').html(src)
   })
-    })
-  </script>
 @endpush

resources/views/home.blade.php

@@ -14,3 +14,7 @@
 @push('styles')
   <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/home.css" />
 @endpush
+
+@push('scripts')
+  <script type="text/javascript" src="{{$urls->scripts}}/home.js"></script>
+@endpush

resources/views/home/clientes.blade.php

@@ -34,54 +34,11 @@
   </div>
 </div>
 
-@push('scripts')
-  <script type="text/javascript">
-    var clientes = [
+@push('readyjs')
+  clientes.clientes = [
     @foreach ($clientes as $cliente)
       '{!!$cliente!!}',
     @endforeach
   ]
-    var current = 0
-    var rows = 2
-    var cols = 6
-    function decreaseClientes() {
-      $('#img_clientes').find('.row').find('.column:last-child').remove()
-      current -= rows
-      if (current < - cols * rows) {
-        current = clientes.length - (cols - 1) * rows
-      }
-      n = current
-      if (n < 0) {
-        n = clientes.length + n
-      }
-      $('#img_clientes').find('.row:first-child').prepend(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n])
-      )
-      $('#img_clientes').find('.row:last-child').prepend(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n + 1])
-      )
-    }
-    function increaseClientes() {
-      $('#img_clientes').find('.row').find('.column:first-child').remove()
-      current += 2
-      if (current > clientes.length - cols * rows) {
-        current = - (cols - 1) * rows
-      }
-      $('#img_clientes').find('.row:first-child').append(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + (cols - 1) * rows])
-      )
-      $('#img_clientes').find('.row:last-child').append(
-        $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + cols * rows - 1])
-      )
-    }
-    $(document).ready(function() {
-      $('.ci .icon').css('cursor', 'pointer').click(function() {
-        if ($(this).attr('class').indexOf('left') != -1) {
-          decreaseClientes()
-          return
-        }
-        increaseClientes()
-      })
-    })
-  </script>
+  clientes.setup()
 @endpush

resources/views/home/contacto.blade.php

@@ -32,9 +32,7 @@
   </div>
 </div>
 
-@push('scripts')
-  <script type="text/javascript">
-    $(document).ready(function() {
+@push('readyjs')
   $('#formulario_contacto').submit(function(e) {
     e.preventDefault()
 
@@ -50,6 +48,4 @@
     return false
   })
   $('#map').embed()
-    })
-  </script>
 @endpush

resources/views/home/eventos.blade.php

@@ -34,10 +34,8 @@
   </div>
 </div>
 
-@push('scripts')
-  <script type="text/javascript">
-    var eventos = {
-      eventos: [
+@push('readyjs')
+  eventos.eventos = [
     @foreach ($eventos as $evento)
       {
         titulo: '{{$evento->titulo}}',
@@ -46,51 +44,7 @@
         servicio: '{{$evento->servicio}}'
       },
     @endforeach
-      ],
-      current_tab: 'none',
-      changeEventos: (filter) => {
-        var grid = $('#eventos_cards')
-        grid.html('')
-        $.each(eventos.eventos, function(i, el) {
-          if (filter != 'none' && el.servicio != filter) {
-            return
-          }
-          grid.append(
-            $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
-              $('<div></div>').attr('class', 'ui basic segment').append(
-                $('<a></a>').attr('href', '{{$urls->base}}/evento/' + i).append(
-                  $('<div></div>').attr('class', 'ui image').append(
-                    $('<img />').attr('src', el.image)
-                  )
-                ).append(
-                  $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
-                    $('<br />')
-                  ).append(el.empresa)
-                )
-              )
-            )
-          )
-        })
-      },
-      changeTab: (filter) => {
-        $('.servicio.active').removeClass('active')
-        $(".servicio[data-filter='" + filter + "']").addClass('active')
-        eventos.current_tab = filter
-      },
-      setup: () => {
-        $('.servicio').click(function(e) {
-          e.preventDefault()
-          var filter = $(this).attr('data-filter')
-          if (filter == eventos.current_tab) {
-            return
-          }
-          eventos.changeTab(filter)
-          eventos.changeEventos(filter)
-        })
-      }
-    }
-    $(document).ready(function() {
+  ]
+  eventos.base_url = '{{$urls->base}}'
   eventos.setup()
-    })
-  </script>
 @endpush

resources/views/home/testimonios.blade.php

@@ -22,9 +22,8 @@
   </div>
 </div>
 
-@push('scripts')
-  <script type="text/javascript">
-    var testimonios = [
+@push('readyjs')
+  testimonios.testimonios = [
     @foreach ($testimonios as $testimonio)
       {
         contenido: '{{$testimonio->contenido}}',
@@ -32,28 +31,5 @@
       },
     @endforeach
   ]
-    var current_testimonio = 0
-    function cambiar(id) {
-      if (id == current_testimonio) {
-        return
-      }
-      $('#testimonio').html('').append(
-        $('<p></p>').html(testimonios[id].contenido)
-      ).append(
-        $('<div></div>').attr('class', 'ui header').html(testimonios[id].emisor)
-      )
-      $('#marcador').find(".icon[data-id='" + current_testimonio + "']").addClass('outline')
-      $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
-      $('#marcador').find('.icon.outline').css('cursor', 'pointer')
-      $('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
-      current_testimonio = id
-    }
-    $(document).ready(function() {
-      $('#marcador').find('.icon').click(function() {
-        var id = $(this).attr('data-id')
-        cambiar(id)
-      })
-      $('#marcador').find('.icon.outline').css('cursor', 'pointer')
-    })
-  </script>
+  testimonios.setup()
 @endpush

resources/views/layout/scripts.blade.php

@@ -5,3 +5,9 @@
 @endif
 
 @stack('scripts')
+
+<script type="text/javascript">
+  $(document).ready(() => {
+    @stack('readyjs')
+  })
+</script>