梁美英 / programming · Commits

Commit 2c8e086e8d65d3e98f286a08c5ee91787352460f

Authored by ykxie
1 parent 4a3d9bc6

重构

Inline Side-by-side
Showing 4 changed files with 282 additions and 0 deletions
src/css/demo.css
  View file @2c8e086
@@ -137,6 +137,9 @@ ul.ztree li span.button.ico_close{ @@ -137,6 +137,9 @@ ul.ztree li span.button.ico_close{
137 ul.ztree li span.button.ico_docu{ 137 ul.ztree li span.button.ico_docu{
138 background: url(../img/icon-files-java.png) no-repeat scroll center center transparent; 138 background: url(../img/icon-files-java.png) no-repeat scroll center center transparent;
139 } 139 }
  140 +ul.ztree li span.button.edit{
  141 + background: url(../img/icon-editer.svg) no-repeat scroll center center transparent;
  142 +}
140 ul.ztree li span.button.add { 143 ul.ztree li span.button.add {
141 background-position:-144px 0; 144 background-position:-144px 0;
142 } 145 }
src/ide.html 0 → 100644
  View file @2c8e086
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>Document</title>
  6 + <link rel="stylesheet" href="css/responsive/css/bootstrap.min.css">
  7 + <link href="css/codemirror.css" rel="stylesheet">
  8 + <link href="css/reset.css" rel="stylesheet">
  9 + <link rel="stylesheet" href="js/zTree_v3-3.5.27/css/zTreeStyle/zTreeStyle.css">
  10 +
  11 + <link href="css/layout.css" rel="stylesheet">
  12 + <link href="css/main.css" rel="stylesheet">
  13 +
  14 + <link href="css/recording.css" rel="stylesheet">
  15 + <link rel="stylesheet" href="css/demo.css">
  16 +
  17 + <script src="js/jquery-1.7.1.js"></script>
  18 + <script src="js/bootstrap.js"></script>
  19 + <script type="text/javascript" src="js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
  20 + <script src="js/gxb-ide.js"></script>
  21 +
  22 +<style>
  23 + #app{
  24 + display: block;
  25 + }
  26 +</style>
  27 +<script>
  28 + $(function(){
  29 + var ide = new GxbIde();
  30 + console.log(ide);
  31 +
  32 + $.ajax({
  33 + type: "GET",
  34 + url: "js/tree.json",
  35 + dataType: "json",
  36 + contentType: "application/json",
  37 + success: function(res) {
  38 + console.log(res);
  39 +
  40 + treeData = res.tree;
  41 + var folder = $("#folder");
  42 + ide.RecordIde.Dir.buildTree(folder, treeData);
  43 +
  44 + // treeObj = $.fn.zTree.init($("#folder"), ZTREE.config, treeData);
  45 +
  46 + },
  47 + error: function(XMLHttpRequest, textStatus, errorThrown) {
  48 + console.log('Ajax tree.json error');
  49 + console.log(XMLHttpRequest);
  50 + }
  51 + });
  52 + console.log(ide);
  53 +
  54 + })
  55 +</script>
  56 +</head>
  57 +<body>
  58 + <div id="app" class="wrapper">
  59 + <div id="appContainer">
  60 + <div id="appLeft">
  61 + <div class="tree-header">目录</div>
  62 + <ul id="folder" class="ztree"></ul>
  63 + <div id="handleLM"></div>
  64 + </div>
  65 + <div id="appMian">
  66 + <div id="appMainHeader">
  67 + <ul id="recordertab" class="nav nav-tabs pull-left">
  68 + <li class="active"><a href="#recordzone" data-toggle="tab"><i class="icon iconfont icon-suspend"></i>课程录制区</a></li>
  69 + <li><a href="#replayzone" data-toggle="tab"><i class="icon iconfont icon-yulan"></i>课程预览区</a></li>
  70 + </ul>
  71 + <div id="editorwrapper" class="pull-right">
  72 + <div class="btn-group">
  73 + <div id="htmlbutton" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="当前课程环境：Java" data-editorname="html">JAVA</div>
  74 + <div class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="bottom" data-original-title="JDK版本">JDK 7</div>
  75 + </div>
  76 + </div>
  77 + </div>
  78 + <div id="textarea">
  79 + <div id="recordzone" class="active"></div>
  80 + <div id="replayzone"></div>
  81 + </div>
  82 + <div id="handleMR"></div>
  83 + <div class="pause-shodow hidden">
  84 + <div class="compile-loading">
  85 + <img src="../img/loading.png" alt="">
  86 + </div>
  87 + <div class="compile-reslut" style="display: none;">
  88 + <div class="tip-header">
  89 + <span>成功获取编译运行结果</span>
  90 + </div>
  91 + <div class="tip-content">
  92 + <p>保存编译结果后，播放到此处会在运行区域直接显示结果。需要保存结果后继续录制吗?</p>
  93 + </div>
  94 + <div class="tip-footer">
  95 + <button class="btn btn-success btn-sm" id="save_compile">保存并继续录制</button>
  96 + <button class="btn btn-danger btn-sm" id="cancel_compile">不保存继续录制</button>
  97 + </div>
  98 + </div>
  99 + </div>
  100 + </div>
  101 + <div id="appRight">
  102 + <div id="resultpanel" class="panel panel-default editor-result">
  103 + <div class="panel-heading result-header">
  104 + <div class="pull-left">
  105 + <div id="compileBtnGroup" class="btn-group"></div>
  106 + </div>
  107 + <div class="pull-right">
  108 + <a id="full-screen" href="javascript:;" data-toggle="tooltip" data-placement="left" data-original-title="全屏录制" class="btn btn-link"><i class="icon iconfont icon-fangda"></i></a>
  109 + <a id="back-screen" href="javascript:;" data-toggle="tooltip" data-placement="left" data-original-title="退出全屏录制" class="btn btn-link" style="display: none;"><i class="icon iconfont icon-fangda"></i></a>
  110 + </div>
  111 + <div class="btn-group">
  112 + <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>
  113 + </div>
  114 + </div>
  115 + <div class="panel-body hidden" id="cmprun-output">
  116 + <div id="resultoutput">
  117 + <!-- Nav tabs -->
  118 + <ul class="nav nav-tabs result-tabs" role="tablist" id="cmprun-tabs">
  119 + <li class="active"><a href="#stdin" role="tab" data-toggle="tab" class="text-warning">标准</a></li>
  120 + <li><a href="#cmpinfo" role="tab" data-toggle="tab" class="text-warning">编译</a></li>
  121 + <li><a href="#stderr" role="tab" data-toggle="tab" class="text-danger">错误</a></li>
  122 + <li><a href="#output" role="tab" data-toggle="tab" class="text-success">结果</a></li>
  123 + </ul>
  124 + <!-- Tab panes -->
  125 + <div class="tab-content">
  126 + <div class="tab-pane active padall15" id="stdin">
  127 + <input type="text" class="form-control" id="runtimeArgus" placeholder="标准输入">
  128 + </div>
  129 + <div class="tab-pane padall15" id="cmpinfo"></div>
  130 + <div class="tab-pane padall15" id="stderr"></div>
  131 + <div class="tab-pane padall15" id="output"></div>
  132 + </div>
  133 + </div>
  134 + </div>
  135 + <div class="panel-body" id="ifrcontainer">
  136 + <iframe id="resultiframe" frameBorder="0" width="100%"></iframe>
  137 + </div>
  138 + </div>
  139 + </div>
  140 + </div>
  141 + <div id="appFooter">
  142 + </div>
  143 + </div>
  144 +
  145 +
  146 +</body>
  147 +</html>
0 \ No newline at end of file 148 \ No newline at end of file
src/img/icon-editer.svg 0 → 100644
  View file @2c8e086
  1 +<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 +<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3 + <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
  4 + <title>Combined Shape Copy</title>
  5 + <desc>Created with Sketch.</desc>
  6 + <defs></defs>
  7 + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  8 + <g id="03-班次-录制编程界面-其他语言" transform="translate(-42.000000, -238.000000)" fill="#1FB6FF">
  9 + <g id="package1" transform="translate(20.000000, 208.000000)">
  10 + <path d="M30.7951479,32.0472389 L30.7902485,32.0427495 C31.0462249,31.7389679 31.035432,31.2856116 30.7498462,30.9992887 L29.9778698,30.2245496 C29.692426,29.9382981 29.2406864,29.9268964 28.9383432,30.1836464 L28.9335858,30.1790857 L28.888426,30.2245496 L28.1163077,30.9992887 L29.9778698,32.8674419 L30.7951479,32.0472389 Z M23.8626698,38.9876102 L23.8662911,38.9915295 L29.4436639,33.3938398 L27.5821018,31.5257579 L22.0072142,37.1203834 L22.0006107,37.1203834 L22.0006107,38.9892492 L23.8626698,38.9892492 L23.8626698,38.9876102 Z M22.0012213,40.4991211 L32.0012213,40.4991211 L32.0012213,42 L22.0012213,42 L22.0012213,40.4991211 Z" id="Combined-Shape-Copy"></path>
  11 + </g>
  12 + </g>
  13 + </g>
  14 +</svg>
0 \ No newline at end of file 15 \ No newline at end of file
src/js/gxb-ide.js 0 → 100644
  View file @2c8e086
  1 +
  2 +;(function(window){
  3 +
  4 + GxbIde = function(){
  5 + // this.init.apply(this, arguments);
  6 + }
  7 +
  8 + // 储存一个树结构和编辑器的对应关系
  9 + var treeLinkEditor = [], // 缓存整个目录树结构和代码编辑器的关系
  10 + treeData = {}, // 缓存目录树返回结果
  11 + mainPath, // 运行编译时候需要知道当前是哪个文件
  12 + fileList, // 有值的文件数据结构
  13 + treeObj; // 获取ztree对象
  14 +
  15 + var config = {
  16 + edit: {
  17 + enable: true
  18 + // editNameSelectAll: true
  19 + },
  20 + view: {
  21 + addHoverDom: addHoverDom,
  22 + removeHoverDom: removeHoverDom,
  23 + selectedMulti: false,
  24 + showLine: false
  25 + },
  26 + data: {
  27 + simpleData: {
  28 + enable: true
  29 + }
  30 + },
  31 + callback: {
  32 + beforeClick: beforeClick
  33 + }
  34 + };
  35 +
  36 + function beforeClick(treeId, treeNodes) {
  37 + console.log('567890')
  38 + console.log('点击了 ' + treeNodes.name);
  39 + console.log('点击了 ' + treeNodes.isParent);
  40 +
  41 + }
  42 +
  43 + function addHoverDom(treeId, treeNodes) {
  44 + // console.info('addHoverDom');
  45 + // 修复第一个文件夹
  46 + if(treeNode.isParent){
  47 + $('a[title="'+ treeNode.name +'"]').find("#" + treeId + "_" + treeNode.id + "_edit").hide();
  48 + return false;
  49 + }
  50 +
  51 + // 不知道为什么 ztree 最后一项不显示编辑按钮
  52 + // 只能通过改变参数的值来让它显示编辑按钮
  53 + if(treeNode.isLastNode){
  54 + treeNode.isLastNode = false;
  55 + }
  56 + }
  57 +
  58 + function removeHoverDom(treeId, treeNodes){
  59 +
  60 + }
  61 +
  62 + // 初始化目录：增、删、改文件，文件夹目录结构
  63 + var Dir = {
  64 + treeData: {},
  65 + init: function(){
  66 + console.log('Dir');
  67 + },
  68 + buildTree: function(select, treeData){
  69 + $.fn.zTree.init(select, config, treeData);
  70 + },
  71 + getTreeData: function(){
  72 +
  73 + }
  74 + }
  75 +
  76 + // 记录编写代码过程：输入代码、记录存放代码
  77 + var Coding = {
  78 + init: function(){
  79 + console.log('Coding');
  80 + }
  81 + }
  82 +
  83 + // 工具栏：负责编译，展示头部信息功能
  84 + var ToolBox = {
  85 + init: function(){
  86 + console.log('Dir');
  87 + }
  88 + }
  89 +
  90 + // 主题：IDE 主题
  91 + var Theme = {
  92 + init: function(){
  93 + console.log('Theme');
  94 + }
  95 + }
  96 +
  97 + // 录制音频：录制、暂停、继续录制
  98 + var Record = {
  99 + init: function(){
  100 + console.log('Record');
  101 + }
  102 + }
  103 +
  104 +
  105 + GxbIde.ide = GxbIde.prototype = {
  106 + constructor: GxbIde,
  107 + init: function(){
  108 + this.Coding.init()
  109 + }
  110 + }
  111 +
  112 + // 老师录制编辑
  113 + GxbIde.ide.RecordIde = $.extend({ Coding, Dir, ToolBox, Theme, Record })
  114 +
  115 +
  116 + window.GxbIde = GxbIde;
  117 +
  118 +})(window)
0 \ No newline at end of file 119 \ No newline at end of file